Anatomy of a WordPress Theme | ITC298

Tired of using the default WordPress theme? Me too. But, before we get into Creating & Customizing a WordPress Theme, we should probably take a look at what this whole theme thing is about.

What is a Theme?

A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A theme modifies the way the site is displayed, without modifying the underlying software.

— http://codex.wordpress.org/Using_Themes

You can find your theme within the “themes” folder inside the “wp-content” folder:

themes-01

Here you can see the folders for “classic” and “default” themes that are packaged with the WordPress install download. You can also see folder for “premiumdw” which is the theme that I use for this site.

Inside the “premiumdw” folder, you can see all of the files associated with my theme. These template files control how your site generates and displays the information from your Database.

Installing a Theme

There are many, many designers and developers all over the world designing and producing themes that you can download and install. You can find some of these themes in the WordPress Theme Directory.

Download: My WordPress Theme | Premium Design Works

Once you have downloaded a theme, you need to place it within your “themes” folder and upload it to your server.

You can then set your site to use your newly installed theme via your Administration Panel’s “Appearance” menu:

themes-02

When you click on the “Appearance” menu, you will be taken to the Appearance Themes SubPanel where you can choose which theme you would like to use:

themes-03

It’s as simple as selecting a theme to use and clicking “Activate Theme.”

The Files of a Theme

I have found that choosing another designer/developer’s theme is cool if you are just wanting to have a quick blog set up to publish some content for your Mom to see. However, if you are a designer/developer that is working in the field professionally, you really should create your own theme to use.

Before we get into customizing and creating our own theme, we need to know how all of the pieces of a theme fit together. This will help us put one together.

There are two main template pages involved with WordPress:

index.php: used as your default template for your list of postings — your default home page.
page.php: used as your default template for all of your pages.

These template pages call other pages as includes in order for the whole system to work together:

page.php

The template files call the include files via WordPress functions:

page.php

Here you can see that the code for the default page template (page.php) is incredibly light. The bulk of this page’s code is within the “content” division tag where the loop is located.

The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post.

— http://codex.wordpress.org/The_Loop

The loop pulls your page specific information from your database. This page specific content is then displayed as the main content of your web page.

The Header (header.php) is the first file that is included in your template page:

header.php

Your header include typically contains everything from your doctype through your main navigation.

The Sidebar (sidebar.php) is usually the second file that is included in your template page:

sidebar.php

The typical blog sidebar contains the catogory links for your posting and sometimes the main navigation for your pages.

The Sidebar is a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found.

— http://codex.wordpress.org/Customizing_Your_Sidebar

You can see that my sidebar is increadbly long. My sidebar contains all of my sub page items (categorized by meta value), blog categories, tutorial items, links and advertising. Have you bought your stapler yet?

The Comments (comments.php) are placed after your page specific content loop:

coments.php

You probably won’t want to edit your comments file too heavily.

The Footer (footer.php) is the last include within your template page:

footer.php

The footer file usually contains any copyright statements any scripts as well as closing up the page’s code.

This should give us a good start on understanding what we need to know in order to start digging into WordPress themes. Now it’s time to look into Creating & Customizing a WordPress Theme of our very own!