Posts Tagged ‘ hacks ’

2012 in review

The WordPress.com stats helper monkeys prepared a 2012 annual report for this blog.

Here’s an excerpt:

4,329 films were submitted to the 2012 Cannes Film Festival. This blog had 17,000 views in 2012. If each view were a film, this blog would power 4 Film Festivals

Click here to see the complete report.

10 Exceptional WordPress Hacks

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. Some time ago, we wrote a post showing 10 Killer WordPress Hacks.

Today, let’s do it again with 10 new and totally killer WordPress hacks to make your blog stand out from the crowd. As usual, we won’t just list the hacks alone. In each entry, you’ll find an explanation of the code as well as the kinds of problems that the hack solves.

You may be interested in the following related posts:

[By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]

1. Create TinyURLs On The Fly

Sm1 in 10 Exceptional WordPress Hacks

The problem. Because Twitter has become a social media revolution, many bloggers and Twitter users enjoy sharing blog posts they have found and liked on Twitter. However, manually creating a TinyURL before tweeting can get a little tedious. As you probably know, Twitter can bring a lot of traffic to your blog, so it is in your interest to consistently provide short URLs to your readers.

The solution. To use this recipe, follow the simple steps below:

  1. Open your functions.php file.
  2. Paste the following code in the file:
    function getTinyUrl($url) {
        $tinyurl = file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
        return $tinyurl;
    }
  3. Open your single.php file and paste the following in the loop:
    <?php
    $turl = getTinyUrl(get_permalink($post->ID));
    echo 'Tiny Url for this post: <a href="'.$turl.'">'.$turl.'</a>'
    ?>
  4. That’s all you need. Each of your posts now has its own TinyURL, ready for tweeting!

Code explanation. The popular URL shortening service TinyURL provides a quick API that creates TinyURLs on the fly. When you pass a URL to http://tinyurl.com/api-create.php, the API immediately prints the related TinyURL on the screen.

Using the PHP function file_get_contents(), we can get it and assign it to the $tinyurl variable. The last part of the code retrieves the post’s permalink and passes it as a parameter to the getTinyUrl() function previously created.

Source:

2. List Upcoming Posts

Sm8 in 10 Exceptional WordPress Hacks

The problem. If you often schedule posts to be published, how about displaying them in a list? This will make your readers look forward to what you’re going to publish in a few days and can help you reach new RSS subscribers. Implementing this functionality on your WordPress blog isn’t hard at all.

The solution. Nothing hard here. Just copy this code and paste it anywhere in your theme files.

<div id="zukunft">

	<div id="zukunft_header"><p>Future events</p></div>

	<?php query_posts('showposts=10&post_status=future'); ?>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<div >

			<p class><b><?php the_title(); ?></b><?php edit_post_link('e',' (',')'); ?><br />

			<span class="datetime"><?php the_time('j. F Y'); ?></span></p>
		</div>

	<?php endwhile; else: ?><p>No future events scheduled.</p><?php endif; ?>

</div>

Once you’ve saved the file, your upcoming posts will be displayed on your blog.

Code explanation. This code use the super-powerful query_posts() WordPress function, which allows you to take control of the WordPress loop.

The parameter used is post_status, which allows you to get posts according to their status (published, draft, pending or future). The showposts parameter is also used to define how many items you’d like to get. You can change the value of this parameter on line 4 to retrieve more or less than ten posts.

Source:

3. Create A “Send To Facebook” Button

Sm2 in 10 Exceptional WordPress Hacks

The problem. In the first hack, we noted that Twitter can bring a lot traffic to your blog. Another website that can boost your traffic stats easily is Facebook. In this hack, let’s see how we can create a “Send to Facebook” button for your WordPress blog.

The solution.

  1. Open the single.php file in your theme.
  2. Paste the following code in the loop:
    <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>
  3. Alternatively, you could use the getTinyUrl() function to send a short URL to Facebook:
    <?php $turl = getTinyUrl(get_permalink($post->ID)); ?>
    
    <a href="http://www.facebook.com/sharer.php?u=<?php echo $turl;?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>
  4. That’s all. Your readers will now be able to share your blog post on Facebook with their friends!

