More often than not, premium WordPress themes try to cater to as many types of websites as possible. They’re normally aimed at fitting in almost any kind of webpage, while also offering plenty of options for those who want a customized design. However, sometimes the default layout just doesn’t cut it, and you must make additional tweaks to get the right look. We’re going to look at some of the first steps you can take to customize a WordPress theme, and some of the things you must watch out for.

Tweaking the CSS Stylesheet

The simplest form of customization you can make in a theme is in the CSS stylesheet. Well coded themes come with a nicely defined HTML markup, full of CSS classes that you can use to customize the overall look. Ours, for instance, are built with this type of customization in mind and thus provide a lot of classes to work with.

It’s important to note that customizing a theme does not mean editing the actual CSS stylesheet that comes with it. This is a bad practice, as it doesn’t let you backtrack in case you make some undesired changes that break the layout. Instead, you should look for a plugin or tool that will let you embed additional CSS changes onto the site, without touching the theme files. For instance, our WordPress themes come with a Custom CSS area that allows you to add any number of tweaks. If your theme doesn’t come with such an option, a good plugin that allows you to do it is My Custom CSS.

Overriding Styles

Now, once you are ready to make changes to the CSS you might find yourself stumped when finding out which classes to modify. The main problem when trying to make changes to a theme’s CSS is inconsistency. Since each theme is built in its own way, you have no way of knowing how CSS classes have been structured, or what the class names are at all. Fortunately, there is a workaround for this.

You can solve this issue by making use of one of the most useful tools for a web developer: the web inspector. If you use Google Chrome or Mozilla Firefox (using the Firebug addon), you can gain access to this extremely useful tool by right-clicking any element on a webpage, and selecting the Inspect Element option. This should bring up the Web Inspector, which lets you have a quick look at how the HTML is structured in your theme.

The Web Inspector in Mozilla firefox.

The Web Inspector in Mozilla firefox.

By using the Web Inspector, you can see in a structured view how all elements are organized, and which CSS classes they use. What’s more, you can also view the CSS classes that are affecting such element, letting you know which attributes to modify too. In short, you can swiftly look into the element of your choice, view the applicable CSS classes, and then proceed to override them in any way you wish.

If your WordPress theme has been coded properly, you should be able to do a great deal of modifications by only changing the CSS stylesheet. This means you don’t have to change any theme file at all, which protects you from any unintended changes breaking your site. Keep in mind though that this remains as a very basic form of WordPress theme customization, and making larger changes may warrant using a child theme.