Adding Classes to Body

You'll often want to write styles specifically for the home page, category pages, or some other type of page not covered by the default thesis classes. This quick tip will help you add classes to the body tag.

WordPress provides many body classes that allow you to narrow CSS to specific contexts. Examples:

  • .post-type-archive-portfolio - Styling to the 'portfolio' post type archive.
  • .archive - Styling for any archive page (post type archive, category, tag...)
  • .single-portfolio - Styling for single posts in the 'portfolio' post type
  • .single - Styling for any singular post

But sometimes you need to add your own class. The most common area where I add custom classes is when the same template file is used for multiple contexts .

You might have a 'portfolio' post type with a 'project-features' taxonomy. Both the post type archive and taxonomy term archive should use the same styling since they're both listing portfolio items. See the link above for how to make the taxonomy use this template file. In the template file itself I'd add the following so they all have the same class, .portfolio-archive:

[gist id=1906206448a7a6719863209c26e9c19f]

You can place this in individual template files, or put it in functions.php to control body classes site-wide.

No comments yet