How to Create WordPress Theme from HTML
Wednesday, June 3rd, 2009How do I create my own wordpress theme? Follow the steps below:
1. Download wordpress from here: http://wordpress.org/download/
2. Inside the download, open wp-content/themes. There are two themes included with the download: classic and default
3. Duplicate the classic theme and rename it. I have called mine NEWTHEME
Meanwhile, open up the HTML that you would like to turn into a theme; mine is on my desktop in a folder called MY SITE:
Rename your MY SITE stylesheet (mine is called default.css, as shown below) “style.css” and paste it into NEWTHEME over the top of the existing style.css file
4. Inside NEWTHEME you have several php files, the key files we will be amending here are header.php, index.php, footer.php and sidebar.php
5.Open these files using a text- or html- editing program. I am using Komodo. We will essentially be pasting our new HTML over the existing HTML, whilst keeping most of the php in place so WordPress can still use it.
First let’s look at header.php:
(In the code that follows, the red code represents old code, green new and blue unchanged)
<?php
/**
* @package WordPress
* @subpackage Classic_Theme
*/
?>
<!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('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<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'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>
<div id="rap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name');
?></a></h1>
<div id="content">
<!-- end header -->
The red bits are the bits I deleted and will be replaced by my new html. The blue bits I left as they were.
My new header.php looks like this: (the green bits are the new bits of HTML I have pasted in place of the old)
<!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('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<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'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>
<div id="wrap">
<h1><span>My Site</span></h1>
<div id="nav-hold">
<ul id="primary-nav">
<li><a href="" title="" class="on">What's New</a></li>
<li><a href="" title="">Bestsellers</a></li>
<li><a href="" title="">Events</a></li>
<li><a href="" title="">Coming Soon</a></li>
<li><a href="" title="">Special Offers</a></li>
<li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Children</a></li>
<li><a href="" title="">Students</a></li>
</ul>
</div>
6. Lets move on to index.php. We will be doing the same thing – pasting over the unwanted HTML with our new HTML. The red color represent the bits of code I will be replacing. The specific HTML changes to make will depend on what your own HTML looks like. I am highlighting my specific changes to demonstrate the sorts of changes you might need to make and the bits of php to avoid deleting.
<?php
/**
* @package WordPress
* @subpackage Classic_Theme
*/
get_header();?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_date('','<h2>','</h2>'); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_tags(__('Tags: '), ', ', ' — '); ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>
<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>
<div class="feedback">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>
</div>
<?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(' — ', __('« Newer Posts'), __('Older Posts »')); ?>
<?php get_footer(); ?>
My new index.php looks like this:
<?php get_header(); ?>
<div id="primary-column">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="text" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title();
></a></h2>
<p class="sub">
<?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_tags(__('Tags: '), ', ', ' — '); ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></p>
<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>
<div class="feedback">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>
</div>
<?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(' — ', __('« Newer Posts'), __('Older Posts »')); ?>
</div>
<?php get_sidebar(); ?>
</div>
<p class="clearboth"></p>
<?php get_footer(); ?>
</body>
</html>
Same again with OLD sidebar.php, red=to be deleted
<?php
/**
* @package WordPress
* @subpackage Classic_Theme
*/
?>
<!-- begin sidebar -->
<div id="menu">
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php wp_list_pages('title_li=' . __('Pages:')); ?>
<?php wp_list_bookmarks('title_after=&title_before='); ?>
<?php wp_list_categories('title_li=' . __('Categories:')); ?>
<li id="search">
<label for="s"><?php _e('Search:'); ?></label>
<form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="<?php _e('Search'); ?>" />
</div>
</form>
</li>
<li id="archives"><?php _e('Archives:'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li id="meta"><?php _e('Meta:'); ?>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>"><abbr title="WordPress">WP</abbr></a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
<!-- end sidebar -->
And NEW sidebar.php, green=new HTML
<?php
/**
* @package WordPress
* @subpackage Classic_Theme
*/
?>
<!-- begin sidebar -->
<div id="secondary-column">
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php wp_list_categories('title_li=' . __('Categories:')); ?>
<li id="search">
<label for="s"><?php _e('Search:'); ?></label>
<form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" class="frm-btn" value="<?php _e('Search'); ?>" />
</div>
</form>
</li>
<li id="archives"><?php _e('Archives:'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li id="meta"><?php _e('Meta:'); ?>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>"><abbr title="WordPress">WP</abbr></a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
<!-- end sidebar -->
OLD footer.php, red=to be deleted:
<?php
/**
* @package WordPress
* @subpackage Classic_Theme
*/
?>
<!-- begin footer -->
</div>
<?php get_sidebar(); ?>
<p class="credit"><!--<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
<cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org/' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform.")); ?></cite></p>
</div>
<?php wp_footer(); ?>
</body>
</html>
NEW footer.php, green= new HTML:
<div id="foot">
<ul class="footlist">
<li class="footis">
<h3>About Us</h3>
<ul>
<li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Etiam quis pede</a></li>
<li><a href="" title="">Donec</a></li>
<li><a href="" title="">Congue mattis it amis</a></li>
<li><a href="" title="">Tellius Imperdiet</a></li>
<li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Etiam quis pede</a></li>
<li><a href="" title="">Donec</a></li>
<li><a href="" title="">Congue mattis</a></li>
<li><a href="" title="">Tellius</a></li>
</ul>
</li>
<li class="footis">
<h3>Products</h3>
<ul><li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Etiam quis pede</a></li>
<li><a href="" title="">Donec</a></li>
<li><a href="" title="">Congue mattis it amis</a></li>
<li><a href="" title="">Tellius Imperdiet</a></li>
<li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Etiam quis pede</a></li>
<li><a href="" title="">Donec</a></li>
<li><a href="" title="">Congue mattis</a></li>
<li><a href="" title="">Tellius</a></li>
</ul>
</li>
<li class="footis">
<h3>Customer Support</h3>
<ul><li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Etiam quis pede</a></li>
<li><a href="" title="">Donec</a></li>
<li><a href="" title="">Lorem Ipsum Etiam quis pede Donec</a></li>
<li><a href="" title="">Congue mattis</a></li>
<li><a href="" title="">Tellius</a></li></ul>
</li>
<li class="footis">
<h3>Competitions</h3>
<ul><li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Etiam quis pede</a></li>
<li><a href="" title="">Donec</a></li>
<li><a href="" title="">Congue mattis</a></li>
<li><a href="" title="">Tellius consecteteur amet sit dolor etiam quis pede</a></li>
<li><a href="" title="">Imperdiet</a></li>
<li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Etiam quis pede</a></li>
<li><a href="" title="">Donec</a></li>
<li><a href="" title="">Congue mattis</a></li>
</ul>
</li>
<li class="footis">
<h3>About Us</h3>
<ul>
<li><a href="" title="">Congue mattis</a></li><li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Etiam quis pede</a></li>
<li><a href="" title="">Donec</a></li>
<li><a href="" title="">Congue mattis</a></li>
<li><a href="" title="">Dolor etiam quis pede</a></li>
<li><a href="" title="">Imperdiet</a></li>
<li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Etiam quis pede</a></li>
<li><a href="" title="">Donec</a></li>
</ul>
</li>
<li class="footis footlastis">
<h3>Your Account</h3>
<ul>
<li><a href="" title="">Lorem Ipsum</a></li>
<li><a href="" title="">Etiam quis pede</a></li>
<li><a href="" title="">Donec</a></li>
<li><a href="" title="">Congue mattis</a></li>
<li><a href="" title="">Tellius</a></li>
<li><a href="" title="">Imperdiet</a></li>
</ul>
</li>
</ul>
</div>
My new footer.php retains no old code. This is because all the dynamic php activity is happening in my other files.
Again the key to remember is that the code you lose and the code you keep will be specific to your own design. You are aiming to paste the structure of your new design around the WordPress structure, so that WordPress can still carry out all the dynamic activities it needs to for the theme to function. In your header.php you will have the header portion of your new design, in your index.php you will have the central portion of your new design, in the sidebar.php you will have your sidebar column portion of your new design and in your footer.php the footer portion of your new design. Remember to pay close attention to the tags that you have opened and those that you have closed so that the HTML structure ends up as intended when the php runs.
Click to download PSD templates, web templates