Blog Oh Blog

10 WordPress Hacks to Make your Life even Easier

Written by Jai on November 3, 2008 – 2:49 pm - 9,198 views

The last post that I had made on 10 WordPress Hacks to Make your Life Easy got a good number of comments and views. Based on the success, I have decided to make another WordPress Hacks post to make your life EVEN easier. Here is the list of 10 new hacks ready to be bookmarked :-

How to make a Sticky Post

A sticky post is one that will always be on top of all your recent posts and stay there until you change it. You can use a sticky post as a notification, reminder or something that you want to emphasize to your readers. Here is how you can make a sticky post :-

First, decide on a category name that will hold all your sticky posts. For example, you can create a new category and name it “Stickies” and later use this name to call the posts from this category. Now, if you have ever opened the index.php file in any blog styled WordPress theme (Just install the basic Whiteboard theme for this tutorial), you will notice that it has a loop which is used to call your posts.

The loop begins here :-

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

and this loop should end here :-

<?php endwhile; else: ?>
<p>Sorry, nothing matches that criteria.</p>
<?php endif; ?>

Copy everything from the start to the end of this loop (including the above code). Paste it above the existing loop so that index.php will have two identical loops, one over the another. To make the sticky post appear, we will use this new loop which will call a single post from the “Stickies” category.

In the top loop, just replace this code :-

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

with this :-

<?php if (have_posts()) : ?>
<?php $my_query1 = new WP_Query('category_name=stickies&showposts=1'); ?>
<?php while ($my_query1->have_posts()) : $my_query1->the_post(); ?>

So, if you decide to change the category name from “Stickies” to something else, just change it in the above code. You can also change the number of posts that you want to show from the sticky category by modifying the showposts variable.

Breaking Categories into Columns

Normally when the list of categories is displayed in the sidebar or on any part of the theme, it displays in a single column. Through the following hack, you can split your categories’ list evenly into two or more columns which can save space and not make your pages longer. Usually in WordPress, the following code is used to call the categories’ list (you can find it in one of the sidebar files) :-

<?php wp_list_categories(); ?>

Now, we will try and split the categories into two columns. Replace the above code with the following :-

<?php
$cats = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
$cat_n = count($cats) - 1;
for ($i=0;$i<$cat_n;$i++):
if ($i<$cat_n/2):
$cat_left = $cat_left.'<li>'.$cats[$i].'</li>';
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>
<ul class="left">
<?php echo $cat_left;?>
</ul>
<ul class="right">
<?php echo $cat_right;?>
</ul>

Basically the above code will split your categories and put them into two lists (left and right). Now all you have to do is style them so that they float left of each other. Add this code to your style.css file :-

.right {float:left; width:140px;}
.left {float:left; width:140px;}

You might have to make some cosmetic adjustments in the above code so do it at your own pace.

Making Unobtrusive Tabs

If you have been following the latest trend of Premium WordPress themes, you will notice that special tabs are used (mostly in the sidebar part) to display different content like recent posts, comments, archives etc. When you click on any tab, only the content under that particular tab gets highlighted and the rest of the tabs’ content stays hidden. This allows the blog owner to display more content in less space.

Download this file :- Domtabs

Extract the domtab.js and domtab.css files from the archive and place it in your theme folder. Now add the following code in your header.php file above the tag :-

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/domtab.css" media="screen" />

In order to show the tabs, add the following code anywhere in the template. Try adding it to the sidebars :-

<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Tab 1</a></li>
<li><a href="#t2">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>
<div>
<a name="t1" id="t1"></a>
<p>Insert contents of the first tab here,
e.g. The code for a plugin.</p>
</div>
<div>
<a name="t2" id="t2"></a>
<p>Insert contents of the second tab here.</p>
</div>
<div>
<a name="t3" id="t3"></a>
<p>Insert contents of the third tab here.</p>
</div>
</div>

You can change the content for the tabs by altering the code within the paragraph tags and edit domtab.css file for styling information.

Listing Blog Authors

If you are running a multi-user blog and want to list authors, here is the code to do it.

<ul>
<?php wp_list_authors('exclude_admin=0&optioncount=1&show_fullname=1&hide_empty=1'); ?>
</ul>

Here is what the parameters do :-

exclude_admin: 0 (include the admin’s name in the authors) / 1 (exclude the admin’s name from the list)
optioncount : 0 (No post count against the author’s name) / 1 (display post count against the author’s name)
show_fullname : 0 (display first name only) / 1 (display full name of the author)
hide_empty : 0 (display authors with no posts) / 1 (display authors who have one or more posts)

Displaying Categories in a Drop Down Menu

First, add the following code to any part of your theme to show the category list. The recommended choice will be your header.php file which contains the navigation. You can add this code where the navigation ends :-

<?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>

Download this file :- Category Menu and extract both catmenu.css and catmenu.js files to your theme folder. Now, add the following lines to your header.php file before the tag :-

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/catmenu.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/catmenu.css" media="screen" />

Finally replace

<body>

with

<body onload="mbSet('menu')";>

To see the category drop-down menu in action, make sure you have categories and sub-categories set up on your blog. Also make sure that they have some posts in them.

Displaying Google Ads in only first 3 posts

Many bloggers want to display Google Ads in their first three posts only (since Google Adsense only allows 3 strips in a page) but have a hard time doing so without the help of plugins. Let me tell you how to integrate it efficiently into your WordPress theme. Open up your index.php file and look for the loop.

The loop begins here (it can differ for your theme so look for the part that displays your blog posts) :-

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

and this loop should end like this :-

<?php endwhile; else: ?>
<p>Sorry, nothing matches that criteria.</p>
<?php endif; ?>

