Blog Design Solutions (2006)

B L O G D E S I G N S O L U T I O N S

Now, WordPress is renowned for its five-minute install, which—you guessed it—takes no more than five meager minutes from start to finish (as with all things, your mileage may vary). The five-minute install is so renowned, in fact, that in the readme.html file that accompanies WordPress 1.5 Strayhorn, it is the first thing mentioned after Matt’s introduction.

Here in its entirety is the seven-step installation guide from the readme.html file, which should make installation a relative breeze. Please make sure that you have your database username and password ready because you will need them.

This is assuming that your server fulfills the requirements of PHP version 4.1 or greater as well as MySQL version 3.23.23 or greater, which it should, of course, because you installed PHP 5.0 and MySQL 4.1 back in Chapter 2. Didn’t do that? Well, go back and do it, people

. . . we’ll wait. Now assuming that you have passed the server requirements test, you need to download WordPress. The latest and greatest version can be found at http://wordpress. org/download/.

At this point, you have two choices: upzip and upload to a remote server, or use your own machine locally. The following steps are largely the same, regardless of where you are test- ing—with the exception, of course, that if you’re using a remote server you would upload to it and create the MySQL database there via phpMyAdmin.

Unzip the package into your web server root, as outlined in Chapter 2. For this chapter, we assume that you’re running MacOS X and you’re using /Library/WebServer/Documents as your server root. The ZIP file is set up to produce the following directory structure:

/Library/WebServer/Documents/wordpress, so the root of the web application on your test server will be http://localhost/wordpress/. If you are using a remote server and want to maintain this structure, upload the wordpress folder to the server.

If you want WordPress to be the main application, make sure you move the contents of the wordpress directory (including any subfolders) into the server root and then delete the wordpress directory. This means that you can reach WordPress at http://localhost/. If you are using a remote server, you can, of course, simply upload the contents of the wordpress folder to the server.

Anyway, before you get to that stage, you have a few more things to do:

1.Open up wp-config-sample.php with a text editor and fill in your database connection details. We recommend creating a new database via phpMyAdmin, called wordpress, by following the steps outlined in Chapter 2. For those who don’t want to flip back, go to http://localhost/phpmyadmin/. (Mac users might notice that when you type in localhost/a/path/ your browser URI field will show something more like this: somename.local/a/path/. You see this because your Mac is using the computer name that was set in the Sharing Preferences panel. There is nothing to worry about.) Figure 5-1 is a shot of what the screen looks like.

176

W O R D P R E S S

5

Figure 5-1. Creating a new database called wordpress with phpMyAdmin

2.Save wp-config-sample.php as wp-config.php.

3.If you are working on a remote server rather than a local server, upload everything to your server via your favorite FTP client. Otherwise, just skip to step 4.

