Posted on
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):
<!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>
11. Edit index.php, remove the static content and insert The Loop code, which looks like this:
<?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(); ?>
If there are other files in your theme directory, use
<?php bloginfo('template_url'); ?>/
… eg:
<link href="<?php bloginfo("template_url"); ?>/webfonts/bauhaus.css" rel="stylesheet" type="text/css" />
12. In footer.php I might have something like:
<footer>
© <?php echo date('Y').' '; bloginfo('name'); ?>
</footer>
</div><!--Wrap-->
<?php wp_footer(); ?>
</body>
</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.