WordPress Theme Basics Explained

After you have installed WordPress you are going to need a WordPress theme to give your new blog or website it’s look and functionality. There are various places to get a WordPress theme from. You can select one from the WordPress Theme Directory, a WordPress theme site or have one custom created for your blog/site.

WordPress was originally created as a blogging software package but over time it has also been used as a content management system for a regular website. Even though we use the word blog below, the information is still applicable if you have decided to use WordPress as the content management system for your site.

What are WordPress Themes?

A WordPress theme is a collection of files that determine the look and features of your blog or website.

When you install WordPress there is a default theme included with your WordPress installation under the themes directory in the wp-content folder on your web server.

The WordPress programming decides which file(s) to use based on what is it going to present to the visitor. Some basic WordPress jargin:

A post is an article you wrote within your blog or site.

A page is a static page within your blog or site.

A category is the filing system you use to sort the posts within the site so like articles are grouped together. When the user clicks one of the category names in your navigation the page they see is a list of all the articles filed under that category.

A sidebar is the navigation column and the third column of your WordPress theme (if you use a 3 column design).

WordPress Theme Files

Your Worpress theme is broken up into pieces in the theme folder which are assembled by the programming included in WordPress.

Below is a list of the basic theme files used by WordPress themes. Your chosen theme may have more files than the following, it depends on how the WordPress theme developer/designer built your theme. Some of these files are parts of the visual look of the posts and pages on your blog. Others are templates for specific types of pages on the blog.

  • 404.php

    A 404 page is an error page presented when someone follows a broken link to your blog or types the url (web address) to a post or page on your blog incorrectly. The 404.php template is used when a page or post is not found on your blog.

    It is advisable that you take some time to customize your 404 page to make it useful to the visitor so they can find their way around the site instead of just leaving.

  • archive.php

    The archive.php template is used for your blog archives. It lists all the posts (articles) you have in chronological order based on month, day or year. You may have noticed some blogs have yearly archive pages listed in their sidebar.

  • author.php

    On a blog where you have multiple authors writing articles you may decide to show an about page for each author. The author.php template is used for this purpose.

  • category.php

    Categories are for organizing your articles into logical groups to make it easier for visitors to get to a specific topic they wish to read about. The category.php template is used to present the list of articles in a specific category.

  • comments.php

    The comments.php is part of your post page. It inserts the boxes for people to fill in when they wish to leave a comment on your article.

  • footer.php

    At the bottom of each page and post of your blog is a footer. The footer.php file is what inserts this information.

    The footer.php file usually contains the closing tags for the container that is around your theme design (called wrapper usually) and the closing tags for the body and html tags required for the coding of any web page.

  • functions.php

    There is some default programming that comes with your WordPress theme in the functions.php file. These are special programming instructions that make your theme work.

  • header.php

    In the header.php you will find the top coding for each page and post of your blog. It is inserted into each page and post on your blog through programming.

    Some basic things included in your header.php file are:

    • The DOCTYPE declaration for the pages/posts. This tells the browser what coding standard the theme is following.
    • The character set used by the blog is fetched from the administration side of your blog and inserted via programming into the head section of your pages.
    • The title set of tags for each page/post on the site are inserted based on the title you give your post/page when you create it via programming as the page is compiled before presenting to the visitor.
    • You will find the path to your CSS (Cascading Stylesheet) file is also created dynamically in the header.php.

    The above items plus some other lines of coding are inserted between the opening and closing head tags. ( <head> </head> ) Information between these tags are not visable to the visitor but is used by the browser and search engines to get information about your pages.

    Also in the header.php you will find the beginning of the coding that actually creates the visual part of your pages and posts.

    • The opening tag for the body of the pages/posts. (<body>)
    • The opening tag for the container which holds the contents of the pages/posts. Usually called wrapper. e.g. <div id="wrapper">
    • The head section of the pages/posts. This container could include the coding for your top horizontal menu if you have one.
      <div id="header">

      <coding to insert your logo and other things you have across the top of your pages>
      <coding to create your top horizontal navigation (if you have one)>

      </div>
    • Opening tag for the container that wraps around the actual content of the individual pages/posts. e.g. <div id="main">

    All these id names will become important to you later if you want to customize the CSS file for the theme to suit your own personal taste.

  • index.php

    The index.php file is the default template used when there is not a specific template available for a certain page or post type in the theme. It is also used for the home page of your blog unless a specific home page template has been created.

  • page.php

    The page.php template is used for pages you create. Pages are different from posts (articles). They are not sorted into categories like posts. Pages are usually used for your About Me, Contact Us and other static pages on the blog.

  • search.php

    On a page where there is a search function, the search.php is inserted into the page/post coding.

    A search form is usually located in the top of the pages/posts or in the sidebar (side navigation column). It can be inserted into your search results page and your 404 page.

  • sidebar.php

    A sidebar is the side navigation/column of your theme in WordPress. You can have one located either left or right of the main content of the page/post or down each side of it.

    When there is a sidebar down each side of the main content look for two different sidebar files. One would be for the left side and the other would be the right side.

    For a WordPress theme with one side column the sidebar.php contents are manipulated to be on the left or right of the main content using the CSS file.

  • single.php

    Your posts/articles are presented using the single.php file. A basic single.php template fetches the header.php, sidebar.php, comments.php and footer.php along with the main contents of the article to create the page.

  • style.css

    All the presentation styling of your blog’s theme should be in this file for easy maintenance.

    The id names you found in other files for your theme should be referenced in the style.css file. This is how the browser is told how to format (present) the contents on the pages/posts.

