How You Can Customize Your WordPress Theme

This is Day 3 in the 30 Day Blogging Challenge.  You can read Day 2’s post here.

So you’ve searched for a WordPress theme and found one you like, but there’s one little thing about it that you want to change. Maybe the font is too big, or you want a different link colour. How can you go about this?

No code required alterations: simple, but limited

The theme customizer

WordPress themes usually have the theme customizer built in. The amount of customization you can do is theme-dependent. Visit Appearance > Customize to see the menu.

For the Twenty Thirteen theme, these are the options:

• Site Title and Tagline
• Colors
• Header Image
• Navigation
• Widgets
• Static Front Page

However, most of these options don’t actually change much in the way of colours or fonts. So you might want a theme that comes with more choices.

Enhanced Customizers

If you’re looking to change more aspects of your theme, a premium theme such as Elegant Themes’ Foxyhas more options built in:

There are also a number of colour schemes built into the theme to choose from, and you can select a font from a dropdown list of Google Fonts.

Theme Options

Many themes offer you theme options in addition to the Customizer, where you can choose the layout and style of your theme.

In the latest version of Canvas theme, which I’ve reviewed here, you can to Settings > General Styling and change font style, size and colour, and a number of other colours such as the background colour. There are also options for layouts, borders, rounded corners, featured images, a slider and much more.

Customization plugins

If you are a user of the Genesis Framework and are not comfortable with coding, you can buy the Design Palette Propremium plugin, which allows you to vary certain aspects of your Genesis child theme. This includes padding, margins, colours, borders and typography. You can also add a site favicon. The plugin currently retails at $49 for a single site license.

Customization with CSS code: maximum flexibility with more effort

Sourcing your style change

To customize the look of your site completely, you need to change the CSS stylesheet, which means you need to know some code. The main stylesheet in a WordPress theme is called style.css. There may be others.

You can find out what it is you need to change by inspecting your code. You can use the built in Developer Tools on Chrome browser to do this, and to test out any changes you want to make. Rob Cubbon has a good tutorial on using Developer Tools.

Custom CSS

When you have settled on your adjustments, you need to tell your theme what style rules you would like to use instead. Some themes have a Custom CSS area built-in, where you can add your individual style to your theme in an input box. If you were to change your theme to another one, or delete it, your CSS changes would no longer apply.

Custom CSS with a plugin

Another easy way to do this is by the use of a plugin such as Simple Custom CSS.

Install the plugin and go to Appearance > Edit CSS.

Add the style rule that you want to change to the box and save it.

e.g.

h1.entry-title {
color: red;
}

The upside with this method is that it’s easy to do.

The downside is that if you deactivate or delete the plugin, you will lose your style changes.

Modifying your style.css directly

Another way to tweak the look of your theme, which is foolproof, is to go to Appearance > Editor, select the style.css file of your theme to edit, change the code to what you desire and save it.

I don’t recommend that you do this. Why?

1. If you don’t know what you’re doing, you might break your theme. So don’t try this on a live site.
2. If a theme update becomes available and you update the theme, your changes will be lost (unless you restore from a backup).

The safe way to make changes directly to the code of your theme is to make a child theme first. I’ll be writing more about this in another post.

Have you found a good tip to customize your WordPress theme? Please leave a comment.