I always wondered how Mark had those small yellow posts over at Weblog Tools Collection. It was only after a while that I realized that they are what are called Asides.

Asides as the name goes is something aside your normal content. I use the asides to link to to posts on which I don’t want to comment much about. However, I feel it valuable to point my visitors towards that link.

The Codex article on Asides is the first place to start and proved to me to be a great help when I wanted to implement asides on both my blogs.

You have the option to implement asides using WordPress plugins or if you’re like me, you would prefer modifying your template files to implement the same. Without further ado, let me explain how I implemented asides on this blog.

Step 1: Create a Category

The first step in creating an aside is to create a category on your blog for this purpose. I have created a category Linkyloo (inspired by WLTC).

Linkyloo Category has ID 80

You will need to note down the ID of the category. In my case it is 80.

Step 2: Edit the template

We next need to modify the index.php file of your theme. Do remember to backup your theme folder in case something goes wrong.

In my theme I had the code:

  1. <?php if (have_posts()) { while (have_posts()) { the_post(); ?>
  2. <div class="post">
  3. <?php require(‘post.php’); ?>
  4. <?php comments_template(); // Get wp-comments.php template ?>
  5. </div>
  6. <?php } ?>

This code basically lists all the posts on my index page. Your index.php of the theme should have similar code.

The post.php is used so that I don’t need to repeat my code sitewide.

I replaced the code above as follows:

  1. <?php if (have_posts()) { while (have_posts()) { the_post(); ?>
  2. <?php if (in_category(40) &amp;&amp; !$single) { ?>
  3. <ul class="asides" style="margin-left: -15px">
  4. <li id="p<?php the_ID(); ?>">
  5. <h3 class="asidetitle"><?php the_title(); ?></h3>
  6. <?php echo wptexturize($post->post_content); echo ‘ ‘; comments_popup_link(‘(0)’, ‘(1)’, ‘(%)’)?>
  7. <?php edit_post_link(‘Edit’, ”, ”); ?>
  8. </li>
  9. </ul>
  10. <?php } else { ?>
  11. <div class="post">
  12. <?php require(‘post.php’); ?>
  13. <?php comments_template(); // Get wp-comments.php template ?>
  14. </div>
  15. <?php } ?>
  16. <?php } ?>

Remember to replace 80 in the code above with the Category ID that you got in Step 1.
The code above basically checks if your post is from the Linkyloo category and that it isn’t on a single page. If this is the case, then it creates an unordered list and puts the post as a list item.
If this isn’t the case, the post is displayed as normal.

Step 3: Styling your Asides

In step 3, we designated the aside post unordered list with a class asides. This can be styled using CSS.
e.g. I use the following code in my CSS file.

  1. ul.asides {
  2. background: url(img/asides.gif) #FFFFF0 no-repeat right bottom;
  3. border-bottom: #D2691E solid 1px;
  4. border-top: #D2691E solid 1px;
  5. font-size: 1em;
  6. list-style: none;
  7. margin: 1.25em 0 1.25em 0;
  8. padding: 15px;
  9. }
  10.  
  11. ul.asides li a {
  12. background: none;
  13. }
  14.  
  15. ul.asides li {
  16. background: url(img/linkyloo.gif) no-repeat 2px 5px;
  17. list-style: none;
  18. padding: 0 0 8px 16px;
  19. }
  20.  
  21. ul.asides .asidetitle {
  22. height: 1px;
  23. left: -999em;
  24. overflow: hidden;
  25. position: absolute;
  26. width: 1px;
  27. }

If you would like the two images, rightclick and save from these links: asides.gif and linkyloo.gif

Step 4:

Did I say three steps? But, you still need to make a post and when posting select Linkyloo as your category. So go ahead on your blog and make your first Aside by linking to this tutorial and spreading the word about it.

Check your index page. You’ll need to tweak the CSS a bit to ensure that the asides fit into your site layout.

Subscribe to the Feed

Liked this article? Subscribe to site feedSubscribe to the Feed, subscribe via email or add to your Technorati favs to receive regular updates..

Post Details

Post Date :
Wednesday, Mar 21st, 2007 at 7:08 pm
Category :
Techtites Daily and Tips and Tutorials and Wednesday and WordPress and WordPress Themes
Tags :
, , ,
Do More :
You can leave a response or a trackback from your own site.

Related Posts

Some posts related to the post you have just read:

Recent Posts

Previous and Next

Firefox 2.0.0.3 is now yours »
« Tool Tuesday: WinPatrol

Latest Five