Wordpress: Unleash the Slug Within
Monday, July 30th, 2007 at 8:00 am
This entry is for Wordpress bloggers and theme developers.
When I first dipped my toe in the unchartered waters of a self-installed Wordpress blog, I was pretty overwhelmed by all the settings and options on the Dashboard. Since I was developing my first Wordpress theme, I had no choice but to delve deeper and by reading endless support pages, forums and tips on other blogs, things slowly started making sense. One peculiar creature I found dwelling in these parts is the Wordpress slug. I will discuss 2 species: the Post Slug and the Category Slug.
Although they seemed rather odd at first, both types of slug revealed some useful qualities.
Using the Post Slug to make “pretty” permalinks
Wordpress documentation describes a slug this way:
This is where WordPress will “clean up” your post title to create a link, if you are using Permalinks. The commas, quotes, apostrophes, and other non-HTML favorable characters are changed and a dash is put between each word. If your title is “My Site - Here’s Lookin’ at You, Kid”, it will be cleaned up to be “my-site-heres-lookin-at-you-kid” as the title.
When opening a single entry on your new Wordpress blog, you will notice the default URL is something like:
http://www.myblog.com/?p=3
This is not ideal. Neither humans nor search engines like looking for web pages called “?p=3″. Quite aptly, this is referred to as an “ugly” permalink. A “pretty” permalink would look something like:
http://www.myblog.com/2007/07/31/title-of-blog-entry
Pretty permalinks are quite easily achieved by adjusting your Wordpress settings. Once logged in on your Wordpress Dashboard, go to Options > Permalinks.
As with most things that seem easy at first, there is a catch. Two actually:
- Before changing your Permalink settings, you need to make sure your blog’s .htaccess file is writable. If not, Wordpress will give you some lines of code that you will have to add to the .htaccess file.
- When you write a post in Wordpress, the title is automatically converted to the post slug. If you change the title of the post at a later stage, the slug does not automatically get updated. This will result in your permalink looking different to the title of your post. Not a train-wreck, but if you are particular about those sorts of things, you have to just manually update the post slug. This setting is found to the right of the writing area.
Voila! Pretty permalinks.
Using Categegory Slug for custom CSS designs
Like posts, every category you create, automatically has a category slug. If you wish, you can specify exactly what you want each category’s slug to be by going to Manage > Categories on the Wordpress Dashboard and creating a new category or clicking “edit” on an existing category.
When developing a Wordpress theme, category slugs can be used to apply custom CSS qualities to different categories.
For example, let’s say your posts fall in one of 2 categories: Family Time or Work Time. The category slugs for those would be, family-time and work-time. You may wish to apply a colour to the title of each post to distinguish in which of the 2 categories it falls. This will require you to do two things:
Add some code to your PHP templates. This will add the category slug to your class name:
<?php $cat = get_the_category(); $cat = $cat[0]; echo $cat->category_nicename; ?>
In the PHP template it will appear something like this:
<h3 class="<?php $cat = get_the_category(); $cat = $cat[0]; echo $cat->category_nicename; ?>">Entry Title</h3>
Then, add the CSS code. It will look something like this:
.family-time { color: #222222; }
.work-time { color: #444444; }
If all goes according to plan, you will now have custom heading colours to distinguish the category of each post. Of course you can take it further and use similar techniques to add custom icons and other graphics, just let your imagination go!
Jim Says:
August 6th, 2007 at 1:29 am
Thanks for the tip. I have been trying to change the post title for some time without success. And up until now, I had no idea what the “slug” was for. Now it is all starting to make sense…
Jim
(Deeks)
Blogsolid Says:
August 6th, 2007 at 8:24 am
Hey Jim
I’m glad this helped make some sense! It seems like there’s always something new to learn about Wordpress.
Robert Says:
August 16th, 2007 at 8:29 pm
Thanks for this tip. I found your site from cssremix and was just wondering how to make the images show next to the posts like you have. I’ve seen it a few times on other websites and wondered how to do it. Now I know. :)
Bookmarked your website. Keep up the awesome writing.
Ivette01 Says:
March 6th, 2008 at 12:39 am
I’ve been reading your blog for hours now! It’s just very interesting, and all pretty :) This slug thing is great and really helpful right now. Thanks for sharing!
Imar at Blogsolid Says:
March 7th, 2008 at 12:05 am
Cool, thanks for visiting Blogsolid, Ivette01!
kt Says:
March 15th, 2008 at 5:06 pm
so helpful! thanks for the tips! it all makes sense to me now!
Toni Says:
October 27th, 2008 at 9:10 pm
Very helpful, cleared up the mystery of slugs. Thanks!
Neil Says:
December 25th, 2008 at 10:47 am
what if the post appears in more than one category? how would you add a custom style to each post slug?