Forums

WordPress › Support » Themes and Templates

Body ID's & Active Navigation (6 posts)

  1. typo404
    Member
    Posted 4 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.

  2. LJK
    Member
    Posted 4 years ago #

    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!

  3. LJK
    Member
    Posted 4 years ago #

    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!

  4. LJK
    Member
    Posted 4 years ago #

    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).

  5. LJK
    Member
    Posted 4 years ago #

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

  6. spscheele
    Member
    Posted 4 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags