Just added a related posts section after the end of each post (here’s an example). For this functionality I’m going plugin-less and opt with this nifty code, which returns related posts based on tags. The code itself is based on the original code on WP Recipes, the difference being that the former is able to work with posts with multiple tags, while the original only cares about a post’s first tag.

UPDATE 24 December 2009:
Changed the main code on line 11 from $get_cat_id = '/cat-item-[0-9]+"/'; to $get_cat_id = '/cat-item-[0-9]+/'; (without double quotes). This is to deal with the additional “current-cat” class added automatically when a category is currently displayed.

One of Grid Focus theme‘s most prominent feature is its navigation bar with link name and description, depicted below in its modified version at Logo Design Love:

These navigation links (and their descriptions) are hard-coded into the theme, though, so they’re a little less flexible. For a theme I’m currently working on, I had an idea of creating a navigation like this but using a list of categories instead. The description text will then be pulled from each category’s description, which can be set directly via the Dashboard menu at Posts > Categories, therefore preventing users from having to mess with PHP file:

The PHP Code

When displaying a list of categories, the function to use is obviously wp_list_categories. However, that function only allows us to use the category’s description as a title property of the anchor link (and nowhere else), for example:

<li class="cat-item cat-item-3">
  <a href="http://wplover.com/category/development/" title="Hack Away">Development</a>
</li>

No luck there, because for our category-based navigation to work, we need to wrap the description inside a span tag:

<li class="cat-item cat-item-3">
  <a href="http://wplover.com/category/development/" title="Hack Away">Development<span class="cat-desc">Hack Away</span></a>
</li>

Our solution then, is to create a little hack where we manipulate the output of wp_list_categories() and inject the descriptions there.

Here’s my code, which should go into functions.php in your theme:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

// Create a modified output of wp_list_categories where the categories description
// is added inside a span tag within the link like so:
//<li><a title="Category Description" href="#">Category Name<span>Category Description</span></a></li>
function list_cats_with_desc() {
  $base = wp_list_categories('echo=0');
 
  // wp_list_categories adds a "cat-item-[category_id]" class to the <li> so let's make use of that!
  // Shouldn't really use regexp to parse HTML, but oh well.
  // (for the curious, here's why: http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 )
 
  $get_cat_id = '/cat-item-[0-9]+/';
  preg_match_all($get_cat_id, $base, $cat_id);
 
  // Let's prepare our category descriptions to be injected.
  // Format will be <a>category-name<span>category-desc</span></a>
  $inject_desc = array();
 
  $i = 0;
  foreach($cat_id[0] as $id) {
    $id = trim($id,'cat-item-');
    $id = trim($id,'"');
 
    $desc = trim(strip_tags(category_description($id)),"\n");   // For some reason, category_description returns the
                                                                // description wrapped in an unwanted paragraph tag which
                                                                // we remove with strip_tags. It also adds a newline
                                                                // which we promptly trim out.
    if($desc=="") $desc = "Add Description";
 
    $inject_desc[$i] = '<span class="cat-desc">' . $desc . '</span></a>';
    $i++;
  }
 
  // Now we inject our descriptions
  $base_arr = explode("\n", $base);
 
  $base_i = 0;
  foreach($inject_desc as $desc) {
 
    // We check whether there's an occurence of "</a>"
    while(strpos($base_arr[$base_i], "</a>") === false) {
      $base_i++;
    }
 
    // If we find one, inject our description <span>
    $base_arr[$base_i] = str_replace("</a>", $desc, $base_arr[$base_i]);
 
    $base_i++;
  }
 
  $base = implode("\n", $base_arr);
  echo $base;
}

After that, calling this list_cats_with_desc() function anywhere in your theme will result in something like this:

<li class="categories">Categories
  <ul>
	<li class="cat-item cat-item-3"><a href="http://wplover.com/category/development/">Development<span class="cat-desc" title="Hack Away" Hack Away</span></a></li>
	<li class="cat-item cat-item-4"><a href="http://wplover.com/category/themes/" title="Pretty Ones">Themes<span class="cat-desc">Pretty Ones</span></a></li>
	<li class="cat-item cat-item-5"><a href="http://wplover.com/category/news/" title="Get Updated">News<span class="cat-desc">Get Updated</span></a></li>
  </ul>
</li>

Notes Regarding the Function

• For this to work, wp_list_categories() must output the links in a list style format. On line 5 of my function above, you can tweak the parameters more (say, to exclude some categories), but the ‘style’ parameter must remain ‘list’. Refer to the Codex for more info about wp_list_categories’ parameters.
• If a category does not have any description, it will use the default text “Add Description” (line 27 above). Change this to anything you wish. Ideally for our navigation, every category must have a description.

The CSS

After we get the HTML list formatted nicely, the last thing to do is to CSS it. Borrowing and tweaking from Grid Focus’ code, you can use something like this as an example:

.categories li a {
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	float: left;
	display: block;
}
.categories li a span.cat-desc {
	color: #888;
	font-size: 0.9em;
	font-weight: normal;
	text-transform: lowercase;
	display: block;
}

