Smashing Magazine - we smash you with the information that will make your life easier. really.

by Jean-Baptiste Jung

2008 was a very good year for the WordPress community. The software was updated numerous times, leading to the recent release of version 2.7, and many new blogs dedicated to WordPress were created. Of course, tons of new hacks were discovered, which helped lots of bloggers enhance their blogs.

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.

You may be interested in the following related articles as well:

• 8 Useful Wordpress SQL Hacks
• 10 Useful RSS Hacks For Wordpress

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]

1. 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.

1. Open the functions.php file in your theme.
2. 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;
   }

3. 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.

Sources:

• How to Display Ads Only to Search Visitors
• How to: Display AdSense to search engine visitors only

2. 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.

1. 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>
   
   <?php
   $ids = array();
   while (have_posts()) : the_post();
   the_title();
   ?>
   <br />
   
   <?php $ids[]= $post->ID;
   endwhile; ?>

2. 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>
   <?php
   query_posts("showposts=50");
   while (have_posts()) : the_post();
   if (!in_array($post->ID, $ids)) {
     the_title();?>
     <br />
   <?php }
   endwhile; ?>

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.

Source:

• How to: Use two (or more) loops without duplicate posts

3. 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.

1. The first thing to do, obviously, is download the plug-in.
2. Unzip the plug-in archive on your hard drive, and upload the wp-pagenavi.php and wp-pagenavi.css files to your theme directory.
3. 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:

4. <div class="navigation">
   <div class="alignleft"><?php next_posts_link('Previous entries') ?></div>
   <div class="alignright"><?php previous_posts_link('Next entries') ?></div>
   </div>

   Replace this part with the code below:

   <?php
   include('wp-pagenavi.php');
   if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
   ?>

5. 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

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

   <link rel="stylesheet" href="<?php echo TEMPLATEPATH.'/pagenavi.css';?>" type="text/css" media="screen" />

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.

Source:

• How to: Integrate pagination in your WordPress theme

4. 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.

1. Paste the following code anywhere in your theme.

   <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
   
   <?php
   $szPostContent = $post->post_content;
   $szSearchPattern = '~<img [^\>]*\ />~';
   
   // 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 > 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 < $iNumberOfPics ; $i++ ) {
             echo $aPics[0][$i];
        };
   };
   
   endwhile;
   endif;
   ?>

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.

Sources:

• Manipulate images from WordPress post content with regular expressions
• How to: Retrieve images in post content

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 href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" 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

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

1. Open the functions.php file in your theme. If that file doesn’t exist, create it.
2. Paste the following code:

   <?php remove_filter('the_content', 'wptexturize'); ?>

3. 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.

Source:

• How to get rid of curly quotes in your WordPress blog

7. 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');

Source:

• How to: Deny comment posting to no referrer requests

8. 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.

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

2. 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="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
   <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
   </ul>

   To list your categories:

   <ul id="nav">
   <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
   <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
   </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.

Source:

• CSS Techniques: Using Sliding Doors with WordPress Navigation

9. 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.

1. 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.
2. Upload the images to your wp-content/themes/yourtheme/images directory.
3. 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
   <div id="header" style="background:transparent url(images/.jpg) no-repeat top left;">

4. 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.

Source:

• How to: Display a random header image

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:

<?php
$my_query = new WP_Query('post_status=future&order=DESC&showposts=5');
if ($my_query->have_posts()) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <li><?php the_title(); ?></li>
    <?php endwhile;
}
?>

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.

Sources:

• How to: List scheduled posts
• Den Leser in die Zukunft blicken lassen

Related posts

You may be interested in the following related articles as well:

• 8 Useful Wordpress SQL Hacks
• 10 Useful RSS Hacks For Wordpress

(al)