Tag: themes

Creating WordPress Themes

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.

WordPress Plugins and Themes

Now that I’ve covered Getting Started, and the Admin Panel, we can move on to some other WordPress related things, namely Themes and Plugins. Let’s start with Themes, as that’s going to impact your WordPress application the most.

A “theme” is really just a design for your site. It gives your site that “customized” feel to it, even if there’s a thousand other people using the same theme. Generally, themes are free to use and will only require a “linkback” to the author’s site, as payment. Given, there’s some themes that are “for pay”, but it’s up to you if you want to pay for those.

Installing a theme is generally one of the most simple things to do with WordPress:

  • Download your new theme from wherever you’re getting it.
  • Unzip the folder (usually requires WinZip)
  • Open FTP for your site, and head to the /wp-content/themes/
  • Upload your theme folder directly there, leaving the file structure in tact.

That’s it. You’ve installed your new theme. To activate it, just go to the “Presentation” tab, in your Admin panel. You should now see a screenshot (assuming that your theme came with one) of the new theme. To “turn it on”, simply click on it. The page will refresh, and your WordPress application will now be using your new theme. Simple, right?

That’s themes in a generalized view. Check back in a few days, and I’ll be detailing how to modify or create your own theme.

On to plugins! To me, plugins are the most important part of any WordPress installation. Plugins are files or scripts that add functionality to the default workings of WordPress. They enhance what WordPress does right “out of the box” (which is quite a bit), and make it do more things. Plugins range from filtering spam, to creating contact forms, to photo galleries, to a zillion other things. In my opinion, no WordPress install is complete without adding a handful of plugins.

Some plugins I can’t live without: Akismet – Akismet fights spam comments by comparing their content to a centralized database of “known spam” content.
Adsense Deluxe – Adsense Deluxe is for WordPress users who want to generate some income, presumably with Google Adsense. I’ve tested this, and used it successfully with other ad providers, as well.
Netgen Gallery – Allows you to quickly, and easily add photo albums to your WordPress, with fancy AJAX abilities when viewing the photos.
Similar Posts – This plugin is great. It searches your content for other posts containing similar words and phrases, and automatically links them to the post the viewer is reading. It helps get people to other pages on your site.
Simple Pop Up Images – By default WordPress’ handling of images clicked to enlarge, is ugly. This plugin allows you to configure it to show them in a nice popup, without too much extra work on your part.

There’s really a zillion more plugins that you can use on your WordPress, and it’s entirely up to you which ones you want to use, and what benefit they’ll be to you. There’s two “main” places I go to look for plugins:
The WordPress Codex – Their central location of all of them.
Wp-plugins.net – Not official, but just as good.

Installing a plugin is just as easy as installing a theme to your WordPress:

  • Download the plugin from its author’s location
  • Unzip the plugin folder
  • Open FTP
  • Upload the folder to /wp-content/plugins

That’s it. Plugin installed. Now, you need to activate it. Head on over to your WordPress admin panel, and click the “Plugins” link. You should see your newly installed plugin there, with a link (on the right) to activate. Just click that link, and that’s it.

Just be sure, once you activate, to go test it on your site, and click around a little bit on other things. Sometimes plugins aren’t compatible with one another, and may not work well together. If this is the case, you’ll need to check with the author (usually they list incompatibilities on their site) for a fix.

One of the great things about the new WordPress (2.3) is that on the Plugins page, it notifies you if there’s a new version detected of the plugin. When there’s a new version, you should always update. There could be potential security flaws in using older scripts. Upgrading is just like installing for the first time. It’s recommended that you deactivate the existing plugin before upgrading, but I never do that. (Do as I say, not as I do.)

That’s it for plugins and themes. Pretty easy stuff that can heavily impact your WordPress installation, and the success thereof. Check back in a few days, my next write-up will be on how to customize a theme or even create your own from scratch. This will truly give your site a “custom” feel to it.