Body ID’s & Active Navigation

  • typo404

    (@typo404)


    17 years ago

    I’m creating a custom theme which requires a body id for each section. So, for example, on the home page the body id would be <body id=”home”>, archives page <body id=”archives”> etc.

    I’ve included the <body> tag in my header but I’m not sure if this is the best way to do this because it needs to change for each section. The reason for the body id is for active navigation items. So “Home” is highlighted when they are on the home page, “Archives” is highlighted when they are on the archives page, etc.

    Can anyone suggest how I may implement this? I have the CSS done already I just need to know how to link it up to WordPress to create the effect. Whether it should be in the index.php file or header.php or whether I need any other code.

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

  • I’m having the same issue.

    One solution is moving the <body> tag and all html under it from header.php into index.php. Then for each different section, make sure you copy all of the html that you moved to index.php into their templates as well (otherwise you might end up with two headers)

    Then you can change the body ids on each template to reflect the relevant sections and match it up with your css.

    This isn’t perfect as it’s not making the most of the header.php, and I’m sure there’s a better way of doing it out there!

    Ignore my last post! I found a much better method-

    In your header.php, locate the <body> tag
    <body id="

    Then put in the php that first refers to the loop
    if ( have_posts() ) { the_post(); rewind_posts(); }

    And then you want to specify the categories that use a particular body id,
    if ( in_category(23) )

    and then the name of the id you want to display for that category-

    {
echo 'home';
 } ?>">

    An example of this, that I use on the site I am making looks like –

    <body id="<?php
 if ( have_posts() ) { the_post(); rewind_posts(); }
  if ( in_category(23) ) {
echo 'home';
 }
 if ( in_category(3) || in_category (15) || in_category (16) || in_category (17) || in_category (18) ) {
echo 'news';
 }
 if ( in_category(9) || in_category (10) || in_category (11) || in_category (12) || in_category (13) ) {
echo 'band';
 }
 if ( in_category(20) ) {
echo 'media';
 }
 if ( in_category(4) || in_category (5) || in_category (6) || in_category (7) ) {
echo 'free-stuff';
 }
 if ( in_category(21) ) {
echo 'help';
 }
 ?>">

    Which works with the CSS I have used-

    body#home ul#nav li a.nav-home, body#homenews ul#nav li a.nav-news, body#news ul#nav li a.nav-news, body#band ul#nav li a.nav-band, body#media ul#nav li a.nav-media, body#free-stuff ul#nav li a.nav-free-stuff, body#shop ul#nav li a.nav-shop, body#forum ul#nav li a.nav-forum, body#contact ul#nav li a.nav-contact {
	background-color: #fecb00;
	background-image: url(images/nav-tile-hover.jpg);
	background-repeat: repeat-x;
	background-position: bottom left;
}

    Again, I am by no means an expert programmer, but it seems to work for me!

    By the way, if you have put posts in multiple categories, the ids can turn up like ‘homenews’ so you may need to add some extra CSS to accommodate this (as I have done above).

    if you use elseif instead of if on the statements following the first if then you shouldn’t get the double id issue.

    Thanx LJK, I had the same problem but you solved it for me ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Body ID’s & Active Navigation’ is closed to new replies.