Understanding WordPress Theme The Basics of Creating Your Own WP Theme

There are a variety of free and premium WordPress themes that you can find throughout the web. You will sometime find that you can spend hours trying to modify the theme, so it is tailored to the way you want it. Sometimes it’s easier to create your own from scratch, and not deal with the headaches that can happen with customization of an existing WordPress theme. This guide will help you to understand the basic of a WordPress theme and how to create a simple theme.

I recommend that before you begin, you familiarize yourself with the WordPress file structure by analyzing as many WordPress themes as you can (Note: You need to have a basic understanding of HTML and CSS.)

Getting Started

Begin you begin coding up the theme, you must understand that the WP theme is just like any other HTML webpage, except that it is coded with PHP. Even so, you don’t need to be a PHP expert to do up a WP theme. My advice is:

1. First get a working pure HTML page up and running (You can easily do this with a WYSIWYG webpage editor).


2. Open the HTML webpage in a text editor and slice it up to different portion (we’ll explain more on that later)


3. Insert in the PHP code

WordPress File Structure

The basic file structure of a WordPress theme is as follows:

1. Style.css – The stylesheet holds 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. Also, if all the files were lumped together, this would be the 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 – This is where you place the code to control the behavior of the blog comments


3. Page.php - Controls the behavior of your individual pages


4. Search.php – This is if you want to 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 – A way to further customize your WordPress theme


8. Archives php – How to display the archive results

A simple layout of the theme



Once you have got your HTML webpage ready, you can begin to slice up using the above layout as a guide.

To begin, you can either use an existing WordPress theme as a starting point (the WordPress default theme is a good one to start with. You don’t have to code it up from scratch, just amend the necessary stuff will do). Or, if you are adventurous, you can just start coding without one.

Main Index Template (index.php)

I suggest that you begin with Index.php because this is the file that ties all of the other WordPress files together. The first step is to call the header file. This is done by adding

<?php get_header(); ?>

The next essential piece of code you should add to the main index file is to tell WordPress how to behave if there are blog posts. This is accomplished by entering

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

You will then enter code on how way the page will be structured. This will vary according to how you want your page to look like. For instance, magazine-type look is going to be different than a blog-type one. After entering your code, you will have to add the following lines that will tell WordPress what will happen if there are no posts:

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

After entering the behavior of the page, you need to call the sidebar and the footer. This is done by adding the following lines of code:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

On the whole, it should look like this:

<?php get_header(); ?> <!--grab the header, part 1 of the layout-->

<?php if (have_posts()) : ?> <!--displaying the main content area,  part 2 of the layout-->

    <?php while (have_posts()) : the_post(); ?>

        Your HTML code here for displaying individual post.

    <?php endwhile; ?>

<?php else : ?>

        Your HTML code here when there is no post available

<?php endif; ?>

<?php get_sidebar(); ?> <!--display the sidebar, part 3 of the layout-->

<?php get_footer(); ?> <!--display the footer, part 4 of the layout-->

Stylesheet (style.css)

The cascading stylesheet includes all the formatting and styles for your WordPress theme. This will provide more flexibility to your theme instead of hardcoding them into each individual file. It is created just like any stylesheet. If you need a refresher, check out the W3 Consortium’s CSS style guide.

Header File (header.php)

The header file is like the beginning of an HTML file. Most of the time, you can just copy and paste from the default theme. The basic code that will be in the header file is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>

</head>

<body>

Sidebar (sidebar.php)

The sidebar is how you want the sidebar to look like. You can have more than one sidebar. However, we are creating a simple WordPress theme, so we will stick with one. People usually like placing widgets on the sidebar, so you should add code to ensure that your WordPress theme supports widgets. You can also have any standard sidebar items that you want without having to use a widget. Sidebar basic are as follows:

<div id="sidebar">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<?php endif; ?>

</div>

The code above will check if the theme supports widget. If yes, it will load all the widget content onto the template. else, nothing will show up on the template.

To widgetize your theme, simply add the following code to your functions.php

<?php  if ( function_exists('register_sidebar') )

    register_sidebar(array(

        'before_widget' => '<li id="%1$s" class="widget %2$s">',

        'after_widget' => '</li>',

        'before_title' => '<h2 class="widgettitle">',

        'after_title' => '</h2>',

    )); ?>

Footer (footer.php)

The footer file will close the WordPress theme. You can place anything you want in the footer. You will usually see the copyright information here. The basic code to create the footer file is:

<div id="footer" role="contentinfo">

        Place whatever footer information you want to place here

</div>

<?php wp_footer(); ?>

</body>

</html>

As I stated before, if you have never created a WordPress theme, but are knowledgeable in CSS and HTML, then check out the structure of existing and various other WordPress themes, and begin creating your own WordPress theme.