WordPressGarage.com

Publishing WordPress posts in two columns

We’re currently building a site on Adii’s Premium Gazette WordPress theme (this is an affiliate link). In my opinion, it’s an awesome theme particularly because of the design. However, we installed it on the client’s server of choice, and the posts on the homepage just wouldn’t update. We tested it out on different servers, as well as on the client’s server without any plugins or changes, and it worked on other servers but would not cooperate on the client’s server.

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; }

Posted in Code Snippets | 9 Comments »

Faviconize your WordPress admin

The WordPress admin doesn’t have a favicon. That means that when you’re working with a bunch of tabs open, it’s hard to identify which one is for your WordPress admin. Well, Simply Basic has the solution - simply add one line to wp-admin/admin-header.php that calls the favicon of your choice:

<link rel="shortcut icon" href="<?php bloginfo('url'); ?>/favicon.ico" >

The only drawback is that you have to remember to redo this change every time you upgrade. It might be helpful if there was a plugin that did this for you (hint, hint).

Simply-Basic.com » Give WP-Admin a Custom Favicon

Posted in Code Snippets | 4 Comments »

Using PHP to alternate background colors for comments or posts in WordPress

Some blogs have alternating background colors for their comments and posts, i.e. a green background for every even comment and post, and a grey background for every odd comment and post. How do they do that?

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.

Posted in Code Snippets | 4 Comments »

Giving each comment its own link in WordPress

Being able to link to specific comments in your WordPress blog could be very handy. Good comments can really add a lot of value to a blog, and you or others may want to refer to specific comments in your posts by linking to them. In general, comments can be linked to, but to figure out what the URL is for every comment is virtually impossible, unless…you set up your comments section of your blog so that every comment gets a link.

Here’s how you would create a link around the date and time of your comment:

<p><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a></p>

This piece of code should appear in your comments.php theme file where your comment code appears.

If you want an “Edit Comment” link to appear next to the comment for those who are logged in and have permissions to edit, you would add the following code:

<p><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a><?php edit_comment_link('Edit comment',' ~ ',''); ?></p>

So there you have it boys and girls: now you can link to comments, and share the love with your commenters!

Posted in Code Snippets | 2 Comments »

Giving each WordPress post a thumbnail, and display the thumbnail on the home page

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.

Posted in Code Snippets, Tips | 47 Comments »