10 Killer WordPress Hacks

Advertisement

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:

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:

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:

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

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:

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:

Related plug-in:

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:

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:

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 article14 if you need to know more about the technique. To view a live demo of this example, click here15 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:

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:

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:

Related posts

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

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/12/18/8-useful-wordpress-sql-hacks/
  2. 2 http://www.smashingmagazine.com/2008/12/02/10-useful-rss-hacks-for-wordpress/
  3. 3 http://www.scratch99.com/2008/09/avoid-smart-pricing-show-adsense-only-to-search-engine-visitors/
  4. 4 http://www.wprecipes.com/how-to-display-adsense-to-search-engines-visitors-only
  5. 5 http://www.wprecipes.com/how-to-use-two-or-more-loops-without-duplicate-posts
  6. 6 http://wordpress.org/extend/plugins/wp-pagenavi/
  7. 7 http://www.catswhocode.com/blog/how-to-integrate-a-pagination-in-your-wordpress-theme
  8. 8 http://www.mattvarone.com/wordpress/images-post-wordpress-regular-expressions/
  9. 9 http://www.wprecipes.com/how-to-retrieve-images-in-post-content
  10. 10 http://www.wprecipes.com/how-to-create-a-send-this-to-twitter-button
  11. 11 http://alexking.org/blog/2007/05/07/twitter-tools-10
  12. 12 http://www.wprecipes.com/how-to-get-rid-of-curly-quotes-in-your-wordpress-blog
  13. 13 http://www.wprecipes.com/how-to-deny-comment-posting-to-no-referrer-requests
  14. 14 http://www.alistapart.com/articles/slidingdoors/
  15. 15 http://www.catswhocode.com
  16. 16 http://wphacks.com/sliding-doors-wordpress-navigation-css-technique/
  17. 17 http://www.wprecipes.com/how-to-display-a-random-header-image
  18. 18 http://www.wprecipes.com/how-to-list-scheduled-posts
  19. 19 http://wp-magazin.ch/2008/11/07/den-leser-in-die-zukunft-blicken-lassen/
  20. 20 http://www.smashingmagazine.com/2008/12/18/8-useful-wordpress-sql-hacks/
  21. 21 http://www.smashingmagazine.com/2008/12/02/10-useful-rss-hacks-for-wordpress/

↑ Back to top Tweet itShare on Facebook

This guest post was written by Jean-Baptiste Jung, a 28-year-old blogger from Belgium, who blogs about Web Development on Cats Who Code, about WordPress at WpRecipes and about blogging on Cats Who Blog . You can stay in touch with Jean by following him on Twitter.

