Finish Reading at WPTuts+

Finish Reading at WPtuts+

Finish Reading at WPtuts+

Click to Enlarge

Permalink is a combination of the words “permanent link“, similar to how blog is a combination of “web log”. A permalink simply means the URL to a page or post on your website/blog.

There has been a lot of disucssion about the proper structure for permalinks, especially since the advent of “Pretty Permalinks”, and a lot of people have their opinion on what the best structure is. This is my best advice when it comes to permalinks, and it’s a combination of advice from an SEO expert friend, and my experience with WordPress.

Default Permalinks

I’m not going to rehash all of the details about permalinks that you can find over at the WordPress codex, but let’s start by looking at the default permalinks which look something like this:

• Post Permalink: example.com/?p=123
• Page Permalink: example.com/?page_id=123
• Category Permalink: example.com/?cat=123
• Tag Permalink: example.com/?tag=tag-name
• Archive Permalink: example.com/?m=201005 or example.com/?m=2010

These seem simple enough, but as you can see, this is what is generally defined as an “ugly permalink”.

Suggested Permalink Structure

There are a lot of different ways you can edit the way this looks, but the one that makes the most sense to users and to search engines is for the URL to make a path directly to the resulting page, the only interruption being a categorization for posts. These resulting permalinks will look like this:

• Post Permalink: example.com/cat-name/post-name
• Page Permalink: example.com/page-name
• Category Permalink: example.com/cat-name
• Tag Permalink: example.com/tag-name
• Archive Permalink: example.com/2010/05 or example.com/2010

To set your structures to this, use this as your custom structure: /%category%/%postname%/ and then leave the tag and category bases blank.

Remember that words that come after your URL are going to look like directories, even though they aren’t really. For instance, you might look at the path to an image that looks like this: example.com/mydesign/images/logo.jpg. On your server, there is a public root directory after which there is a directory called “mydesign”, and then inside that there is a directory called “images”. In graphical user interfaces, these are generally represented as folders within folders. So if you have a permalink like this: example.com/category/cat-name, a search engine and even some users, are going to assume you have a directory on your server called “category” and then another called “cat-name”.

That being said, when you use my suggestion for your permalinks, and you have a post called “Hello World” in the category named “General” your permalink will be this: example.com/general/hello-world, and your category’s permalink will be “example.com/general”. This is good since when a search engine gets to the /general/ part of your permalink, it’s going to index that pseudo directory as well. Thanks to your permalink structure, that will result in a page with topics in that category, rather than a 404 error page, which isn’t a good thing for a search engine to find.

Don’t Skip This: Remove Category and Tag Base

By now, you’re probably noticing that your categories look like this: example.com/category/cat-name. By default, WordPress will insert a default category base of “category” and tag base of “tag”, but since the directories “category” and “tag” don’t exist we want to remove these. This is pretty simple to do with this plugin: WP No Category Base.

Search Permalinks

It is noteworthy that no matter what your permalink structure is, your search permalink will always be the same: example.com/?s=searchterm

<?php body_class(); ?>>

There are a ton of articles out there already about this that deal with adding your own custom classes, one of the best being “>WordPress 2.8 and the body_class() Function“, but I ran into a specific need for a project I’m working on, and wanted to share my solution, since it wasn’t something I had been able to find pre-written.

For this project, I was using the body class to add a specific color to a nav item whenever I was on an active page that fell under that nav item. It was simple to do for pages, but when I got to the pages that I use for custom category listings as discussed in “WordPress: Create a Page Template that Paginates Posts from a Certain Category“, I found out that on a single post, the body_class() function doesn’t add the categories, like it does in post_class(). Furthermore, when I did discover how to add the categories, it didn’t list the parent of that category, which is what I needed. This was the solution I was able to piece together, I hope you find it useful:

<?php $class=''; /* Make it void by default */

if ( is_single() || is_category() ) { /* Only do this if we're on a single post or category page */
	$category = get_the_category();
	$parent = $category[0]->category_parent;
	$class = get_cat_name($parent); /* assign the permalink name for the parent category to the object $class */
}?>

<body <?php body_class($class); /* This will add our custom class, which is void if we aren't on a single post or category page */ ?>>

One of the most important tools WordPress provides a custom theme developer is the simple ability to create custom page templates that can be used on particular pages to get specialized results apart from the basic static page template. For instance, my homepage is just another WordPress page, but in order to get it to look differently from a regular page and the main blog page, I have created a template called “Homepage” and then in the Page attributes, I’ve selected the template for that page.

