As your blog grows more than likely you have settled into a small list of primary focuses. But what if you want to stray from those without detracting from the primary posts?

Enter: Asides.

Asides are quickly becoming popular. They are easy to setup and make a nice addition to your focused blog.

Here is a step-by-step walk through of how I set up asides.

Note: This is for people who are comfortable editing PHP and CSS. I simply followed a tutorial from the WordPress Codex and then tweaked my CSS to get my asides to look how I wanted. Also note that this tutorial is for putting asides within the main content area of your blog and not your sidebar. If you’re using the Cutline theme, then skip my tutorial and go read Ben’s.

1: Make an Asides Category

1. From your WordPress Admin Panel click on Manage –> Categories –> Add New
2. Title the category whatever you want, (it doesn’t have to be ‘asides’) and add it.
3. In the list of categories, note the ‘Category ID’ of your asides category.

2. Backup your theme’s index.php

This way if you goof something up, you can just erase over your mistakes and get things back to the way they were.

1. In the folder of your site’s current theme backup the index.php file.
2. To back up this file you can either download it to your desktop, or just go into the WordPress theme editor, and copy all the text from the index.php file and then paste it into a text editor.
3. If you download it, it is located in http://yoursite.com/wp_content/themes/YOUR CURRENT THEME/index.php

3. Edit your theme’s index.php

1. In a text editor or in your WordPress theme editor open up the index.php file

Find:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Now comment it out like this:

<?php //if (have_posts()) : while (have_posts()) : the_post(); ?>

2. Under that line, paste this:

<?php
if ($posts) 
{ 
function stupid_hack($str) 
{ 
return preg_replace(’|</ul>\s*<ul class=”linklog”>|’, ”, $str); }
ob_start(’stupid_hack’);
foreach($posts as $post)
{ 
start_wp(); ?></ul>

3. The next line will be your date call, if you have one - I don’t.

   (<?php the_date(); ?>)

   If you have a date call then post this text beneath it if you want the asides to be posted after the date. If not then add this text after what you just added.

   Note: Here is where you need to recall the id number of your aside category. Put that in place of 14 from this example.

<?php if ( in_category(14) && !is_single() ) : ?>
<ul class=”linklog”>
<li id=”p<?php the_ID(); ?>”>
< ?php echo wptexturize($post->post_content); ?>
<span><?php comments_popup_link(’(0)’, ‘(1)’,
‘(%)’)?> <a href=”<?php the_permalink(); ?>”
title=”Permalink: <?php echo 
wptexturize(strip_tags(stripslashes($post->post_title), ”)); ?>”
rel=”bookmark”>#</a> <?php edit_post_link(’(e)’); ?></span></li>
</ul>
<?php else: // If it’s a regular post or a permalink page ?>

4. I edited the above code to look like this. I didn’t like having a comments link and a permalink. Also I wanted it to say “X comments” not just “X”. My code looks like this:

<?php if ( in_category(14) && !is_single() ) : ?>
<ul class=”linklog”>
<li id=”p<?php the_ID(); ?>”>
<?php echo wptexturize($post->post_content); ?>
<span>< ?php comments_popup_link(’{0 comments}’, ‘{1 comment}’,
‘{% comments}’)?>
<?php edit_post_link(’(e)’); ?></span></li>
</ul>
<?php else: // If it’s a regular post or a permalink page ?>

5. At the bottom of your index.php file find this:

<?php endwhile; else: ?>
<p><?php _e(’Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

6. Delete that and replace it with:

<?php endif; // end if in category ?>
<?php
}
}
else
{
echo ‘<p>Sorry no posts found.’;
}
?>

7. Save your new index.php file

4. Styling your CSS

Below is the CSS I am using for my asides.

ul.linklog { 
    padding-left:15px;
    font-family:Georgia, Times New Roman, Times, serif;
    font-size: 11px; 
    background: url(images/navbulle.gif) top left no-repeat; 
    border-top: none;
    margin: 0px 20px 35px 5px;  
    list-style-type: none; 
}

ul.linklog a { text-decoration:none; }

Here’s what it means:

ul.linklog
I took out the li tag so it doesn’t read ul. linklog li
What this does it keep my asides from being indented as much as a bulletpoint. I wanted them left aligned with the rest of the content.

background: url(images/navbulle.gif) top left no-repeat:
This is the star that I’m using as my ‘bullet point’. It’s a 10×10 pixel gif image. If you don’t want to make your own bulletpoint then edit the “list-style” attribute.

padding-left:15px;
This moves my text over enough to get out of the way of the star.

margin: 0px 20px 35px 5px;
This is short hand for the margins around the text. It goes in clockwise order starting with the top margin: Top, Right, Bottom, Left.

list-style: none;
This keeps my asides from having a bullet-point.

5. Start Asiding

That should do it. Now when you go to post an aside, just assign it to your aside category.

I’m sure you’ll have to play around with things to get it the way you want with your theme. And if it makes you feel better it took me longer to write this tutorial than it did to install my asides…