A while ago we talked about the possibility of making quick customizations to your WordPress site without altering the theme files. Due to popular request, we’re going to expand on it and see a bit more of it. We’ve worked up a quick tutorial that will serve up as the basis of theme customization.

This article is meant to be a more resourceful guide for those of you who want to take your theme beyond its normal options. Bear in mind that this is a guide towards making minor changes, not major overhauls. It is ideal for those who wish to make small edits to the overall layout of the site, without the effort of creating a full child theme.

How CSS Works in WordPress

Before delving into the details of customizing your theme, let’s look at the very basics. In a WordPress theme, there must be always a base CSS stylesheet called style.css. If you don’t know about CSS, I recommend you take a look at some tutorials around the web to get going; they’re everywhere. This file sits in the root directory of a theme, meaning most of the theme’s styling will be found in the following address:

http://www.yourdomain.com/wp-content/themes/yourtheme/style.css

Keep in mind that some themes choose to create multiple CSS files and link them up together in style.css, so you might need to navigate a bit to find them. The idea of CSS customization is to navigate the stylesheet to find the CSS classes that are affecting the elements you wish to modify, and then override them to your liking. While it may seem like a lot of work to go through an entire site’s stylesheet, we have a useful tool that will do the heavy lifting for us.

Using the web Inspector

As we previously mentioned in a different post, in order to make changes to the CSS we’ll use the web inspector. The web inspector is a useful tool you can use in Firefox or Chrome to view the source code of your page in an organized way. The main purpose of this tool is to quickly find the element you wish to modify, and find out which CSS classes affect it. Once you are aware of those classes, you can then proceed to override them with your own custom values.

The Web Inspector in Mozilla Firefox, powered by the Firebug extension.

The Web Inspector in Mozilla Firefox, powered by the Firebug extension.

The web inspector comes by default in Google Chrome, and as an extension in Mozilla firefox known as Firebug. These tools work in a fairly similar way: to open them up, you only need to press F12. This will display the inspector in the lower part of the window. From there on, you can see the source code of your page in the HTML tab, displaying all HTML markup elements as a collapsible, indented list. A quick method of quickly navigating to the item of your choosing is to right click it on the page, then hit Inspect This Element. This will immediately focus the web inspector onto the desired item, bringing it into focus.

Viewing CSS Classes

When the item is selected, you can then take a look at the right sidebar of the inspector. This sidebar displays all the CSS classes affecting said element, as well as their active attributes. These CSS declarations will be listed in order of specificity, meaning the ones with the most strength will be shown first, the second strongest second, and so on. Specificity is a very important thing to keep in mind, as it defines whether a declaration will be able to override another based on their order AND how specific they are. For example, take the following two declarations:

Line 25: .header .subheader { background:blue; }

Line 35: .subheader { background:red; }

Even though the second declaration is further down, the first one will have prevalence as it has a higher specificity (it selects the subheader class as a descendant of the header class). This is perhaps the most unintuitive aspect of CSS, and it may leave some users confused as their declarations may not have the desired effect. You can read more about CSS specificity in this Smashing Magazine article; it’s worth the time.

Applying Changes

Once you find the classes you’re looking for, it’s time to override them. If you’re using one of our themes, you can make use of the Custom CSS field included in the Theme Options, built with the express intent of customizing your theme. You can find it in the Theme’s Options page. If you’re using other themes and there’s no substitute for such a field, you can try using a plugin such as My Custom CSS. These CSS changes are normally added at the very end, so most of the time they will have preference over the normal stylesheet.

To apply your changes, you simply need to copy the same class declaration as it appears on the web inspector. Directly copying it will prevent most issues with specificity, making it simpler for you to tweak the design. These changes will be saved on the database, meaning that they’re safe from being erased on updates and site changes. This allows you to preserve them no matter what you do with your site.

After adding these changes, you can see the results directly on your site.

After adding these changes, you can see the results directly on your site.

To avoid making changes to the layout, you should try to avoid changing structural properties like paddings or widths. A good rule of thumb when modifying the CSS of an element is to stick only to design-centric properties such as colors, backgrounds, or fonts. Some mixed properties such as borders are best implemented using their longhand declaration, like border-color. This will preserve the other properties such as border width or border style, while letting you change the appearance to your liking.