So you’ve found a free WordPress theme you would like to use on your blog, and the general layout is what you want, but you want to make a few minor tweaks and you aren’t sure how to go about doing that. Let me show you how in this easy tutorial.
Choose a Theme
First, it’s easiest to choose a theme that has an overall layout that you like. Don’t choose a right sided 2 column theme in pink, if you want a left sided 3 column theme in blue. While colors can be changed, the number of sidebars, and where they are located, are not easily changed (at least not unless you’re a theme designer).
So search for a theme either from within your WordPress Dashboard (Appearance > Add New Themes > Search) or via a web search and enter in the parameters you desire for your WordPress theme (ex.: free red 3 column WordPress theme). Once you’ve made your selection, install your chosen theme.
Save a Backup Copy of Your Original Theme Before You Edit
Eren’s comment to this post reminded me if one very important point I forgot to include: a backup! Before you do any modifications to your theme, log into your web hosting server via FTP and download the theme folder to your computer to save a copy of the original files.
Then, should you mess something up during your editing process, you can always upload the original theme folder back to your web host, overwriting your mistake and at least restoring your site to the original theme as it was.
Trust me – always have a backup saved. Always.
Changing the Header
To change a graphic within the header, the easiest method is to create a new graphic and name it the same name and dimensions as the existing graphic, upload your newly created image into the theme folder – overwriting the existing header image with your new one.
How to find the name of the header graphic.
I will give you the easiest way to find the name of the header graphic.
- Activate the theme on your site, view your site on the web – right mouse click on the header image and click view image, or view background image. Right mouse click on the image and click Properties, and a window will pop up and there you will be able to see the name of the graphic and it’s dimensions.
Create Your New Header Graphic
Now that you have the name and the dimensions of the header graphic, you need to create a new graphic to replace the existing one. You need a graphics program to do this. Paint is a free program that comes on PCs and I’m sure Macs probably have a graphics program too.
I personally use Paint Shop Pro X2 as it’s less than $100 and my preferred program. I have Photoshop, Illlustrator and a few others, but have found Paint Shop Pro to be the easiest to use and the most affordable, with the most features.
Once you have your new graphic created, log into your web host via FTP and upload your new header graphic into your theme folder, overwriting the old header graphic. This is usually in the images folder inside the theme’s folder (ex.: /wp-content/themes/RedTheme/images/header.gif)
Changing Fonts and Colors
Changing the size, font type and color of your fonts is all done in the CSS stylesheet for your theme. In your Dashboard go to Appearance > Editor > and by default it will go to the stylesheet for the theme that is active on your site. If you want to work on a theme that is not active on your site, choose that theme from the dropdown menu in the upper right corner on the Editor page.
The CSS stylesheet looks a bit confusing and to be honest – it takes a bit to wrap your mind around CSS; just know that CSS stands for Cascading Style Sheet and it means what it says – cascading, and it falling down from the top. So whenever a rule is set for the body, for example, it falls (cascades) down to every other rule within the stylesheet, until you specify otherwise with a special class (new rule).
So if you have a font or area of text you want changed, the best way to determine if there is already a class (or rule) set for that in the stylesheet is to look at the html code of your site. So view your site on the web and at the top of the browser window click View > Page Source and look through the html coding on the page to find the area of text that you want changed.
What you are looking for is coding right before your block of text that will say something like this:
Then look in your CSS stylesheet for something like this:
*Note that it may also be shown as #green, instead of .green; but this is how stylesheet coding looks. There may be lots of other coding along with it, the above is merely an example of what to look for and where you would go to change the variables.
So to change your .green class to say make the font size larger; find that class in your CSS stylesheet, as I’ve shown you above and you’ll see font-size: 12px listed. Change it to 14px or 16px or whatever you want to make it larger, save the stylesheet and every instance on your site that uses the class .green will now show the larger font size.
The same principle applies for changing font colors, font type, etc… Even changing named graphical images – you can change those within stylesheets too, as sometimes those are controlled with stylesheets. Just find the location in the stylesheet and either change the name of the image, if you’ve created your own image; or sometimes there is a background image indicated where you do not want one – just remove the line of code that calls in a background image.
Changing Your Sidebar With Widgets
By far the best thing invented for WordPress sidebars was the widget. Used to whenever you wanted to add a new link to your sidebar, a new ad banner or anything, you had to hand code it. Whenever you changed themes, you had to hand code it all over again. What a pain! Widgets changed all that.
You’ve now doubt heard of plugins, right? Well widgets are simply plugins for your sidebar. The cool thing is, you can move them around and reposition them to give your web site a whole new look – all from within your Dashboard. Very easy and convenience.
To change the look of your sidebar and reposition where things are located, just drag and drop the widgets in your Dashboard (Appearance > Widgets).
You can add new widgets by searching for them under Plugins (remember, a widget is really just a plugin for your sidebar) > Add New > Search, or use the tag cloud > Widgets. Find one that does what you need, install it, place it where you want it in your sidebar and you’re good to go!
If You Need More Help
If you find that you need more help that this tutorial provided in customizing a WordPress theme, you might be better served hiring a designer to customize the theme for you. There are so many variables to consider with each theme, there is no way for me to cover all those in one tutorial. But hopefully this is enough to get you started.
If You Don’t Have a Blog
If you aren’t blogging yet and need help on how to start a blog – check out my Beginner to Blogger in 4 Weeks eCourse. I do cover customizing a blog theme in that eCourse as well in a bit more detail.