AfflictionAteHer

Creating a WordPress theme can seem overwhelming to the casual (or even rusty, speaking for myself) web developer.  It requires PHP, for one thing.  And you have to read a few instructions to get started, for another (something I’ve never been keen on doing).  It would have helped me a lot to find some kind of really simple, really straight-forward documentation somewhere about creating my own theme, and that’s the purpose of this series of posts.  Expect edits and updates as I proceed.

Prerequisites

1. Basic understanding of HTML, CSS, and PHP
2. Your own private WordPress installation – preferably something not currently in production use (messing around with your site’s current theme can tick off your user’s – and you’ll want to switch themes often as you work through these steps).Note:  if you don’t have a hosted WordPress installation, let alone a web server or PHP setup on your personal computer, check out MAMP (if you’re a Windows user) or LAMP (if you’re a Mac user).  These are idiot-proof (and free!!) programs that will install Apache (a web server), PHP (a server-side scripting language), and MySQL (a free relational database) for you.  This is the standard setup for a WordPress install.  Then mosey on over to http://www.wordpress.org to get the latest version of WordPress.  Yes, you’ll have to follow the instructions included in the readme.html file – but there are only 2 or 3 of them, and they’re really, really, REALLY easy (they don’t call it the 5 minute install for nothing).
3. Administrative rights to the wp_content/themes directory, as well as to the WordPress installation itself.
4. A text file editor.  If you want WYSIWYG, check out any of the many web development software environments (I use Dreamweaver).  But a text file editor is all that’s required.

Step 1 – Create Your Theme

A theme requires at least 2 documents:  a style sheet called ‘style.css’, and a PHP document called ‘index.php’.  We’re going to create the very simplest version of each:

1. Create a directory under wp_content/themes.  For purposes of this exercise, let’s call it “my_theme” (i.e., wp_content/themes/my_theme).
2. Create a style sheet.  Don’t worry – you don’t have to put a single style in this document.  What we’re going to do in this first step is simply add a commented heading that WordPress will use to get a little information about your theme, so copy the following in to a new text file and save it as “style.css” in your “my_theme” directory:

   /*
   Theme Name: My Theme
   Theme URI: http://mytheme.com
   Description: My first WordPress theme.
   Version: .01
   Author: Me
   Author URI: http://mytheme.com
   Tags: some tags describing my theme go here
   
   	My Theme
   
   http://myurl.com
   
   	This theme was designed and built by Me.
   
   	The CSS, XHTML and design is released under GPL:
   
   http://www.opensource.org/licenses/gpl-license.php
   
   */

3. Create an index page.  This is just a text file, saved in your “my_theme” directory as index.php.  The file needs to contain a hook back in to the main WordPress system, and should also display your posts.  We aren’t going to bother with anything else at all in this step – we’re just getting started.  So paste the following in to your index.php text file, and save it:

   <?php get_header(); //This is the hook back in to WordPress ?>
   
   <?php
   //This is The Loop (read more about it out on
   //http://codex.wordpress.org/The_Loop).
   //It uses have_posts, the_post, and the_content (also known as
   //'Template Tags') to display the posts in your blog.
       if (have_posts()) : while (have_posts()) : the_post();
           the_content();
       endwhile; endif;
   ?>

Step 4 – Switch To And View Your Theme

Let’s pretend like this is a brand-spanking new WordPress installation, and that you decided to call it “My Blog”.  Have you ever visited your site’s Dashboard?  Well, it’s certainly beyond the scope of this post.  We’re just going to focus on switching to your new theme so you can see what we hath wrought…

1. Go to your WordPress Dashboard.  If you’re as shiny-new as we’re assuming, you can get there by logging in to your site and then clicking on the ‘Admin’ link in the ‘Meta’ section of your blog’s sidebar.  Or you can just go out to your blog’s wp-admin URL (i.e., http://www.myblog.com/wp_admin).
2. Click on Design
3. Click on Themes
4. Scroll down and look for the theme you just created.  Click on it.  Activate it by clicking on the “Activate” link in the upper right corner.
5. Click on the ‘Visit Site’ button.
6. Your browser should display the name of your blog and your posts.  Of course, the number of posts will vary depending on how many (if any) you’ve created.

Summary

In summary, creating your own theme can be as simple – or as complex – as you want it to be.  Check back in for Part II in this series of posts.

Popularity: 1%