How To Customize Your WordPress Theme

Customizing your WordPress theme – whether it’s free or premium – is often a daunting prospect, and often the changes you want to make which should be straightforward quickly become very complicated.

How To Customize Your WordPress Theme

Thankfully, making simple changes — like changing the font, background or site colors — is a simple process and if you’re careful, you can even ensure the bits you do customize are protected from theme updates.

In this post I’m going to show you how to get started customizing your WordPress theme. These are the very basics, so if you’re after something more complicated check out WPShout.

Customize your theme: getting started

We’re going to be doing our customizations via the plugin Jetpack. Jetpack brings some of the features WordPress.com users are familiar with to your self-hosted WordPress install. One of those, conveniently, is a CSS Editor! This is where we’ll be doing the customizations.

jetpack

Install and activate Jetpack, then head to Appearance -> Edit CSS.  This is the screen where the magic is going to happen, so get used to its look. The reason we’re using this third party plugin and not, say, your theme’s options page is simple: if you update your theme after making changes to its code, by using a plugin not attached to your theme you can guarantee that these changes will be preserved.

This may sound trivial, but the thought of hours and hours of your hard work isn’t something you’ll want to entertain after you’ve finally got your site looking perfect. Trust me on this one; it’s worth doing.

Getting started with CSS: understanding selectors

We’re now going to start getting our hands dirty with styling with an introduction to the concept of CSS selectors. These are the set of “instructions” which tell the browser how to apply the styling in the CSS files to the HTML your theme produces.

There are three types of selectors: elements, IDs and classes. You’ll get to know each of these in more detail later, the but for now it’s enough to know that these are just the three types of selector you’re able to target using CSS. I’ll take you through what each of those are and how they’re used:

Elements: these are used to target large, sections of your site, but for example body targets the background (this is true for our purposes, but not technically correct), so header targets your site’s header area and footer targets the footer. Elements are generally large areas and asides from body, which controls the whole site body, we’re unlikely to use these much.

Classes: indicated in CSS with a . and then the class name (making .class-name), or in HTML with class="class-name", these are bits of styling which are used more than once in your theme. You might, for example, find your theme has .post-title, which is used to style all of your post’s titles, so or .button which is used to style all of the buttons across your theme. If it’s a part of your theme which is reusable, so it’s likely to be a class.

IDs: used in CSS with # and then the ID name (ie #main), IDs are used for styling unique objects in your theme. You might find IDs for #logo (which is styling your site’s logo) or #main (which is handling the styling of the main content area). IDs can only be used once per page, so if you’ve got a unique element, it’s probably in ID.

That’s the basics of selectors covered; the good news for you now is that CSS interacts with all three types of selector in the same way and that finding out whether the part of your site you’re trying to style is using an element, a class or an ID is relatively straightforward. We’ll cover that now!

Inspect Element: identify your elements!

I’m going to be using Google Chrome for this part, but if you’re using Firefox or Safari, that works too. If you’re using Internet Explorer or any other browser, you’ll need to install Chrome to proceed.

chrome

With an appropriate browser installed, we can start the customizations. Thanks to the Inspect Element feature in Chrome (which is about to become your new best friend), this is a relatively easy process. I’ll be doing customisations to this post here on BlogBettr, but you should be able to follow along using your own blog. After all, that’s where you’ll be doing your customizing in the future! There may be little differences, but there shouldn’t be any major differences to worry about.

The first customization we’re going to do is increase the font size on post titles, so start off by loading a post (any post, it doesn’t matter which!).

The first thing to do is to right click on the element you want to customise and then click Inspect Element in the drop-down menu which appears. You’ll see a box pop up at the bottom of your screen filled with lots of scary looking code. You don’t need to worry about that for now; just look for the highlighted line and the element, class or ID on the right hand side. That whole process will look something like this:

animation-1

Next, you just need to go back to the box of elements, classes and IDs on the right, click on the top one and copy it. That’ll look like this:

animation-2

We’re nearly there. All you need to do now is go to the Custom CSS screen we looked at earlier (Appearance -> Edit CSS) and paste the code you just copied there. If you’ve got a different ID or class to me, that’s just because you’re using a different theme and it’s nothing to worry about. Your CSS Editor should look like this (except with your own ID or class):

css-1

Now comes the exciting part: you’re about to write your very first bit of CSS. We want to increase the font size, so we need to use the very simple CSS property, font-size. The syntax for this, and every other bit of CSS is like this:

css

So to change the font size to 32 pixels, you just need to add the following after your class or ID in your CSS: { font-size:32px; } Check everything looks right (for reference, my CSS is below) and hit “Save Stylesheet”. Next is the big moment of truth. Refresh the page you did Inspect Element on, and you should see your font size change.

css-2

If it doesn’t, then just have a check for any formatting errors. Check the code you’ve got against what’s in my example and see if there are any differences. If you’re running a caching plugin, you’ll need to clear the cache; doing this should make your changes show up.

Changing font colors!

Congratulations! You’ve made your first WordPress theme customization! I’m just going to run you through another one to get you on your way; after you’ve got the hang of this one, the rest should be fairly straightforward.

Let’s say we want to change the color of the body text of a standard post. As before, first you need to find the element, ID or class (or in this case it’s likely to be a combination of a couple of those) controlling the color, which you do by right clicking anywhere on some body text, clicking Inspect Element, copying the top element, ID or class from the top right and pasting it on a new line in your CSS.

For me, I’m pasting:

.entry-content p, .entry-summary p, .comment-content p, .mu_register p

Then, as before, apply the CSS syntax. The property for changing colors is simply color, and the value can be a color in plain text or a hex-encoded color, so you’d just add to the end of that: { color: grey; } (or whichever color you wanted), making the complete code look like this:

.entry-content p, .entry-summary p, .comment-content p, .mu_register p { color: grey; }

Again, hit save, refresh the post and see your customizations in action!

Theme customization made easy

There, you’ve made your very first customizations to your WordPress theme! This is, of course, only the start of your customization journey, but it’s a good place to start. HTML Dog has some more beginner CSS details, which will help you find some more properties to take your CSS customization further.

These are only simplistic changes, but – to use an old cliché - you have to start somewhere, and this is as good a place as any. These kinds of changes are where I started out all those years ago, and through trial and error I was able to get somewhere. And if I can do it, there’s no reason you can’t.

I’ll be doing more posts on how to customize WordPress themes in the future here on BlogBettr, so make sure you sign up to the BlogBettr newsletter to be notified. You also might like to follow me on Twitter :) Any queries, questions or suggestions, please leave a comment and I’ll get back to you.