Create a Simple WordPress theme

Creating a simple theme is about a 20 minute job if you know what you are doing. Styling the theme and customizing it is a whole other story though.

The key files you need in a WP theme are.

  • index.php
  • header.php
  • footer.php
  • sidebar.php
  • 404.php
  • functions.php

The index.php file is your core for content. It will generate the same style for all archives and categories.

<?php get_header() ?>

<div id="container">
<div id="content">

<div id="nav-above" class="navigation">
<div><p><?php posts_nav_link('&#8734;','&laquo;&laquo; Go Forward
In Time','Go Back in Time &raquo;&raquo;'); ?></p></div>
</div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>

<div class="entry-content">
<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>

<div class="entry-meta">
</div>
</div><!-- .post -->

<?php comments_template() ?>
<div id="nav-below" class="navigation">

<div><p><?php posts_nav_link('&#8734;','&laquo;&laquo; Go Forward
In Time','Go Back in Time &raquo;&raquo;'); ?></p></div>
</div>
</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar() ?>
<?php get_footer() ?>

This file contains the theme loop to pull in content, meta data and comments.

The next file we will look at is the header.php


<!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">
<head>
<title><?php if ( is_home() ) { ?><? bloginfo('name'); ?>&nbsp;<?php bloginfo('description'); } else { wp_title('&nbsp;'); ?>&nbsp;by&nbsp;<? bloginfo('name'); } ?></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<link rel="shorcut icon" type="image/x-ico" href="<?php bloginfo('template_url'); ?>/favicon.ico" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<?php wp_head(); ?>
</head>

<body>

<!-- wrapper -->
<div id="wrapper">

This file contains your general header info. One thing that makes a difference is using PHP to pull in external info and the wp_head. Make sure to include this

<?php wp_head(); ?>

The footer file is pretty simple it is called footer.php. It does have one catch like the header though wp_footer.

</pre>
<div id="footer">
<span id="theme-link"><a href="http://teachmewordpress.com/">Teachmewordpress.com</a></span>
</div><!-- #footer -->

</div><!-- #wrapper -->

<?php wp_footer() ?>

</body>
</html>

The next file is the sidebar.php. This file is used for WordPress widgets and as an include for the sidebar.

</pre>
<div id="sidebar">
<h2 class="sidebartitle"><?php _e('Categories'); ?></h2>
<ul class="list-cat">
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>

<h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
<ul class="list-archives">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

This sidebar.php is set to show categories and archives is no widgets are selected. Once you add widgets it will change and only show the ones selected.

</pre>
<div id="primary" class="sidebar">
<ul class="xoxo">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : // begin primary sidebar widgets ?>

<li id="categories">
<h3><?php _e( 'Categories') ?></h3>
<ul>
<?php wp_list_categories('title_li=&show_count=0&hierarchical=1') ?>

</ul>
</li>
<li id="archives">
<h3><?php _e( 'Archives') ?></h3>
<ul>
<?php wp_get_archives('type=monthly') ?>

</ul>
</li>
<?php endif; // end primary sidebar widgets ?>
</ul>
</div><!-- #primary .sidebar -->

The 404.php page is to show pages not found or bad URL’s within the WordPress site. If can be customized to show any message and archives, categories etc..

</pre>
<?php get_header() ?>
<div id="container">
<div id="content">
<div id="post-0" class="post error404 not-found">
<h2 class="entry-title"><?php _e( 'Not Found') ?></h2>
<div class="entry-content">
<p><?php _e( 'Sorry, we were unable to find what you were looking for. Try searching for something else.') ?></p>
</div>
<form id="searchform-404" class="blog-search" method="get" action="<?php bloginfo('url') ?>">
<div>
<input id="s-404" name="s" class="text" type="text" value="<?php the_search_query() ?>" size="40" />
<input class="button" type="submit" value="<?php _e( 'Find') ?>" />
</div>
</form>
</div><!-- .post -->

</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar() ?>
<?php get_footer() ?>

When making the functions.php you don’t have to use all the functions. There are many hacks and upgrades you can achieve but here is a small functions file to help start you off.

</pre>
<?php

/*******************************
MENUS SUPPORT
********************************/
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array(
'primary' => __( 'Primary' ),
'secondary-menu' => __( 'Secondary Menu' ),
'tertiary-menu' => __( 'Tertiary Menu' ),
'home-left-menu' => __( 'Home left Menu' ),
'home-middle-menu' => __( 'Home Middle Menu' ),
'home-right-menu' => __( 'Home Right Menu' )
)
);
}

/*******************************
THUMBNAIL SUPPORT
********************************/

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 300, 240, true );

/* Get the thumb original image full url */

function get_thumb_urlfull ($postID) {
$image_id = get_post_thumbnail_id($post);
$image_url = wp_get_attachment_image_src($image_id,'large');
$image_url = $image_url[0];
return $image_url;
}
function mytheme_setup() {
add_image_size('featured-thumbnail',300,350, true);
add_image_size('x-large',800,800, false);
}
add_action( 'after_setup_theme', 'mytheme_setup' );

/*******************************
EXCERPT LENGTH ADJUST
********************************/

function home_excerpt_length($length) {
return 30;
}
add_filter('excerpt_length', 'home_excerpt_length');
/*******************************
WIDGETS AREAS
********************************/

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'sidebar',
'before_widget' => '<div class="rightBox">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

register_sidebar(array(
'name' => 'footer',
'before_widget' => '<div class="boxFooter">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array(
'name' => 'home',
'before_widget' => '<div id="homeside" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));

/*******************************
CUSTOM COMMENTS
********************************/

function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class('clearfix'); ?> id="li-comment-<?php comment_ID() ?>">
<div class="gravatar">
<?php echo get_avatar($comment,$size='50',$default='http://www.gravatar.com/avatar/61a58ec1c1fba116f8424035089b7c71?s=32&d=&r=G' ); ?>
<div class="gravatar_mask"></div>
</div>
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-meta commentmetadata clearfix">
<?php printf(__('<strong>%s</strong>'), get_comment_author_link()) ?><?php edit_comment_link(__('(Edit)'),' ','') ?> <span><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?>
</span>
</div>

<div class="text">
<?php comment_text() ?>
</div>

<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>

<div class="reply">
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
</div>
<?php }

This is enough to get you started and hopefully gives you a better idea of the WordPress theme structure. I will be making more in depth tutorials soon to show how to customize and expand this theme.
Feel free to ask any questions or let me know problems.

Leave a Reply