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.
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.
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.
- Added when the current page is the homepage, as defined in the Reading Settings.
- Added when the current page is the blog, as defined in the Reading Settings.
- Used for single pages instead of listings and archives.
- 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.
- 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.
- 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.
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.
- 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.
- 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.
- 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.
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?