Code explanation. This useful hack is very easy to understand: the only thing we do here is retrieve the post’s permalink and title and send them as parameters to http://www.facebook.com/sharer.php.

In the alternative method, we used the getTinyUrl() function (created in the previous hack) to send a short URL instead of the post’s permalink.

Source:

4. Create A Maintenance Page For Your WordPress Blog

Sm3 in 10 Exceptional WordPress Hacks

The problem. One thing I really like about Drupal is the option to temporarily redirect visitors to a maintenance page. Sadly, WordPress doesn’t have this feature. When you upgrade your blog, switch themes or make design changes, you may not want your visitors to see your blog as it is being tweaked, especially if it has design or code problems or, even worse, security gaps.

The solution. To solve this problem, we use the power of the .htaccess file. Just follow the steps below to get started.

  1. Create your maintenance page. A simple WordPress page is generally sufficient.
  2. Find your .htaccess file (located at the root of your WordPress installation) and create a back-up.
  3. Open your .htaccess file for editing.
  4. Paste the following code:
    RewriteEngine on
    RewriteCond %{REQUEST_URI} !/maintenance.html$
    RewriteCond %{REMOTE_ADDR} !^123\.123\.123\.123
    RewriteRule $ /maintenance.html [R=302,L]
  5. Replace 123\.123\.123\.123 on line 3 with your IP address (Don’t know it?). Make sure to use the same syntax.
  6. Now, all visitors except you will be redirected to your maintenance page.
  7. Once you’re done tweaking, upgrading, theme switching or whatever, re-open your .htaccess file and remove (or comment out) the redirection code.

Code explanation. The .htaccess file, which controls the Apache Web server, is very useful for these kinds of tasks.

In this example, we state that any visitor who has an IP different from 123.123.123.123 (which doesn’t request maintenance.html) should be redirected to maintenance.html.

By replacing 123.123.123.123 with your own IP address, you make sure you’re still allowed to browse your blog normally, while others are redirected to maintenance.html.

Source:

5. Display Related Posts Without A Plug-In

Sm4 in 10 Exceptional WordPress Hacks

The problem. One well-known way of keeping visitors on your blog longer and helping them discover news posts is to display, usually at the end of the article, a list of related content.

Many plug-ins will do this job, but why not super-charge your theme by integrating this functionality by default?

The solution.

  1. Open the single.php file in your theme.
  2. Paste the following code in the loop:
    <?php
    //for use in the loop, list 5 post titles related to first tag on current post
    $tags = wp_get_post_tags($post->ID);
    if ($tags) {
      echo 'Related Posts';
      $first_tag = $tags[0]->term_id;
      $args=array(
        'tag__in' => array($first_tag),
        'post__not_in' => array($post->ID),
        'showposts'=>5,
        'caller_get_posts'=>1
       );
      $my_query = new WP_Query($args);
      if( $my_query->have_posts() ) {
        while ($my_query->have_posts()) : $my_query->the_post(); ?>
    
          <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
          <?php
        endwhile;
      }
    }
    ?>
  3. Save the file, and then have a look at your blog: related posts are automatically displayed!

Code explanation. This hack uses tags to retrieve related posts. The first thing it does is get the post’s tags. If a post has tags, the first one is extracted and used in a query that retrieves posts with the same tag.

By default, this code displays up to five related posts. To change this number, simply edit line 9 of the code.

Source:

6. Automatically Retrieve The First Image From Posts On Your Home Page

Sm5 in 10 Exceptional WordPress Hacks

The problem. Many WordPress users use custom fields to display a thumbnail on their blog home page. Of course, this is a nice solution, but how about automatically retrieving the first image from a post and using it as a thumbnail?

