How to create a Wordpress Template or Theme

September 21, 2006

Step Two: Making WordPress Recognize Your Theme

Here’s where the fun begins. The first thing you want to do is make your stylesheet “theme ready”. All WordPress requires from you (so that your design can be seen in the Presentation > Themes area) is to give yourself credit in the stylesheet. So open up your stylesheet in a text-editor (no, Microsoft Word is NOT a text editor. I use Notepad.) and at the very top of your stylesheet, simply place this code:

/*
Theme Name:
Theme URI:
Description:
Author:
Author URI:
Version:
*/

Let’s define these variables – what is each line for? Well, when you open up your administration panel, the “Themes” area will recognize the new theme by the stylesheet, and it will create a clickable area for you to use to apply the design to your site. Here’s what each line does:

Theme Name: The name of it, of course! In the “Themes” area, this will be displayed as the link above the screenshot.

Theme URI: The URL of the location of the theme. For example: http://www.yoursite.com/wordpress/wp-content/themes/themename
Description: This is shown in the Theme area as the description for the theme, beneath the screenshot.

Author: Your name, of course.

Author URI: Your website address.

Version: Version number – you can put anything you want. Some people like to start with “1.0″ for the first version of a new theme. Personally, I do dates. For example, my first theme, “Orange Crush” was version 5.242006 – I started creating it on May 24, 2006

The only fields that are really required is the Theme Name and Description. So, once you’ve done this to your stylesheet, save it as “styles.css”, and move on to the next step. (And if you want a screenshot to show up in the Themes area, then open up your original HTML template in a browser window, hit “ALT” + “Print Screen”, then paste the view into your favorite graphics program. Resize the image to 300px x 225px, and save it as “screenshot.png” – there you have it.)

Okay, now we need to split apart the template. You must have your theme split into 4 parts: header.php, footer.php, index.php and sidebar.php. So, to define each of these parts:

Header.php: generally, this is the very beginning of your template, down to the opening section of the body that comes first in your template. Sometimes this is the sidebar, others, it’s the main content area.

Sidebar.php: this will be, of course, the sidebar.

Index.php: the “meat” of the site – this is where most of the good stuff goes. It also generally only houses the main content area of your site.

Footer.php: the end.

What WordPress does, to put it in layman’s terms, is put your site together like a puzzle. Each of these files is a piece of the puzzle, and when it’s put together, it makes a whole. The reason it’s very nice to have it this way is because – well, let’s give an example. Say you have a site that’s 100 pages large. The site’s template looks exactly the same for every page. Now, in a static site, if you added a link to the sidebar, or if you changed the text in the header, you would have to go through every single file – all 100 of them – and change that or add to it so the site still stayed the same throughout. But with this, it’s very nice, because you only have to change one file and it’ll make the change site-wide. In other words, if you want to change your header text, you change it once in the header.php file – and all 100 pages will reflect that change. If you want to add a link to your sidebar, you add it in your sidebar.php file, and all 100 pages will show the new link. Very nice.

Now, using the above example layout we initially created, I will show you an example of breaking the site apart into these sections:

header.php:

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="copyright" content="Copyright 2005" />
  <meta name="author" content="" />
  <meta http-equiv="imagetoolbar" content="no" />
  <meta name="MSSmartTagsPreventParsing" content="true" />
  <link rel="stylesheet" href="global.css" />
</head>

<body>

  <div id="wrapper">

	<div id="header">
	<!-- closing header div -->
	</div>

	<div id="content">

Now, you see, this file will be included in every single page I create using WordPress. All of the pages will begin with the above code.

sidebar.php:

<div id="sidebar">
	  <!-- closing sidebar div -->
	  </div>

Whoa. That's huge

footer.php:

<!-- closing content div -->
	</div>

	<div id="footer">
	<!-- closing footer div -->
	</div>

  <!-- closing wrapper div -->
  </div> 

</body>
</html>

