openswitch

Since implementing inline asides on this blog I’ve received several emails from readers wondering how, exactly, I did it. I’ve said it before but it bears repeating: whenever possible I try my best to respond to reader questions and suggestions here. Due to the fact that more than one person has asked me put together a tutorial on inline asides I’m going to do my best to explain how inline asides are accomplished. This, however, requires that I point to and quote from the tutorial that I myself followed and learned from. That’s why this is a “pseudo-tutorial.” I didn’t come up with any of this stuff, I’m just regurgitating it here … only, I’m using different words and hopefully a little n00b insight as to what’s going on in the code.

BTW, this tutorial is for WordPress themes. On with the tut!

The “Why”

Why did I want inline asides? Mostly because I’ve coveted Kottke’s and Matt’s use of them. I wanted a way to keep my blog focused around 2 or perhaps 3 main topics, but I also wanted a means of expressing my own little quirks and side-interests as well. As Lorelle points out, successful blogging is typically accomplished by focusing your blog’s content around one or two specialties:

Which one do you think is really the most successful [way to blog]? Gaining an audience by reputation and expertise, or being the biggest garbage can along the Information Highway?

This was something I’ve taken to heart but I’ve been hanging around myself long enough to know that I’m not always able to stay on topic. I needed a way to go off topic while not breaking the content-theme of the blog. This is why, incidentally, I’ve excluded my asides from my main feed. They’re not really a big part of this blog’s content, they’re basically just off-topic banter.

At any rate, that’s the “why” of inline asides here. Let’s get to the “how.”

The “How”

Basically all I did was tell my blog to find any posts that are in the “asides” category and display them differently in the index.php file. It’s a relatively simple principle but the implementation is a little tricky. To make use of this or any tutorial on implementing inline asides you really must be at least somewhat comfortable with php. Sorry :*(

Unfortunately different WordPress themes are all coded slightly different. I’m currently using a slightly modified Cutline theme whose coding is superb and even with it I had to use trial and error to get inline asides to work properly. I tell you that because if you want to implement inline asides into your blog then you just need to anticipate a bit of hacking.

To start with, there are two files that you’ll change: index.php and stylesheet.css. Make sure you’re changing the index.php file that’s within your theme’s directory. Don’t change the one in your root directory. Following are the steps to change the index.php file and the stylesheet.css file.

1. You first have to find this line near the top of the index.php file:

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

   and comment it out by inserting two forward slashes like this:

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

   Of course, with Cutline it wasn’t that cut and dried (pun). The code in Cutline looks like this:

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

   I had to replace those two lines with this one line:

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

   and it worked just fine.

2. Then, directly under that line I pasted this code, as per verbatim in the tutorial I referenced:

   <?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();
   ?>

   The next step in the tutorial calls for the following code to be pasted right under the date call (<?php the_date(); ?>). This didn’t give me the desired effect. I didn’t want the date to show in my asides, I just wanted the content and a permalink. So I put this code directly above the date call:

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

   In the above code you’ll have to change in_category(47) to whatever ID# your asides category is on your WordPress install. To find out what the ID# is you go to your admin panel>manage>categories and note the number to the far left in the row that lists your asides category. You’ll also notice that the above code is a little different than what’s listed in the original tutorial. That’s due simply to my own preferences.

3. The next step involves tweaking some code near the bottom of the index.php file. Here’s where it’s gonna get messy. Expect some trial and error here. The original tut says to find this code:

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

   and replace it with this code:

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

   If only it were that easy with every theme.

   In Cutline the code looks like this:

   <?php endwhile; ?>
   
   
   
   <?php include (TEMPLATEPATH . ‘/navigation.php’); ?>
   
   <?php else : ?>
   
   <h2 class=“page_header center”>Not Found</h2>
   
   
   
   Sorry, but you are looking for something that isn’t here.
   
   
   
   <?php include (TEMPLATEPATH . “/searchform.php”); ?>
   
   </div>
   
   <?php endif; ?>
   
   </div>
   
   <?php get_sidebar(); ?>
   
   </div>
   
   <?php get_footer(); ?>
   
   

   But what it needs to look like is this:

   <?php endif; // end if in category ?>
   <?php
   }
   }
   else
   {
   echo '<p>Sorry No Posts Found.</p>';
   }
   ?>
   <br />
   <?php include (TEMPLATEPATH . '/navigation.php'); ?>
   </div>
   <?php get_sidebar(); ?>
   </div>
   <?php get_footer(); ?>
   

   That should work for the Cutline theme but for any other theme I’m sorry to say that it’s impossible to tell you exactly what the code should look like. You basically just have to make sure that you’re closing all the conditional php calls that you opened at the top of the index.php file. Sorry I can’t be more specific.

4. At this point your work in the index.php file should be done. On your blog you should notice that all your posts in the “asides” category (or whatever category you decided to use) are styled differently than the rest of your posts. Specifically they should have virtually no styling at all. Now is where you need to go to your stylesheet.css and add in some styling. Here’s what I used:

   ul.linklog li { padding-left: 20px; background: url(address to my image) top left no-repeat; border-top: none !important; margin: 7px 0 8px 0px; list-style-type: none; font-size: 1.4em; line-height: 1.65em;}
   
   .linklog li span a { text-decoration: none !important; }
   
   
   
   
   

5. As a last step I wanted to remove the “asides” category from showing up in my feed. I did this for several reasons but mostly because it’s what Kottke does and darn it, I wanted to do it too. Instead of more hacking — which I was tired of at this point — I just found a nice simple plugin and let it do the work for me.

That should do it. Of course, you’ll want to go and style your asides differently than I did to match your blog’s style. Ideally you want your asides to blend in and stand apart at the same time. You want your readers to be able to easily spot an aside but you don’t want your asides to distract from your main content.

Happy aside-ing!