Advertising
  1. 1

    #8 is a bit misleading — you can still use the sliding doors method for the wp_list_pages(…) method call. WordPress assigns two classes to help the designer style the nav with the following: class=”page_item current_page_item”. See also: http://codex.wordpress.org/Template_Tags/wp_list_pages#Markup_and_styling_of_page_items

    A designer worth his salt will be able to do this.

    0
  2. 102

    Simply fantastic!! Thank you :)

    0
  3. 203

    you forgot to add $num into image path in #9

    0
  4. 304

    Nabbed some of these hacks for my own blog. Great list.

    0
  5. 405

    Be aware! Tip #1 is using the referer without any validation. If you use it as it is, your blog is wide open for any hacker out there.

    0
  6. 506

    Thanks for the great tips!!

    Regarding Tip 3 – Pagination: you need to copy pagenavi-css.css and not wp-pagenavi.css

    But even doing this, I can’t get the CSS to apply?!?

    Any idea?

    0
  7. 607

    Hack number 1 does not work for me. I write the following

    <?php if (function_exists('scratch99_fromasearchengine')) {
    if (scratch99_fromasearchengine()) {
    google_ad_client = "pub-3xxxxxx"; google_ad_slot = "xxxxxxx"; google_ad_width = 468; google_ad_height = 60; }} ?>

    and for some reason Dreamweaver doesn’t show the last “?>” in red as usual and I get a blank page on my site. Any idea what I did wrong?

    Thanks

    0
  8. 708

    You can use link_before and link_after in 2.7 when doing sliding doors with multiple spans, no need for a hack. Check codex for wp_list_pages for example.

    0
  9. 809

    very nice. thank youuu.

    0
  10. 910

    Thanks! i will use it for my website DooNow.

    0
  11. 1011

    ! Excellent wordpress hacks. Need to adopt in my blog

    0
  12. 1112

    Some very useful hacks. Thanks!

    0
  13. 1213

    Great tips, thank you!

    0
  14. 1314

    What plug-in are you using on the “Spread the word on Twitter” on Smashing Magazine?

    0
  15. 1415

    Great tips, thanks! sounds great idea for my M-E-T-T-A Blog (Many-Exciting-Things-To-Appreciate-Blog)!

    0
  16. 1516

    Thank you, very excellent post!

    0
  17. 1617

    Were you reading my mind? These are great – so many of these hacks are things that I’ve wanted FOR YEARS and just have never had the time or patience to make happen on my blog. Thank you!

    0
  18. 1718
  19. 1819

    Excellent!
    Random image header – exact what I need.

    0
  20. 1920

    thanks for the tips
    thanks :)

    0
  21. 2021

    The twitter tip is great but you are injecting the permalink and not a shortened url. When I check he code for you send to twitter link on this page I see that the url has been changed to a tiny url. Have you some how modified the code to use a shirt url? Or are you manually adding the tiny url version of the url via a custom field?

    0
  22. 2122

    What an excellent post!

    0
  23. 2223

    GR8 post – thankx.

    0
  24. 2324

    Many thanks for the heads up – Very informative and educational.
    Cheers

    0
  25. 2425

    I tried to do the first trick but it didn’t worked!!!!!!

    I pasted the first code in functions.php Then my wordpress admin page didnt opened!
    Some error message was shown with some thing written about header!

    I then removed the code using ftp.

    Please write that trick more deeply.

    0
  26. 2526

    Kekuk –

    The code should instead be,

    $num = rand(1,10);
    <div id="header" style="background:transparent url(images/<?php echo $num; ?>.jpg) no-repeat top left;”>

    1
  27. 2627

    Great tips on links pagination! I wanted to know how to put a small box next to the title of a post with the total number of comments?
    mars-blue

    0
  28. 2728

    Thanks for the TIPS

    Thanks
    Mehedi Hasan
    Web Designer & Developer

    0
  29. 2829

    I realize this was written awhile ago, but I figured if someone comes along and sees this it might be helpful to them.

    In regards to number 8 the author is wrong. wp_list_pages DOES allow you to add tags as shown:

    wp_list_pages(“title_li=&link_before= &link_after= “)

    0
  30. 2930

    eXcellent Vivek

    April 30, 2010 8:48 pm

    Thanks for the Comment hack It is the code I was searching.

    0
  31. 3031

    Awesome! You rock!

    0
  32. 3132

    very nice work. thaks a lot!

    0
  33. 3233

    Justin Tadlock

    July 7, 2010 6:40 pm

    For #2, you should use the ‘post__not_in’ argument in the second query. Otherwise, you end up not displaying some of those 50 posts at all.

    0
  34. 3334

    Great Tutorial, I don’t think these are hacks infact these are great tips & techniques which can be used in wordpress. Thanks for the explanation and code.
    Regards
    Website Developers

    0
  35. 3435

    Very Useful info.. i like “Display AdSense Ads to Search Engines Visitors Only” post very much.. very inspiring .. thnkx.

    0
  36. 3536

    Hi Mr Jung, I’m still a rookie at anything web design. However, I just began trying my hands on wordpress and I’m seriously concerned about security issues. I view your posts in high esteem
    Noticing that this post “10-killer-wordpress-hacks” was posted in 2009, I’d like to find if these hacks are still useful – especially “1 Display AdSense Ads to Search Engines Visitors Only” and “3. Replacing “Next” and “Previous” Page Links with Pagination” since pagenavi plugin has been updated several times since you posted this article.

    I’d appreciate your response. God bless you with more creativity.

    Rgds

    0
  37. 3637

    Лучшие поисковые системы – Яндекс и Google!

    0
  38. 3738

    In item 9 above: is there a way to make each displayed image a clickable link – much like a banner rotator?

    Thanks for all the help!

    May God bless you and all of yours, Don

    0
  39. 3839

    Derek Cheshire is surely an professional, phone speaker, advisor as well as facilitator inside the aspects of enterprise imagination … The method to personal electrical power and the law of attraction advertising crowd …

    0
  40. 3940

    Good stuff is always a good stuff. Thanks

    0

↑ Back to top