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.
