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):

11. Edit index.php, remove the static content and insert The Loop code, which looks like this:

If there are other files in your theme directory, use

&lt;?php bloginfo('template_url'); ?&gt;/
… eg:

12. In footer.php I might have something like:

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.