The solution. This hack is quite easy to implement:

  1. Open the functions.php file in your theme.
  2. Paste this code in. Don’t forget to specify a default image on line 10 (in case a post of yours does not have an image).
    function catch_that_image() {
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
      $first_img = $matches [1] [0];
    
      if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
      }
      return $first_img;
    }
  3. Save the functions.php file.
  4. On your blog home page (index.php), call the function this way to get the URL of the first image from the post:
    <?php echo catch_that_image() ?>

Code explanation. The function uses the global variable $post to parse the post’s content with a regular expression. If an image is found, its URL is returned by the function. If not, the default image URL is returned.

Source:

7. Resize Images On The Fly

Sm6 in 10 Exceptional WordPress Hacks

The problem. When you use thumbnails on your blog’s home page or even images in posts, having to manually resize them is boring and wastes a lot of time. So, why not use the power of PHP to do it?

The solution. To achieve this hack, just follow these simple steps:

  1. Get this script and save it on your computer (I’ll assume you’ve named it timthumb.php).
  2. Use an FTP program to connect to your server and create a new directory called scripts. Upload the timthumb.php file to it.
  3. Once done, you can display images like so:
    <img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="Screenshot" />

    In other words, you just call the timthumb.php file and pass your image as a parameter. The same goes for your desired width and height.

Code explanation. The timthumb.php script use the PHP GD library, which allows you to manipulate images dynamically with PHP. GD is installed by default on all servers running PHP5. If you’re not running PHP5, you’ll have to check if GD is installed before using this script.

The timthumb.php file gets the parameters you’ve passed to it (image URL, width and height) and uses it to create a new image with your stated dimensions. Once that’s done, the image is returned to you.

Source:

8. Get Your Most Popular Posts Without A Plug-In

Sm7 in 10 Exceptional WordPress Hacks

The problem. Displaying your most popular posts is a good way to make visitors stay longer on your blog, as is displaying related posts. Many great plug-ins can list your most popular posts, but again, why use a plug-in when you can simply hack your WordPress theme to do it automatically?

The solution. Just paste the following code anywhere in your theme files (for example, in sidebar.php). To change the number of displayed posts, simply change the “5″ on line 3 to your desired number.

<h2>Popular Posts</h2>

<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>

<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">

<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>

</ul>

Code explanation. This code executes an SQL query to the WordPress database, using the $wpdb object, to get a list of the five posts with the most comments. The results are then wrapped in an unordered HTML list and displayed on screen.

Source:

9. Highlight Searched Text In Search Results

Sm9 in 10 Exceptional WordPress Hacks

The problem. The WordPress search engine system is often criticized for not being powerful enough. One of its weakest points in my opinion is that searched text is not easily distinguishable from the rest of the text. Let’s solve that!

The solution.

  1. Open your search.php file and find the the_title() function.
  2. Replace it with the following:
    echo $title;
  3. Now, just before the modified line, add this code:
    <?php
    	$title 	= get_the_title();
    	$keys= explode(" ",$s);
    	$title 	= preg_replace('/('.implode('|', $keys) .')/iu',
    		'<strong class="search-excerpt"></strong>',
    		$title);
    ?>
  4. Save the search.php file and open style.css. Add the following line to it:
    strong.search-excerpt { background: yellow; }

That’s all. Better, isn’t it?

Code explanation. Once again, regular expressions are a lifesaver. The regexp parses the $s content ($s is the variable containing the searched text) and automatically adds a <strong class=”search-excerpt”> element around any occurrences of $s.

Then, you simply modify your style.css file to give searched text a special style and make it more visible to your readers.

Sources:

10. Disable Widgetized Areas Without Editing Theme Files

Sm10 in 10 Exceptional WordPress Hacks

The problem. Widgets are very useful, but sometimes you don’t need them on a particular page or post. Sure, you can create a page template for a particular page or even remove the widgetized zone from the code, but a much better and more elegant solution exists.

The solution. To do this, simply add the following code to your functions.php file:

<?php
add_filter( 'sidebars_widgets', 'disable_all_widgets' );

function disable_all_widgets( $sidebars_widgets ) {
	if ( is_home() )
		$sidebars_widgets = array( false );
	return $sidebars_widgets;
}
?>

