skip to content rich footer

stevenclark.com.au

subscibe to the StevenClark.com.au rss feed

WP Dynamic Body ID and Current Page

Referring back to an old post on using a Dynamic Body ID in WordPress you might notice that anything in WordPress that is not a page is actually a part of the blog – including search, single, archive and the posts page. The following code should refresh your memory on how to use a dyanamic body ID. If it’s not a page then give the body an ID of News, else if it is a page with the following titles then the appropriate body ID of the title is used, otherwise just insert the body tag.

<?php if ((!is_page())) { ?>
<body id="News">
<?php } elseif ((is_page('Home')) || (is_page('Studio')) || (is_page('Support')) || (is_page('About')) || (is_page('Contact')))
{ ?>
<body id="<?php the_title(); ?>">
<?php } else { ?>
<body>
<?php } ?>

This is a handy base for doing something useful so I thought a simple continued snippet or two might open your mind to the possibilities. For example, you might like to highlight the current page in your navigation. Even better, you could highlight the current page but keep the News (blog) link highlighted while users are on all the blog related pages such as search, archive etcetera. Sounds logical and it’s easy enough to achieve (This example comes from the Hunter Island Press theme).

We’ll start by putting a few more IDs into the links on the horizontal navigation bar. In this case the navigation is made up of a simple unordered list of links. Note that the ID is placed directly on the unordered list and not on a containing div. You don’t need to put a block level element into a div container, it’s better to just work directly with the list.

<ul id="navbar">
    <li><a id="homelink" href="#">Home</a></li>
    <li><a id="studiolink" href="#">Studio</a></li>
    <li><a id="supportlink" href="#">Support</a></l>
    <li><a id="aboutlink" href="#">About</a></li>
    <li><a id="newslink" href="#">News</a></li>
    <li><a id="contactlink" href="#">Contact</a></li>
</ul>

The next task is to style the horizontal navigation bar without the current page tab highlighted. When you get this working you can worry about the current tab later.

ul#navbar {
position: static;
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style-type: none;
background-color: #000;}ul#navbar li { display: inline; }

ul#navbar li { display: inline; }

ul#navbar li a {
margin: 0;
padding: 9px 0;
width: 16.6%;
min-width: 70px;
height: 40px;
float: left;
border-bottom: 4px solid #000;
font-size: .9em;
font-family: helvetica, verdana, arial, sans-serif;
color: #fff;
text-align: center;
text-decoration: none; text-transform: uppercase;
background: #000; }
ul#navbar li a:hover {
border-bottom: 4px solid #8F0000;
background: #222; }

As a snippet goes you can take or leave a lot of what is in there (including the min-width that applies to the fluid layout of Hunter Island Press). But all that’s left for us to achieve is the highlighting of the current tab – specifically so that users entering the news get a consistent tab for the section. We achieve this by associating the body ID with the link ID in the navigation bar. If any of the following selectors are present the background and bottom border will be changed to appear as the current tab.

body#Home li a#homelink,
body#Studio li a#studiolink,
body#Support li a#supportlink,
body#About li a#aboutlink,
body#News li a#newslink,
body#Contact li a#contactlink {
background: #222;
border-bottom: 4px solid #8f0000; }

Hopefully you can take something about using WordPress away from this tutorial and extend the concept of the dynamic body ID further. Enjoy.

Comments are closed.

Social Networking

Keep an eye out for me on Twitter

About the Author

Steven Clark Steven Clark - the stand up guy on this site

My name is Steven Clark (aka nortypig) and my passions are business, web development, photography and writing. My current CV [PDF 775KB] is available for download. Currently I'm completing my 2 final units of a post-graduate university degree of MBA (Journalism and Media Studies) at the University of Tasmania.

Photography

My fine art photography is available online at Steven Clark Studio. You may also enjoy my photo blog Walk a Mile in my Shoes.

Recently Reviewed Books

Site Supporters

Hosted by Brett Drinkwater at Tashosting who is always there at the other end of my every inconvenient question and technical crisis. Brett's local community support for us over the last five years is greatly appreciated.

skip to top of page

Currently Reading

Light Science and Magic by Hunter, Biver and Fuqua - cover

The time has come for me to get more involved in upping my technical photography skills if I hope to embark on a Master of Fine Art and Design (Photography) next year. To that end my first book is the highly recommended Light Science & Magic: An Introduction to Photographic Lighting (Third Edition) by Fil Hunter, Steven Biver and Paul Fuqua. What really differentiates this book is the comprehensive set of exercises and the detailed explanation of the underlying science of light in the real world that encompasses the reader's journey.