HowTo – Introduction To WordPress Themes

Filed under: Wordpress Tips

wordpress-logoEveryone with a website want their own special look and to allow for this the WordPress templating system known as Themes is one of the most active areas in the support network.

Themes provide the interface between your content and how your readers see it. If you browse the Theme directory on wordpress.org you will see designs that range from the bare minimal blog to full all out News Sites. The most interesting part is that the difference between the designs can be as little as a handful of extra template files and a few hundred lines of code.

So you are saying you are not really a coder… Thats ok because WordPress does a lot of the work for you. If you have never made a website then the jump in can be pretty drastic and for that reason you are probably better off getting a theme that matches the style you want and modifying it.

If you do know some basic HTML layout and a little PHP then you should be able to make some radical websites  with only slight modifications to the default theme.

So lets take a look at some of the files in your Theme Directory

Themes are stored in your /wordpress/wp-content/themes directory your location may differ slightly depending on where you installed wordpress.

Each theme has its own directory and WordPress ships with the Default and Classic Themes.

Classic is the most basic of themes because it requires the fewest files to support all (many) of WordPress’s features.

In the directory you will see the following files

header.php which is the top part of your page and the HTML Header information to start the page.

index.php which is the center section of your page including your content area.

sidebar.php which is the right side menu bar

footer.php which is the bottom part of your page.

These four files make up the primary part of your website and if you need to make modifications to your site then you know which file to look in to find the area you want to work on.

For instance if you wanted to add your logo on the top of your page you would open the header.php file and add or modify whatever you needed and the change would take place across your whole website.

If you wanted to add a disclaimer or copyright at the bottom of your pages you would open the footer.php file and make changes there.

If you need to modify your menu then you open your sidebar.php file and alter it to look as you want.

Support Files

In addition to these 4 core files you will see you have a CSS file named style.css . This file applies all the design colors, font sizes, padding and margins between elements and other aspects of typography.

It may also include links to background images used for your Page, Header, Menu or other containers such as your content area. CSS setting can dramatically modify the way a site looks without the need to modify HTML code.

The functions.php is another important file that contains some actual code. Functions allow theme designers access to the Core WordPress code without the need to modify core files.

This means if your theme needs special code it can be placed in the functions.php file and when ever a new version of WordPress is released you can update and nothing should be broken.

The most common thing in a functions.php file is a line that will load the sidebar menu files into the WordPress Dashboard so you can add Widgets. Oh widgets are small thingys that you add to sidebars to display things like menus, polls, advertising, calendars and other addons. A widget can be added within WordPress from the Appearance Menu in your Dashboard.

Other support files include

single.php – displays a single post. Replaces the index.php file and allows formatting.

page.php – displays a single page. Replaces the index.php file and allows formatting.

home.php – displays the front page for your site.  Replaces the index.php file and allows formatting.

archive.php – displays a listing of your posts within categories.

category-123.php -displays a listing of posts with the category ID number of 123 .

comments.php – this file displays the form block and comment area below your posts.

Other Files

In all there are about 25 different files that the WordPress Theme system supports.

To make use of them you simply place the files in your theme folder or call them from inside other theme files.

Learning to use the Theme Files

When you are learning to use the theme files you should follow information found in the WordPress reference site http://codex.wordpress.org

The Codex includes both basic and specific information about the calls that are made inside the theme files and how they can be modified to present information in specific ways.

Another reference would be the theme developer’s website if you are using a theme that has been made for you. Most developers will provide a comment area where you can ask or view questions about the use of a theme package. Your input will help them improve their offerings but remember developers of unpaid themes are doing this for free.

Additional Help

In other HowTos we will cover modification of different parts of your theme to provide special features.

Since you are probably new to website design you should also try to master some of the basic skills needed in Theme Design and Site Management.

You should have a decent understanding of HTML, CSS Styles, PHP and how to manage your MySql Database.

You should also understand how to produce images for backgrounds, buttons, menus and other parts of your site.

I suggest you get hold of the Open Source Software

Gimp – image editing

Komodo Edit – HTML and PHP Editing

You should also add Firebug and MeasureIt as basic addons to FireFox.

Final Note

There is much more to learn and that will take time but making a backup of your theme files and looking inside and making modifications should help you learn fast.

If you see a theme that has an option you want then download it and examine how they make it work.

And if you have questions there are plenty of places to find help.