Month: October 2007

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.

WordPress Admin Panel Guide

The WordPress Admin panel, or the “brains” of your WordPress install, is a key place, and probably the place you’ll spend the majority of your time on, rather than the site itself. It’s written very smart, and things make sense where they are. It’s generally located at www.mysite.com/blog/wp-admin (assuming you installed your blog into /blog, as we did in our first post, on how to install.

The WordPress Admin panel, or Dashboard, is broken down in a handful of subset groups, which make administering your WordPress much easier.

When you first login to your Dashboard, you’ll see the default Admin theme:

WordPress Admin Panel

From left to right, your options read: Dashboard, Writer, Manager, Comments, Blogroll, Presentation, Plugins, Users, Options

Each of these groups is clickable, and brings you to the subset of options for that group, if they’re available.
Dashboard – This is the homepage of your Admin panel. It allows you to see recent WordPress news (from WordPress), recent comments, recent posts, Askimet Spam protection (assuming you’ve installed it, and you should!), and sites who’ve linked to yours.
Write – This will give you subset options for Write Post, or Write Page. Write post will post to your blog portion of WordPress, while Write Page will post to the “pages” section of your WordPress. Pages and Posts are different in many ways, but we’ll get more into that later on.
Manage – The manage section allows you to modify existing posts (whether in draft, published, or pending review form), modify existing pages (draft, published or pending), manage uploaded images, manage your categories, manage your files, import blog posts from another blogging service (LiveJournal, Greymatter, etc), or export your WordPress database.
Comments – This subset will give you three options; comments, awaiting moderation, and Akismet Spam (assuming you’ve installed Akismet, which again, you should!). Comments are all approved, and posted comments on all of your posts. Awaiting moderation are comments that are waiting to be approved (depending on how you set up WordPress, you can set certain things to be flagged for manual review), and Akismet Spam is stuff that is automatically detected as spam. You generally just go in here, verify everything is spam, and click “Delete All”.
Blogroll – A Blogroll is simply a list of links to other blogs. You can moderate links here, view who you’ve linked to, and import links from another location.
Presentation – This is where you select your active theme, and modify any theme you’ve got, without doing so through FTP. This is helpful, if you make a lot of small changes. Note: in order to use the Theme Editor, your files need to be writeable by the server. If you have any questions on how to do that, drop a note in the comments, and I’ll explain.
Plugins – I’ll be doing an extensive post on plugins, and themes coming up shortly. However, the Plugins menu is where you can see which plugins you have activated, and activate new ones. Plugins are basically extensions that make WordPress more useful, or customized.
Users – If you allow registrations on your WordPress, or have other authors, this is where you can go to manage them, give them permissions to do things (or not do things). You can also change passwords, e-mail addresses, and website URLs through this page. It’s also used for manually creating users of your WordPress, as well.
Options – Probably the most important part of your WordPress. The Options subset gives you a zillion options, literally. I’ll explain them, left to right, as they appear on screen: General Options; this allows you to change your blog’s name, your e-mail address, time stamp, new user default role, and membership options. Writing; allows you to modify a variety of options related to writing posts on your site, including the size of the posting box, default category, and others. Reading; configuration for how many posts to show on the site/RSS feed, and what to show on your front page. Discussion; allows you to configure who can leave comments, how often, if someone has to be registered to leave a comment or not, and when to flag a comment as potential spam (to moderate it). Privacy; do you want the WordPress to be indexed by search engines? Permalinks; this can be complicated if you don’t know what they are. A Permalink is basically a link to a specific page. You can opt for different options, based on what WordPress can do. Note in order to change from the default, you’ll need an .htaccess file, and it has to be writeable by the server. Miscellaneous; this simply lets you change where your files/images get uploaded to.

And that’s it, the WordPress Admin panel in a nutshell. Any specific questions? Leave them in the comments, and I’ll do my best to help out. Check back soon for my post on Plugins and Themes, how to use them, and what they’ll do for you!

Getting started with WordPress

As the web becomes more and more saturated with people who want websites or blogs, it’s becoming easier as a web-dev guy to help people who aren’t HTML savvy get a website. While WordPress is designed as a blogging tool, it’s so much more than that.

As a designer, I can build the site on WordPress, implement a custom “theme” (design layout) for whomever I’m building it for, and spend an hour or so teaching them how to use it. Even if they’ve got no intention on using it as a blog, it’s still a great, and easy, way for people to update content on their site, without even having to know what an FTP client is.

To get started, simply head over to WordPress’ Site and grab the latest version of the software.

Once you’ve got the latest version, you’ll need to unzip it, and get it onto your webhost. Obviously, this part takes a bit of know-how. If you’ve already got an FTP client, great. If not, I recommend SmartFTP it’s a great, and free application. Assuming your webhost provides MySQL and can run PHP, you shouldn’t need much else. (If you’re not sure, check the knowledgebase of your host, or just ask them. This stuff’s pretty standard these days.) You should also know the FTP information for the host, also can be provided by them.

Once you open up your FTP client, all you need to do is simple. 1) Make the decision if you want your WordPress installation in a subdirectory or not. All that means is, do you want your WordPress to be located at www.mysite.com/blog, or simply at www.mysite.com? I usually opt for installing it at the highest level (known as the root level).

