I usually talk with people about editing themes or what they think of a current change that I did to an existing theme. So I thought I might just as well write something up, giving out some of my tips to my readers in regards to theme editing or just themes in general.

Short notes

I´ll try to keep this piled up in topics, but I give no guarentee that I won´t go of topic sometimes. Bare with me on this. And this is my thoughts on the subject, if these don´t apply to you, don´t hate. Just comment on it :p

Finding a theme

This is by far the most challenging part. Should I go for that theme that had all those extra features or should I go for the plain theme that drew me in?

As you can see here I´ve talked time and time again about that I´ve found a new theme that I want to use and everything.

For my tip at how to find a theme. Think about what kind of content you´re going to have on it. Lots of big images? Will there be no images? How important is the colors?

Think this trough before you start looking. Otherwise you´ll never find a theme that pleases you and you´ll keep changing.

For a themepage there is always WordPress > Free WordPress Themes that you can look at. The site sucks but sometimes some nice themes come up. Otherwise try google for a certain kind of theme. I googled for “Magazine Theme for wordpress” when I found the link to Arthemia.

Found a great theme but…

So you found the theme you want to use, it has a good content area, nice sidebars, good header and from the theme demo it just works brilliant. BUT there is a slight thing that you want to change. It could be the link colors or a color somewhere.

This is where editing themes locally comes into play. It is a great way to install wordpress locally and then have all the fun in the world with the theme without your visitors knowing you´ve even changed anything at all.

Follow this guide:
Install WordPress Locally Part 1 Of 2 together with
Install WordPress Locally Part 2 Of 2 and after that you´re all free to go.

I also recommend that you download NotePad++ as it is great for this kind of editing.

CSS file

Most often the things you want to change are colors and size of a certain area. To do this you have to have a good understanding of how the theme is made. Use the local install of WP and start using the theme you want to change the things in and take a look at the sourcecode by right clicking and choosing “Show Sourcecode” or what it is called in English.

Then find the style.css file in the theme folder and open it.

After this all you have to do is read trough and find the parameter you want to change. Save the file and press that update button on your browser to see the results.

For me and Arthemia I wanted to change the way the featured section looked. I wasn´t to satisfied with the colors and such. Thus I needed to find the “#featured” section in the style.css which looked like this:

#featured {
width:300px;
background:#fff;
float:right;
padding:10px 10px 9px 10px;
}


Which I changed into

#featured {
width:295px;
height: 510px;
background:#ddd;
float:right;
padding:0px 0px 10px 5px;
font: 105% Arial, Helvetica;
}


As you can see I made it smaller, gave it a specific height so that it won´t go over that amount and changed the background. To this current version the font size is of no value as there are only images at the part now. But for the earlier versions it made the text look better.

And that is just basically what you have to do. Find each and every aspect of the area that you want to change and then change it into what you want.

To have some knowledge of CSS and how you create id, classes and how to later on call them is a good thing.

If the CSS have been written in a good way then this is of no problem at all for you. If it is written poorly without comments then them theme designer is a bad maker as you need to comment your CSS file to make everything more easy to understand.

Editing the other files of the theme folder

As you see there are often a lot of different files with a *.php ending in the theme folder. These files are a bit of a pain to edit if you do not have good PHP knowledge. A single misstake can break the whole theme if you´re not good with PHP and how it can be used to build wordpress themes.

I have a really hard time with this and most often it is by pure luck that I get something nice to work. For Smexy Arthemia it took me countless tries to get it to change how I wanted. Changing the size of the thumbnails generated by timthump.php wasn´t hard. Understanding why the damn thumbnails looked so spaced out was :p

The solution? Simple, I had to write the same sizes at two places. One in the timthum.php call and one on the img src itself.

Small things

Sometimes even if you do change the style.css the theme won´t make any changes. In this case don´t freak out and change stuff back or again. Instead hit your browsers cache folder and empty it. That works wonders in some cases.

If the thing you want to change is a header. Look for H1-H4 in the style.css as those are most likely your safest bet.

For content area. it all depends on what the creator of the theme has named it as. This is where that sourcepage will come in handy as you can see what he has named the different areas and thus you can look them up in the style.css.

If you find a style.css that is mostly empty, don´t fret out, take a look at the file and you will probably find an “import url(styles/standard.css)” or something in the file telling you where the file is located and thus you can find it.

It is the same with the other files. They can be located in other folders. On the net this works great and leaves you in the dark as most likely your visitor don´t have access to it. But offline on a local install with the theme you can take a look really easy. Which is a good thing.

For FireFox I´ve gotten the recommendation to install the firebug add-on. It will help you locate what the different areas are called and everything.

Finally

I hope that at least something that you´ve read here has been something you didn´t know already and has given you some insight in how to edit themes or finding that special theme that you want so much it hurts.

If you think that I´ve missed something then leave a comment and I´ll have to get back on that. Hopefully I can be of service for those question. As I said I do not have good PHP knowledge so at times I get lucky with finding code snips that work just the way I want them to work or I go to Template Tags and try to read on how to use the different commands. I don´t like the wordpress.org site much since it leaves so much more to be desired, but sometimes it helps out really well.

And with that I bring you this article´s end.

edit – a link inserted to show of the wordpress free themes site that sucks, but works in some cases.

edit2 – made a slight change in the title to make it a better description of what this post is about.