Code explanation. This code first adds a filter to the sidebars_widgets WordPress function. Now every time WordPress tries to execute this function, it will execute the disable_all_widgets function we just created.

The disable_all_widgets function uses WordPress conditional tags (in this example, is_home(), but you can use any conditional tag) to disable all widgets if a visitor is on a particular page or post.

Source:

63 Essential WordPress Hacks, Tutorials, Help Files and Cheats

This is a fairly comprehensive list of the Best WordPress Tutorials, Hacks, Help Files and Cheat Sheets (call it what you like).They are written to make life easier, to help us expand WordPresses functionality, to give us a better understanding of WordPress and how powerful a tool it is.

Make sure you thank all the authors of these Tutorials, Hacks, Help Files and Cheat Sheets…

WordPress Tutorials/Hacks

1.WordPress Theme Hacks (Source: Web Designer Wall)

2. No More CSS Hacks (Source: Style Gala)

3. Create a Dynamic Sticky (Source: Maxpower)

4. Styling Individual Posts Using the_ID (Source: WP Designer)

5. Show Category Images (Source: JTPratt)

6. Separate WordPress Comments and Trackbacks (Source: Hack WordPress)

7. Customize your WordPress Login (Source: David Airey)

8. Date Image Hack (Source: YugaTech)

9. How to place a login form in the sidebar (Source: WP Designer)

10. WP: KeyBoard Shortcuts (Source: Tip Monkies)

11. Making Better Use of Your Error “404″ Page (Source: Hack WordPress)

12. Customize Your 404 Page (Source: Theme Playground)

13. WordPress accessibility hacks (Source: Bruce Lawson)

14. Reset your Lost WordPress Administrator Password (Source: Village Idiot)

15. The Definitive Guide to Semantic Web Markup for Blogs (Source: Pearsonified)

16. Do-It-Yourself WordPress Hover Menu (Pop-Up) (Source: WP Designer)

17. How to Protect CSS Mods for ANY WordPress Theme (Source: Pearsonified)

18. WP Contact Manager (Source: Design Canopy)

19. WordPress and the custom fields, a overlooked feature (Source: Gate 303)

20. DiggProof your WordPress (Source: Circle Six Blog)

21. WordPress Ajax Commenting revisited (Source: Zeo)

22. Widgetizing Themes (Source: Automattic)

23. Cloaking to Stop Scraping (Source: Plagiarism Today)

24. Server load button for blogs (Source: Jesse Chilcott’s Journal)

25. Giving each WordPress post a thumbnail, and display the thumbnail on the home page (Source: WordPress Garage)

26. How to create overlapping tabs (Source: WP Designer)

27. How to Optimize Your WordPress Title (Source: Hack WordPress)

28. Blocking Your WordPress Categories and Archives From Google (Source: Hack WordPress)

29. Adding An Author Page To Your WordPress Blog (Source: Hack WordPress)

30. Make a Mobile Friendly Version of your Blog with Google Reader (Source: Digital Inspiration)

31. How to Use WordPress as a Membership Directory (Source: WP Designer)

32. How to Format Images for Feed Readers (Source: Pearsonified)

33. Add Del.icio.us Daily Blog Posting To Your WordPress Blog (Source: Hack WordPress)

34. Huge Compilation of WordPress Code (Source: Hack WordPress)

35. 4 Simple ways to Speed up WordPress (Source: WP Candy)

36. WordPress Date Button (Source: WP Designer)

37. Wicked WordPress Archives in One Easy Step! (Source: Pearsonified)

38. Make Yourself Available to Readers with a Contact Form (Source: Hack WordPress)

39. WordPress as a CMS – Content Management System (Source: Graphic Design Blog)

40. Installing Xampp and WordPress (Locally) (Source: Tamba 2)

41. WordPress Category Page Hacks (Source: Jehiah)

42. 3 WordPress Hacks For SE-Friendly Blog Archives (Source: SEO Egghead)

43. Opening Links in New Windows (Source: Ajay)