The most important thing is to throw a display:block for the .cat-desc so the description stand on its own underneath the category name but still clickable at the same time.

The End

Anyway that’s it! Let me know if you have any thoughts to share!

Sometimes it’s a good idea to modify the permalink of a post to make it more concise but still understandable, and WordPress allows you to change your permalink directly on your write post/page panel via the small form under the title area. Usually, since permalinks are written in this-kind-of-format-with-dashes, I would have to write that way manually: must carefully keep them lowercased and dashed properly.

However, I just found out that you could simply write your title normally there (with alternating cases and spaces, even):

And WordPress will automatically prettify the permalink for you:

Nice usability, there. To whoever coded this into WP, I humbly thank you.

Sophia gets the honor of being one of the available themes for BuddyPress, so I go and do some CSS modification so it works better there.

If you’re using Sophia on standalone WordPress, the update includes non-BuddyPress specific CSS fixes too.

Download the update here.

Sophia is an elegant, minimalistic child theme for Ian Stewart’s Thematic. It’s a two column theme (right sidebar) and is based on the latest version of Thematic (0.9.5.1 as of this post).

Wait. Are You Sure You Want to Install This Theme?

Note that there’s no fancy graphics to distract your readers. No big ugly Twitter/Subscribe/whatever buttons. No Web 2.0 gradients. No abstract, colorful backgrounds. No intricately drawn icons.

Nope.

Sophia is all about your content.

It wraps your ideas in tasteful typography and minimal decorations, then it gets out of the way completely.

Choose Sophia if you believe in substance over style.

Choose Sophia if you need the least friction between your reader and your writings.

Choose Sophia if you want your writing to be the main showcase, the way it should be.

Demo and Download

Demo | Download

Installation

1. Download Thematic and upload it into your theme folder.
2. Download Sophia theme above and upload it into your theme folder.
3. Go into your WordPress Dashboard, select Appearance and activate Sophia.

If you don’t have any idea how to upload a new theme, here’s a tutorial for you.

A Work in Progress

Sophia is a work in progress, as there are some edge cases not yet covered (some obscure CSS stylings, among other things). Feel free to comment and share your ideas below.

Also, you might want to subscribe to wplover to get further updates about Sophia. To be truthful you will probably be deluged with many WordPress-related posts before you get that update, but it’s not like it’s a bad thing, no?

Anyways, enjoy!

There are tons of themes available at the Free Themes Directory, 1052 of them last I checked. How many of them are actually modified version of GPL-licensed so-called premium themes? Not many, I’d say.

Which is a shame. While it’s a good exercise to create your own theme from scratch, it’s much more efficient to just take a good premium theme filled with lots of nice features and modify it according to your own taste and idea. Here’s why:

1. A lot of thoughts has been put into such themes. Useful features, layout considerations, standards-based HTML code, all ready for you to re-use. Stand on the shoulder of the giants.
2. Features. Features features features. That’s what premium themes are made of, and you can have it too with little to no coding involved.
3. HTML/CSS folks with no experience with PHP can do it too. Just modify the CSS without touching the code. Most of the time this means creating child themes, but I don’t see a problem with releasing a full theme, one that is a CSS-modified version of another theme. Better designed themes is a full win for everyone.
4. It saves you time and energy. How many times can you code that comments.php file without losing sanity, anyway?
5. You are free to do it, that’s the point of a GPL license. With more premium themes licensed under GPL, there’s no reason not to take advantage of it. Creating a mod that improves on a theme is nice, but not a requirement. Just experiment and have fun doing it.
6. Most premium themes have a good documentation readily available. Learn a lot while modifying them, and you can use it as additional resources for people downloading your modded theme.
7. I don’t know about you, but if I read “my work is based on a WooThemes theme”, I’m going to pay attention, a lot. There are strong brand associations coming with premium themes. Use it for your world domination plan advantage.

What Kind of Modifications Should I Make?

It’s up to you. Make those themes look sweeter, some of them need it so bad. Lose the garish gradients. Simplify. Add more widgetized area. Offer more layout options, especially if there’s a few already, complete with the theme options for it. Sprinkle some fancy CSS3 or JQuery magic. Add author info section. Threaded comments.

Among other things.

Resources

Premium Mod is doing what I’m talking about here. They are new, so there are still a few mods available. Look around to have an idea of what you can do.

Here’s a list of commercially supported WordPress themes. Plenty of choices.

Conclusion

We have so, so many free WordPress themes, most of them could really use a quality improvement (yeah, including mine). Modding premium themes is a good way to take the quality of WordPress themes into the next level, while at the same time is relatively easier and less time consuming to do for developers.

Everybody wins, so why not?

Writing Secure Plugins by Mark Jaquith.

Creating Community with BuddyPress by Lisa-Sabin Wilson

BuddyPress Groups API by Andy Peatling.

How to in WPMU: Building a blog directory & Domain Mapping by Andrea Rennick.

Will update when more’s available.