WordPress Wednesday: Implementing Asides in 3 Steps
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).
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:
<div class="post">
<?php require(‘post.php’); ?>
<?php comments_template(); // Get wp-comments.php template ?>
</div>
<?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:
<?php if (in_category(40) && !$single) { ?>
<ul class="asides" style="margin-left: -15px">
<li id="p<?php the_ID(); ?>">
<h3 class="asidetitle"><?php the_title(); ?></h3>
<?php echo wptexturize($post->post_content); echo ‘ ‘; comments_popup_link(‘(0)’, ‘(1)’, ‘(%)’)?>
<?php edit_post_link(‘Edit’, ”, ”); ?>
</li>
</ul>
<?php } else { ?>
<div class="post">
<?php require(‘post.php’); ?>
<?php comments_template(); // Get wp-comments.php template ?>
</div>
<?php } ?>
<?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.
background: url(img/asides.gif) #FFFFF0 no-repeat right bottom;
border-bottom: #D2691E solid 1px;
border-top: #D2691E solid 1px;
font-size: 1em;
list-style: none;
margin: 1.25em 0 1.25em 0;
padding: 15px;
}
ul.asides li a {
background: none;
}
ul.asides li {
background: url(img/linkyloo.gif) no-repeat 2px 5px;
list-style: none;
padding: 0 0 8px 16px;
}
ul.asides .asidetitle {
height: 1px;
left: -999em;
overflow: hidden;
position: absolute;
width: 1px;
}
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.
About Ajay
A die-hard blogger, web developer, biker, singer, geek, non-stop talker, foodie, movie freak are just some of the words that begin to describe me.
(4.93 out of 5)
(3.69 out of 5)
Mmm I think I like Matt’s Asides better. It’s less confusing.
where do I get the asides.gif and linkyloo.gif ?
@Jenny, This is actually similar Matt’s asides. I have taken the trouble to explain everything in detail so that even newbie users can implement this.
@Liew, I’ve updated the posts with the links to the images.
Apparently, this is still not simple enough. I am modifying a theme that does not have the same code structure as what you posted above. I wonder if you would be willing to take a look and help me understand how I might implement asides?
If you don’t mind, let me know and I will email the .txt file.
Thanks.
John, I am currently on holiday, but sent me your txt file at techtites AT techtites DOT com and I will have a look at it.
Thanks for the help, Ajay – working perfectly now.
You’re welcome…
Hi There Ajay – great tutorial but there is one little aspect of your solution that is potentially deadly as far as SEO – hidden text.
You use the CSS to hide the title -
ul.asides .asidetitle {
height: 1px;
left: -999em;
overflow: hidden;
position: absolute;
width: 1px;
}
DON’T DO THAT! It’s against the google webmaster guidelines, and I’ve seen many many sites banned or penalised for hidden text.
A better solution if you don’t want to show the title is to remove line 5 altogether -
Can you show me the page for this??
Hi Ajay!
You can find a discussion from Google about this problem at their official blog, here.
I’m not trying to scare you – it’s not highly likely that this small instance would trigger a penalty – but it does happen, so it’s worth being aware of it and avoiding using negative indents or other ways of hiding text if possible.
I post over at the official google webmaster help forums on a regular basis, and it’s something we see a bit.