4.Launch /wp-admin/install.php in your browser (this will be http://localhost/ wordpress/wp-admin/install.php if you accepted the defaults when unzipping, or http://localhost/wp-admin/install.php if you are running WordPress at the server’s root). Then sit back and relax as WordPress entertains you with its clever banter. WordPress will create the tables needed for your blog and let you know when everything is ready to go. There are only two steps, so pay attention or you might miss it! If there is an error, double-check your wp-config.php file and try again. If it fails again, please go to the support forums with as much data as you can gather.

5.Note the password given to you. We recommend that you open the wp-login.php link in another window or tab, copy and paste the randomly generated password into the password field, and log in.

6.The moment you have logged in, go on to Users and then Profile, and update your password with something meaningful.

Please note that if you’re upgrading from a previous version of WordPress, the installation procedure is slightly different, and you will be better off consulting the readme.html file, which is bundled with WordPress 1.5. Also, if you’re upgrading from a previous version, by all means back up your files and database before you venture forth!

177

B L O G D E S I G N S O L U T I O N S

Regardless of what you do, I suggest that you at least skim the readme.html, which is located in the wordpress folder. If nothing else, changes might have been made since the time of this writing.

After you log in, the first page that you see is known as the Dashboard. In a nutshell, the Dashboard is an overview of your blog and contains aggregated news from around the WordPress world. From this initial screen you can see whether you have any comments in moderation; how many posts, comments, and categories you have; and which sites are linking to you.

You will see the following menu options available when you are in the admin area of WordPress:

Write: This is really the point of blogging, isn’t it? From this menu you can create posts and pages to add to your WordPress-powered blog.

Manage: The Manage menu item takes you to an overview of all the posts, pages, comments, and categories that have been created on your blog. It also allows you to delete and edit them.

Links: Guess what this does? By clicking this you can add, edit, or delete links for your blogroll.

Presentation: One of the most powerful features of WordPress, and the whole reason for this chapter, the Presentation tab is where you manage your themes and templates.

Plugins: It is a debate about which is more powerful: plug-ins or themes. The bottom line is that they are both essential parts of your WordPress experience. You will find the tools to activate and manage your plug-ins here.

Users: WordPress has a powerful and flexible user system that allows for granular control of ”rights” for your users. In this area you can create, promote, and delete users who are on your blog.

Options: The proverbial kitchen sink, friends. Here you set your blog’s name, create the tagline, decide whether you accept new users, select how you want to syndicate your site via Really Simple Syndication (RSS), and choose how many posts to show on your index page. Just to name a few.

Logout: Well, if you want to log out of the admin area, click here.

Click View Site in the header area of the admin area. You will be taken to http:// localhost/index.php, which should look similar to Figure 5-2. You might see http://localhost/wordpress/index.php instead, depending on where you unzipped to. From now on, we assume that you placed the files in the root of the web server, not in a wordpress subdirectory.

178

W O R D P R E S S

5

Figure 5-2. Default layout of a new WordPress installation

Now that we have covered installation and your first login, let’s take a look at how WordPress operates.

179

B L O G D E S I G N S O L U T I O N S

Mechanics of WordPress

WordPress uses PHP to handle creating, editing, and displaying your content. At its core, it has a number of functions that do the dirty work for you. There are quite a lot of these functions, and more are added with every new iteration. In this section, we will cover how WordPress displays your blog posts by looking at WordPress’s URI, its use of pretty permalinks, The Loop, and templates.

Displaying your blog posts

Let’s take a moment to look at how WordPress knows when to do what. It all begins with a little ditty known as URL. (URL is short for Uniform Resource Locator, which is incorrect. It is actually URI, Universal Resource Indicator. Thank a misprint for the current confusion.)

A URL is, of course, the address of the page you’re trying to access. In the case of Michael’s blog, the URL for one of his entries might look something like this: http://binarybonsai.com/ archives/2005/02/25/its-another-world/.

Before we go on, it’s important to note that although this is how the URL is presented to us, it is not the physical address of that bit of content. WordPress can serve content in a variety of ways. The directory-like structure that you see is commonly referred to as pretty permalinks (http://codex.wordpress.org/Introduction_to_Blogging#Pretty_Permalinks).

The way pretty permalinks are set up has to do with ”rewriting” URLs. (Rewriting URIs is beyond the scope of this chapter, but if you want to know more about it, you can find it covered at length in the WordPress Codex: http://codex.wordpress.org/Using_Permalinks.)

Without pretty permalinks, the link to the preceding entry would instead have been http://binarybonsai.com/index.php?p=1441, which works just as well in terms of retrieving the information. However it isn’t quite as user-friendly, nor is it as cool as the pretty permalink version. However, the non–pretty permalink tells us much more about how WordPress functions, which is what we are interested in at the moment.

The ?p=1441 is in fact a parameter passed to index.php, and it is here in index.php that the magic happens. The variable type in this case is p (which stands for post), and the value is 1441. The Loop, which will be covered in detail a little later, now knows that we are requesting a post with the unique ID of 1441 (that is, the 1441st post on this site); it then scurries off to retrieve that post content from the database.

WordPress has a number of these variables that can be called in various ways. If for instance you want a list of all the entries from the year 2005, simply replace p with year and 1441 with 2005 to form www.chrisjdavis.org/index.php?year=2005, and voila, you have a complete list of all the entries created in 2005.

Another variable is monthnum, which—as the name implies—takes a month number as its value; it can represent any number from 1 to 12. For example, if you look up www.chrisjdavis.org/index.php?monthnum=5, the current month of May is retrieved from the database.

180

W O R D P R E S S

Now we know what you are thinking. Can I combine these variables in new and interesting ways? Of course you can! The parameters are tied together using an ampersand. Let’s say you want the month of May from 2003: http://binarybonsai.com/index.php?year= 2003&monthnum=5. Notice that the URL begins with a question mark for the first variable and then uses the ampersand to tie on each additional variable.

It’s that easy.

After version 1.5 of WordPress, it is no longer quite as important to be able to parse these variables and make decisions based on them. Why? Because WordPress does most of the work for you through the use of conditional tags.

We will have a more in-depth look at conditional tags later in this chapter.

Advantages of pretty permalinks

5

The name says it all—prettified versions, or more correctly, human-readable versions of the more machine-readable default structure. There are a number of advantages to using pretty permalinks. www.chrisjdavis.org/index.php?p=4 doesn’t mean that much to us, but www.chrisjdavis.org/this-great-post does. Giving your readers meaningful content and context is what blogging is all about. Another huge advantage of using pretty permalinks is that your content will be more optimized for search engine indexing . . . very important in these days of SEO craziness and Google ranking.

Pretty permalinks provide an advantage called peeling. Take another look at the pretty permalink to the entry on the 1991 gaming classic, Another World: http://binarybonsai. com/archives/2005/02/25/its-another-world/. Very quickly you can discern the title of the entry (Another World) and the date on which it was published (February 25, 2005).

Furthermore, if you wanted to see what else was published on that exact date, you could simply peel the title, leaving only http://binarybonsai.com/archives/2005/02/25/, which would then show that in fact two entries were published on that particular day in February, 2005. You could go on to peel the day, which would leave you with an archive of the entries published during February. Peeling the month would give you a view of all the posts in 2005. And peeling one last time will take you to the archives page, a hub of sorts for further navigation into the archives of the Bonsai.

For your own site, this is a great way to maintain your directory structure, and we highly recommend that you spend some time understanding how to customize this rewriting. There are some great resources available in the Codex (http://codex.wordpress.org/ Using_Permalinks). Luckily, WordPress makes the black magick that is mod_rewrite much easier to work with through template tags. You can find a listing of them on the aforementioned page.

181

B L O G D E S I G N S O L U T I O N S

To work with permalinks, go to Options and then click Permalinks. It is likely that you will need to use a permalink pattern to follow the examples in this chapter. Use one of the examples shown on this page if you are not sure what you’d like at this stage. You also need to activate mod_rewrite in Apache. This is as simple as uncommenting the LoadModule line in /path/to/apache/conf/ httpd.conf that refers to mod_rewrite.

The

As	org/
the	. As
the	infor-
mation	been
Let’s	to
load	com/
	all
entries
The

This	this
down	on
to

Now

After

If

182

Are we all done showing posts now? Good! Close up shop and move on:

<?php endif; ?>

Most of the time, the purpose of The Loop is to retrieve entries so they can be displayed to the end user. This is done through the use of template tags, which fall within the loop. Anything put inside the loop will be executed/displayed for every entry on the resulting page.

Now before we move on to talking in detail about template tags, it’s worth taking a look at The Loop from a slightly different angle. Normally, you would use The Loop for retrieving and displaying a set of entries or a single entry, based on either a period of time or some other unique identifier.

But say you’re into reviewing and discussing books and you want to display a list of all the entries in the Book Reviews category that contain more than ten comments. You would turn to The Loop for that list.

Say that you want to have the headline of all the yearly, monthly, and category archive pages to include a count of the entries within that year, month, or category. Again, you would turn to The Loop to accomplish this.

Yes, in truth, The Loop is a wonderful tool.

Designing with WordPress

Designing is really the reason for you reading this chapter, isn’t it? How can you leverage your CSS and HTML skills to create a beautiful usable layout with WordPress? Lucky for you it is easier than you might think. There are two main components to any design powered by WordPress: CSS and HTML, and the PHP-based templating system.

CSS and HTML

As with any design for the Web, everything starts with well-formed HTML and CSS. WordPress was built from the ground up to be a semantic publishing system with an eye to standards. This means that visually everything is powered by CSS. Let’s take an example. Say you want to style your blog posts with an h1 tag that has a blue background and a gray, 5-pixel border to the left of the h1 tag. Here is the necessary code to make that happen; first we start with this CSS:

H1

{

background-color: # 8BCCF4; Border-left: 5px solid #ccc;

}

Then in our page, say, index.php, we would write this:

<h1>

<?php the_title(); ?> </h1>

W O R D P R E S S

5

183

B L O G D E S I G N S O L U T I O N S

And that’s it. If you were now to load index.php in your browser, you would see the title of your posts styled as h1 tags per our rules defined in CSS. Everything in WordPress can be styled by CSS. The bit of PHP in the preceding snippet is one of WordPress’s template tags.

So now is a good time to talk about template tags and template structure in WordPress.

Template structure

WordPress has a pretty sophisticated theme system, which allows you to change how it looks and operates. We’ll be making use of this quite a bit throughout this chapter. And although it might seem slightly complicated at first, it yields quite a bit of power that can make for a more dexterous blog in the long run.

Perhaps the best thing about the theme system is how easy it is to change the face of your blog in one fell swoop—at the click of a button.

We will be using the default theme that ships with WordPress for most of our examples. It is called Kubrick, after the late visionary movie director. Although there are many reasons why we will use this theme as our foundation, the most important is that it will always be available to everyone because it is the default WordPress theme. Also it is widely used and has already been through the hands of thousands of users, so support is usually very close at hand. And of course, Michael built the thing.

File structure

Kubrick comes as a package of a number of files and a directory for images. All these files work together, depending on what WordPress needs to serve up to the reader, and it might take three or four files to serve up a single page for a reader. We will look at each file that makes up Kubrick a little later in this chapter.

Now there’s no reason why an entire theme can’t fit into a single file. But once you gain a sense of the structure, the compartmentalized approach used in Kubrick makes it considerably smoother to take care of system-wide changes to the theme.

To integrate these various files, WordPress has been equipped with a range of functions for calling in the needed files (include tags) as well as functions for determining what kind of page it currently needs to show (conditional tags).

If you open up the index.php from the default Kubrick theme that comes with WordPress 1.5 in a text editor, you will see that the very first line of code contains a tag called get_header. This piece of code actually displays the contents of header.php. The last three lines of index.php are also include tags, namely get_sidebar and get_footer, and each one displays the contents of sidebar.php and footer.php, as you would expect.

Using these include tags makes it much easier to create a wide range of pages that all share the same structure, layout, and information. Using this technique, changing copyright information or something similar in the footer will immediately spread to all the pages on your site.

184

There are four include tags: get_header, get_footer, get_sidebar, and get_comments.

To make things smarter yet, conditional tags allow you to have a single file react differently depending on what it’s supposed to be doing. Let’s assume that you want to run a plug-in in the sidebar, but only when the user is viewing the frontpage—nowhere else. You simply wrap the plug-in code in a simple if statement such as this one:

<?php if (is_home()) { ?> Plugin Code Goes Here <?php } ?>

This is extremely useful, as you will see later, in managing, for instance, a sidebar.php file that works across the entire site, yet behaves differently depending on what part of the blog the reader is in. So let’s look at them in depth.

Template tags

Residing both in and out of The Loop, template tags are how WordPress brings information from the recesses of its database to be presented to the user. Examples of places in which you can make use of template tags include headlines, dates, entry content, permalinks, and so on.

Many template tags can be configured, using parameters passed to WordPress through the template tag’s syntax, allowing for a degree of customability. Where a default template tag might look something like this: <?php the_title(); ?>, you could also pass it some variables like this: <?php the_title('<h3>', '</h3>'); ?>.

Each template tag has a different set of possibilities when it comes to customizing; time spent studying the WordPress Codex on template tags (http://codex.wordpress.org/ template_tags) is time saved later when you suddenly need to figure out how to employ some odd combination of template tags.

Here’s a loop from the frontpage of our default template:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post">

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

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"> <?php the_title(); ?></a>

</h2>

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">

<?php the_content('Read the rest of this entry »'); ?> </div>

<p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','

W O R D P R E S S

5

185