Welcome to another installment of our WordPress customization series. We have previously covered other topics such as making small CSS changes, creating child themes, and even building your own page templates. Today, we will be expanding upon the first article of this series, so you can take your WordPress site to a new level.

We have spoken already about how straightforward it is to add modifications to the CSS of a WordPress theme: you can examine the theme you’re using with a web inspector such as Firebug, and then override the attributes of a particular element in a separate stylesheet. CSS is particularly suited for this, as it lends itself to favor attribute overrides without causing any issues at all.

However, there is a problem. Since a WordPress theme can have any possible layout, its HTML markup can vary wildly. And since a theme may have a unique markup, that means its CSS classes will also be different.

Flexibility Comes At A Price

Theme developers often try to alleviate this issue by standarizing their markup across all their themes as much as possible– for example, our collection makes use of the same CSS classes regardless of which theme you use. But if you use multiple WordPress themes from different authors, the differences can be pretty notable.

To solve this issue, you can make use of a few core classes generated by WordPress itself, which are standarized across all WordPress installs and you’re almost guaranteed to find on every WordPress-powered site.

Introducing the WordPress Core CSS Classes

When developing a theme, the official WordPress guidelines point out that certain functions should be included in the template files. Among them are the body_class() and post_class() functions, which will output a specific set of CSS classes depending on which page you’re in and what kind of content you’re viewing.

For example, if you’re viewing a portfolio item that is a custom post type with a name of portfolio, then a portfolio class will be added to the body HTML tag of the page. Likewise, loading an archive page such as a category will add the archive class to the body tag. If the theme you’re using does not include these classes, I’d be wary of using it since it’s a mandatory guideline for following WordPress standards.

The core classes are descriptive of the page you're viewing, so you can leverage them when customizing your theme.

The core classes are descriptive of the page you’re viewing, so you can leverage them when customizing your theme.

These dynamic classes are very useful for styling certain parts of your site without fear of breaking its layout. They are very descriptive and bound to appear only on the designated pages, so you can safely use them in your custom CSS selectors to tweak the appearance of your theme. Even better, switching to a theme made by a different author will be fairly safe, since the classes are meant to be on every WordPress theme out there. Following is a table of reference that highlights the most useful classes you can use as a frame of reference.

Body Classes

These classes are on the body tag of your WordPress pages. As such, they will affect your whole page, so it’s a good idea to use them for page-specific changes such as changing the background color or the size of your copy. Here is a list of the more useful ones, but the full list can be found in the WordPress codex.

[definition title=”home”]Added when the current page is the homepage, as defined in the Reading Settings.[/definition]

[definition title=”blog”]Added when the current page is the blog, as defined in the Reading Settings.[/definition]

[definition title=”single”]Used for single pages instead of listings and archives.[/definition]

[definition title=”single-{post-type}”]Added when viewing a particular post-type. This class is really useful for creating specific page designs for custom post types without creating new page templates, such as portfolios.[/definition]

[definition title=”archive”]In contrast with the single class, this one is used for archive pages. You can use them to style posts in a different way when they appear as a list, rather than their own page.[/definition]

[definition title=”logged-in”]Added if the one viewing the page is logged in. This class is particularly useful for adding design changes for registered users, or hiding pieces content to guests.[/definition]

Post Classes

The post classes are meant to be used on each post block that appears on your site. Be aware that this can be an archive page (where each post will have its own set of classes) or a single post page. These classes can be used for more precise customizations, like applying certain effects to a post type, or adding your own styling to post formats. The full list of classes can be found in its own codex page.

[definition title=”{post-type}”]Added according to the current post type. This means posts will display post, pages will display page, and so on. This clss is very useful for adding specific styles depending on the type of content you’re dealing with.[/definition]

[definition title=”post-id-{id}”]This class will output a unique identifier for the current post, according to its ID in the database. With it, you can style a specific item, without affecting the rest of its same kind.[/definition]

[definition title=”format-{post-format}”]Determines the format of the post, in the event that you’re using post formats. You can use it to give specific formats a different look, such as quotes or link posts. By default, the post format used will be standard.[/definition]

Using the standard CSS classes in WordPress means you can expect your customizations to be usable on just about any theme, even if you might have to make slight adjustments due to their unique markup. As mentioned before, you should be wary of this when buying a theme, since not including these classes in its markup can be a sign of not following the standards set by WordPress.

Have you used the core CSS classes to customize you theme?