44. WordPress Thumbnail Size Limit Hack (Source: Lorelle on WordPress)

45. Restore your WordPress Database (Source: Tamba 2)

46. Validating WordPress (Source: WordPress Codex)

47. Backing Up WordPress (Source: Lorelle on WordPress)

48. Moving Your WordPress Blog to a New Directory (Source: Big Biz Blog)

49. Moving Your WordPress Blog to a New Directory (Source: Big Biz Blog)

WordPress Video Tutorials

50. The Best WordPress Plug-ins

51. How to embed YouTube Video in WordPress

52. How to Upgrade WordPress

53. Make Your WordPress Blog Search Engine Friendly

54. WordPress.com – Step-by-Step Tutorial on How to Blog

55. How To Create A Custom WordPress Page Template

56. WordPress tutorial–installing on a local server

57. Recover WordPress Password When You Have Forgotten It

58. WordPress Tutorial – Edit a Sidebar File Using a Text Editor

59. WordPress Tutorial – Make Menus of Links With the Blogroll 2

60. How-to: Use WordPress/PodPress to podcast to iTunes

61. How to Put Adsense on Your WordPress Blog

WordPress Podcasts

62. The WordPress Podcast

63. The WordPress Weekly

10 Killer WordPress Hacks

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:

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

1. Display AdSense Ads to Search Engines Visitors Only

Sm7 in 10 Killer WordPress Hacks

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

Sm3 in 10 Killer WordPress Hacks

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

Sm1 in 10 Killer WordPress Hacks

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:

4. Automatically Get Images on Post Content

Sm4 in 10 Killer WordPress Hacks

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

Sm5 in 10 Killer WordPress Hacks

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

Sm6 in 10 Killer WordPress Hacks

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

Sm2 in 10 Killer WordPress Hacks

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:

9. Display a Random Header Image on Your WordPress Blog

Sm9 in 10 Killer WordPress Hacks

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

Sm10 in 10 Killer WordPress Hacks

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:

WordPress Cheat

wordpressI know that there are many resources regarding this topic but there are never enough. This post is dedicated to small snippets from WordPress that will make your life easier. Or maybe my life easier and in this case I want to have them in one single post. In a way I’m trying to help you and in another I’m trying to organize this stuff for myself.

Theme Structure

If you want to create a WordPress theme, these following files must be included in order to be a standard theme. You can create a theme using fewer files but this is the way to do it.

1
2
3
4
5
6
7
8
9
10
11
12
header.php - header section
index.php - main section
sidebar.php - sidebar section
footer.php - footer section
single.php - post template
page.php - page template
comments.php - comments template
search.php - search content
searchform.php - search form
archive.php - archive
functions.php - special functions
404.php - error page

The Loop

You will often see “the loop” as reference in many tutorials or samples. This piece of code helps you display your posts on a blog. By entering custom HTML or PHP code inside the loop, you will make every post to benefit from that custom code. You can use the loop mainly in your index.php file but also in other files when you want to display multiple posts.

1
2
3
4
5
6
< ?php if(have_posts()) : ?>
   < ?php while(have_posts()) : the_post(); ?>
// Custom HTML & PHP code
   < ?php endwhile; ?>
< ?php else : ?>
< ?php endif; ?>

Note: the space in front of ?php on the line 1,2,4,5 and 6 should be removed. So instead of < ?php we will have <?php.

Template Include Tags

These tags are usually used in a single PHP file to include other files from the theme. For example you can use the get_header tag in index.php in order to include the head in the theme.

1
2
3
4
< ?php get_header(); ?>
< ?php get_sidebar(); ?>
< ?php get_footer(); ?>
< ?php comments_template(); ?>

Template Bloginfo Tags

These tags are used to display information regarding your blog, information that can be customized inside the WordPress Administration panel.

