Create WordPress Theme Template

posted: category: web-design


Create WordPress Theme Template

Creating a WordPress Theme Template

Over the past couple of weeks, I have begun learning how to create a WordPress theme. As I make progress on my first theme, I will continue to add these posts, covering what I have learnt. The purpose of this is to help others going through the same process. In the first two postings, I covered how to setup a work environment and what files are initially needed to begin creating a WordPress theme. With this post, I will explain what is included in the template files.

As mentioned in the last post, a WordPress theme requires a stylesheet named style.css and a template PHP file called index. That is the bare minimum and I have broken the index file down into several additional template files written in PHP, header, sidebar, and footer. In addition to these files, I have also created a PHP file called functions that will contain all of the individual PHP functions used in this theme.

The Index Template

First, let us take a look at the index.php file. Here is the source code used:

<?php get_header(); ?> <div id="main"> <div id="content"> <h1>Main Area</h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php // check if the post has a Post Thumbnail assigned to it. if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <h4>Posted on <?php the_time('F jS, Y') ?></h4> <p><?php the_content(__('(more...)')); ?></p> <hr> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> </div> <?php get_sidebar(); ?> </div> <div id="delimiter"> </div> <?php get_footer(); ?>

Right off the bat, you will notice that I use PHP to grab the header template

<?php get_header(); ?>. At the bottom of the template, the footer template is referenced with <?php get_footer(); ?>. A little further up the page, the sidebar template is used with <?php get_sidebar(); ?>. That covers the overall template. The index file first grabs the header, adds the content, the sidebar, and then the footer.

grow your small business

learn more about the creation of a business blog


Basically, this entire template is built using HTML, with CSS specified in the stylesheet. Whenever I need to grab information from the WordPress database (pages, posts, titles, categories, etc.), PHP is used. PHP code always started with

<? and ends with ?>. I find this pretty straight forward, a lot less confusing than I originally thought this would be.

In addition to building the template with the index file, the index file also grabs information from the WordPress database to display posts and pages. You can consider the index file as containing the main content and structure of your WordPress pages and posts. In order to display information from the WordPress database, a PHP loop is needed. The loop starts with

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> and ends with <?php endwhile; else: ?>. Inside of this loop, I use <?php the_content(__('(more...)')); ?> to display the content of the pages or posts. Additional PHP is used to grab titles and other information. Again, this is some very basic PHP coding and HTML structure for creating an incredibly stripped down WordPress theme. Once this structure is put in place, styling can performed and additional information can be grabbed from the WordPress database.

The Header Template

At the very beginning of the index template, the header information is referenced from the header template. Here is the source code:

<!DOCTYPE html> <html> <head> <title><?php if ( is_single() ) { single_post_title(); } elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); } elseif ( is_page() ) { single_post_title(''); } elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); } elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; } else { bloginfo('name'); wp_title('|'); get_page_number(); } ?></title> <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="wrapper" class="hfeed"> <div id="header"> <h1 id="blog-description"><?php bloginfo( 'description' ) ?></h1> </div> <div class="access"> <?php wp_nav_menu(); ?> </div>

This includes meta information, links to stylesheets, and anything else that you want to include inside the

<head> tags. After the <head> tags, the <body> of the HTML page is started, followed by the header and navigation menu. Right now, my header only contains the description of my WordPress site, using <?php bloginfo( 'description' ) ?>. The primary navigation menu is wrapped in <div> tags with the class access, as in:

<div class="access"> <?php wp_nav_menu(); ?> </div>

Additional meta information and a more detailed header can be built into the header template file. If you think the header template looks pretty bare right now, wait till you look at the footer template. The footer template, as I have it right now includes the following code, with no PHP references:

<div id="footer"> <h1>FOOTER</h1> </div> </div> </body> </html>

Again, the footer can contain whatever information from the WordPress database that you would like to automatically include in the footer of every page.

The Sidebar Template

As of the writing of this post, my sidebar template automatically includes a category and archive widget. I have not set this as optional and it is automatically included on every page and post:

<div id="sidebar"> <h2 ><?php _e('Categories'); ?></h2> <ul > <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> </ul> <h2 ><?php _e('Archives'); ?></h2> <ul > <?php wp_get_archives('type=monthly'); ?> </ul> </div>

That covers the template files used so far. The style sheet, which already contains the base information needed by WordPress to recognize the theme, will also include some basic CSS to begin styling the look of the site. That is my next step. With this very basic template and HTML structure in place, I will begin styling the site, before learning how to include various WordPress functions, which will be placed in the PHP functions file.

With the included code, you have what is needed to display the test data with a basic WordPress theme. By the time I create my next posting, I will have a live preview of how the site looks so far, with additional styling. Join me next time for a more in depth look at WordPress functions and how they can be included in a template to add widgets and additional options.

comments powered by Disqus

About the Author

Jeff K.

Jeff K.

Jeff is a web designer and graphic artist. In addition to web design, Jeff enjoys other forms of art, including pencil sketching and illustration.

If you are looking for affordable web design services for your business, Cloudy Mouse provides timely personalized service. Our focus is creating great looking responsive website designs for small businesses without breaking their bank.

Take a look at our Web Design Services and discover how we can get your business into the cloud.