Unique page element IDs

When you use the WordPress functions to create category lists (like wp_list_categories, for example), and then examine the output, you’ll notice that it gives a lot of various classes to various things. In the specific case of categories, the category currently being displayed on a category list will have class=”current-cat” on the list item. This can be used to directly reference the category currently being displayed, so that you can turn it green or whatever you want to do. All you have to do is assign properties to .current-cat in the CSS file.

A lot of the built in functions are like this. They assign classes and IDs to loads of generated stuff. So instead of trying to figure out how to make WordPress assign individual custom classes (which can be done, but is often harder), look at the source it creates and then change your CSS to fit what WordPress is already assigning. It’s a lot easier in the long run. If there isn’t a suitable bit in there already, then you can sometimes change the way you’re calling the functions to give them one. Failing that, you can hack the core, but it’s best to avoid that if possible.

If you still need to assign something to the body tag (which you really should never actually have to do), well, the body tag is entirely under the control of the theme, so you can easily add your code to do whatever assignment you like in there.

Thanks for your reply, Otto42. When I view the source of my Categories list, it shows me this:

	<li id=\\"Categories\\">
	<h2>Categories</h2>
		<ul>
			<li><a href=\\"https://www.yorkrules.com/yorkrules3/wordpress/?cat=1\\" title=\\"View all posts filed under Home\\">Home</a>
	<ul class='children'>

	<li><a href=\\"https://www.yorkrules.com/yorkrules3/wordpress/?cat=4\\" title=\\"View all posts filed under learn\\">learn</a>
</li>
	<li><a href=\\"https://www.yorkrules.com/yorkrules3/wordpress/?cat=3\\" title=\\"View all posts filed under look\\">look</a>
</li>
	<li><a href=\\"https://www.yorkrules.com/yorkrules3/wordpress/?cat=5\\" title=\\"View all posts filed under play\\">play</a>
</li>
	</ul>
</li>

Home is 1, learn is 4, look is 3, etc.

I would like the Home button on the navbar to be white when I’m on the Home page, the learn button to be red on the learn page, and the look button to be yellow on the look page, etc.

My CSS that makes the navbar do this looks like:

body#indexPage li#index {
	background-image: url(../images/nav/navIndexGray.jpg);
}
body#learnPage li#learn {
	background-image: url(../images/nav/navLearnColor.jpg);
}
body#lookPage li#look {
	background-image: url(../images/nav/navLookColor.jpg);
}
body#playPage li#play {
	background-image: url(../images/nav/navPlayColor.jpg);
}
body#readPage li#read {
	background-image: url(../images/nav/navReadColor.jpg);
}
body#sharePage li#share {
	background-image: url(../images/nav/navShareColor.jpg);
}
body#shopPage li#shop {
	background-image: url(../images/nav/navShopColor.jpg);
}
#index {
	background-image: url(../images/nav/navIndexGray.jpg);
}
#learn {
	background-image: url(../images/nav/navLearnGray.jpg);
}
#look {
	background-image: url(../images/nav/navLookGray.jpg);
}
#play {
	background-image: url(../images/nav/navPlayGray.jpg);
}
#read {
	background-image: url(../images/nav/navReadGray.jpg);
}
#share {
	background-image: url(../images/nav/navShareGray.jpg);
}
#shop {
	background-image: url(../images/nav/navShopGray.jpg);
}

Instead of referring to the pages as #look, #learn, etc., how do I use .current-cat and the category numbers (1, 4, 3, etc.) to specify the CSS rule selectors?

If you could write me a sample selector, or clarify my thinking, I’d appreciate it.

Thanks.

What is the PHP code that you are using to generate that categories listing?

Also, you say your “navbar”.. How are you generating that navbar? I cannot see your site (it’s blocked at work), so I cannot see what it looks like.

I have no fluency in PHP, so this may not be the code you’re interested in:

<h2>Categories</h2>
	<ul>
	<?php wp_list_cats('sort_column=name'); ?>
	</ul>

If not, perhaps you could tell me where I need to look (the theme is Blue Zinfandel Enhanced 2.0).

The navbar is an HTML unordered list with CSS applied. You can see a similar design here.

I chose this particular theme because I want a fixed-width 3-column layout (center content column with left and right sidebars) that’s clean and simple (so I can fully modify the CSS and HTML to my needs) and supports WordPress widgets.

If you would recommend a different theme that meets those needs and generates unique page IDs, I’d be happy to hear it.

Thanks,

York

Ahh. Okay, I see what you’re doing.

Home is 1, learn is 4, look is 3, etc.

In your theme, somewhere, is the <body> tag. Probably in the header.php, though it’s hard to say exactly. You’re going to find that tag and then change it to look sorta like this:

<?php if (is_category(1)) { ?>
<body id='home'>
<?php } else if (is_category(4)) { ?>
<body id='learn'>
<?php } else if (is_category(3)) { ?>
<body id='look'>
<?php } else { ?>
<body>
<?php } ?>

You get the idea and can finish it up with the other categories you want to add.

That worked, Otto42. Thanks very much for sharing your expertise with me, and making this forum such a valuable resource.

One last question: If a category page has a sub-category page (e.g. the ‘look’ category has a sub-category of ‘snapshots’), and I’d like the navbar for that sub-category to show its parent category (e.g. when the user’s on the ‘snapshots’ sub-category page, the ‘look’ button in the navbar is orange, not gray) would I use the same method you described above?

For example, if the ‘snapshots’ sub-category has an ID of ’21’, would I included the following code in the header.php?

<?php } else if (is_category(26)) { ?>
<body id='look'>

As each of my six categories will have between 3 and 8 sub-categories, I would have between 18 and 48 IDs to list in the PHP code. Would that have any significant impact on the load time of a page, or no?

Thanks again!

To clarify my thinking a little more:

Is it possible to include a range of IDs in the PHP code? For instance, if the ‘look’ category is ID 3, and I set up all its sub-category pages to be IDs 14, 15, 16, 17, & 18, could the code be written as:

<?php } else if (is_category(3,14-18)) { ?>
<body id='look'>

That then leads to the question: can I manually set IDs? And if so, how? My research on this topic in WordPress support was inconclusive.

Your advice is appreciated.

No, you can’t do it that way. You could do something like this though:
if (is_category(3) || is_category(14) || is_category(15)...)

There’s ways to retrieve the category parent, but you’re talking advanced topics now. For something small scale like this, you’re better off keeping it simple.

The current, working code is:

<?php if (is_category(1)) { ?> <body id="indexPage" onload="P7_ExpMenu()">
<?php } else if (is_category(4)) { ?> <body id="learnPage" onload="P7_ExpMenu()">
<?php } else if (is_category(3)) { ?> <body id="lookPage" onload="P7_ExpMenu()">
<?php } else if (is_category(5)) { ?> <body id="playPage" onload="P7_ExpMenu()">
<?php } else if (is_category(7)) { ?> <body id="readPage" onload="P7_ExpMenu()">
<?php } else if (is_category(8)) { ?> <body id="sharePage" onload="P7_ExpMenu()">
<?php } else if (is_category(9)) { ?> <body id="shopPage" onload="P7_ExpMenu()">
<?php } else { ?> <body id="indexPage" onload="P7_ExpMenu()"> <?php } ?>

Thanks to Otto42 for your assistance in resolving this issue.

Don’t you wish those script/css gurus at pvii would make some cool wordpress widgets? I’m all the time bugging them to take a look at WP… I’d sure pay for my favorite pvii menu extensions ported to wordpress plugins!