3 Steps to Create a WordPress Theme

To make a current website design work with WordPress is quite easy. Of course, the basic knowledge of CSS, HTML and PHP are required. This post can help you to integrate an existing site with WordPress or just create a new theme specially for WordPress.

Step One: Design your Site

First of all, you should begin with creating a site. You can do it in doctype you like. XHTML 1.0 Strict – Transitional is advisable. Code everything including banners, headers, colors and CSS file as you are creating a static page. When finish, validate your markup and CSS files created.

It is really important to validate at this stage to save your time on problem fixing in the future. It is also required to comment a lot when you are coding, especially in the XHTML file. All we know that there is nothing pleasant in a bunch of <div> tags at the beginning as well as at the end and between – when you just don’t know which <div> tags closes what.

Here is the example of the finished code (without content) that has comments indicating what <div> closes what section:
<div id=”wrapper”>

<!– closing header div –>
<div id=”content”>

<!– closing sidebar div –>

<!– closing main div –>

</div>
<!– closing content div –>

<!– closing footer div –>

</div>
<!– closing wrapper div –>

Why do we need this file with site coding? Thus, you can be sure that all sections in the right place, you can check for more errors to fix now. As we have already mentioned above, an improperly closed <div> tag can throw the layout off. Such errors are very difficult to find and fix when you break the base template apart for WordPressing.

So, the main template is done and we can WordPress it.

Step Two: Split Apart the Template

The next step is splitting the template apart into 4 parts: header.php, footer.php, index.php and sidebar.php. Here are the definitions of each part:

header.php: generally, this is the very beginning of your template, that contains some static elements such as images, links, menu as well.

sidebar.php: this will be, of course, the sidebar.

index.php: the “meat” of the site – this is where most of the good stuff goes. It also generally only contains the main content area of your site.

footer.php: the end.

The parts can be compared with puzzle which WordPress put together. Each file has its own place and creates a site. This is rather useful. For example, you have a site that consists of 100 pages. The site’s template looks exactly the same for every page. If you need to add a link to the sidebar or for instance, change the text in the header, you have to go through every single file – and we have 100 of them – in order to make the same changes. While such structure allows you to change one file only and it will make the change site-wide. Thus, if you need to change header test, you should change it once in the header.php file and all 100 pages will reflect the change. Need to add link to sidebar? Just add it in sidebar.php file. Seems to be quite simple.

Now with the help of example layout presented above, we will show an example of breaking the site apart into these sections:

header.php:

<div id=”wrapper”>

<!– closing header div –>
<div id=”content”>

Every page on your WordPress site will start from this code. Then we have sidebar:

sidebar.php:

<div id=”sidebar”>
</div> <!– closing sidebar div –>

And at last footer.php section:

footer.php:

</div> <!– closing content div –>

<div id=”footer”>
</div> <!– closing footer div –>

</div> <!– closing wrapper div –>

</body>

</html>

We skipped index.php so that you learn more about static parts of the site at first. Of course, you can dynamically generate content for each section as well. And now we have index.php section:

index.php:

<?php
get_header();
?>

<?php
get_sidebar();
?>

<div id=”main”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php the_date(”,'<h2>’,'</h2>’); ?>

<div id=”post-<?php the_ID(); ?>”>

<h3>
<a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h3>

<div>
<?php _e(“Filed under:”); ?> <?php the_category(‘,’) ?> —
<?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__(‘Edit This’)); ?>
</div>

<div>

<?php the_content(__(‘(more…)’)); ?>

</div>

<div>

<?php wp_link_pages(); ?>

<?php comments_popup_link(__(‘Comments (0)’), __(‘Comments (1)’), __(‘Comments (%)’)); ?>

</div>

</div> <!–closing .post –>

<?php comments_template(); // Get wp-comments.php template ?>

<?php endwhile; else: ?>

<p>
<?php _e(‘Sorry, no posts matched your criteria.’); ?>
</p>

<?php endif; ?>

<?php posts_nav_link(‘ — ‘, __(‘« Previous Page’), __(‘Next Page »’)); ?>

<?php get_footer(); ?>

</div> <!– closing main div –>

As you have noticed there is more stuff now. Look closer and you see the original code broken with <div> tags into parts:

<?php
get_header();?>

<?php
get_sidebar();
?>

…and at the end…

<?php
get_footer();
?>

WordPress starts to download the site with calling up index file that will refer to header.php, sidebar.php and footer.php. For example,

<?php
get_header();
?>

and displays header of our page in other words, the content of header.php. All other pieces will be put together in the same way to bring the puzzle together.

Step Three: Applying CSS

Now with the template ready you are eager to download it. However, it won’t work. With your files no longer located in the root of your site, the browser can’t pick up your stylesheet. Here is the wordpress tag that you should use as the default:
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” />

On the other hand, this won’t work for other stylesheets you create such as a separate stylesheet for print or within a conditional comment for IE. Here is the alternative way:

<?php bloginfo(‘template_directory’); ?>

It puts in the path to your template directory. Then you need to indicate the necessary file for example, print stylehseet:

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/print.css” media=”print” />

You also should pay attention that WordPress aside from using its tags will also add its own default classes. You just need to open the site in a browser window to view the source code (it is “CTRL” + “U” for Firefox). Look through the source code to find the tags used by WordPress you haven’t coded yourself. For example, WordPress can generate your links in the sidebar like this:

<ul>
<h2>List Title Here</h2>
<li>link 1 here</li>
<li>link 2 here</li>
<li>link 3 here</li>
<li>link 4 here</li>
<li>link 5 here</li>
</ul>

In case you don’t have any styling for <ul> or <li>tags, your sidebar will look strange. And now you can add content at last. For example, you can change index.php as you like or activate navigation panel in sidebar.php:

<div id=”sidebar”>
<?php get_links_list(); ?>
</div>

Now you should make screenshot so that created design was beautifully displayed in the Themes area. Just open your original HTML template in a browser window (hit “Print Screen”), paste the view into any graphics program you like. Resize the image to 300px x225px and save it as “screenshot.png”It is also required to add information about template into CSS file. Open the stylesheet and write in the begging:

/*
Theme Name:
Theme URI:
Description:
Author:
Author URI:
Version:
*/

This is what each line indicates:

Theme Name: The name of your theme.

Theme URI: The URL of the location of the theme. For example: http://www.yoursite.com/wordpress/wp-content/themes/themename

Description: This is shown in the Theme area as the description for the theme, beneath the screenshot.

Author: Your name.

Author URI: Your website address.

Version: Version number. It can be 1.0, 2.0, etc. Some people prefer to use dates.

That is all. You also can validate your markup again to make things perfect.