Feature
Post

Category
Code


Fun with WordPress 2.7: Adding Asides without Hacking the Loop

As you’ve probably noticed, there’s a bunch of funky things you can do with WordPress 2.7, due any day now. Previously, we’ve played with the new sticky post functionality, and then there’s the category styling features added with the new template tag for post CSS classes. Let’s dive a little deeper into the latter, adding an asides functionality without actually hacking the loop or using a plugin.

Requirements and Preparations

For this to work, you need the beta version of WordPress 2.7 (the third one’s the latest when I’m writing this, but do check the dev blog to make sure). You also need to use the post_class() template tag to spit out the classes in your post’s div tag, so make sure your theme is up to date with that. It is detailed in this post. You could always use the default theme with the 2.7 beta as well, and then easily add this functionality to your own theme when the full version is out.

As for preparations, you’ll need to decide on what category should be your asides one. In my Notes Blog Core theme, I call it “asides”, plain and simple. It also has “asides” as its slug, so that means that post_class() will add the CSS class category-asides to the post div, as detailed in the previous post. You can call your asides category whatever you want, just swap out the slug part in the code.

The Code

Right, so lets get this baby on the road! First of all, this is how we want it to look:

You can see this baby in action over at my Notes Blog theme site, where I’ll be offering the Core version of the theme for free at a later date. I’ve pulled this code snippet from the Notes Blog Core theme, so this is actually exactly what I’m doing in my style.css file right now:

[CSS]
#content .category-asides { margin-left: 30px; padding-left: 10px; border: 3px solid #eee; border-width: 0 0 0 3px; }
#content .category-asides span.comments { font-weight: bold; }
#content .category-asides .entry p { font-size: 12px; line-height: 18px !important; margin-bottom: 10px; }
#content .category-asides h2 { font-size: 12px; line-height: 18px; float:left; margin:0; padding: 0 8px 0 0; border:0; }
#content .category-asides h2 a { color: #333; }
#content .category-asides h2 a:hover { color: #a00; }
[/CSS]

So what’s happening here? It’s pretty straight forward. Just disregard the #content if you will, that’s the div container with the content stuff. You probably have one in your theme as well.

The .category-asides is the actual class of course. This is where we tell it how to behave. You can see the border, some padding and margins, things like that. The rest tells us how h2 tags should work and so on.

And that’s it, basically!

How to Add This to Your Theme

Naturally, you don’t want my Notes Blog Core styling on the asides your theme, unless it really fits. Luckily, it’s very easy to add this to your theme. Just add the .category-X class, where X is the slug of the category you want to be the asides one, and style it accordingly. In other words, if you want to use the category called “asides”, just add:

[CSS]
.category-asides { your custom styling }
[/CSS]

…and take it from there.

Feel free to borrow ideas, elements, or whatnot from the asides code demoed above.


  1. By Shay posted on January 6, 2009 at 8:03 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for the insight, it’s been a big help.

    The problem I’ve found *after* getting this working is how to tell the CSS to treat the Asides as normal posts when someone clicks to view / comment on the Aside? I’m using a separated CSS file and I can’t find an ID or class that I can use to distinguish between the homepage and a postpage. Any thoughts?

  2. By poer posted on January 21, 2009 at 12:45 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    nice one, so now we don’t need to add additional if in the loop to filter out the asides posts and give it a special css style :cool: i’ll try it, thanks.

  3. By Vinoth posted on July 23, 2009 at 4:05 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi , Thanks for the useful post. I’m complete noob to WordPress

  4. Trackback  Get ready for WordPress 2.7 with these theme tutorials by Free WordPress Themes BlogSka jag ändra inriktning?