For the sake of example, we’ll say that we’re installing into a subdirectory called “blog”. What we’ll first need to do is create a folder in our FTP, called blog. Generally, webhosts don’t allow you to create something through FTP, so you’ll need to create the folder on your desktop, and drag it into the FTP window. Once uploaded, double click on it, to open it.

Now, head back over to your desktop, and open up the “wordpress” folder that you got when you unzipped the latest version of WordPress. You should see a whole bunch of files in there, that mostly start with wp-, as well as three folders (wp-admin, wp-content, wp-includes). Grab this whole bunch of files, and drag them over to FTP into your “blog” folder. If you grab them all at once, they’ll all get uploaded to the right file structure, and the install will work cleanly.

Once that’s done, head on over to your webhost to create a MySQL database. This is generally done through a control panel of some sort, which varies from host to host. If you’re unsure how to do it, ask your webhost or check their knowledgebase. They should also be able to provide your “mysql host”, which you’ll need when you install WordPress into the database. Most times this is just “localhost”, but sometimes it’s different.

Once the database is set up, and you have your database information, simply head on over to your website. www.mysite.com/blog/wp-admin

You’ll get a message telling you that you need to install the WordPress application into the database. The install’s very easy, however, you’ll need to be sure that you do one last thing first. Head back over to your FTP program, and locate “wp-config-sample.php”, right click on it, and select rename. Change the name to “wp-config.php”. Once that’s all set, right click again on the file, and look for an option for “permissions”, or “CHMOD” (varies depending on your FTP client). Once the menu opens, change the number from 644, to 777. This will allows the WordPress application access to edit this file, with the information you give the webpage, and save it for you. This is the easiest way to set up WordPress.

Once done, head back to the web install interface, and click the “First Step” link. The next page will ask you for a Weblog Title, and an e-mail address. It’s very important that you provide a real e-mail address, so that your username and password can be e-mailed to you once the WordPress install is done. Click “Continue to Second Step” once you fill in those two details. That’s it! WordPress will install some phony data to get you started, so you can see how things work.

Be sure to write down the username and password you get on the next page, in case the e-mail doesn’t make it through your spam filter. Otherwise you won’t be able to login to your admin panel. Also, be sure to bookmark the Admin page, which is usually located at www.mysite.com/blog/wp-admin (which will vary, depending on where you installed WordPress to)

That’s it, WordPress is now installed on your site. If you visit www.mysite.com/blog, you’ll see the phony data, with the default template. Easy enough, right?

The next step in running WordPress is learning your way around the Admin Panel. Check back in a few weeks, for a detailed post on how to use the Admin panel to write posts, pages, moderate comments, and more.