WordPress Theme: Part 1

Before we jump right into this – again, I will only be teaching you the very basics. It’s up to you to style your theme yourself from what you pick up from this tutorial.

Log in to your website using FTP. Open your WordPress folder – let’s assume you called it wp – and go to wp-content > themes. This folder is where all your themes go. You need to make a new folder for every new theme you make. Since we’re making a theme now, we need a new folder. Let’s call it blocks. Avoid using spaces.

We’re going to start by opening a new document in Notepad. I’m going to give you the skeleton coding of one webpage – index.php. Copy all of the content below into your blank document. We’ll be coding in XHTML 1.0 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<title><?php wp_title('separator', true, 'right'); ?> <?php bloginfo('name'); ?></title>
     <?php wp_head(); ?>
   </head>
     <body>
        <div id="container">
          <?php get_sidebar(); ?>
           <div id="content">
           </div>
           <div id="footer">
           </div>
        </div>
     <?php wp_footer(); ?>
     </body>
</html>

You should already know the basic structure to HTML. There is not much you need to touch here in terms of code, however, if you have your own keywords and other metadata, including a favicon, you should place them somewhere in between the <head> and </head> tags.

Your whole layout will go in the container div. If you are confident with code you can dabble with this and edit it how you like, but if you’re a beginner I would not recommend it. Also note that your posts and all your content will go in the content div.

Here are a few terms explained:
<?php wp_head(); ?> and <?php wp_footer(); ?> are action hooks which are needed for some plugins – basically, ignore them. Don’t touch them.
<?php bloginfo('stylesheet_url'); ?> calls for your stylesheet, which we’ll be making later.
<?php get_sidebar(); ?> calls for your sidebar, which we’ll be making later too.
<?php bloginfo('name'); ?> the name of your website/blog, as specified in your Dashboard settings.
<?php bloginfo('rss2_url'); ?> calls for your RSS feed. Usually at yoursite.com/wp/feed.
<?php bloginfo('atom_url'); ?> calls for your atom feed URL.
<?php bloginfo('pingback_url'); ?> calls for your pingback URL.

The PHP code that is set as the title will return the title of the page, along with a separator, and the title of your website. As you can see, my website returns the title; my separator, which is the | symbol, and then my website’s name, Hey Georgie.

If I wanted to change this to read Hey Georgie – Making a WordPress Theme, Part 1, I would have to do several things:

Straightforward enough? Nice job. Save your file as index.php and let’s move on to the next part!