The following post was extracted from a presentation I gave at the Santa Cruz Web Developers Meetup

From HTML Site to Custom Wordpress Theme

In this brief tutorial, we will go over how to go from a handcoded html site to a wordpress theme. Assuming we have done all styling, we are taking html and adding PHP code to either do stuff or show wordpress-managed data to us.

  1. Custom Theming

2.1 Metadata in styles.css

2.2 Styles in styles.css

2.3 Index Page in index.php

2.4 Header Template in header.php

2.5 List Posts in loop.php

2.6 Footer Template in footer.php

2.7 Single Post in loop-single.php

3.Snippets

Custom Theming

Copy

WordPress/wp-content/themes/twentyten

And Rename

WordPress/wp-content/themes/guitar_zen

Metadata in style.css

/*
Theme Name: Guitar Zen
Theme URI:
Description: Guitar Zen theme
Author: Topher
Author URI: http://wordpress.org/
Version: 0.1
License: MIT
License URI:
Tags:
Text Domain: guitar_zen
*/

Styles in style.css

Copy the content from our style.css

Index Page in index.php

it puts together the home page when no home.php file exists.

http://codex.wordpress.org/Template_Hierarchy

replace WP10 theme's div's with our main

The functions on this page are:

  • get_header()
  • get_template_part( 'loop', 'index' )
  • get_sidebar()
  • get_footer()

Header Template in header.php

Leave in everything inside <head></head>

<body <?php body_class(); ?>> - a body tag that lets WordPress decide the class attribute.

inside <body></body> tags

<?php echo get_header_image() ?> - gives header image decided by WordPress

<?php echo home_url(); ?> - hold directory decided by WordPress

List Posts in loop.php

http://codex.wordpress.org/TheLoop http://codex.wordpress.org/TemplateTags

Run the loop to output the posts. - index.php

<?php while ( have_posts() ) : the_post(); ?>

Trust wordpress when you're in this block and you can use these functions -

  • get_post_permalink()
  • get_the_time( 'F j, Y', $post )
  • get_the_title()

<?php endwhile; // End the loop. Whew. ?>

Footer Template in footer.php

add our Javascripts

<script src="<?php bloginfo('template_url'); ?>/js/main.js"></script>

Single Post in loop-single.php

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php echo get_the_time( 'F j, Y', $post ); ?>

<?php echo get_the_title(); ?>

<?php echo the_content(); ?>

<?php endwhile; // end of the loop. ?>

Clear out sidebar.php & sidebar-footer.php

photos taken using git difftool HEAD^ style.css and filemerge