Fundamentals of a WordPress Theme Development Part-1

WordPress uses themes to control the look and presentation of your site. You can quickly change themes and change the entire look of your site, while still maintaining the underlying WordPress software that powers your site.

WordPress themes are kind of like how a new outfit can give you an entirely new look. But themes go even deeper than just the design. They control the layout and functionality of your site as well. You can create different layouts for different types of content with a theme.

It’s part of what makes WordPress so powerful. You can change the entire look of your site without ever changing the content or backend structure. A few clicks of the mouse and you can add a new theme and have an entirely new look. It can make updating your site and keeping things current a much quicker and simpler process. Instead of rebuilding a house from the ground up, you’re just replacing the siding, so to speak.

Themes come in all types and varieties, including free and premium themes. You can also customize a theme to make it your own.

Anatomy of a WordPress Theme

Theme File Structure

The basic file structure of a WordPress theme:

  1. style.css – The stylesheet contains all the formatting and styles of the theme
  2. index.php – This is the main WordPress theme file that ties all the other files together
  3. header.php – Holds all the header information and beginning of the WordPress theme
  4. sidebar.php – It has all the code for the sidebar
  5. footer.php – Holds the footer code

Other files that you will also find in a WordPress theme are:

  1. single.php – A single blog post code
  2. comments.php – Control the behavior of the blog comments
  3. page.php – Controls the behavior of your individual pages
  4. search.php – Add search capability to your WordPress theme
  5. searchform.php – Controls the way the search box behaves
  6. 404.php – Customize the landing page if your readers get an 404 error
  7. functions.php – Working with customized function
  8. archives.php – How to display the archive results

A theme can completely transform your WordPress site, by changing graphics, showing or removing features, adding extra functionality or simply by rearranging the page.

If you understand HTML, then most themes are fairly simple to understand. In this series we’ll review some theme basics that we’ll need to use to build our theme in the following series.

Layout of a WordPress Theme

The basic layout of a WordPress theme

How a Theme Works

A WordPress theme is a set of PHP files, images and CSS, bundled up in a directory. The PHP files are mostly HTML and structured so that when stitched together they create a single HTML document.

So for example if you grabbed the header.php, index.php, sidebar.php and footer.php and switched their code together into one file, you’d get a single HTML page with some little bits of PHP code here and there. Separate files are called in using special statements called includes. For common items like the sidebar, footer and header, they look like this:

<?php get_sidebar(); ?>

So to stitch a file together, you would get the main file – index.php – and then wherever there is an include line like the one shown above, you would swap in the contents of the included file, for example sidebar.php. We’ll look more at includes later.

<?php wp_list_categories(); ?>

WordPress would substitute the code for an unordered list <ul> of categories before displaying the page. These commands are called Template Tags. You can find lists of Template Tags in the WordPress Codex along with their syntax and usage details.

Getting Ready

We are now getting ready to develop our first WordPress Theme. Before start, let’s check some task that’s are necessary.

Now that we’ve configured our site and created some content, it’s time to make it look good! First we’ll create a basic custom theme, starting with a standard HTML and CSS file. I’ll walk you through the various WordPress template files you can use to make parts of your site look different based on context.

Theme Files

As I mentioned earlier, there are many other theme files you can use to customize various portions of your site. Let’s take a look on WordPress Theme files table.

Required Optional Includes Optional Archives and Pages
404.php
archive.php
author.php
author-id.php
author-nickname.php
category.php
category-id.php
category-slug.php
comments.php
comments-popup.php
date.php
footer.php
functions.php
header.php
home.php
index.php
links.php
page.php
page-id.php
page-name.php
screenshot.png
search.php
searchform.php
sidebar.php
sidebar-name.php
single.php
single-content-type.php
style.css
tag.php
tag-slug.php
taxonomy.php
taxonomy-name.php
taxonomy-name-term.php

In all of the cases above, index.php serves as the fallback. If a more specific template is not present, index.php will be used. See WordPress Template Hierarchy for more information about the theme file hierarchy.

The common files of a WordPress theme

Getting Started

In the folder containing your WordPress installation, go to /wp-content/themes/ and create a folder named “w3programmers”. This is our theme directory where we will hold all of our files during this tutorial. Now create the following files and folders:

(Step-1) style.css

The style.css will contain all of the elements that style our theme. We’ll use it to specify the name of our theme as well as the author of theme and his URL, and description, version and tags. Now remember when creating a WordPress theme, the style.css is containing all the styles and working towards index.php file. The index.php file is mandatory for WordPress theme that we’ve seen above table.

Now we’re going to create our first WordPress theme. Open your code editor and paste the following codes at the top of style.css

/*
Theme Name: W3Programmers
Theme URI: http://www.w3programmers.com/
Description: A clean theme completely compatible with WordPress 3.0
Author: m.h.mithu
Author URI: http://mithu.info/
Version: 1.0
Tags: 2 column, content, 1 sidebar, widget ready
*/

All of this information can be changed at anytime, but it is important that, all contained within the comments so that it doesn’t affect any of other files and main styles. When you activating the theme from WordPress back-end, all the information showing there given by you in style.css file.

Just copy the above code and paste into style.css. And if you want to check the theme name into back-end Appearance > Themes, you’ve to create a empty index.php file in that directory. We’ll coding with this index.php file later.

Now goto Appearance > Themes from Admin area. You’ll see the theme name is appearing here with other info.

Now we’ll edit index.php file to show our first output. Open index.php file in text editor. It is completely empty file. We’ll add some code here to show only the post title.

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <?php the_title(); ?>
    <?php endwhile;?>
<?php endif; ?>

This loop is used to display all published post. Whether there are any posts available in the loop, in the 1st line have_posts() function return bool True if published posts are available. If there any post available, then in the 2nd line loop will start and the_post() function will query form database and iterate the post index. And in 3rd line the_title() function will grab the post title.

Now output will show like the image bellow. "Hello world!" is our first published post title and it was published by default during installation.

In the next part, we’ll create some basic definitions and layout structure, that we’ll implement in theme’s php files.

Hi, I’m Mirazul Hossain Mithu. A PHP philanderer by passion along with WordPress. Dreaming to join WordCamp. Loving Open Source and also like to play with Linux Tux. Now living only with PHP to achieve a most desired dream.
Print Friendly
2 comments on “Fundamentals of a WordPress Theme Development Part-1
  1. nice tutorial. want a complete series of the wordpress theme development tutorial from u. (theme of blog and e-commerce theme)

Leave a Reply

Your email address will not be published. Required fields are marked *

*