Site-branch-specific Styling with WordPress

For the second time now, I’ve been asked to style some elements in a page based on the branch of the sitemap tree being displayed.

You can see it at http://rupertsland.ca/wp/about/ still in staging, will move to http://rupertsland.ca/about/ vs. http://www.rupertsland.ca/wp/reference/ and http://www.seniorscircle.ca/directory/health-well-being/ vs. http://www.seniorscircle.ca/directory/home-and-housing/

Here’s an explanation:

Say we have a sitemap like this:

  • about
    • our company
    • our history
  • blog
    • news
    • snippets
    • portfolio

For example I need to style all the h1s in the blog branch to be blue, and all h1s in the about branch to be purple.

I’ve been putting “if (have_posts()) while(…): the_post();” of the loop before the get_header() call of a given template. I thought that $post is not available before the call to the_post(), but it turns out it is. Then after starting the loop, I would write a function to use as a filter for the body_class filter which would add a class to the body based on $post, and then I have a branch-specific CSS class to hook into it.

I’m probably going to stop moving the loop beginning before the get_header() call now that I know that the global $post is available before calling the_post(), and also I am just going to give a parameter to body_class() in header.php instead of hooking into the body_class filter.

Let me know if you have some ideas on how to do this better!

Advertisements

Published by

Dan Bernardic

A Winnipeg Web programmer. Member of the FarmLink Marketing Solutions and Farm At Hand team. Experienced with Web technologies, e.g. HTML5, CSS, ( Server-side ) JS, PHP, WordPress, MVC, etc.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s