The home page of this WordPress theme has two columns of posts. This is a really handy layout, but we realized that the code being used to create this layout was causing all the problems. So we needed to find another solution.

cre8d design has a tutorial on how to organize posts into two side-by-side columns in WordPress. It’s based on adding a “switch” that tells WordPress if a post should appear in the first column or the second column. Basically, the code is saying the following:

Are we in the first column?
Yes: Move to the second column.
No: Move to the first column.

The code calls styles from your style sheet that tell the left column to float left, and the right column to float right.

cre8d’s demo page for this technique:

We also needed to exclude two categories from appearing on the homepage, so here’s a simplified version of the final code we used to replace Adii’s code in his default.php file:

<div class="box"><?php query_posts('showposts=4'); ?><?php $hol = 1; ?>

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

<?php if (in_category('3')) continue; ?>

<?php if (in_category('4')) continue; ?>

<?php if ($hol == 1) echo "<div class=\"row\">"; ?>

<div class="post hol<?php echo $hol;?>" id="post-<?

php the_ID(); ?>">

<?php if ( get_post_meta($post->ID, 'thumb', true) )

{ ?> <!-- DISPLAYS THE IMAGE URL SPECIFIED

IN THE CUSTOM FIELD -->

<img src="<?php echo get_post_meta($post->ID, "thumb",

$single = true); ?>" alt="" />

<?php } else { ?> <!-- DISPLAY THE DEFAULT IMAGE, IF CUSTOM

FIELD HAS NOT BEEN COMPLETED -->

<img src="<?php bloginfo('template_directory'); ?>

/images/no-img-thumb.jpg" alt="" />

<?php } ?>

<h2><a title="Permanent Link to <?php the_title(); ?>"

href="<?php the_permalink() ?>" rel="bookmark">

<?php the_title(); ?></a></h2><p><?php the_excerpt(); ?></p>

<?php if ($hol == 1) echo "</div>";

(($hol==1) ? $hol=2 : $hol=1); ?>

</div><!--/post-->

<?php endwhile; ?>

<?php endif; ?>

The following styles need to be added to your style sheet so that the columns float left and right:

.row { clear: both; }
.hol1 { width: 200px; float: left; padding: 0 10px; }
.hol2 { width: 200px; float: right; padding: 0 10px; }

I wrote one of the posts straight in WordPress’ text editor, and the other one I wrote in Windows Live Writer. You would think I could go back and get the post written in Live Writer, but once I uploaded the post from Windows Live Writer to WordPress and saved it there, the local Live Writer version became connected to my online version, so that when I tried to view the draft in Windows Live Writer, I got the online blank version.

Has anyone had this happen to them? Anyone know how this can be fixed?

Alternating Comments Styles

To alternate comments, add the following code to your comments.php template file, under where it says <?php if ( $comments ) : ?>:

<ul>
<?php $i = 0; ?>
<?php foreach ($comments as $comment) : ?>
<?php $i++; ?>
<li id="comment-<?php comment_ID() ?>"<?php if($i&1) { echo 'class="odd"';} else {echo 'class="even"';} ?>>

Then, create a style called .even and a style called .odd in your style.css file. Give each style a different background color, like this (but change the colors to what you want):

.odd {
background-color: #fcf9fc; }

.even {
background-color: #616161; }

This information is from the following WordPress support topic:

How to alternate background colors of comments posted on blog?

Alternating Post Styles

Adam Brown has a tutorial on his site for creating alternating styles for posts. Basically, you do the following:

1. Right before the loop begins, add the following code:
   <?php $odd_or_even = 'odd'; ?>
2. Right after the loop, there will be a div. Let’s say it’s called class=”post”. Change it to
   <div class="post <?php echo $odd_or_even; ?>">, and then add the following piece of code on the next line: <?php $odd_or_even = ('odd'==$odd_or_even) ? 'even' : 'odd'; ?>
3. Now, create .odd and .even styles in your style.css.

Adam’s site has another really useful PHP Tutorial for Wordpress Users, which is good for those of us who aren’t going to become PHP gurus, but would like to know enough PHP to extend our WordPress sites.

I also wanted to do this in a way that would make these links easily importable to other platforms besides WordPress, such as Twitter and in the facebook status. I figured the best way to do this would be to dedicate an RSS feed to these short bits of information. I considered using Twitter, but decided against it because it adds my Twitter name to the beginning of every feed. facebook’s status isn’t so easy to export. So I chose Tumblr.

I hadn’t visited Tumblr for a while, and was pleasantly surprised by the new additions to this already useful service. Tumblr is like Twitter in that it gives you a platform for sending out short bits of information, and they have added the option of following other Tumblr users, but the difference is that Tumblr allows you to post a wider range of types of content, such as photos, videos and audio, something Twitter doesn’t do. I guess people really like the bare-bones nature of Twitter, but I prefer Tumblr.

In any case, I got going with Tumblr and added a few posts. Then I had to find the right plugin or method for adding RSS feeds to this blog. I decided to go with WP-o-Matic.

WP-o-Matic is a bit tricky to set up, but it gives you a lot of features and options once you get it right. Here’s how you use it:

1. Download and upload the directory under wp-content/plugins. Activate.
2. You have to follow four steps to set it up, including choosing a name for the feed and giving it a slug. One of the steps is checking whether your server is compatible with Simple Pie. Just click on the link, and it will open up a new page that will either congratulate you for being compatible, or curse you. Just kidding, I don’t know what happens if you’re not compatible.
3. You will have to set up a cron job. I’ve never done that before, but the plugin author has made it really easy. You are given a line of code to use. Log in to your Control Panel, and under Advanced you will see an icon called Cron jobs. Click on that, and choose Standard. Paste your code snippet into the box called Command to run, and click on Save Crontab. That should do the job.
   Update: If your cpanel looks different and asks for Common Settings, here’s what to do: The line of code the plugin gives you starts with stars and slashes.  Remove those and start from /usr/bin/curl…. etc. Fill in the rest like the screenshot below:
   
4. Go back to the WP-o-Matic setup and press Submit.
5. A new menu appears under your standard WordPress menu.
6. Once you’ve completed those four steps, you can set up your first “campaign.” This is how WP-o-Matic refers to any incoming RSS stream. So click on Add Campaign.
7. You have five tabs at the top of the campaign: Basic, Feeds, Categories, Rewrite, and Options. You need to click on each, fill them out, and only once you’ve completed that, click Submit.
8. Under the Basic tab, enter the Title of your Campaign. Check the box next to Active, and give it a slug if you like.
9. Under the Feeds tab, you can enter as many feeds as you like.
10. Under the Categories tab, select the category under which you want this Campaign to appear on your blog. If you want to create a new one, you can do it right there by clicking on Quick Add.
11. The Rewrite tab allows you to swap words in your feed, or link specific words to a website. I’m sure that’s handy, but I ignored it.
12. Under the Options tab, you can choose to use a custom post template, set the frequency for how often the feeds should be checked, select whether images will be cached on your server or hotlinked from the other server (choose cached if you want to be a good citizen), select whether to use the date of the original feed, or the date when the feed was imported, whether to perform pingbacks, whether the post should be published automatically or saved as Private or a Draft, the name of the author, and whether to allow comments or pings.
13. Click Submit.

That’s it. I think I may want to suppress this category from appearing on the blog home page, and have it only appear in its own section in the sidebar. I also think I’ll set the feed to automatically be saved as a draft so that I can add tags and other stuff to each tidbit for easier sorting and finding later.

Now I can use twitterfeed to have my Tumblr posts automatically published by my Twitter account. And the Twitter facebook app imports my tweets into my facebook status. Social media happiness! (Or ridiculousness, depending on how you look at it.)

I’d really like to hear what you think, and if you have any other ways for importing RSS feeds into your WordPress blog, whether as posts or in the sidebar. I suspect there is an easier way since sploggers are doing this kind of thing all the time.

You may encounter situations where you need to automatically display a thumbnail or image of some kind that will link to posts. Here’s an example of this kind of situation: you want to display recent posts from a certain category on your home page, with a thumbnail for each post and maybe the title and an excerpt. Or, I recently had a client that had a box on their homepage for multimedia where they wanted an image to appear that would represent the latest post in the Media category and would link to that post. A link to this site is at the end of this post, so read on.

I found the solution in two amazing WordPress themes: Mimbo and The Morning After. They both use thumbnails on their home page, and they do it by using WordPress’ mysterious Custom Fields feature.

You need to be able to upload images to your server in order to do this. You can do this via FTP, but to make this as easy as possible for clients, I use the Filosofo Old-Style Upload Plugin which creates a link on your nav bar where you select files for uploading. But first you need to configure this plugin and select a folder where all uploads will be saved:

1. Upload the plugin and activate it.
2. Go to Options > Uploads.
3. Enter your destination directory. I think the best is to use your images folder in your theme folder so that any images you upload will be in an easily portable place. So the path could be something like /home/server/public_html/wp-content/themes/themefolder/images. The plugin will suggest a path, and it is usually right.
4. Enter the URI of the folder. It’s something like http://www.yoursite.com/wp-content/themes/themefolder/images.
5. You might as well up your maximum file size. I make it 500 kb.
6. Allowed file extensions: jpg, jpeg, gif, png, pdf – I add PDF and other types of files I think clients may want to upload.
7. Minimum level to upload: I leave it at 6 since I have no idea what this means.
8. Click Update Options.

That’s done. Now for how to create a post with a thumbnail image.

1. Create an image for your post with the right width and height. The size of the image depends only on the design of your site and where it is going to appear.
2. Go into the admin of your site. Click on Upload (it’s on the upper nav bar).
3. Select the file you are uploading, select No Thanks so it won’t create a thumbnail, give it a description (that’s good for Google) and click Upload File.
4. Once it’s uploaded it will show you the entire URL of the image. Note particularly the last part of the link where it says the name of your image, especially if there are any capitals in any part of the name. You will have to enter the exact file name in step 8.
5. Go to Create Posts. Enter your post and title as you wish. Make sure to select the category you have selected as the one that will appear with the thumbnails. Now scroll all the way down to the bottom of the screen where it says Custom Fields. Click on the plus button to expand it.
6. Enter the word Image (with a capital I) in the Key field.
7. In value, enter the exact name of the file you uploaded. For example picture.jpg or image.gif. Click Add Custom Field.
8. Save your post.

Now we need the code that will make this thumbnail appear where you want it to appear. Following is the code for having a thumbnail appear with the title underneath it. This code is adapted from the Mimbo theme, but the code in The Morning After is similar:

<?php
// this is where the Features module begins
query_posts('showposts=1&cat=199'); ?> //change the showposts number to the number of posts that you want to appear, and change cat=199 to your category number, which you can find out by going to Manage > Categories
<?php while (have_posts()) : the_post(); ?>
<div class="thumbnails"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo get_option('home'); ?>/wp-content/themes/themefolder/images/<?php
// this is where the custom field prints images for each Feature
$values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
<p class="title"><a href="<?php the_permalink() ?>" rel="bookmark">
<?php
// this is where title of the Feature gets printed
the_title(); ?></a></p></div>
<?php endwhile; ?>

Wanna see an example? Check out this site, scroll to the bottom and look at the left-most column that is called Media. That image there is a thumbnail that was uploaded and entered in the Custom Field of the post it links to.

Update Nov. 27, 2007: This post got a lot of comments here, and on Weblog Tools Collection who referred to it. Lots of people gave more recommendations on how to manage thumbnails with custom fields and/or plugins, so I collected these tips into one post which you can see here: Images, thumbnails and custom fields in WordPress.

<?php $myposts = get_posts('numberposts=10&offset=1');
foreach($myposts as $post) >
<li><a href="<?php the_permalink(); ?>"><?php the_title();?></a></li>
<?php endforeach; ?>

You can set the number of recent posts to appear on the first line of code where it says numberposts=10 – change the 10 to the number of posts you want to appear. You can choose to offset the recent posts by any number; for example, if you select offset=1, as we did above, it won’t display the most recent post, but will start the list from the second-most recent post.

I started WordPress Garage in order to document my discoveries about WordPress. It was meant to serve as an online manual of sorts. So I decided to go back in time to see what I was blogging about close to the beginning of my WordPress journey.

I can see that the issues that interested me most at that time were related to optimizing blogs for search engines and readers. Here are the tips that most interested me at that time:

• Tags – Tags are useful for more detailed categorization of posts, search engine optimization, and user navigation. I wanted to find the perfect tagging plugin that not only would add tagging, but enable me to create tag clouds and list related posts based on those tags, so that I could use one plugin for three features. First I tried Jerome’s Keywords Plugin, only to find that it didn’t work once I upgraded from WordPress version 2.1.1 to 2.1.2. I then tried out Simple Tagging, which works wonderfully and does everything I want it to do, and now use it on all WordPress blogs and sites that I build.
• Excerpts – if you use <?php the_excerpt() ?> instead of <?php the_content() ?> in your template files so that certain pages automatically display excerpts instead of the full text of the post, all html tags are stripped from the text. That means that if you have images or links in the first paragraph or so of text, they are removed from the excerpt. Annoying. I searched for a solution and found The Excerpt Reloaded plugin. Only, it didn’t work quite right – if my excerpt had a bulleted list in it, for example, the entire page following that excerpt would be styled as one long list. But Rob, a blessed plugin developer, created a mod of the plugin that fixed this problem. I highly recommend using this plugin if you want to automatically display excerpts and retain the formatting.
  Excerpts and videos: even with Rob’s plugin, videos that are embedded in the beginning of any post will not appear in excerpts – only the code will. So far, the only way that I have found for displaying videos in excerpts is to stop using <?php the_excerpt() ?> and to manually insert excerpts.
• Future posting – this is a tip that I learned from Lorelle. When I first started blogging, I would write five posts on one day, and then publish nothing for the next couple of days. Not a very good strategy, since people, and maybe even search engines, like to see new content on a daily basis. So I started future posting whenever possible, which gave me some peace of mind for a few days where I knew I could take a break from blogging.

The above tips are pretty basic, but I think they can mean the difference between a well optimized and usable blog, and one that doesn’t reach its potential.

I recently discovered a new related posts plugin which seems easier to use, and I plan to try it out in one of my next sites – Aizatto’s Related Posts Plugin. WordPress by Examples gives a detailed description (more detailed than on the plugin developer’s site) of this plugin’s features:

• No messing with database tables: this plugin does the database stuff automatically
• You don’t have to modify your template files – the related posts appear at the end of every post.
• The related posts also appear in the RSS feed – that is pretty cool!
• You can customize the appearance of the related posts.

Aizatto’s Related Posts Plugin>>

1. It won’t allow you or other users to inadvertently break your blog design with photos that are too large.
2. By having consistently sized photos, your site gains points in aesthetics.

The plugin’s developer lists the following additional benefits of the plugin:

• Conserves bandwidth, server storage, and decreases load times.
• Reduces reader annoyances (keeps text from appearing to auto-scroll as images load in)
• Lightweight (does all processing on post save)

Wordpress Plugin – iMax Width>>

I tried to get an idea of how he does it by using Firefox Web Developer and Firebug, and it seems that it’s a mixture of Javascript and Flash.

Whatever it is, it’s pretty. Check out cfTopper to see it in action (and to learn about ColdFusion if you’re interested!).

cfTopper>>