Ideally, your Google Adsense code should be placed between the start and the end of this loop. So, just pick a position (after the title or at the end of the content) and place the following code :-

<?php if ($wp_query->current_post < 3) { ?>
<!-- Google Adsense Code goes here -->
<?php } ?>

Just replace the commented line with your adsense code, save this file and check your theme. It should display three units of adsense code in your first 3 posts just like you always wanted.

Displaying Recent Comments

In order to display your most recent comments, you will have to modify your functions.php file from the theme folder. If the functions.php file is not present, make a new text file, name it functions.php and add it to your theme folder. Add the following code to it and save the file :-

<?php
function recent_comments($src_count=10, $src_length=60, $pre_HTML='<ul>', $post_HTML='</ul>') {
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,
SUBSTRING(comment_content,1,$src_length) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC
LIMIT $src_count";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
foreach ($comments as $comment) {
$output .= "<li><a href=\"" . get_permalink($comment->ID) . "#comment-" . $comment->comment_ID . "\" title=\"on " . $comment->post_title . "\">" . strip_tags($comment->com_excerpt) ."...</a></li>";
}
$output .= $post_HTML;
echo $output;
}
?>

Now, wherever in the theme you want to display the list of recent comments, just add this code :-

<?php recent_comments(); ?>

Highlighting Author Comments

It takes a bit of tweaking to separate the author’s comments from the readers’ comments. Usually it can be done by changing the color or style of the author’s comments. Here is how can go about doing the same :-

Open up the comments.php file from your theme folder and try to locate the following piece of code :-

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">

Replace the above code with this :-

<li class="<?php if ($comment->user_id == 1) $oddcomment = "authorstyle"; echo $oddcomment; ?>"

Finally, add this to your style.css file in the theme folder :-

.authorstyle {
background-color: #B3FFCC !important;
}

If you are the author and have made comments on a post, check it out. Your comments will have a different background color from the readers’ comments.

Adding a Social Bar to your Posts

Social bookmarking is important if you want your posts to reach more and more readers. Most of the times you have to hunt for a good plugin that will show little icons for different bookmarking websites under each of your posts that will help your readers to bookmark them. But it can also be done through code like this :-

Open the single.php file from your theme folder. Copy the following code and paste it within the WordPress loop (preferably after the content) that calls your post :-

<div class="socials">
<a class="btn_email" href="mailto:?subject=<?php the_title(); ?>&amp;body=<?php the_permalink() ?>">E-mail</a>
<a class="btn_comment" href="#respond">Comment</a>
<a href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;title=<?php the_title() ?>" title="Submit to Del.icio.us" target="_blank" class="btn_delicious">Del.icio.us</a>
<a href="http://www.digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>&amp;title=<?php the_title() ?>" title="Submit Post to Digg" target="_blank" class="btn_digg">Digg</a>
<a href="http://reddit.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title() ?>" title="Submit Reddit" target="_blank" class="btn_reddit">Reddit</a>
<a href="http://technorati.com/faves?add=<?php the_permalink() ?>" title="Submit to Technorati" target="_blank" class="btn_technorati">Technorati</a>
<a href="http://furl.net/storeIt.jsp?t=<?php the_title() ?>&amp;u=<?php the_permalink() ?>" title="Submit to Furl" target="_blank" class="btn_furl">Furl</a>
</div>

Now, copy the following code to your style.css file for the theme :-

.socials {font-size:10px; font-weight:bold; margin-bottom:10px; background-color:#FFFFFF; border:1px solid #BBB9B2; padding:5px 5px 5px 10px; width:540px;}
.socials a {margin-right:10px; color:#BFBCB3;}
.btn_email {background:url(images/mail.gif) left no-repeat; padding-left:15px;}
.btn_comment {background:url(images/comments.gif) left no-repeat; padding-left:15px;}
.btn_delicious {background:url(images/delicious.gif) left no-repeat; padding-left:15px;}
.btn_digg {background:url(images/digg.gif) left no-repeat; padding-left:15px;}
.btn_reddit {background:url(images/reddit.gif) left no-repeat; padding-left:15px;}
.btn_technorati {background:url(images/technorati.gif) left no-repeat; padding-left:15px;}
.btn_furl {background:url(images/furl.gif) left no-repeat; padding-left:15px;}

Finally, download this zip file that contains the icon images for all the social bookmarking websites and place them in the images folder of your theme. Social Bar done

Creating an Archives Page for your Blog

You can create a Page Template for the archives page on your blog. Here is how to go about it :-

Create a new file called archives.php and add the following lines to it :-

<?php
/*
Template Name: Archive page
*/
?>

The above code will give a name (Archive Page) to the template which you will see when making a new page in WordPress. Now add the following code to display a list of all your posts :-

<?php
$posts_to_show = 100; //Max number of articles to display
$debut = 0; //The first article to be displayed
?>
<?php while(have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<ul>
<?php
$myposts = get_posts('numberposts=$posts_to_show&offset=$debut');
foreach($myposts as $post) :
?>
<li><?php the_time('d/m/y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
<?php endwhile; ?>

Finally, add this code to display categories and monthly archives :-

<?php while(have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<h2>Categories</h2>
<ul><?php wp_list_cats('sort_column=name&optioncount=1') ?></ul>
<h2>Monthly Archives</h2>
<ul><?php wp_get_archives('type=monthly&show_post_count=1') ?></ul>
<?php endwhile; ?>

Save the archives.php file and place it in your theme folder. Now, create a new page and name it anything you want. Just make sure that you choose the “Archive Page” template as the template for your new page.

I hope that you liked this exhaustive collection of WordPress hacks and also hoping that it will help you in some way