WordPress Theme Development Quick Start

David Nash css, html, php, wordpress Leave a Comment

I’ve created plenty of WordPress themes based on designs from clients. This is the process I usually follow.

1. Create a static HTML and CSS template. I create index.html and style.css.

2. Install WordPress

3. In the WordPress folder wp-content/themes/ I create a folder with the name of my new theme.

4. Copy my static HTML to the new theme folder.

5. Modify style.css, add the WordPress stylesheet header:

/*
Theme Name: THEME_NAME
Theme URI: YOUR_WEBSITE
Description: THEME_DESC
Version: 0.1
Author: YOUR_NAME
*/

6. Rename index.html to index.php. Open index.php and replace the reference to style.css with < ?php bloginfo( 'stylesheet_url' ); ?>

7. In wp-admin, go to Appearance -> Themes and select my new theme. It will still be completely static but this is the starting point for the real WordPress theme development.

8. Create the file header.php ; move the header stuff from index.php into this file. For me this is generally from first line (the DOCTYPE) down to the start of the main content area. In index.php I insert <?php get_header(); ?> to load the contents of header.php.

9. Similarly I create footer.php and sidebar.php and then move the lines from index.php into those files, and replace with <?php get_footer(); ?> and <?php get_sidebar(); ?> respectively.

10. Edit header.php, so that it looks something like this (this is HTML5):
[html] <!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo(‘charset’); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( ‘name’ ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo( ‘stylesheet_url’ ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( ‘pingback_url’ ); ?>" />
<?php wp_enqueue_script(‘jquery’); //only use if you need jquery?>
<?php wp_head(); //this does a lot of stuff ?>

<!–[if IE]>
<link rel="stylesheet" href="<?php bloginfo(‘template_url’); ?>/style-ie.css" type="text/css"></link>
<![endif]–>
</head>
<body <?php body_class(); ?>>
<div id="Main">
<header>
<div id="Holder">
<h1><a href="<?php bloginfo(‘url’); ?>"><?php bloginfo(‘name’); ?></a></h1>
<h2><?php bloginfo(‘description’); ?></h2>
</div>
<nav>
<?php wp_page_menu(); ?>
</nav>
<div class="clear"></div>
</header>
[/html]

11. Edit index.php, remove the static content and insert The Loop code, which looks like this:
[html] <?php get_header(); ?>
<div id="Content">
<?php
//The Loop
if( have_posts() ) : while( have_posts() ) : the_post();
echo ‘<h1>’.get_the_title().'</h1>’;
the_content();
endwhile; endif; //end the loop
?>
</div><!–Content–>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/html]

If there are other files in your theme directory, use

&lt;?php bloginfo('template_url'); ?&gt;/
… eg:
[html]<link href="<?php bloginfo("template_url"); ?>/webfonts/bauhaus.css" rel="stylesheet" type="text/css" />
[/html]

12. In footer.php I might have something like:
[html] <footer>
&copy; <?php echo date(‘Y’).’ ‘; bloginfo(‘name’); ?>
</footer>
</div><!–Wrap–>
<?php wp_footer(); ?>
</body>
</html>
[/html]

At this point we should see our theme loading content dynamically from WordPress. But this is just the start…

See the WordPress Template Checklist for a more thorough guide to everything you might need.

Leave a Reply

Your email address will not be published. Required fields are marked *