Top Most Wanted Wordpress Hacks

12 June 2009 2 Comments Posted in Wordpress by Wajid Khan

One of the reasons people love WordPress so much is its great flexibility. You can change the software’s appearance with themes. You can enhance its functionality with plug-ins. And, last but not least, you can totally unleash WordPress’ power with hacks.

In this article, we’ll show you 10 new useful killer WordPress hacks to unleash the power of your favorite blogging engine. Each hack has an accompanying explanation, so you’ll not only unleash the power of WordPress but also understand how it works.

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 :-

and this loop should end here :-

Sorry, nothing matches that criteria.

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 :-

with this :-

have_posts()) : $my_query1-&gt;the_post(); ?&gt;

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

Top Most Wanted Wordpress Hacks

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) :-

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

'.$cats[$i].'
 
';
 
elseif ($i&gt;=$cat_n/2):
 
$cat_right = $cat_right.'
	<li>'.$cats[$i].'</li>
';
 
endif;
 
endfor;
 
?&gt;
<ul class="left"></ul>
<ul class="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.

Listing Blog Authors

Top Most Wanted Wordpress Hacks

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

<ul></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

Top Most Wanted Wordpress Hacks

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 :-

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 src="&lt;?php bloginfo('template_directory'); ?" type="text/javascript"><!--mce:0--></script>

Finally replace

with

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) :-

and this loop should end like this :-

Sorry, nothing matches that criteria.

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 :-

current_post &lt; 3) { ?&gt;
 
<!-- Google Adsense Code goes here -->

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 :-

', $post_HTML='
 
') {
 
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-&gt;comments LEFT OUTER JOIN $wpdb-&gt;posts ON ($wpdb-&gt;comments.comment_post_ID = $wpdb-&gt;posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC
 
LIMIT $src_count";
 
$comments = $wpdb-&gt;get_results($sql);
 
$output = $pre_HTML;
 
foreach ($comments as $comment) {
 
$output .= "
	<li><a href="\">ID) . "#comment-" . $comment-&gt;comment_ID  . "\" title=\"on " . $comment-&gt;post_title . "\"&gt;" . strip_tags($comment-&gt;com_excerpt) ."...</a></li>
";
 
}
 
$output .= $post_HTML;
 
echo $output;
 
}
 
?&gt;

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

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>id="comment-"&gt;</li>

Replace the above code with this :-

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

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 :-

<ul>
	<li>: <a href="&lt;?php the_permalink(); ?&gt;"></a></li>
</ul>

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

<h2>Categories</h2>
<h2>Monthly Archives</h2>

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.

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 :-

Replace the above code with the following code :-

<div class="gravs">
 
=2.5)
 
echo get_avatar( $comment-&gt;comment_author_email, $size = '50', $comment-&gt;comment_author_link);?&gt;</div>

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 :-

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

ID, 'medium' ); ?>


post_excerpt) ) the_excerpt(); // this is the "caption" ?>

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

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 :-

If you enjoyed this post, make sure you subscribe to my RSS Feed

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 :-

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="&lt;?php bloginfo('url'); ?&gt; /" method="get">
 
]*)&gt;#", "
", $select);
 
echo $select;
 
?&gt;
 
<noscript>mce:1</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="\&quot;archive-dropdown\&quot;">
 
<option value="\&quot;\&quot;"></option>
</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="&lt;?php bloginfo('template_directory'); ?&gt;/ads/125x125.gif" border="0" alt="Advertising" /></a></div>
<div class="ad_125x125"><a href="#"><img src="&lt;?php bloginfo('template_directory'); ?&gt;/ads/125x125.gif" border="0" alt="Advertising" /></a></div>
</div>
<!-- bannerads -->

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 :-

', $after = '
 
', $show_pass_post = false, $duration='') {
 
global $wpdb;
 
$request = "SELECT ID, post_title, COUNT($wpdb-&gt;comments.comment_post_ID) AS 'comment_count' FROM $wpdb-&gt;posts, $wpdb-&gt;comments";
 