WordPress Theme Hierarchy

WordPress uses a hierarchy system to decide which of the theme files to use when presenting a page or post to your visitors. If a specific template is not found for the page/post it defaults to the index.php template.

  • Home Page

    Looks for a template named home.php first.

  • Post

    As already explained, a post (article) uses the single.php file.

  • Page

    First WordPress looks for a template with the specific page name. If not found it uses the page.php template.

  • Category

    A specific category can have it’s own template. WordPress looks for a template with it’s id (category number) attached to the name.

    In instances where a specific category template is not available, WordPress will use the categpry.php template. If there is no category.php it will use the archive.php file.

  • Serch Results

    When someone uses your search form the results are displayed using the search.php template.

  • 404

    We already explained this one. WordPress uses the 404.php template when a page is not found.

There are other templates that can be used within your WordPress theme also. The above are the basic ones and how WordPress decides which one to use. As already mentioned, if WordPress cannot find a specific template for the page/post it wants to display it will use the index.php template.

WordPress Theme Basics

Within your theme there may be more files than what we have covered here. This was just a rundown on the basics a WordPress theme would have and how the basic theme files and templates are used.

When you decide on a theme for your WordPress site have a look at what files are contained in the theme folder. The easiest way to get a better picture of what is included in your theme is to download it to your computer from the source or from your WordPress installation on the web server via a FTP client/software.

Familiarize yourself with the WordPress theme your blog/site will be using. Particularly the style.css file for any typical styles used over and over again. e.g. a style to center some content. Using the provided styles instead of using the WordPress HTML editor as a word processor will save yourself some work and maintenance time. Using or creating custom styles in the stylesheet provided provides one spot to make site wide changes instead of changing each post/page you have created.

What's next?: Get Updates via RSS | Read our latest posts or share on your favourite social network:

One Response to “ WordPress Theme Basics Explained ”

  1. David says:

    Well, I must say that was rather refreshing. It’s not very often that I come across a site this incredibly helpful, factual, and about as correct as I have had the pleasure of finding!

    Thanks so much for this informative site! I will print this page out just to keep it handy. I often come across situations working with WordPress where this will really come in handy!

    I am a novice so far, however, I am constantly reading and working online to better my skills.

    Again, I thank you! I’m David, I’ve been working and studying online for just over one year, completely self taught, at 56 with no prior computer experience its been an adventure!

    I just need to learn some more html. I don’t have to, but it is an essential if your working with websites and you don’t want to be at the mercy of others.

    Thanks!
    David

Have some thoughts on this article? We would like to hear them. Use the form below.