3 simple ways to customize your WordPress theme

Have you found the perfect WordPress theme, but it doesn’t come in the right color for your blog brand? Do you like everything about a theme, except for the font? Or maybe you just want a chevron background for your blog instead of plain white. This tutorial is going to show you how to make these customizations for your blog. It takes a little coding, but is very easy and can be done in minutes. I will be using the same example blog that I used for our Blogger to WordPress tutorial. The blog uses the Metro theme, a child theme of the Genesis Framework. (aff links)

1. Add a custom background to your blog
2. Customize the colors of you WordPress Theme
3. Change the fonts for your blog

How to add a custom background to your blog

Let’s start with the easiest step first. Unless your theme has disabled the custom background function, changing your background is easy and doesn’t require any coding. Log into your WordPress dashboard and navigate to Appearance – Background. Next to Select Image, click browse to upload your picture to the blog. After the upload is complete, you will be able to adjust the display options for the background. Click save and you now have a custom blog background.

Reminder: don’t go too crazy with your background, you want your content to be the main feature.

After changing the background of the blog:

How to change the colors of a WordPress Theme

The red color of the Metro theme was actually the right color for this blog, but the black navigation made it too dark for the desired blog design. She wanted the look of her blog to softer and more feminine. We ended up changing the colors in 2 different spots. We changed the top navigation bar to be the same red as the theme default and then we changed the lower navigation menu to be a shade of gray.

The easiest way to change the color of a specific element in your blog design (if you aren’t familiar with coding) is to first find out what the current color is. I use a tool called Color Picker (available for Firefox and Chrome). After installing the color picker, click on the color picker icon and select the color your want to change. You can see in the screenshot below that we clicked on the top navigation menu.

The results told us the color was #333333 and that the CSS is nav.nav-secondary. Now that you have the color information, head to your WordPress dashboard and navigate to Appearance – Editor and open up the style sheet (sytle.css). If using Windows, click CTRL F to search the HTML for the correct CSS to edit. Type in .nav-secondary (or, whatever the CSS class is for the element you want to change) and click next until you find the area that mentions background color. Originally, it had the color #333 which is black and so we deleted that color and pasted the desired red color.

We also wanted to change the lower navigation menu, which we did by adjusting the nav-primary code to #707070.

Here is the blog after adjusting the colors of the theme:

Another way to change the color on your blog is to search for 1 specific color and replace it with another color. For example, if you wanted to change every element in your WordPress theme that was blue to a turquoise shade, you would search for the blue #0072C6 and the every time you found that blue you would replace it with the turquoise color #43A9A6 (like that turquoise? It is the color for the popular Make It and Love It blog). Hit Update File and the new colors for your WordPress theme are in place.

Need color inspiration?

My favorite color inspiration site is Design-Seeds. Jessica posts new color schemes every day. Use your color picker tool and add one of her color schemes to your blog. I also really like the site 0to255.com. It is great for helping you find the color code for shades of 1 color.

How to change the fonts for your blog

For this tutorial, I am going to show you how to use Google Web fonts. The first thing you need to do is head over to Google.com/fonts and pick out the fonts you would like to use for your blog. Most people recommend using 3 or less fonts for your blog. This example blog wanted to use Shadows in the Light and Open Sans.

Find fonts for your blog using Google Fonts

After you’ve selected the fonts you want to use, click Review in the bottom right corner. Make sure you still like them.  We tested Shadows into Light for a headline font and Open Sans for a paragraph font. If you are satisfied with your font selections, click Use.

This brings you to a page where you can select the styles you want to use for your blog. Pay attention to the page load speed in the right corner. Try to keep the arrow in the green. It is important for your page load time to remain fast. We chose to use the normal, normal italic, and the bold for this blog.

Add Google fonts to your blog style sheet.

Scroll down and select the @import option for step 3 Add this code to your website. Copy the code Google provides and head over to your WordPress dashboard. Navigate to Appearance – Editor. Near the top of your style sheet (style.css) past the @import code.

Now, you will need to find the elements necessary to change the fonts. To do so click CTRL F on your keyboard and type font-family. Search through the results until you find the code for these areas: body, headings, and site-title. For this blog, we changed the body to the Open Sans font and the headings and site-title to Shadows Into Night.

Many decorative fonts are smaller than  serif or san-serif fonts; if you feel that your decorative font is too small, you may want to increase the size of the heading fonts. Make sure H1 stays the biggest and H6 the smallest font size. Click update file and you now have custom fonts for your blog

I hope you find this tutorial helpful in customizing your blog! Let me know if you have any questions, or leave me a link to your blog after you’ve customized it!

Also for those that might be curious, here is the blog style guide for the example blog:

More ways to customize your blog

Looking for more ways to customize your blog? Check out these posts:

• How to add a favicon to your blog (the tiny image in the browser window tab)
• Add an author’s box to your blog posts

I also find these blogs helpful for designing your own blog:

• Design Your Own Blog
• Code it Pretty