Remote Sensing Tools

Control over reality.™

IKONOS 4,3,2 false-color composite, converted to pseudo natural-color using the CIR to Naturaltone plug-in. Image courtesy of GeoEye.
cingular cell phone ringtones3586i free nokia polyphonic ringtonefree monophonic ringtones nokia 3315real ringtones for nokia 3220all ringtone format for verizonringtones for metro pcs
← Content Aware Image... OSSIM Updates, BigTIFF... →

Easy Asides for WordPress

October 26th, 2007 · 32 Comments · Trackback/Ping · Share This

I was looking for a way to incorporate Asides posts in my WordPress template, and came across a few options. Unfortunately, none of the options that I found would accomodate the way that I have my AdSense ads recursing through the loop to figure out at what position to place them. (Unfortunately, you have a limit to how many text ads you can place, thus you’re forced to display ads at specific interval positions in the post order.)

I figured out a relatively easier method for approaching Asides in my current template — and one which doesn’t touch the existing while loop. Having looked at other themes’ loop structures, it can probably apply to many of those as well. It’s a little bit ‘cleaner’ approach than Matt’s script, perhaps, due to it not altering the existing code. (Consider this approach more like a refined version of Matt’s original script.)

The following is a quick run-down of the code, first listing the original template code — and then the modified version. (If you’d like to try this, make sure you back-up your original template before making any modifications!)

In the original template (Main Index), you’ll see the posts loop. The structure of it will basically look like the following:

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

[...] post content here [...]

<div class="clear"></div>

<?php endwhile; ?>

[...] remainder of template [...]

What I’ve done then, is simply created a category called Asides — noted the ID number for that category (in my case, it was ID number 98), and added the needed Asides code, which resembles the following. (The added code is colored in purple, to demonstrate what was added in the context of the original template loop.):

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

<?php if (in_category(98)) : ?>
<ul class="asides_entry">
<li><span><?php the_time('F jS, Y') ?> at <?php the_time('g:i a') ?></span> &middot; <?php echo wptexturize($post->post_content); ?> &middot; <?php comments_popup_link('(0)', '(1)', '(%)'); ?></li>
</ul>
<div class="clear"></div>

<?php else : ?>

[...] post content [...]

<div class="clear"></div>

<?php endif; ?> <!-- End category-98 Asides if -->

<?php endwhile; ?>

[...] remainder of template [...]

The reason why I left the <div class="clear"></div> line in here, is to point-out that if in the event your template uses a div to clear for layout, you’ll at least know how I have it set-up. If your template doesn’t use that method for layout, strip those out and you should be able to figure it out.

CSS Styling

The CSS for my version is relatively simple, but you’ll probably want to style yours according to however you want it to look in your theme:

ul.asides_entry { width: 480px; padding: 0 0 5px 15px; list-style: none; border-left: 5px solid #efefef; float: left; }

.asides_entry li { font: normal 1.2em Georgia, "Times New Roman", Times, serif; color: #666; line-height: 1.35em; list-style: none; }

.asides_entry span { font-weight: bold; }

.asides_entry li a, .asides_entry li a:visited { color: #666; text-decoration: underline; }

.asides_entry li a:hover { color: #f00; text-decoration: underline; }

Perhaps that’ll come of use to someone. You can see the post below this one on the Index page is an Asides post. Additionally, I used basically the same code in the Archive template — so that when listing, anything in the Asides category will still display this way. As of this writing, I’m still contemplating on what other templates I really care to include it in — Search, perhaps. I’m really not sure, because I kind of like it the way it is at the moment.

Update

I’ve already ‘tweaked’ my own CSS styles here on this site, so keep in mind that if you place the CSS above and wonder why it doesn’t quite look like mine — that would be the reason.

Categories: Tutorials · WordPress
Tags: , , , ,

Advertisement

32 responses so far ↓

  • 1 Weblog Tools Collection » Blog Archive » Easy Asides for WordPress Oct 26, 2007 at 2:14 pm

    […] fixes and everything about blogging, especially with Wordpress. Go ahead, subscribe to our feed!Easy Asides for WordPress: Daniel has come up with another way to easily add “Asides” to your WordPress install. […]

  • 2 Erigami Oct 26, 2007 at 4:05 pm

    If you don’t want to edit code to provide Asides, take a look at http://www.piepalace.ca/blog/projects/miniposts/

  • 3 Asides en tu blog : Infoxicados Oct 26, 2007 at 4:09 pm

    […] Una forma bien simple de implementar asides -textos cortos sin título, como estás viendo- vía Remote Sensing Tools. […]

  • 4 Brad's Ramblings Oct 26, 2007 at 4:11 pm

    Asides!…

    ……

  • 5 bob jarborfski Oct 26, 2007 at 4:26 pm

    i am using a similar method to seperate my asides, but i am not a code genius, so i have a simple code question: is it possible to seperate and style different categorys with this? if so, how? ;) thanks in advance, i am really looking forward to your answer!

  • 6 Daniel Oct 26, 2007 at 5:11 pm

    Bob,

    I would imagine that if you built additional if else statements to separate the way you wish to display your categories within the loop — yes, this code could potentially acheive that. It would be a rather bulky template, perhaps, but manageable if you have a small number of categories.

    You would just keep building category ID conditionals, placing the display code beneath, and an else to the next part, etc — and adding the endif statement below to close for each new condition.

  • 7 Truden Oct 26, 2007 at 5:29 pm

    I’m trying very hard to see this code as “cleaner” than Matt’s code, but forgive me the ignorance, I can not see it as such.

    I’m using Matt’s code with small css touch ups and it seams much cleaner to me.

    What do I miss?

  • 8 Ben M Oct 26, 2007 at 10:06 pm

    Thanks for the revised code. Even if it does the same thing as Matt’s, it’s nice to have it a little cleaner under the hood.

  • 9 Daniel Oct 27, 2007 at 12:45 am

    Truden,

    If you look at Matt’s method here, you’ll notice that he deletes portions of the original loop code. I’m simply adding to the loop, or building-on the template code to acheive the same result.

    This approach allowed me to retain a script that I needed, which requires the original loop code be present — thus providing flexibility without having to significantly alter what existed. Otherwise, yes, the end-result is, for all practical purposes, the same.

  • 10 Truden Oct 27, 2007 at 1:47 am

    I’m not arguing, Daniel,

    But in Matt’s weblog I found this code:

    <li id="p">post_content); echo ' '; comments_popup_link('(0)', '(1)', '(%)')?>

    Which I used in the loop.

    It doesn’t look (much) different than your code. Any way, we all appreciate any effort of making webmasters life easier :) Thanks.

  • 11 Daniel Oct 27, 2007 at 1:59 am

    Yes, you are correct. That portion of the code is the output that the page renders.

  • 12 jez Oct 28, 2007 at 6:14 am

    Using the same method (kind of) ever since on my site, but good job here on writing it up and making it understandable for the masses!

  • 13 Daniel Oct 28, 2007 at 7:13 am

    Thanks, Jez. I really appreciate that. I’m really liking the additional flexibility in post-styling now, because it feels like it takes a certain amount of pressure off the communication process. It’s like the difference between whitey-tighties and boxers — or — something.

  • 14 Jenny Oct 29, 2007 at 6:05 am

    Heh I like this way better then Matt’s too. Thankies. I’m so using this in my upcoming theme.

  • 15 links for 2007-10-30 : 7 seconden Oct 29, 2007 at 8:41 pm

    […] Easy Asides for WordPress (tags: wordpress hacks) […]

  • 16 Branders.name | Blog Archive » WordPress Asides Nov 1, 2007 at 7:56 am

    […] ook zulke “asides” willen als diegene die ik nu net ingevoerd heb, kijk dan eens naar Easy Asides. Niet zò easy, maar met wat PHP-wijzigingen kom je er […]

  • 17 Aside number 1 -- flisterz:blog - life, reviews, technology, wordpress, design, CSS and anything! Nov 2, 2007 at 6:50 pm

    […] you can see, here is an aside post. Technique inspired by Mohdismail.com with the guidance code by Remote Sensing. And also, added the pagination down there for easier […]

  • 18 my love is pink » sunday ramblings… Nov 4, 2007 at 7:25 pm

    […] for the asides, those small little posts you see every now and then, I’m actually using this hack. fairly easy to implement, just make sure you back everything up before you […]

  • 19 Improving User Experience with Small Site Enhancements // Headsetoptions.org Nov 6, 2007 at 8:52 am

    […] the cosmetic and SEO changes, very little have changed in terms of functionality until now. I added asides (you are reading one) and comment edit (for users who spell like me), and made changes related […]

  • 20 Blogs Of The Day Lister » WordPress Wednesday News: WordPress 2.3.1 Released, Get Your Upgrade, WordPress Podcast Speaks out, WordCamp Israel a Success, Argentina is Next, and WordPress Wins. Nov 20, 2007 at 9:21 am

    […] Easy Asides for WordPress […]

  • 21 Wie erstelle ich Asides in Wordpress? (3th) Dec 8, 2007 at 2:03 am

    […] Codevorlage zur Variante 1 (und eine genauere Erklärung als meine) findet sich bei Remote Sensing Tools. Die Codevorlage zur Variante 2 (und eine genauere Erklärung) findet sich bei […]

  • 22 NSpeaks Dec 9, 2007 at 12:04 pm

    Tried several plugins but all didn’t do what I wanted. In the end used your code…superb. Even your css fitted my theme with minimal fuss! Great code!

  • 23 Adding Asides, Losing Mini-blog — Antbag.com Jan 11, 2008 at 1:56 am

    […] aka asides within the body of my blog. This only adds functionality to my site. Thanks to Daniel Denk for the great how-to. addthis_url = ‘http%3A%2F%2Fantbag.com%2Fadding-asides-losing-mini-blog%2F’; […]

  • 24 my love is pink » mini posts Jan 21, 2008 at 10:11 am

    […] (asides). I wish I could take full credit for the mini posts, but I can’t . I used this little simple tutorial! It’s super easy to implement into a theme. Super,Super! easy! If I can do it, anyone can! […]

  • 25 Brad Jan 24, 2008 at 7:40 pm

    Thanks for the great tip. I’ve modified your code slightly and have added it to one of our sites. It’s perfect!

  • 26 » Asides: post nella sidebar » Blogg ‘R Feb 20, 2008 at 7:56 am

    […] Per chi non vuole usare plugin ma preferisce modificarsi il codice, un paio di hack si trovano in questa pagina sul sito di Wordpress, e un’altro in quest’altro sito. […]

  • 27 Asides sans plugin — Daily trivia Mar 3, 2008 at 8:30 am

    […] Implementing “asides” (miniblog, sidebog) with using any plugin. Neat. 10:30 pm […]

  • 28 depth64 » Asides on Wordpress 2.3 Mar 27, 2008 at 3:39 pm

    […] Pour ceux qui chercherai comment faire et qui échouerai ici, j’ai tout simplement suivi les explications de daniel. […]

  • 29 Jonathan Edström » Asides i WordPress Mar 31, 2008 at 5:04 am

    […] Denk skriver om hur man fixar asides till WordPress. Finare än Matt’s script. This entry was written by admin, posted on March 31, 2008 at […]

  • 30 Neil Apr 3, 2008 at 6:57 pm

    worked a dream, cheers mate!!

  • 31 Alex Apr 15, 2008 at 8:30 am

    Life is beautiful when the code just works. Thanks brother. It worked, even for me ;-)

  • 32 Daniel Apr 18, 2008 at 11:51 pm

    Alex & Neil,

    Thank you both kindly for the kind words.

Respond to “Easy Asides for WordPress”