Creating a basic WordPress theme

2 files are needed for WordPress to recognise a theme:

  • a CCS stylesheet “style.css” (containing information to appear in the theme selection page in a CSS comment block)
  • a PHP file to deal with displaying posts “index.php”

With these 2 files in place the theme will appear on the theme page (under Appearance on the left bar of the admin pages, select Theme) and can be activated.

From your WordPress install directory go to the directory “wp-content/themes”. Create a directory in there called something like “themetutorial” and create 2 text files and copy and paste the following code in.

File index.php:


<?php
get_header(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> by <?php the_author() ?> </small>
<div>
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p>
Tags: <?php the_tags('Tags: ', ', '); ?>
<br />
In category <?php the_category(', ') ?>
<br />
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>
<br />
<?php edit_post_link('Edit', ''); ?>
</p>
</div>
<?php endwhile; ?>
<div>
<div><?php next_posts_link('&laquo; Older Entries') ?></div>
<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php else : ?>
<h2>Search returned no results</h2>
<p>Maybe try searching again?</p>
<?php get_search_form(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

File style.ccs:


/*
Theme Name: Theme Tutorial by James Wilkes
Theme URI: /
Description: James Wilkes Design theme
Version: 0.1
Author: James Wilkes
Author URI: /
Tags: cool
*/

OK, it looks hideous. I just wanted to show how minimal a theme could be and what a page without any CSS would look like. You can search and display pages and single articles using this theme. It does pretty much everything a blog should. It won’t display widgets yet, we’ll do that in a moment.

A Little Bit of Style

Add this code to the file “style.css”. Copy and paste it after all the other code in the file.

Add to end of file style.ccs:


body {
background-color: #eee;
}
DIV#page {
margin-left: auto;
margin-right: auto;
width: 800px;
background-color: white;
border: 1px solid grey;
}
DIV#header {
background-color: #333;
color: white;
padding: 12px;
}
DIV#header a {
color: white;
}
h1, h2, h3 {
margin: 0px;
}
hr {
display: none;
}
DIV#content {
padding: 12px;
width: 510px;
float: left;
}
DIV#sidebar {
width: 250px;
float: left;
border: 1px solid grey;
margin-top: 12px;
margin-bottom: 12px;
}
DIV#footer {
background-color: #333;
color: white;
padding: 12px;
clear: both;
}
DIV#footer a {
color: white;
}
DIV#topbar {
border-bottom: 1px solid grey;
}
DIV#topbar h2 {
display: none;
}
DIV#topbar ul {
padding-left: 6px;
margin-left: 0px;
display: inline;
list-style-type: none;
white-space: nowrap;
}
DIV#topbar ul li {
display: inline;
padding-right: 6px;
}
DIV#sidebar ul {
list-style-type: none;
padding-left: 12px;
}

Ah, that’s better!

And Some Customizable Functionality

Currently the theme does not support widgets and the items appearing on the right hand bar can’t be altered easily.

Widgets are wonderful in WordPress. You can drag and drop widgets, such as the calendar and the search box) around and customize how they appear on the screen.

We’ll make 2 bars for the widgets to go in. We’ll have a fairly standard bar on the right hand side and a bar across the top of the page (I like to put the links bar up there. Create new files called “functons.php” (which registers the widget areas so they’ll appear on the admin page under “Appearance”, “Widgets”) and “sidebar.php” and copy the following code into them.

New file: sidebar.php


<div id="sidebar">
<ul>
<?php dynamic_sidebar('right_widget_bar'); ?>
</ul>
</div>

New file: functions.php


<?php
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'top_widget_bar',
'before_title' => '<h2>',
'after_title' => '</h2>'));
register_sidebar(array(
'name' => 'right_widget_bar',
'before_title' => '<h2>',
'after_title' => '</h2>'));
}
?>

At the top of “index.php”, in between the line “get_header(); ?>” and the line “<div id=”content”>” add these lines:


<div id="topbar">
<ul>
<?php dynamic_sidebar('top_widget_bar'); ?>
</ul>
</div>

And there you go. A simple WordPress theme all of your own. I’d recommend adding files “header.php” and “footer.php” to replace the default.

You can customize the appearance of search results, single post views and pages by adding pages called “search.php”, “single.php” and “page.php”. Copy the “index.php” as a start. And good luck!

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Leave a Comment