Don’t get me wrong, creating WordPress themes is not for the faint of heart, nor for the casual blogger who doesn’t really have a good grasp on developing websites. However, if you know your way around PHP and basic HTML, you should have no issues creating your own theme, or adapting a website into a WordPress theme.
Generally, themes go into the same location, regardless of your blog structure; /wp-content/themes. It depends on what your theme name is, as to what folder you put it in. However, each theme has its own folder, to be kept separate.
When you first install WordPress, you’ll get the “default” theme, which is a great place to start. Usually I copy that folder down to my desktop, and make a clone of it, to work off of.
A theme needs to consist of a few basic files, to make it work:
- index.php
- style.css
- comments.php
You can take it a step further, if you want to easily update/change aspects of the design, and add in a header.php and footer.php. For this example, we’ll use header and footer.
At the top of any existing theme’s CSS file (or when creating a new file), you need to always ensure that you’ve got some information to let WordPress know what the theme is. It’ll generally look like this:
/*
Theme Name: What do you want to call your theme in WordPress?
Theme URI: Where you downloaded the theme from
Description: any details?
Author: your name
Author URI: your URI
Version: You don’t need a version, but can put one in here if you want to.
General comments/License Statement if any.
.
*/
This will tell WordPress information about your theme, to display under the “Presentation” tab.
So, you now have your theme set up, but need the files. Why? Simple, to make the theme work. Here’s a quick run down of what each file does.
- index.php – this is the homepage of your WordPress. You can get away with only having an index, if you don’t want to create different pages for each place in your installation.
- style.css – the stylesheet for your design. You should be fairly comfortable with CSS by this point, if not, there’s a ton of resources available on the internet.
- comments.php – this is the template for what your comments page/form will look like. If you don’t have one, no one will be able to comment on your WordPress
- header.php – this file can be included at the top of all of your “pages” and “posts,” so that you can easily change something across all the pages, without editing each one. This is where you include the majority of your design.
- footer.php – same as the header.php, but goes after your content, instead of before. This is where you conclude your design that comes after the “content” or “body” of your site.
Generally, there are a bunch of other files you can include, too; 404.php, single.php, page.php, author.php, archive.php, search.php, etc.
Each page serves a separate purpose. I won’t get into too much detail, as to not confuse you. Here’s a quick example of what an index.php might look like, if you made it yourself:
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<?php the_content(‘<br /><br /><div align=”right”>Continue Reading <?php the_title(); ?> »</div>’); ?></span><div align=”right”><br /><br />Posted by: <a href=”<?php the_author_url(); ?>”><?php the_author(); ?></a> on <?php the_time(‘F jS, Y’) ?> at <?php the_time() ?><br><span class=”postmetadata”>Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(‘Leave a Comment »’, ‘1 Comment »’, ‘% Comments »’); ?></span></td>
<?php else : ?>
<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
So, what does all that do? Pretty simple, I’ll break it down bit by bit:
<?php get_header(); ?> – this bit simple calls my header.php file to be included.
<?php if (have_posts()) : ?> – this is very important, your theme won’t work without it. It simple tells WordPress if you have posts, to do the following.
<?php while (have_posts()) : the_post(); ?> – if you have posts, show them on this page.
This next bit’s a bit more complicated, because there’s a lot of parts to it:
<?php the_content(‘<br><br><div align=”right”>Continue Reading <?php the_title(); ?> »</div>’); ?> – php the_content is what shows your post. The “continue reading part” will get shown if your post contains a “More” link in it. I’ve set this particular one up to show “Continue Reading This Post”, where “This Post” would be replaced by whatever I’m calling the post in WordPress.
Posted by: <a href=”<?php the_author_url(); ?>”><?php the_author(); ?></a> on <?php the_time(‘F jS, Y’) ?> at <?php the_time() ?><br><span class=”postmetadata”>Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(‘Leave a Comment »’, ‘1 Comment »’, ‘% Comments »’); ?> – This will simply show: Posted by: Mike (as a link to my author page) on 10/19/2007 at 12:01PM. Posted in Design, WordPress Tutorials, WordPress. Leave a Comment (or if there’s comments, it’ll show the number of comments already left.)
This bit: <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> can be a bit confusing. What this does is simply show you a link that says “Edit” when you’re viewing your post, and you’re an admin on the blog. Other people won’t see it though, don’t worry.
<?php else : ?> – Very important to have, this closes the previous bit where we tell WordPress what to do if we have posts.
<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?>
Above is a simple include to a search form. In case someone tries to access a URL that doesn’t exist.
<?php get_sidebar(); ?> – includes a sidebar, if you’ve got one.
<?php get_footer(); ?> – includes your footer.
It seems a lot more complicated than it is, and there’s an infinite amount of variables, and things you can do with your theme. I’ll cover some more variables next time, and what they do. Hope this helped get you started.