Getting to Know WordPress Themes

Are you someone who loves to change the look of your WordPress blog? You search high and low for new themes, have your favorite designer in your RSS feed reader and dream of making your own WordPress theme someday? Do you have fabulous design ideas but live in fear of the layout? I was just like you once and I want to help you take that first leap into designing WordPress themes.

When I first started learning WordPress themes I was lost. Where to start? Well, the first thing I learned was the theme structure. The most basic theme is made up of six key files:

1.The Cascading Style Sheet (CSS).

This file determines how your theme is rendered. Here you change the color of fonts, the placement of images, and how wide your content area will be. All of your theme elements should be listed here.

2.The header.php

This file holds valuable page information for browsers, robots and crawlers. It also is where the body tag of your page will appear, as well as the title tag and other important opening divs.

3.The Main Index.php

This file holds all the code for your homepage.

4.The sidebar.php

This holds the code for your sidebar. You call this template in the main index.php.

5.The comments.php

This is the comments template. It's called in the index.php also and is used to render the comments area on your blog.

6.The footer.php

This is where your page ends. Here is where you put such things as your site Copyright and your end body and HTML tags.

Now that you know the most basic layout and what each file is used for, you can begin learning how to design and code. A great resource for this is the codex at WordPress.org. However, the tutorials there are more advanced and can be quite daunting. You could soon find yourself lost and quite possibly throwing your computer out a window. There's an easier way to get to know the theme files. [Please note that this tutorial assumes that you have a basic knowledge of HTML and CSS.]

You'll need an HTML editor if you aren't an expert at CSS and HTML. I use NVU to get everything just right. Also, download and install two more browsers- Firefox and Opera - in addition to your Internet Explorer. Many people use these browsers and you'll need to see how your page renders in them. You'll also need your favorite theme files. You'll be reworking these. Make sure that the designer allows for tweaking by looking for General Public License (GPL). Most themes from the WordPress codex have these, but check anyway. If your favorite design has this you can begin tweaking.

Open up NVU and go to the source code. Write Copy and paste your CSS between the style tags. Then copy and paste your header.php under the tag. Do the same with the main index.php, sidebar, comments, and footer- in that order. It's very important to keep the structure of the page intact. To make the end easier put comments between each section. Commenting in HTML looks like this:

All of your tags are already in there so you should be able to go to the 'normal' tab and see your page rendered (it won't look exactly like it will when you've gone live because the php tags don't render). That's ok. We just need to concentrate on the styling. The only reason you're structuring a page like this is so you can see how changing the CSS will change your entire page. That's the important part.

Make sure you're on the 'normal' tab and the go to 'tools -> CSS editor'. There's a plus sign ( + ) beside index, so open that. There you'll find all the elements in your CSS and on your page. This is where you'll style. You go through the different elements and design them the way you want them. Watch your page change with each change. Experiment with the borders, boxes, backgrounds, etc. This is where your design ideas come to life. When you're finished save the document and open in your different browsers. Again don't worry about the php code showing up.

When you have everything the way you want it, copy the CSS page and put it into theme on which you were working. This can be done in the WordPress presentation tab if you have the correct permissions. If not, then use an ftp client and edit it through there. View your site. If everything went as planned your design tweak will look exactly the way you want it. Congratulations on your accomplishment!

Please keep in mind that tweaking someone else's design doesn't make it yours. Coding a theme can be hard work and you should respect the designers work. Simply leave the credits to them and add that you've done the tweaking. For instance, "Designed by Lizzie Flynn and personalized by Joe Smith" would work just fine. The theme was probably free so recognizing the work of the person who made it is very important.

Now that you've taken that first leap, WordPress themes shouldn't seem so scary. So, now you can head on over to the codex and learn what all that code means. Soon you'll find yourself creating the pages instead of just tweaking them and all the credit can be yours. Have fun!