$request .= " WHERE comment_approved = '1' AND $wpdb-&gt;posts.ID=$wpdb-&gt;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) &lt; post_date "; } $request .= " GROUP BY $wpdb-&gt;comments.comment_post_ID ORDER BY comment_count DESC LIMIT $no_posts";
 
$posts = $wpdb-&gt;get_results($request);
 
$output = '';
 
if ($posts) {
 
foreach ($posts as $post) {
 
$post_title = stripslashes($post-&gt;post_title);
 
$comment_count = $post-&gt;comment_count;
 
$permalink = get_permalink($post-&gt;ID);
 
$output .= $before . '<a title="' . $post_title.'" href="' . $permalink . '">' . $post_title . '</a> (' . $comment_count.')' . $after;
 
}
 
} else {
 
$output .= $before . "None found" . $after;
 
}
 
echo $output;
 
} ?&gt;

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.

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>

Display AdSense Ads to Search Engines Visitors Only

The problem. It’s a known fact that regular visitors don’t click on ads. Those who do click on ads are, 90% of the time, visitors coming from search engines.

Another problem is Google’s “smart pricing.” Being smart priced means that your click-through rate (CTR) is low and the money you earn per click is divided by between 2 and 10. For example, if a click would normally earn you $1.00, with smart pricing it could earn you as little as $0.10. Painful, isn’t it? Happily, this solution displays your AdSense ads to search engine visitors only, which means more clicks and a higher CTR.

The solution.

Open the functions.php file in your theme.

Paste the following code in it:

function scratch99_fromasearchengine(){
  $ref = $_SERVER['HTTP_REFERER'];
  $SE = array('/search?', 'images.google.', 'web.info.com', 'search.', 'del.icio.us/search', 'soso.com', '/search/', '.yahoo.');
  foreach ($SE as $source) {
    if (strpos($ref,$source)!==false) return true;
  }
  return false;
}

Once done, paste the following code anywhere in your template where you want your AdSense ads to appear. They’ll be displayed only to visitors coming from search engine results:
```
if (function_exists('scratch99_fromasearchengine')) {
  if (scratch99_fromasearchengine()) {
    INSERT YOUR CODE HERE
  }
}
```

Code explanation. This hack starts with the creation of a function called scratch99_fromasearchengine(). This function contains a $SE array variable in which you can specify search engines. You can easily add new search engines by adding new elements to the array.

The scratch99_fromasearchengine() then returns true if the visitor comes from one of the search engines containing the $SE array variable.

Avoid Duplicate Posts in Multiple Loops

The problem. Due to the recent popularity of “magazine” themes, there’s a high demand from WordPress users who use more than one loop on their blog home page for a solution to avoiding duplicate posts on the second loop.

The solution. Here’s a simple solution to that problem, using the power of PHP arrays.

Let’s start by creating a simple PHP array, and put all post IDs from the first loop in it.
```
<h2>Loop n°1</h2>
ID;
endwhile; ?&gt;
```
Now, the second loop: we use the PHP function in_array() to check if a post ID is contained in the $ids array. If the ID isn’t contained in the array, we can display the post because it wasn’t displayed in the first loop.
```
<h2>Loop n°2</h2>
ID, $ids)) {
  the_title();?&gt;
```

Code explanation. When the first loop is being executed, all IDs of posts contained within it are put into an array variable. When the second loop executes, we check that the current post ID hasn’t already been displayed in the first loop by referring to the array.

Replacing “Next” and “Previous” Page Links with Pagination

The problem. By default, WordPress has functions to display links to previous and next pages. This is better than nothing, but I don’t understand why the folks at WordPress don’t build a paginator by default. Sure, there are plug-ins to create pagination, but what about inserting it directly in your theme?

The solution. To achieve this hack, we’ll use the WP-PageNavi plug-in and insert it directly in our theme.

The first thing to do, obviously, is download the plug-in.
Unzip the plug-in archive on your hard drive, and upload the wp-pagenavi.php and wp-pagenavi.css files to your theme directory.
Open the file that you want the pagination to be displayed in (e.g. index.php, categories.php, search.php, etc.), and find the following code:
```
 
```
Replace this part with the code below:

Now we have to hack the plug-in file. To do so, open the wp-pagenavi.php file and find the following line (line #61):

function wp_pagenavi($before = '', $after = '') {
        global $wpdb, $wp_query;

We have to call the pagenavi_init() function, so let’s do it this way:

function wp_pagenavi($before = '', $after = '') {
	global $wpdb, $wp_query;
        pagenavi_init(); //Calling the pagenavi_init() function

We’re almost done. The last thing to do is to add the wp-pagenavi style sheet to your blog. To do so, open up header.php and add the following line:

Code explanation. This hack mostly consists of simply including the plug-in file directly in the theme file. We also had to add a call to the pagenavi_init() function to make sure the pagination would be properly displayed.

Automatically Get Images on Post Content

The problem. Using custom fields to display images associated with your post is definitely a great idea, but many WordPress users would like a solution for retrieving images embedded in the post’s content itself. The solution. As far as we know, there’s no plug-in to do that. Happily, the following loop will do the job: it searches for images in post content and displays them on the screen.

Paste the following code anywhere in your theme.

post_content;
$szSearchPattern = '~<img alt="" />]*\ /&gt;~';
 
// Run preg_match_all to grab all the images and save the results in $aPics
preg_match_all( $szSearchPattern, $szPostContent, $aPics );
 
// Check to see if we have at least 1 image
$iNumberOfPics = count($aPics[0]);
 
if ( $iNumberOfPics &gt; 0 ) {
     // Now here you would do whatever you need to do with the images
     // For this example the images are just displayed
     for ( $i=0; $i &lt; $iNumberOfPics ; $i++ ) {           echo $aPics[0][$i];      }; }; endwhile; endif; ?&gt;

Code explanation. The above code basically consists of a simple WordPress loop. The only difference is that we use PHP and regular expressions to search for images within the post’s content instead of simply displaying posts. If images are found, they’re displayed.

5. Create a “Send to Twitter” Button

The problem. Are you on Twitter? If so, we’re sure you know how good this service is for sharing what you find interesting online with your friends. So, why not give your readers a chance to directly send your posts’ URLs to Twitter and bring you some more visitors?

The solution. This hack is very simple to achieve. The only thing you have to do is to create a link to Twitter with a status parameter. Because we’re using a WordPress blog, we’ll use the function the_permalink() to get the page URL:

<a title="Click to send this page to Twitter!" href="http://twitter.com/home?status=Currently reading &lt;?php the_permalink(); ?&gt;" target="_blank">Share on Twitter</a>

Pretty easy, isn’t it? But pretty useful too, in our opinion.

Source:

How to: Create a “Send this to Twitter” button

Related plug-in:

Twitter tools

Using Normal Quotes Instead of Curly Quotes

The problem. If you’re a developer who often publishes code snippets on your website, you have probably encountered the following problem: a user tells you that the code you posted doesn’t work. Why? Simply because, by default, WordPress turns normal quotes into so-called “smart quotes,” which breaks code snippets.

The solution. To get rid of theses curly quotes, proceed as follows:

Open the functions.php file in your theme. If that file doesn’t exist, create it.
Paste the following code:
Save the file, and say goodbye to broken code snippets!

Code explanation. The wptexturize() function automatically turns normal quotes into smart quotes. By using the remove_filter() function, we tell WordPress that we don’t want this function to be applied to a post’s content.

Deny Comment Posting to No Referrer Requests

The problem. Spam is a problem for every blogger. Sure, Akismet is there to help, but what about preventing spam just a bit more? The following code will look for the referrer (the URL from where the page was called) when the wp-comments-post.php file is accessed. If a referrer exists, and if it is your blog’s URL, the comment is allowed. Otherwise, the page will stop loading and the comment will not be posted.

The solution. To apply this hack, simply paste the following code into your theme’s function.php file. If your theme doesn’t have this file, just create it.

function check_referrer() {
    if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == “”) {
        wp_die( __('Please enable referrers in your browser, or, if you\'re a spammer, bugger off!') );
    }
}
 
add_action('check_comment_flood', 'check_referrer');

Using CSS Sliding Doors in WordPress Navigaton

The problem. The built-in wp_list_pages() and wp_list_categories() functions allow lots of things, but they do not allow you to embed a <span> element so that you can use the well-known CSS sliding-doors technique. Happily, with some help from PHP and regular expressions, we can use this awesome technique on a WordPress blog.

Due to the number of tutorials on CSS sliding doors, we’re not going to explain how it works here; consider reading this excellent article if you need to know more about the technique. To view a live demo of this example, click here and refer to the main menu.

Create the images you need, and then edit the style.css file in your WordPress theme. Here is an example:

#nav a, #nav a:visited {
  display:block;
}
#nav a:hover, #nav a:active {
  background:url(images/tab-right.jpg) no-repeat 100% 1px;
  float:left;
}
#nav a span {
  float:left;
  display:block;
}
#nav a:hover span {
  float:left;
  display:block;
  background: url(images/tab-left.jpg) no-repeat 0 1px;
}

