WEB170 » The Anatomy of a WordPress Theme
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.
See Also: http://codex.wordpress.org/Using_Themes
You can find your theme within the “themes” folder inside the “wp-content” folder:
Here you can see the folders for the”default” themes that are packaged with the WordPress install download.
Eventually, we are going to create our own theme for our project in this class. But, for now lets take a look at what a typical theme looks like.
Let’s take a closer look at the theme that I use for my business site:
Inside the “premium-design-works” folder, you can see all of the files associated with my theme.
What are all of the files of a Theme?
Before we get into creating and customizing our own theme, we need to know how all of the pieces of a theme fit together.
These template files control how your site generates and displays the information from your Database. These template files call other pages as includes in order for the whole system to work together.
When a page in your WordPress website loads, it will load your theme files in a modular fashion:
Let’s take a closer look at the parts of a WordTheme and what each file does.
When you are loading a regular page in your site, you will most likely load the Pages template:
Here you can see that the code for the default page template 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.
See Also: 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.
When you are loading a single blog posting in your site, you will most likely load the Single Posting template:
When the blog feed loads (or the home page in some cases), you are most likely using the Index template :
The Document Head is the first file that is included in your from your templates:
The Footer include is the last file that is included in your from your templates:
The Footer include usually contains any copyright statements any scripts as well as closing up the page’s code.
The typical blog sidebar contains the category links for your posting and sometimes the main and sub navigation for your pages. It might also contain, some plugin widgets that show the latest photo you took of your family doing something totally adorable.
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.
In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments.
A theme can optionally use a Functions (functions.php) file, which resides in the theme sub-directory:
This Functions (functions.php) file basically acts like a plugin, and if it is present in the theme you are using, it is automatically loaded during WordPress initialization (both for admin pages and external pages). It’s where I store a lot of my hand written functions like my awesome title tag.
Finally! It’s time to go to Creating & Customizing a WordPress Theme!