While working on a small personal WordPress project over the weekend I found myself wanting to control certain elements of my design on a per page basis. I personal like to try and keep things pretty simple, not to cluttered and keep the page elements pretty standard across the site I am working. Adding dynamic a dynamic body id/class function would allow me to do just that.
Please note that this Function can still be tweaked and used, however you may want to have a look at the codex as well as comb through Google for information on get_body_class in WP 2.8.
I found several very useful resources in researching this in relation to wordpress and decided after taking a crack at it on my own that I would share with you here, but please read each of these as they are equally as helpful:
- Using Body Id/Class to Control WordPress Page Elements – Darrenhoyt.com
- WordPress Tutorial -How to Apply Body Class or Id – Elliotjaystocks.com
- Dynamic Semantic Classes – Plaintxt.org
Moving On
Let’s say for this example that I want to color code certain pages. On the index page would be the site wide color of blue, my single page links would be green, on the search page red and on the archive page yellow.
The Function
The first thing I am going to do is write the quick and easy function to generate a body id based on the page you are visiting. So I open up my themes function.php and insert something like this:
<?php
function mytheme_body_control() {
if (is_home()) {
echo 'id="home"';
} elseif (is_single()) {
echo 'id = "single"';
} elseif (is_search()) {
echo 'id="search"';
} elseif (is_archive()) {
echo 'id="archive"';
}
}
?>
Adding the Function to the Theme
By creating the function in the function.php, the task of adding the id/class to the body tag is now very simple. Open the header.php file and:
<body <?php mytheme_body_control(); ?>>The CSS
Now we can go about adding some CSS to styling the links on a per page basis:
a {
color: #0000FF /*blue universal*/
}
#single a {
color: #00FF00 /*green*/
}
#search a {
color: #FF0000 /*red*/
}
#archive a {
color: #FFFF00 /*yellow*/
}Taking it Further
There is a wide variety of uses for this idea, for instance in my own theme I decided to take it a step further and generate a body class for each post for example:
body #single .my-recent-postSomething like this would give you the flexibility to style on a per post basis if you so desired. Building on the code from above I added something like this:
<?php
function mytheme_body_control() {
global $post;
$postclass = $post->post_name;
if (is_home()) {
echo 'id="home"';
} elseif (is_single()) {
echo 'id = "single" class="' . $postclass . '"';
} elseif (is_search()) {
echo 'id="search"';
} elseif (is_archive()) {
echo 'id="archive"';
}
}
?>Now every time you publish a new a body class will be generated based on the post title.
There you have it, a very basic function for generating dynamic body classes in your WordPress theme.
Update to My Mistake
Thanks to Darren Hoyt for taking the time to contact me on this and correct my mistake. On each line after the function, is_single() for example, there should be no space after the word single and the start of the parenthesis and and no semicolon after the parenthesis.The corrected code should work perfectly. This is what happens when you don’t take time to proof read and preview outside of MarsEdit.
I was doing this the “hard way”, and never thought of using a function..
Thanks for the tip!
No problem, glad I could offer the idea. I did it the other way for quite a while which is just as useful but as I have started to use this quite a bit more often I finally realized it just made sense to drop it in the functions file, keeps it a bit more organized especially if you are using more than #home and #single. Nice thing is that it is now pretty portable and easy to use on the next project.
Jeremy, this is a clever approach. An idea like this just might be a foundation for a plugin that allows WP sites to have a “theme switcher”… for example, to allow users to click on an accessibility link that would alter a site’s theme with enhanced contrast and larger font size. Just an idea.
I also noticed that you mentioned you have very little free time in posting your thisdayindesign post. Are you in need of extra WP coding hands??
I was just wondering how you would apply this with custom page templates.
So if i added a custom page template called “extra page”, what wordpress functions would i use to search specific pages?
@Nils – Good question, you could either use the given name of the page like this:
if is_page(‘page-name’)
or you could use the page ID like this:
if is_page(‘12′)
or I believe you could use the to check for a specific template
if is_page_template(‘extra-page.php’)
For more information on WordPress Conditional Tags check this page http://codex.wordpress.org/Conditional_Tags and let me know what works for you as I do not actually have the time to test that right now, but I believe that is what you are looking for.
The last comment #5 was exactly what I was looking for. And it works perfectly. Thank you!
@Christy Glad to hear it works and glad I could help out. I was pretty certain it would work but as I said it was untested so thanks for dropping by and letting me know.
@Jeremy -
So the way i asked does work great, thank you.
And the ‘is_page’ function specifically looks for this:
is_page(‘about-me’)
When the Page with a post_name (slug) of “about-me” is being displayed.
This is the function that i made with your tutorial and help.