All About Blog Design, Short Reviews, Tips and Make Money Online

10 WordPress Hacks to Make your Life Easy

Posted: 27 Aug 2008 06:29 PM CDT

Displaying Gravatars in comments

To refresh your memory, Gravatars are little user images from Gravatar.com that are displayed against your comments in the theme (if the theme is built to support Gravatars). A lot of WordPress themes are built without the support of Gravatars. So, here is some help for you to add Gravatars in your theme. Open up your comments.php file from the theme folder. Find this piece of code :-

<?php comment_text() ?>

Replace the above code with the following code :-

<div class="gravs"> <?php if (get_bloginfo('version')>=2.5) echo get_avatar( $comment->comment_author_email, $size = '50', $comment->comment_author_link);?> <?php comment_text() ?> </div> <br clear="all" />

The above code will display the Gravatars. Now let us add some CSS to the style.css file for your theme.

.gravs {margin-top:20px;} .avatar {float:left; margin-right:5px; margin-bottom:5px; padding:3px; border:1px solid #999999;}

When you check your theme again, you will see the Gravatar images against your comments.

Image Gallery in WordPress

All the versions of WordPress 2.5+ have inbuilt Image Gallery function where you can upload your images in a set and then insert the gallery either into your post or a new page.

But almost all the old themes(before 2.5) and many new ones do not have the integrated functionality. In order to add this feature, here is what you have to do :-

In your existing theme, open single.php and save it as image.php in your theme folder. Now open this image.php file in an editor and find the line that displays the post content. It should be somewhat in the following form. It can differ a bit but the function is called by the_content like this :-

<?php the_content('Read More'); ?>

Now insert the following code above the aforementioned code (the_content) :-

<p class="attachment"> <a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a> </p> <div class="caption"> <?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?> </div>

Insert the following code below the aforementioned code (the_content) :-

<div class="imgnav"> <div class="imgleft"><?php previous_image_link() ?></div> <div class="imgright"><?php next_image_link() ?></div> </div> <br clear="all" />

Now, add this CSS to your theme’s style.css file :-

/****************Image Gallery *********************/ .gallery {text-align:center;} .gallery img {padding:2px; height:100px; width:100px;} .gallery a:hover {background-color:#ffffff;} .attachment {text-align:center;} .attachment img { padding:2px; border:1px solid #999999;} .attachment a:hover {background-color:#FFFFFF;} .imgnav {text-align:center;} .imgleft {float:left;} .imgleft a:hover {background-color:#FFFFFF;} .imgleft img{ padding:2px; border:1px solid #999999; height:100px; width:100px;} .imgright {float:right;} .imgright a:hover {background-color:#FFFFFF;} .imgright img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}

The above CSS code fixes the default gallery of WordPress which doesn’t look so good. So, now when you go and upload your images in a post or a page, go to the gallery option (after you have finished uploading all your images) and insert gallery into your post/page. That’s it!

Adding a “Subscribe to feed” message after every post

Many people use this kind of message to remind the readers to subscribe to their blogs and place them at the end of every post. This can be accomplished by using a simple plugin or you can do the following. If you want the message to show under all your posts on the homepage, open up index.php and just where your content finishes (the_content), add this line :-

<div style="padding:5px; border:1px solid #999999; margin-top:10px; background-color:#FFF8AF;"> If you enjoyed this post, make sure you subscribe to my RSS Feed </div>

You can do the same for your single.php file in the theme folder which is used to display your individual posts.

Displaying Twitter messages on your blog

If you have a Twitter.com account and want to display the twitters that you make on your blog, here is what you have to do.

Login to your Twitter.com account. Go to this URL :- http://twitter.com/badges/html and choose your settings. Copy the code and paste it on your blog. You can paste it directly into your theme files or use text widgets to put them in a sidebar. They can also be styled through CSS.

Displaying Authors’ Bio

In a multi-user blog, it can be beneficial to show the Authors’ Bio under every single post for the users to read about the post author. This can be done using the Biographical Info in the Your profile setting under Users section of WP-Admin.

To integrate this bio, open up your single.php file and under the_content line (as before), add this code :-

<div class="author"> <?php the_author_description(); ?> </div>

Now, add the following CSS code to your style.css in the theme folder:-

.author{ color: #222222; font-family: Arial; font-size: 12px; border:1px solid #CCCCCC; width: 500px; padding: 5px; margin-top:10px; margin-bottom:10px; }

Now if you refresh your individual post pages, you will see the author’s info under the post content.

Categories drop down

To add a good looking drop down that will list all your existing categories, insert the following code in your blog template. You can do it either in your sidebar.php file or anywhere in the index.php. This is the code :-

<form action="<?php bloginfo('url'); ?>/" method="get"> <?php $select = wp_dropdown_categories('show_option_none=Select category&show_count=1&orderby=name&echo=0'); $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select); echo $select; ?> <noscript><input type="submit" value="View" /></noscript> </form>

Archives drop down

Just like in categories, you can have your monthly archives listed in a drop down. Add the following code to your template files :-

<select name=\"archive-dropdown\" onChange='document.location.href=this.options[this.selectedIndex].value;'> <option value=\"\"><?php echo attribute_escape(__('Select Month')); ?></option> <?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>

Adding 125×125 Ads to your sidebar

Many people do not know how to integrate 125×125 banner ads into their theme sidebars. I will explain it to you. Save the following image to your desktop (this is a sample 125×125 banner that we will use) :-

Make a folder called “ads” in your theme folder (the theme in which you want to add these banners) and place this image (125.gif) in that new folder. Now, add the following code to your sidebar where you want the banners to appear :-

<div class="bannerads"> <div class="ad_125x125"><a href="#"><img src="<?php bloginfo('template_directory'); ?>/ads/125x125.gif" border="0" alt="Advertising" /></a></div> <div class="ad_125x125"><a href="#"><img src="<?php bloginfo('template_directory'); ?>/ads/125x125.gif" border="0" alt="Advertising" /></a></div> </div> <br clear="all" />

Finally, add the following CSS code to your style.css file :-

.bannerads {width:270px; margin:10px auto;} .ad_125x125 {float:left; margin:0px 5px 10px 5px; width:125px; height:125px;}

When you refresh your theme, you will see two adjacent 125×125 banner ads in your sidebar. You can then change the images as you like and also the hyperlinks.

Displaying most commented (popular) posts

There is always an urge in bloggers to showcase their most popular posts or the posts with the most comments. This is how you can do it:-

Place the following code at the end of your header.php file in the theme folder. You can change the number of popular post titles that will be pulled from the database by altering the $no_posts variable in the code :-

<?php most_popular_posts($no_posts = 5, $before = '<li>', $after = '</li>', $show_pass_post = false, $duration='') { global $wpdb; $request = "SELECT ID, post_title, COUNT($wpdb->comments.comment_post_ID) AS 'comment_count' FROM $wpdb->posts, $wpdb->comments"; $request .= " WHERE comment_approved = '1' AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = 'publish'"; if(!$show_pass_post) $request .= " AND post_password =''"; if($duration !="") { $request .= " AND DATE_SUB(CURDATE(),INTERVAL ".$duration." DAY) < post_date "; } $request .= " GROUP BY $wpdb->comments.comment_post_ID ORDER BY comment_count DESC LIMIT $no_posts"; $posts = $wpdb->get_results($request); $output = ''; if ($posts) { foreach ($posts as $post) { $post_title = stripslashes($post->post_title); $comment_count = $post->comment_count; $permalink = get_permalink($post->ID); $output .= $before . '<a href="' . $permalink . '" title="' . $post_title.'">' . $post_title . '</a> (' . $comment_count.')' . $after; } } else { $output .= $before . "None found" . $after; } echo $output; } ?>

Now, wherever you want to display the popular posts list, place the following code. You can do it in the sidebar or the index.php file.

<?php most_popular_posts(); ?>

Adding a Print Button to your posts

In order to enable your users to take printouts of your posts, you can provide them with a Print button on the blog. Open up your single.php file (for individual posts) from the theme folder and add the following code wherever you want to have the Print option:-

<a href="javascript:window.print()">Print this Article</a>

I hope that you liked these WordPress hacks and also hope that they make your life easy in some way