Code

Simple Asides

I’ve seen a number of tutorials about asides online, and I think that Ma.tt’s was the first. Thing is, it seems that it’s a bit complicated for some people, those who aren’t as amazing with PHP as him. Like me, then.

All of the tutorials I read included adding multiple chunks of code, left right and centre. I’m going to show you a nice simple way of adding asides to your blog, with only one chunk of code, and one “}”. That’s it. 2 inserts, and you’ll be ready to go :) I’ll also demonstrate some cool additions that you could do, if you like. I’d like to note that I learned this entirely by reading the previously linked post by Matt, and a few others all over the place, and by trial and error. I’ve lost count of how many times I’ve changed the asides structure on this blog, and I think I’ve sussed it now :)

Okay, before we start. You need a category, let’s call it asides. When you make it, hover over the edit link on the categories page, it should give you an ID number. It’s important that you remember that!

Please note - the following is code editing. If you’re not confident doing this, don’t. Get someone (like me) to do it for you, cheaply. Honestly though, it’s really simple. Always backup all of the files that you edit, it’s VERY important that you do so.

Right then. Open up your index.php file. This should be what is used to make the home page of your website show your posts. Ok, edit time. Look for the following line of code:

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

That’s where Wordpress starts processing your posts. Now, directly below that (before ANYTHING else) put the following:

<?php if (in_category(449) && !$single) { ?>
<ul>
<li id="p<?php the_ID(); ?>"><?php echo wptexturize($post->post_content); echo ' '; comments_popup_link('(0)', '(1)', '(%)')?> <?php edit_post_link('(e)'); ?></li></ul><br />
<?php } else { ?>

Replace 449 in the first line with the category number I told you to get earlier.

Now, last bit. Scroll down that file a bit more, until you find

<?php endwhile; else: ?>

and replace it with

<?php } endwhile; else: ?>

Save the file and reupload it onto your server. And you’re done. Now your asides will look like they do on this blog, without the vertical line on the left. That’s the basics out of the way. Now, I’ll look at some more complex modifications you can do if you want to, but you don’t need them to make asides work.

Something on the left?

You might notice that my blog has a vertical line on the left hand side of each aside? It’s very simple to add this to your own blog, follow the steps above, and then do the following:

Open up your style.css, and scroll right to the bottom. Ensure you’re not inside the { } of another property, there should be a } on the same line that you are, or at least close. Select the end of the last line, and hit enter. Then paste the following code in:


.asides {
border-left:4px solid #D8471D;

}


Then save. This example shows a pretty red border of 4px on the left hand side.

Now, back to index.php, and to the template I told you to paste in earlier. All you’ve got to do here is replace

<ul>

with

<ul class="asides>

And it’ll work. Nice and simple (again).

#D8471D in the CSS can be changed to any hex code you like.

Changing The Look A Bit

If you want to make the asides template look a bit different, or stand out, you can edit anything in between

<?php if (in_category(449) && !$single) { ?>

and

<?php } else { ?>

to give any effect you like. Edit either before <?php or after ?> , in between them isn’t going to show on the code without echo etc. You don’t need anything but

<?php echo wptexturize($post->post_content); ?>

which is what puts the aside in there. All the other bits perform their own little functions, like the comments link, which is also the only way to get to the posts own page. If you don’t want that to be possible, just remove it. (It’s comments_popup_link('(0)', '(1)', '(%)') FYI )

Breakdown

Here I’ll quickly break down the template I provided above, so you know what each and every bit does. It’s all very simple.

<?php if (in_category(449) && !$single) { ?> this bit makes sure the code is shown for asides, and asides only. It’s pretty important
<ul> ul and li are used to make the bulleted list.
<li id="p<?php the_ID(); ?>"> Makes a unique bullet list ID for each post
<?php echo wptexturize($post->post_content); the post content itself
echo ' '; makes a space between the end of the content and the comments link
comments_popup_link('(0)', '(1)', '(%)')?> shows how many comments there have been, with a link to the commenting section.
<?php edit_post_link('(e)'); ?>; if an administrator is logged in, this will show so you can quickly edit the post. it won’t show anything to visitors, though.
</li></ul> closing the bulleted list for this aside.
<br /> a line break, before the next item.
<?php } else { ?> if the item isn’t an aside, then the normal post template below this will apply.

I hope this has helped someone out there, it took me all of 15 minutes to write, and it’s over 900 words long. Feel free to contact me if you have any issues with this, and I’ll try to help out :)

© 2008 (fused).