Now it is time to edit the header.php file. Simply copy and paste one of the following codes, according to your needs:To list your pages:

<ul id="nav">
	<li><a href="&lt;?php echo get_option('home'); ?&gt;/"><span>Home</span></a></li>
]*)&gt;\]*)&gt;(.*?)\&lt;\/a&gt;@i', '
<span>$3</span>', wp_list_pages('echo=0&amp;orderby=name&amp;exlude=181&amp;title_li=&amp;depth=1')); ?&gt;</ul>

To list your categories:

<ul id="nav">
	<li><a href="&lt;?php echo get_option('home'); ?&gt;/"><span>Home</span></a></li>
]*)&gt;\]*)&gt;(.*?)\&lt;\/a&gt;@i', '
<span>$3</span>', wp_list_categories('echo=0&amp;orderby=name&amp;exlude=181&amp;title_li=&amp;depth=1')); ?&gt;</ul>

Code explanation. In this example, we make use of the echo=0 parameter in the wp_list_pages() and wp_list_categories() functions, which allows you to get the result of the function without directly printing it on the screen. Then, the result of the function is used by the PHP preg_replace() function and finally displayed with <span> tags added between the <li> and <a> tags.

Display a Random Header Image on Your WordPress Blog

The problem. This is not really a problem, but many WordPress users would love to be able to display a random header image to their readers.

The solution.

Once you have selected some images to be your header images, name them 1.jpg, 2.jpg, 3.jpg and so on. You can use as many images as you want.
Upload the images to your wp-content/themes/yourtheme/images directory.

Open header.php and paste the following code in it:

$num = rand(1,10); //Get a random number between 1 and 10, assuming 10 is the total number of header images you have

You’re done! Each page or post of your blog will now display a random header image.

Code explanation. Nothing hard here. We simply initialized a $num variable using the PHP rand() function to get a random number between 1 and 10. Then, we concatenate the result of the $num variable to the path of the theme we are using.

10. List Your Scheduled Posts

The problem. Like many bloggers, you probably want your readers to visit your blog more often or subscribe to your RSS feed. A good way to make them curious about your future posts is by listing the titles of your scheduled posts.

The solution. Open any of your theme files and paste the following code:

have_posts()) {
    while ($my_query-&gt;have_posts()) : $my_query-&gt;the_post(); ?&gt;

Code explanation. In this code, we have created a custom WordPress query using the WP_Query class to send a database query and fetch the five most recent scheduled posts. Once done, we use a simple WordPress loop to display the posts’ titles.

UPDATED:11 Jan 2010

Found something missing in this post?

While compiling this stuff on this post, it’s possible that we miss some other great wordpress hacks. Do not hesitate to share it with us in Comments so that we can add instantly.

This entry was posted on Friday, June 12th, 2009 at 3:25 AM and is filed under Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.