Yes, I know I skipped over the index.php section. But I wanted you to see the main sections which, for the most part, are made static by this separation. Of course, you can now dynamically generate content for each section (and I'll be showing you how in a bit), but for now, we're going to render them as static pages. I saved the best for last, the index.php file.

index.php:

<?php
get_header();
get_sidebar();
?>

	  <div id="main">
	  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	  <?php the_date('','<h2>','</h2>'); ?>

	    <div class="post" id="post-<?php the_ID(); ?>">

	   		<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

			<div class="meta">
			  <?php _e("Filed under:"); ?> <?php the_category(',') ?> —
			  <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?>
			<!-- closing meta div -->
			</div>

		  	<div class="storycontent">
				<?php the_content(__('(more...)')); ?>
			<!-- closing storycontent div-->
			</div>

			<div class="feedback">
			  <?php wp_link_pages(); ?>
			  <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
			<!-- closing feedback div -->
			</div>

	    <!--closing .post -->
	    </div> 

		<?php comments_template(); // Get wp-comments.php template ?>

	  <?php endwhile; else: ?>

	  <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

	  <?php endif; ?>

	  <?php posts_nav_link(' — ', __('« Previous Page'), __('Next Page »')); ?>

	  <?php get_footer(); ?>
	  <!-- closing main div -->
	  </div>

Ahh...now, I know there's a lot of extra stuff in there that wasn't there before. However, if you look, you will still see our original code for the content area at the top and bottom of the code. It's the "meat in the sandwich" that I wanted to bring to your attention.

Let's break it down.

<?php get_header();?>
<?php get_sidebar(); ?>

...and at the end...

<?php get_footer(); ?>

WordPress will call up the index file. It'll see these sections, and refer itself to your header.php, sidebar.php and footer.php. Yes, it's bringing the puzzle together into a whole. The index.php file calls in the other 3 pieces - this is what meshes it all together. Now, all that gobbeldeygook in the index area...

Step Three: the Loop

We will begin with The Loop. The Loop is probably the most important thing you'll need to understand when doing this "Wordpress thing". Now, I've linked to the official article so that you can read up on the technical aspect of it, and see how powerful this little thing is. But I'll give you a bare-bones explanation of what it does: it's what makes your posts do their thing.

This is the basic Loop:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>stuff here<?php endwhile; else: ?><?php endif; ?>

In laymans terms, the above says "If there is a post, and during the entire post, then show the post." What I mean by the part in italics is that the program will "read" the post commands - the meaty part in the middle that tells it what to do. "While" it's "reading" that part, it displays what it "reads" - the "stuff here" part. Hopefully that makes sense to you! It is, sometimes, the hardest part to grasp.

Then, the "endwhile" says "stop reading the stuff". Now, at this point, you can just end the entire thing here by removing the "else" portion. But if you want the site to dsplay an error message or something, you can place that here, and *then* "endif".

And so it continues in a Loop. The program will find a post, read the post, and displays what it reads from beginning to end, then it moves on. If there is another post, it will perform the same function again and again, until there are no more posts for it to find.

Now, the "stuff here" section is what actually defines the post.

<?php the_date('','<h2>','</h2>'); ?><div class="post" id="post-<?php the_ID(); ?>"><h3 class="storytitle"> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3><div class="meta"> <?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?> </div><div class="storycontent"><?php the_content(__('(more...)')); ?></div><div class="feedback"> <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></div></div> 

All of that gobbeldygook tells the loop, basically, to display the contents of your post. That's the "while" part. So the post will end up looking like this (from a "View Source" standpoint):

<h2>Post Date Here</h2><div class="post" id="post-ID#"><h3 class="storytitle"> <a href="Permanent URL To Post Here" rel="bookmark">Post Title Here</a></h3><div class="meta"> Filed under: Category Name Here — Author's Name Here @ Time Post Was Published Link to Edit Post Here </div><div class="storycontent">Post Content Here (with "more" link)</div><div class="feedback"> Link to Comments Popup Window here (# Of Comments Made)</div></div> 

Hopefully, that made sense to you, and you're getting the idea of the Loop. You can do many, many things with the Loop. But we're trying to keep thing tutorial simple - so we're gonna stick with the basics for now. But keep in mind, when you want to do some cool things with your site's content, usually the Loop is where you want to do them!

Step Four: the Sidebar

So now we'll stumble into the sidebar. The sidebar is actually pretty easy. Ther'es several ways you can accomplish what you want with it. You could do your general static sidebar, where you add your links one by one. That's perfectly fine. I've actually had to do this in some cases, because when you do the dynamic/WordPress way, you're (unfortunately) stuck with only one class for your list items. I've had cases where I needed each list item to have a different class, and when you have that, then you have to stick with hard-coding.

However, most people don't have this problem. That's where the coolness of WordPress comes in. Basically, you manage your links in your Administration panel, under (holy crap!) the "Links" area. You just go in, create your new link, add in the URL and voilà! You have your links. You call them, very simply, to your sidebar to make the sidebar.php file look like this:

<div id="sidebar"> <?php get_links_list(); ?> </div> 

What this will do is output your links that are listed in your Links manager. By default, the list will be generated by name (alphabetical order). But if you prefer to have your links in another order, you can add 'id' to that:

<div id="sidebar"> <?php get_links_list('id'); ?> </div> 

That will output the list by the ID# given to each link. So if you create your links in your manager in a certain order, then WordPress will output your list in that order. A side note: if you would like them to appear in reverse order, simple place an underscore in front of the parameter:

<div id="sidebar"> <?php get_links_list('_id'); ?> </div> 

There are many other things you can add to your sidebar...archives, calendar, categories, and so on. However, one of the best and simplest methods of updating/controlling your sidebar is by using Widgets. Widgets are utterly awesome. Some people hate them, but I find them very fun and very easy to use.

Step Five: Miscellaneous Important Stuff

One very large important factor I have failed to mention so far is how to link properly to certain things - namely stylesheets. Now, remember in our original template code, the stylesheet link was your everyday

<link rel="stylesheet" href="global.css" />

Well, that won't work here. Because your files will no longer be located in the root of your site, leaving the link like this will cause your stylesheet to not be picked up by the browser. This is a bad thing. You must "WordPress" this link! Since you will always have a default stylesheet (styles.css - see step two!), then there is one wordpress tag that will always work, and should be used as the default:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />

Wait! You say. What about other stylesheets? Like when you create a separate stylesheet for print? Or how about one within a conditional comment for IE? That won't work for those. However, there is an alternate way to call it in without hard-coding the long URL yourself:

<?php bloginfo('template_directory'); ?>

What this does is put in the path to your template directory. So, say you have a print stylehseet you also want to use with the default. You would do this:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" media="print" />

Note how I added the "/filename here" at the end of the PHP call. The above PHP code will work for anything that needs the path to the files called in. You just add the filename afterwards so you get the results you desire.

I should also note that, if there are any links or images within your template that do need the full URL (usually for outside linking purposes - this isn't a common need, though!) you can use that PHP code anywhere in your template. Just tack on the filename at the end.

I would also like to address the comments_popup_link(); area, in the "feedback" section of the index.php file. What this does is provide a popup window when the end user clicks on the "Comments" link at the end of each post. For this to work, you must insert the following line in your header:

<?php comments_popup_script(400, 400); ?>

Basically, that puts the popup script in the header of your page. The "400"s you see there are the width and height of your popup window and can be altered to any size you wish.

Now, if you do not wish to have the comments popup in a new window, simply leave that line out of your header.php file. That will remove the popup, leaving your comments in line with the post. This, of course, will not be on the main page - what it does is, when the end user clicks on the "Comments" link to leave a comment, it'll take the end user to an archived page with the comments area at the bottom.

Step Six: Final Steps

Now, you should be set with your basics. Here's the final thing that I do to get the last few weird things in place.

You will notice that WordPress - upon using their tags and such - will add it's own default classes and such. What I do at this point is open up my site in a regular browser window, and view the source code. (In Firefox, this is "CTRL" + "U".) Then I look through the source code and find anything that I haven't coded myself. For example, the sidebar. If you were using the regular wordpress PHP call for your sidebar list, then WordPress will generate your links in the sidebar similar to this:

<ul><h2>List Title Here</h2> <li>link 1 here</li> <li>link 2 here</li> <li>link 3 here</li> <li>link 4 here</li> <li>link 5 here</li> </ul>

If you don't have any styling for UL or LI tags, then your sidebar list is gonna look weird. So this is the point where I start adding things to my CSS file that WordPress has placed in there, and style things as I want them to be.

Once you've saved everything and gotten your links all together as you'd like them to be, then validate your markup again. This should find the final niggles that may be in the way.

And that would be my final touch-up step.

Hopefully this little tutorial has helped you out. As I said in the beginning, this is only the basics of what I do. There's a lot more you can do with the Loop and your sidebars and all the PHP coding that WordPress allows you to do - but hopefully this gets you started.

If I did go over your head with anything, please leave a comment and let me know - I'd like this to be very clear for anyone who wants to use it

Pages: 1 2 3

Newer Post »

Brass Blogs: Web Design & Development

SC

ShellyCole

Related Posts

Categories

currently working on…

How to create a WordPress Template or Theme

Have your say: [Cancel reply]