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 Link

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

2. Avoid Duplicate Posts in Multiple Loops Link

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

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

4. Automatically Get Images on Post Content Link

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

5. Create a “Send to Twitter” Button Link

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

6. Using Normal Quotes Instead of Curly Quotes Link

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

7. Deny Comment Posting to No Referrer Requests Link

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

8. Using CSS Sliding Doors in WordPress Navigaton Link

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

9. Display a Random Header Image on Your WordPress Blog Link

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

10. List Your Scheduled Posts Link

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

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

(al)

Footnotes Link

  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.

Advertisement
  1. 1

    Excelent!
    Thank you so much. ^.^

    1
  2. 2

    I’ve seen some of these but overall great top 10 list!

    -1
  3. 3

    Enjoyed that article, really good read. Thanks very much.

    1
  4. 4

    good stuff SM! Thanks and keep smashing!

    1
  5. 5

    Great post… Really enjoyed this article. Would love to see more in the same vein. Perhaps a top 10 list for advanced WordPress development.

    -1
  6. 6

    Great article. Have definately been looking for some of the above in my projects.

    1
  7. 7

    Definitely not the “norm” for WP hacks, very nicely done guys! Thanks, I am going to throw in that comment referrer one right now.

    -1
  8. 8

    Awesome – especially the pagination part. Will definitely utilize this in all future projects.

    1
  9. 9

    actually, there’s a plugin for creathumb thumbnails in whaterever sizes and forms you like, using the options panel or php code embeded within the theme files…

    Look for it at http://wordpress.org/extend/plugins/alakhnors-post-thumb/

    -1
  10. 10

    This is mad.. all 10 hacks is what i want!!..

    THanks so much… I gonna apply them all when i’m free..

    0
  11. 11

    Just to say this post is excellent !
    Really good work.
    Thanks very much

    0
  12. 12

    That No.1 item is fantastic, will it work on a non-wordpress page?

    0
  13. 13

    Much appreciated.

    These are some great additions.

    0
  14. 14

    You can display images from recent posts with the Visual Recent Posts plugin. It allows you to achieve an effect much like you have displayed here. Granted, your code is pretty simple.

    0
  15. 15

    great tuts!

    look, on the first hack…

    I CAN’T INCLUDE THE GOOGLE ADSENSE CODE
    INSIDE THE PHP FUNCTION…

    i get a syntax errror…

    any tip? i just paste the google adsense code as the tut says

    0
  16. 16

    Agree with Eddy. Number one is great, it is like Chitika…

    0
  17. 17

    And 10 killer Drupal hacks?

    0
  18. 18

    Awesome hacks, wordpress ones are always much appreciated :-)

    0
  19. 19

    Wicked post Smashing. I love it!

    0
  20. 20

    Good tips. A lot of these are really helpful.

    There’s a few code errors in step 9, though:

    $num = rand(1,10); //Get a random number between 1 and 10, assuming 10 is the total number of header images you have
    &ltdiv id=”header” style=”background:transparent url(images/.jpg) no-repeat top left;”>

    The $num variable doesn’t show up in the header image url and the opening left carrot of your div tag got converted to an html entity.

    0
  21. 21

    Very good post! But of trouble with the AdSense hack, but that was mostly because of a botched plugin-install I had previously. Keep up the good work!!

    0
  22. 22

    Håvard Bergersen

    January 7, 2009 1:31 pm

    something wrong with the rss feed for this post. Only got the html code.

    Good post!

    0
  23. 23

    Awesome post. WP Recipes rocks!

    0
  24. 24

    7. Is a very bad idea. There are quite a few firewalls that block the referrer so you could block with that good users. Just install Norton Internet Security and you’ll get my point.

    I once developed an important feature into a website based on the referrer, until I started to get messages from people that got stuck, lost data because were not automatically redirected as they should have been.

    Later it turned out that quite a few people had different firewalls that were “erasing” their referrer.

    This is one of those: “Kids, do not try this at home! No really, don’t!”

    0
  25. 25

    This is what I’m talking about! Thanks for the 10 great killer tips SmashingMag! You’re awesome

    0
  26. 26

    How to: Display adsense to search engines visitors only

    Anyone wants to confirm that its better?

    0
  27. 27

    Also, will it show ads to reddit, digg , stumbleupon and other new users?

    0
  28. 28

    Thanks..I love these!

    0
  29. 29

    Nice Plugin – for #4 (4. Automatically Get Images on Post Content):
    http://www.alakhnor.com/post-thumb/?cat=61

    0
  30. 30

    You don’t need SPAN for sliding doors, just A and LI, which WP includes already. Thank goodness for web standards and markup elegance, right?

    0
  31. 31

    Thank you for this list. Helpful for me. I’m a new follower.

    0
  32. 32
  33. 33

    Smashing Magazine ,,, Your rocks , I like this web
    We need more for this and thanks for this great site , I really like it

    0
  34. 34

    What can I say….. This post is awesome.

    0
  35. 35

    I’d like to see the option to open your Flickr account from inside wp-admin. I hate going back and fourth with copying the embed code, and I don’t care for Flickr’s post to blog option. Anyone know of a plugin that does such?

    0
  36. 36

    Yeah, I was going to also mention that #9 is jacked up.

    0
  37. 37

    it is very useful !

    ———-http://dress08.com———–

    0
  38. 38

    Thank you, thank you and thank you… I really liked it…

    0
  39. 39

    These are supreme hacks!

    0
  40. 40

    Ya man cheers! Thank you so much for sharing. Now i can work on towards my project ever since i got laid off! Cheers man
    http://www.jobstaxi.com

    0
  41. 41

    Great post, thank you! Keep going then!!!

    0
  42. 42

    OMG dude, insane! Totally insane. Gotta love it dude.

    http://www.online-privacy.se.tc

    0
  43. 43

    7. Deny Comment Posting to No Referrer Requests in this for the people who directly landed on the website couldn’t comment on the topic.. isn’t it.

    vinoth kumar
    http://www.ehotdiscussion.com

    0
  44. 44

    Listing future posts is an absolutely brilliant idea!

    0
  45. 45

    Leszek Pawlowicz

    January 7, 2009 8:53 pm

    For tip 1, the Who Sees Ads plugin can show ads only to visitors from search engines, plus a whole lot more options:

    http://planetozh.com/blog/my-projects/wordpress-plugin-who-sees-ads-control-adsense-display/

    0
  46. 46

    Inspiring post, useful for me but point no. 5 “Create a “Send to Twitter” Button” maybe completed with another social bookmarking (digg, delicious and stumbleupon) as they are having strong market today. Nice.

    0
  47. 47

    Wow, very nice! I especially liked the ‘Share on Twitter’ hack!

    0
  48. 48

    Thanks for the #3 and #5
    Really really really much appreciated
    Congrats!

    Edu @ http://www.verblogargia.com.br
    Twitter: @woetter

    0
  49. 49

    Wow ! This is a very good post with useful hacks… I will try them on my personal website running WordPress for sure !

    0
  50. 50

    Good~~ Great article, really useful!!!

    0

↑ Back to top