How to Customize Free WordPress Themes

How to customize a WordPress themeSo 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:

<div class=”green”>

Then look in your CSS stylesheet for something like this:

.green {

color: #FFFFF;

font-size: 12px;

}

*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.

There’s the usual widgets to show your recent blog posts, archives, blog pages, and you can add as many text widgets as you want – and the beauty of text widgets is they can accept html coding so you can add ad banners, javascript and things like that so you can add virtually anything to your blog sidebar.

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.

Comments

  1. Wow Traci- what an excellent post!
    Customizing sometimes can take a long time.
    I think the key is to always save the work so that if we mess something up we can always go back to the original.
    Thanks for these detailed explanations and I agree that widgets rock- they give us such freedom!
    All the best,
    Eren
    .-= Eren Mckay´s last blog ..Summer Sun Safety Tips for Kids (Plus Activities & Worksheets that Help You Teach Sun Safety) =-.

  2. Traci Knoppe says:

    Thanks Eren for the reminder about the backup! I just edited the post to include that info. Can’t believe I forgot that part! Duh! :)

  3. This is good stuff and I know this is a big question, customizing the free themes. And I totally agree, some minor customization can be done, but sometimes you will save a lot of headaches down the road if you have a professional help you for the major stuff.

    A couple of notes to add:

    If you are still on WordPress.com, you will need to pay a mininal charge to be able to customize your CSS.

    And very good note on backups, I’m a backup nut! One easy solution when it comes to CSS, is to open up a plain text program, copy and paste your entire CSS into it. That way if you screw up, it’s easy to just paste the original back in via the editing panel on your dashboard.

  4. @Bob, I learned the hard way about backing up. I relied on my host (which assured me they were making daily backups) only to find out their backup was not complete. Ugh. I not only insist on making my own backups now I also insist on having it in more than 1 location.

    Great idea on CSS backup. I also use a Firefox plugin called Firebug which allows me test CSS changes without actually making them in the file until I am happy with the results.

Speak Your Mind

*

 

Powered by WishList Member - Membership Software