1
2
3
4
5
6
7
8
9
10
< ?php bloginfo('name'); ?> - Title of the blog
< ?php bloginfo('charset'); ?> - Displays the character set
< ?php bloginfo('description'); ?> - Displays the description of the blog
< ?php bloginfo('url'); ?> - Displays the address of the blog
< ?php bloginfo('rss2_url'); ?> - Displays the RSS URL
< ?php bloginfo('template_url'); ?> - Displays the URL of the template
< ?php bloginfo('pingback_url'); ?> - Displays the pingback URL
< ?php bloginfo('stylesheet_url'); ?> - Displays the URL for the template's CSS file
< ?php bloginfo('wpurl'); ?> - Displays URL for WordPress installation
< ?php bloginfo('name'); ?>

WordPress Conditional Tags

Conditional tags are simple but helpful tags that can be used to customize how your blog will work. For example if the page is the home page, we will type a class called “current-cat”. < ?php if(is_home()) { ?> class=”current-cat”< ?php } ?>. This is a part of the code which I will present you a little bit later in this article.

1
2
3
4
5
6
is_home() - when the user is on the home page(blog)
is_front_page() - when the user is on the home page (blog or page)
is_single - when a single post is displayed
is_sticky() - check if a post is sticky
is_page() - when a page is displayed
is_category() - when a category is displayed

These are the most common conditional tags inside WordPress. For more information and additional tags you can check the next address dedicated to conditional tags. http://codex.wordpress.org/Conditional_Tags

Common WordPress Tags

As you know WordPress has a lot of code that can be embedded in themes in order to make them complex and powerful. Here are some of the common snippets that are used in most of the templates.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< ?php the_time() ?> - Displays the time of the current post
< ?php the_date() ?> - Displays the date of a post or set of posts
< ?php the_title(); ?> - Displays or returns the title of the current post
< ?php the_permalink() ?> - Displays the URL for the permalink
< ?php the_category() ?> - Displays the category of a post
< ?php the_author(); ?> - Displays the author of the post
< ?php the_ID(); ?> - Displays the numeric ID of the current post
< ?php wp_list_pages(); ?> - Displays all the pages
< ?php wp_tag_cloud(); ?> - Displays a tag cloud
< ?php wp_list_cats(); ?> - Displays the categories
< ?php get_calendar(); ?> - Displays the calendar
< ?php wp_get_archives() ?> - Displays a date-based archives list
< ?php posts_nav_link(); ?> - Displays Previous page and Next Page links
< ?php next_post_link() ?> - Displays Newer Posts link
< ?php previous_post_link() ?> - Displays previous link

WordPress Navigation Menu

This thing is different based on how you want your blog to work. You can have a menu based on pages, on categories or on both. In every way you will need a home page link. In this case here the the 2 approaches for the menu.

Categories based menu

1
2
3
4
5
<ul id="menu">
<li <?php if(is_home()) { ?>< ?php } ?>>
<a href="<?php bloginfo('home'); ?>">Home</a></li>
< ?php wp_list_categories('title_li=&orderby=id'); ?>
</ul>

Pages based menu

1
2
3
4
5
<ul id="menu">
<li <?php if(is_home()) { ?>< ?php } ?>>
<a href="<?php bloginfo('home'); ?>">home</a></li>
< ?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>

In both cases we add a class that is used by WordPress in styling the list items. So, in this case we will add the classes to a hardcoded home list item.

Display X posts from a category

On the first page we have in the sidebar 2 sections for latest tips and latest graphic ratings. Those sections were made with the help of the query_posts.

1
< ?php query_posts('category_name=Name Here&showposts=10'); ?>

The name should be exactly the same as the one typed in the Administration panel under categories section.

Custom Template File

In WordPress you can insert any additional template file that is none of the ones in the first section. In this way you can make your own template file and embed it in your theme.

1
< ?php include (TEMPLATEPATH . '/searchform.php'); ?>

Final words
This is WordPress Cheat Sheet. For more information, you can search the WordPress Codex. You can find there all the information you need: tags, parameters, functions, hacks etc. Hopefully this page will help you and it will give you a little more time in designing instead of researching. Thanks WordPress and cheers!

%d bloggers like this: