How to modify WordPress themes

Modifying WordPress themes can be tricky if you’re not familiar with CSS layouts. On the other hand it can be very simple if all you want to do is to change the font used in your theme or the color of certain text.

Before I discovered the tool I’m about to show you I used to rely heavily on trial and error to find the parts of a layout I wanted to edit. Now it’s a piece of cake to find a very specific design element then move it to the left by 3 pixels.

If all you want to do is change a font in your theme here’s how it’s done (I’ll get onto editing things in great detail a bit later on)…

1. Launch your favorite HTML or text editor (Don’t use Word!)
2. Then locate and open up a file in the theme folder called style.css (in virtually all theme template this is the name of the file you’ll need). This is the file that controls all the design elements of your theme from the color of the text to the position of a button.

Here’s what you’re looking for within the style.css style sheet…

Then all you do is do a global search and replace for those fonts and replace for the fonts you’d like to use. if you want to make very specific font changes don’t worry I’m about to show you the software that’s going to help.

Here’s a list of standard web fonts (if you use any non-standard other fonts it’s possible they won’t show up on your visitors web browser if they don’t also have them installed). If you use standard fonts you can’t go wrong.

Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif
Georgia, serif
Lucida Sans Unicode, Lucida Grande, sans-serif
Tahoma, Geneva, sans-serif
Times New Roman, Times, serif
Trebuchet, Helvetica, sans-serif
Verdana, Geneva, sans-serif

A super simple way of finding out where in the CSS style sheet certain elements are is to use a FireFox plugin called FireBug.

You will need to have FireFox installed on your computer to be able to use this so if you don’t have it I recommend installing it right away.

Next you’ll need to download and install the FireFox FireBug plugin which you can get here.

When you’ve installed it look in the bottom right corner of your browser for this…

Now it’s time to take a look at the CSS code of the WordPress theme you’re working on.

All you do is move your mouse to the element within the theme you’d like to change then right click with your mouse which should reveal this drop down menu…

Then all you do is select “Inspect Element”.

When you do this a new part of your browser window will open up to reveal the code for the element you’ve selected.

Now all you need to know is where this code is within the style.css file.

Next we locate this within the style.css file (line 60)…

Now we know exactly where it is within the style sheet it can easily be changed and updated.

If you want to go deeper into adjusting the layout of your theme design it’s made many times easier thanks to the FireBug extension.