Another thing that I do a lot on custom pages is to query posts from a particular category. This especially came in handy for pages like my Portfolio. One special thing to take note of is the fact that I don’t simply list all of the entries on one page, but instead break it up into sets by paginating the results of the query. This is simple to do, and I’m going to show you how.

Create a Page Template

First off, you’ll need to start with a custom template, and the easiest way to do that is duplicate your normal page template, page.php. In this file, add the following code above the call for the header:

<?php
/*
Template Name: ANY NAME YOU WANT
*/
?>

Now you can add any customizations to it that you want and then assign that template to a page by selecting it from the “template” dropdown in the Attributes panel as is shown in the above image.

Create a Custom Loop

So now that we have our custom template, let’s put in the custom query that calls posts from the category with the ID of 3. This would typically look like this:

<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('cat=3');
?>

<?php while ($wp_query--->have_posts()): $wp_query->the_post(); ?>

... HTML and other post stuff here...

<?php endwhile; ?>

<?php $wp_query = null; $wp_query = $temp; ?>

Now, we will add in a couple more variables to the query to tell it to display just 4 posts per page. Now you’re query looks like this:

<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('cat=3&showposts=4'.'&paged='.$paged);
?>

Don’t forget Pagination

Finally, you need to include the pagination links somewhere after the <?php endwhile;? >. If you are using the default navigation, that will look like this:

<div class="navigation">
	<div class="alignleft"><? next_posts_link('&larr; Older Entries') ?></div>
	<div class="alignright"><? previous_posts_link('Newer Entries &rarr;') ?></div>
</div>

If you’re like me, and you prefer to use the awesome plugin by Lester Chan called WP-PageNavi, then that looks like this:

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

You can pretty much follow all of the steps outlined in my previous article, except rather than using wp_list_pages, you’ll want to use wp_list_categories like so:

<ul id="nav">
wp_list_categories('title_li=');
</ul>

As usual, make sure that you leave that title_li= in there without a value so that the code is rendered semantically.

The only problem you may run into is if you use child categories. This can be fixed by using a dropdown method such as Suckerfish. Changing the depth of the list that WordPress delivers is the same with categories as it is with pages, so adding the variable depth=1 will eliminate the need for dropdowns since all you’ll get is the parent categories.

<?php
$pages = get_pages();
foreach ($pages as $page) {
	$apage = $page->post_name;
	if ($apage == 'discussions') { ?>
		<a class="more" href="<?php bloginfo('home'); ?>/discussions">More</a>
	<?php }
} ?>

Move the navigation to the header

The first step is to open up your sidebar.php template and find this snippet of code:

<?php
wp_list_pages('title_li=<h2>Pages</h2>');
?>

Cut it out and then place it within your header.php where you’d like it to be. Most likely, you won’t be wanting the “pages” header, and you’ll also need to put it inside an unordered list with an id or class that you can use for styling it from within the css, so your code should now look like this:

<ul id="nav">
	<?php wp_list_pages('title_li='); ?>
</ul>

Cause the pages to list horizontally

Now open up your stylesheet (style.css) and begin styling the nav id. Most people will want their list items to float left so that you don’t lose the ability to use block item styling like borders and dimensions that you would if you just told them to display inline. Here is a good basic setup to get you started:

ul#nav {
height:25px;
border:1px solid #ccc;
background:#eee;
margin:1em 0;
padding:0;
}

ul#nav li {
list-style:none;
float:left;
border-right:1px solid #ccc;
line-height:25px;
padding:0 10px;
}

Yay! Now your header includes a horizontal navigation bar.

Taking the style to the next step

Of course you have unlimited possibilities as to the appearance of your navigation bar. Depending on your design and styling capabilities you can really jazz up the look of a simple list of pages. Here are some great examples to give you some inspiration:

Smashing Magazine

Zen Habits

Wandering Goat

Comag Marketing Group

Child Pages

If you use a lot of child pages on your blog, you are probably seeing a few errors. There are two solutions for this. One, is using suckerfish dropdowns, and the other is listing the child pages in the sidebar only when you’ve chosen a particular parent page.

If you do use my sidebar solution, be sure to exclude showing them in the header.php template by adding an additional parameter to your code like this:

<ul id="nav">
	<?php wp_list_pages('depth=1&title_li='); ?>
</ul>

If all of this seems too much for you, or you just want a quicker way to get to the designing, then you might enjoy using my imageless theme as a basis for your customization.