10 Useful WordPress Coding Techniques


Since last year, the WordPress themes market has grown incredibly. The reason? Great designs, of course, but also a lot of amazing new functionality. Top WordPress developers are always looking to get the most out of WordPress and use all of their knowledge to find ways to make their favorite blogging engine even more powerful.

In this article, we have compiled 10 useful WordPress code snippets, hacks and tips to help you create a WordPress theme that stands out from the crowd.

You may be interested in the following related posts:

1. Style Posts Individually


The problem.
Your blog has a lot of posts, but the posts aren’t all of the same type. To give special styling to one or more of your posts, you can take advantage of both the post_class() function and the post ID.

The solution.
To apply this trick, just open your single.php file, find the loop and replace it with the following:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<?php the_content(); ?>
<?php endwhile; else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>

Code explanation.
The important part is mostly in line 3. Here, we have added the PHP post_class() function. Introduced in WordPress 2.8, this function adds CSS classes to the post. For example, it can add:

  • .hentry
  • .sticky
  • .category-tutorials
  • .tag-wordpress

With these CSS classes now added, you can now give a custom style to all posts that have the sticky tag or those that belong to the tutorials category.

The other important piece of this code is id="post-<?php the_ID(); ?>". By displaying the ID of the post here, we’re able to style a particular post. As an example:



2. Display Related Posts… With Thumbnails!


The problem.
After they have read your latest post, what do your readers do? That’s easy: most of them simply leave. A great way to keep them interested is to display a list of related posts. Many plug-ins can do that, but for those who like to know how things works, here is some nice code to get related posts and their thumbnails.

The solution.
Simply paste this code after the the_content() function in your single.php file:

$original_post = $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
  echo '<h2>Related Posts</h2>';
  $first_tag = $tags[0]->term_id;
    'tag__in' => array($first_tag),
    'post__not_in' => array($post->ID),
  $my_query = new WP_Query($args);
  if( $my_query->have_posts() ) {
    echo "<ul>";
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
      <li><img src="<?php bloginfo('template_directory'); ?>/timthumb/timthumb.php?src=<?php echo get_post_meta($post->ID, "post-img", true); ?>&h=40&w=40&zc=1" alt="" /><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile;
    echo "</ul>";
$post = $original_post;

Code explanation.
First, this code makes use of TimbThumb6, a PHP image-resizing script. We have used it to automatically resize images to 40 by 40 pixels.

Once this code is pasted in your theme, it uses the first tag of the post to fetch related posts. In this example, four related posts are displayed. You can change this number on line 10.

Also, notice that I have cloned the $post variable at the beginning of the script and restored it at the end. This prevents problems that may occur with the loop, such as comments being assigned to the wrong post.


3. Alternate Post Styling On Your Home Page


The problem.
Many new WordPress themes have an amazing way of displaying posts on the home page. For example, we can display the first three posts bigger than the rest, with images and extended text, with the remaining posts shown more simply.

I have seen many themes in which developers use two distinct loops to achieve this, which isn’t necessary and can cause further problems. Let’s use a much simpler method.

The solution.
Here is a custom loop that displays the first three posts different than the rest. You can replace the existing loop in your index.php file with this code.

$postnum = 0;
while (have_posts()) : the_post(); ?>

<?php if ($postnum <= 3){ ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <div class="date"><span><?php the_time('M j') ?></span></div>
    <h2>(<?php echo $postnum;?>)<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
  <div class="post-image" style="text-align:center;">
    <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory' ); ?>/timthumb.php?src=<?php  echo catch_that_image(); ?>&amp;w=500&amp;h=200&amp;zc=1" alt="<?php the_title(); ?>" /></a>
  <p><?php the_content('Read the rest of this entry &raquo;'); ?></p>
  <p class="more"><a href="#">Read More</a></p>

<?php } else {
<div <?php post_class( 'single ' . $end ); ?> id="post-<?php the_ID(); ?>">
  <div class="post-content">
    <h3><a href="<?php the_permalink() ?>">(<?php echo $postnum; ?>)<?php the_title(); ?></a> <?php edit_post_link('_', '', ''); ?></h3>
    <p><?php the_excerpt( '' ); ?></p>
    <p class="more"><a href="#">Read More ?</a></p>
</div><!-- End post -->

<?php }

Code explanation.
Nothing hard here! We just created a PHP variable, named $postnum, which is invoked at the end of the loop. If $postnum is less than or equal to 3, the post is displayed in full. Otherwise, it is displayed in its more compact form.

4. Using Multiple Loops


The problem.
When coding complex WordPress pages with more than one loop, it can happen that one of the loops doesn’t behave as expected: for example, unwanted offset, repeated posts, etc. Happily, with a bit of knowledge and a very useful function, we can avoid this.

The solution.
The following example features two distinct loops. Notice the rewind_posts() function on line 8. This example can be used on any WordPress file as is: index.php, single.php, etc.

// First loop (get the last 3 posts in the "featured" category)
<?php query_posts('category_name=featured&showposts=3'); ?>
<?php while (have_posts()) : the_post(); ?>
  <!-- Do stuff... -->
<?php endwhile;?>

//loop reset
<?php rewind_posts(); ?>

//Second loop (Get all posts)
<?php while (have_posts()) : the_post(); ?>
  <!-- Do stuff... -->
<?php endwhile; ?>

Code explanation.
This piece of code doesn’t use any hacks; rewind_posts() is a standard WordPress function.

The purpose of rewind_posts() is to “clear” a loop that has been previously used (like the first loop in our example above), allowing you to use a second loop that isn’t affected by the first loop’s results.


5. Overwrite Post Titles Easily


The problem.
the_title() is a basic but very useful WordPress function: it displays the post or page’s title. No more, no less. But hey, have you ever wished you were able to display the full title in your listing of posts and a custom title on the actual post’s page? If so, find out how right here.

The solution.
In your single.php file, find the call to the the_title() function and replace it with the following code:

<?php $title = get_post_meta($post->ID, "custom-title", true);
if ($title != "") {
  echo "<h1>".$title."</h1>";
} else { ?>
  <h1><?php the_title(); ?></h1>
<?php } ?>

Once that’s done, you can rewrite the post’s title by creating a field named custom-title. Its value will be your custom title for this post.

Code explanation.
When this code loads, it retrieves the meta field named custom-title. If this meta field exists and isn’t blank, it is displayed as the post’s title. Otherwise, the the_title() function is called, and the post’s regular title is displayed.


6. Add Multiple Sidebars


The problem.
Sidebars are great because they allow you to display a lot of useful info, such as related posts, author info, a blog roll, 125×125-pixel ad spaces and so on. But sidebars can quickly become very busy, and readers may be hard-pressed to find what they’re looking for. So, what about having different sidebars available and displaying the most appropriate one for the post?

The solution.
To apply this hack, duplicate your sidebar.php file and fill it with whatever information you would like to appear. Save the file as sidebar-whatever.php.

Once that’s done, open your single.php* file and find the call to the get_sidebar() function:

<?php get_sidebar(); ?>

Replace it with:

<?php $sidebar = get_post_meta($post->ID, "sidebar", true);

Now when you write a post, create a custom field named sidebar. Set its value as the name of the sidebar that you want to include. For example, if its value is right, WordPress will automatically include sidebar-right.php as a sidebar.

If no custom sidebar field is found, WordPress automatically includes the default sidebar.

*The same can be done with page.php.

Code explanation.
This trick is quite simple. The first thing we did was look for a custom field named sidebar and get its value as a variable. Then, the variable is used as a parameter for the WordPress function get_sidebar(), which allows us to specify a particular file to use as a sidebar.


7. Display Content Only To Registered Users


The problem.
As you probably know, WordPress lets you decide whether to allow readers to create accounts and sign in to your blog. If you want to increase your blog’s registered readers or would just like to reward existing readers, why not keep some content private, just for them?

The solution.
To achieve this hack, we’ll use a shortcode. The first step is to create it. Open your functions.php file and paste the following code:

function member_check_shortcode($atts, $content = null) {
  if (is_user_logged_in() && !is_null($content) && !is_feed()) {
    return $content;
  } else {
    return 'Sorry, this part is only available to our members. Click here to become a member!';

add_shortcode('member', 'member_check_shortcode');

Once that’s done, you can add the following to your posts to create a section or text (or any other content) that will be displayed only to registered users:

This text will be displayed only to registered users.

That’s it. Registered users will see the text contained in the shortcode, while unregistered users will see a message asking them to register.

Code explanation.
The first thing we’ve done is create a function named member_check_shortcode, which checks whether the current user is logged in. If they are, then the text contained in the [member] shortcode is displayed. Otherwise, the message on line 5 is shown.

If you’d like to know more about WordPress shortcodes, you should definitely have a look at our Mastering WordPress Shortcodes11 post.


8. Display Your Most Popular Content In The Sidebar


The problem.
If you want to feature your best content and help readers discover more articles from your blog, you might want to display a list of your most popular posts, based on the number of comments they’ve received, in your sidebar.

The solution.
This code is really easy to implement. Just paste it wherever you’d like your popular posts to appear. To get more or less than five posts, just change the value of the SQL limit clause on line 3.

<h2>Popular Posts</h2>
<?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) {
$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 } } ?>

Code explanation.
In this code, we use the $wpdb object to send a custom SQL query to the WordPress database. Then we verify that the results aren’t empty (i.e. that no posts are without comments), and finally we display the list of posts.


9. Create A Drop-Down Menu For Easy Tag Navigation


The problem.
Tags are cool because they allow you to categorize content using precise terms. But displaying tag clouds is a problem: they are ugly, not easy to use and can be extremely big.

So, what’s the solution? Simply create a drop-down menu for your tags. That way, they don’t get in the way, but people still have easy access to them.

The solution.
To create our drop-down menu of tags, we first have to paste the two functions below into the functions.php file of our WordPress theme:

function dropdown_tag_cloud( $args = '' ) {
  $defaults = array(
    'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
    'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
    'exclude' => '', 'include' => ''
  $args = wp_parse_args( $args, $defaults );

  $tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => 'DESC')) ); // Always query top tags

  if ( empty($tags) )

  $return = dropdown_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args
  if ( is_wp_error( $return ) )
    return false;
    echo apply_filters( 'dropdown_tag_cloud', $return, $args );

function dropdown_generate_tag_cloud( $tags, $args = '' ) {
  global $wp_rewrite;
  $defaults = array(
    'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
    'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC'
  $args = wp_parse_args( $args, $defaults );

  if ( !$tags )
  $counts = $tag_links = array();
  foreach ( (array) $tags as $tag ) {
    $counts[$tag->name] = $tag->count;
    $tag_links[$tag->name] = get_tag_link( $tag->term_id );
    if ( is_wp_error( $tag_links[$tag->name] ) )
      return $tag_links[$tag->name];
    $tag_ids[$tag->name] = $tag->term_id;

  $min_count = min($counts);
  $spread = max($counts) - $min_count;
  if ( $spread <= 0 )
    $spread = 1;
  $font_spread = $largest - $smallest;
  if ( $font_spread <= 0 )
    $font_spread = 1;
  $font_step = $font_spread / $spread;

  // SQL cannot save you; this is a second (potentially different) sort on a subset of data.
  if ( 'name' == $orderby )
    uksort($counts, 'strnatcasecmp');

  if ( 'DESC' == $order )
    $counts = array_reverse( $counts, true );

  $a = array();

  $rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : '';

  foreach ( $counts as $tag => $count ) {
    $tag_id = $tag_ids[$tag];
    $tag_link = clean_url($tag_links[$tag]);
    $tag = str_replace(' ', '&nbsp;', wp_specialchars( $tag ));
    $a[] = "t<option value='$tag_link'>$tag ($count)</option>";

    switch ( $format ) :
  case 'array' :
    $return =& $a;
  case 'list' :
    $return = "<ul class='wp-tag-cloud'>nt<li>";
    $return .= join("</li>nt<li>", $a);
    $return .= "</li>n</ul>n";
  default :
    $return = join("n", $a);

  return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args );

Once you’ve pasted this function in your functions.php file, you can use it to create your drop-down menu of tags. Just open the file where you want the list to be displayed and paste the following code:

<select name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
  <option value="#">Liste d'auteurs</option>
  <?php dropdown_tag_cloud('number=0&order=asc'); ?>


Code explanation.
To achieve this hack, we take the wp_tag_cloud() WordPress function and rewrite it to make it display tags in an HTML “Select” element.

Then, we just call the newly created dropdown_tag_cloud() in our theme to display the drop-down menu items.


10. Auto-Resize Images Using TimThumb And WordPress Shortcodes


The problem.
A good blog post needs images, whether screenshots or simple eye-candy. Readers always prefer articles with nice pictures to plain boring text.

But images can be a pain to deal with, especially because of their various sizes. So how about we create a WordPress shortcode that uses Timthumb to automatically resize images?

The solution.
The first thing to do is create the shortcode. Paste the following code in your functions.php file:

function imageresizer( $atts, $content = null ) {
  return '<img src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2009/10//timthumb/timthumb.php?src='.$content.'&w=590" alt="" />';

add_shortcode('img', 'imageresizer');

Now, you can use the following syntax to add an automatically resized image to your blog post:


Code explanation.
You have probably already noticed how cool WordPress shortcodes are and how they make your blogging life easier. This code simply creates a shortcode that takes a single parameter: the image’s URL. Please notice that it’s not a good idea to resize large images this way as it unnecessarily increases the server load – in such cases it’s better to create and upload smaller images instead.

TimThumb resizes the image to 590 pixels wide, as specified on line 2 (w=590). Of course, you can change this value or add a height parameter (e.g. h=60).


Related posts

You may be interested in the following related posts:

About the Author

This guest post was written by Jean-Baptiste Jung, a 27-year-old WordPress expert from the French-speaking part of Belgium. He blogs about WordPress at WpRecipes24, about practical Web development tips at Cats Who Code25 and about blogging at Cats Who Blog26. You can stay in touch with Jean by following him on Twitter27.



  1. 1 http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/
  2. 2 http://www.smashingmagazine.com/2009/06/10/10-useful-wordpress-loop-hacks/
  3. 3 http://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-wordpress/
  4. 4 http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
  5. 5 http://justagirlintheworld.com/take-advantage-of-the-new-sticky-post-feature-in-wordpress-27/
  6. 6 http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
  7. 7 http://www.wprecipes.com/how-to-show-related-posts-without-a-plugin
  8. 8 http://www.catswhocode.com/blog/multiple-wordpress-loops
  9. 9 http://www.wprecipes.com/allow-title-overwrite-on-your-wordpress-blog
  10. 10 http://www.wprecipes.com/wordpress-hack-choose-the-sidebar-to-use-post-by-post
  11. 11 http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
  12. 12 http://justintadlock.com/archives/2009/05/09/using-shortcodes-to-show-members-only-content
  13. 13 http://www.wprecipes.com/wordpress-shortcode-display-content-to-registered-users-only
  14. 14 http://www.problogdesign.com/wordpress/create-your-own-popular-posts-page/
  15. 15 http://www.wprecipes.com/how-to-display-your-most-popular-content-in-your-blog-sidebar
  16. 16 http://www.catswhocode.com/blog/top-10-wordpress-hacks-from-june-09
  17. 17 http://www.catswhocode.com/blog/top-10-wordpress-hacks-from-june-09
  18. 18 http://www.smashingmagazine.com/2009/07/23/10-wordpress-comments-hacks/
  19. 19 http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/
  20. 20 http://www.smashingmagazine.com/2009/06/10/10-useful-wordpress-loop-hacks/
  21. 21 http://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-wordpress/
  22. 22 http://www.smashingmagazine.com/2009/03/04/15-useful-twitter-plugins-and-hacks-for-wordpress/
  23. 23 http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
  24. 24 http://www.wprecipes.com
  25. 25 http://www.catswhocode.com
  26. 26 http://www.catswhoblog.com
  27. 27 http://twitter.com/catswhocode

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

  1. 1

    Great post! This tips are really usefull!

  2. 2

    Amazing post… I can always find something I’m looking for in your posts, thanks Jean-Baptiste!

  3. 3

    Nice, thanks!!

  4. 4

    Thx for this post!
    Great like your others!

  5. 5

    Great Post, Very Helpful!

  6. 6

    As usual, Jean-Baptiste delivers great information about WordPress. Kudos.

  7. 7

    I found the wording in the “custom title” section misleading. The article says to replace the the_title() function with the quoted code, but I think the intention is to replace the CALL to the_title() function instead. Especially in light of the following text which says “Otherwise, the the_title() function is called, […]”

    If you were to replace the function rather than the function call, you’d be in a never-ending loop if the custom title field was blank.

    (SM) Thank you, you are absolutely right. The article was updated.

  8. 8

    ooh, loads of cleverness. off to waste a few hours trying some of these!

  9. 9

    Jean-Baptiste Jung

    October 20, 2009 7:23 am

    @rpsms : Yes you’re right, I meant In your single.php file, find the call to the the_title() function and replace it with the following code.
    The article is going to be corrected. Sorry again!

  10. 10

    These items were all really useful… I haven’t cared for many of your other posts like this. But this one had some great stuff!

    Well done :) and thanks for the great tips and hacks!

  11. 11

    I am just about to build a site in wordpress that needs most of these functions, so the timing of this article is pretty much perfect, great stuff :)

  12. 12

    This is the kind of place where SM rules.

  13. 13

    nice, thanks!

  14. 14

    For me it’s great that You include showcase of the whole code which makes sense if I can’t understand something for the first time. After browsing the code I understand it much better than by basic description!
    And I like the fact every time I read an article on Smashing Magazine, I get some useful new information :) Great job again!

  15. 15

    Re: 9. Create A Drop-Down Menu For Easy Tag Navigation

    I did just that, some months ago, and made the drop-down menu available with every single post, and as a result Google kicked me out of its ranks, because the content of my weblog had too much identical information.

    So you’d better beware, with a lot of tags.

  16. 16

    Great Post thanks again guys will definitely be using some of these in my latest themes

  17. 17

    Sean "Bluefox" Blake

    October 20, 2009 8:39 am

    I am officially a believer in Smashing Mag. This post ALONE has me addicted.

  18. 18

    Thank you for sharing this info. Really helpful!

  19. 19

    Thank you for the tips on wordpress, I have a few projects that this will work great with.

  20. 20

    Awesome tips! Thanks!

  21. 21

    Excellent Post!

  22. 22

    For #3, I received this error:
    Parse error: syntax error, unexpected T_VARIABLE in /home/myusername/public_html/index.php on line 2

    I assume that the code goes in the index.php in the root folder?

    I just cut and paste, I don’t know PHP, any clues?

  23. 23

    thanks for this awesome overview..definitely am going to try out a couple of these tricks.

  24. 24

    Excellent post, very useful tips…

  25. 25

    re: No. 6

    get_sidebar( $name );

    With the appropriate php opening and closing.

    Also works for header and footer.

    Reference: http://codex.wordpress.org/Function_Reference/get_sidebar

  26. 26

    I really needed this post. Very informative and it will be very useful in my upcoming projects. Thanks!

  27. 27

    These wordpress tips are always helpful. Thank you very much for the write up!

  28. 28

    this is really handy code, thanks for this post. Gonna drop some plugins ;-)

    Maybe you should have mentioned specially, that for the related posts thumbnails you have to install the timthumb first, right? Or cshould have changed the order in your list ;-) …
    anyway – thank you

  29. 29

    What would I do with out you smashing magazine another excellent post!

  30. 30

    Wow, Smashing! :)

  31. 31

    Concerning #9, “Create A Drop-Down Menu For Easy Tag Navigation”, I’d love to know if there’s a way to limit a drop list to a certain Category.

    I’m working on a site that displays various merchants’ info in a local business district association. The merchants are broken down into category pages based on business types like Retail, Lodging, Wine & Dine, etc. In the case of Retail, each merchant has a post each where tags are entered such as Clothing for one merchant, Antiques for another, Jewelry for a third merchant and so on.

    On each of these category pages, I’d like a drop list nav that ONLY shows the tags in merchant posts that ARE RELEVANT TO THE CURRENT CATEGORY. I don’t want a drop list of all tags in every post across all categories.

    So, essentially, the drop list is a sub-nav using more detailed keywords for merchants in the current category.

    Additionally, for this sub-nav to function for users, the drop list has to maintain ALL of the current category’s tags as the user selects them from the list. It would not be useful if a user selected the “Jewelry” tag from the drop list and then, in the resulting page, none of the other tags were available (such as Clothing, Antiques, etc.). This would force the viewer to go back and select the main Category of Retail again in order to access the other tags and would obviously not be a good interface.

  32. 32

    I attempted to implement suggestion number 2, but came across two problems:
    1) I don’t seem to have “post-img” as a meta element in my blog. Therefore, when the script attempted to display a thumbnail, it left the “src” portion of the TimThumb query string blank, causing it to show a missing image.
    2) I would recommend verifying that there are “related posts” before displaying the “Related Posts” header. Just because a post has tags does not mean that there is necessarily another post in the blog that uses the same first (alphabetically) tag as the post currently being viewed.

  33. 33

    Very usefull post. Great guys!!!

  34. 34

    Until recently I had not touched WordPress in years. Just a few days ago I loaded it back up to start my own little flow-o-thoughts for all things WebDev. Things like this will definitly help in getting my site to stand out.

    Again, SM delivers topical, useful information; not just regurgitating whast on ‘tutorial’ sites. Good job!

  35. 35

    I have been trying to upgrade/enhance my blog, just learning about wordpress coding and then I read this article, superb, couldn’t pay for this level of expertise.


  36. 36

    There are something I’ve not known. Thanks for a great post!

  37. 37

    Re: “Displaying Related Posts”

    I’m having trouble with the images displaying. I have the timthumb.php file working well and displaying correctly for my theme, and if i change the imgsrc for the thumbnails to display the current page thumbnail, that works. When I change it back, still not working.
    Also, any recommendations on css for displaying it properly? The layout was great in the picture above the post.

  38. 38

    This is a great post Smashing! Just when I need some help.
    My coding skills are superficial and I need help quite urgently to help me add a second sidebar to my blog:
    I have tried to do this on my own following instructions on this site:
    and posted a request for help at wordpress.org:
    but it didn’t work.
    Where can I find somebody to do this for me?
    Here is a suggestion for a Smashing Post- where to find best WP coders willing to help for free and pay.
    Having several sidebars on my blog depending on the page the readers are, would be a plus.


  39. 39

    Nice post :-)

    There is another useful WordPress hack that allows you to Exclude a category from your WordPress index page. Here is the tute: Exclude a category from your WordPress index page

  40. 40

    Amazing as always.

    I am new to learning the whole WordPress thing and this helped out a lot.


    Cameron Gaskarth

  41. 41

    in #3, you’re not incrementing $postnum. There should be a $postnum++;

  42. 42

    Thanks. Very useful

  43. 43

    This really HELP! Great article!

  44. 44

    Thanks, even though I knew most of these WP hack it is nice to be reminded!

  45. 45

    Or you could get drupal and do most of this with views and content construction kit.

  46. 46

    Nice article but I’m not a believer in WP. To much tweaking necessary to achieve stuff which is already present in other free CMS.

  47. 47

    Awesome post, will for sure be using some of these for my own site as well as client sites!

  48. 48

    @spritzstuhl: Please consider that WordPress is not a generic CMS but rather a blog system, kind of a specialized CMS.

  49. 49

    Great post and more so,because I was in dire need of such apps.By the way, is their any nice plugin/ hack by which mathematical symbols and notations can be easily posted with minimum formatting… any info on this would be very helpful. Thanks

  50. 50

    love the ‘Display Content Only To Registered Users’ option! :)

  51. 51

    Great post! Very useful tips that I’m going to use for my blog.

  52. 52

    really nice tips
    thanks for the smash

  53. 53

    Wow! These are great suggestions! I”m might implement some in my own blag now. Shazam!

  54. 54

    Like two others mentioned here, I tried to implement the related posts with thumbnails solution, but the thumbnails don’t show, it’s blank.

    I do use Timthumb on my blog so it shouldn’t be a problem… Any clue?

  55. 55

    Some people might benefit more if these instructions were modified for the Thesis theme. Maybe this could be a follow up post – or done by another blogger.

  56. 56

    What is the best way to limit each post to say 1000 characters then have “… Read More” displayed afterwords?

  57. 57

    Great post, I’m getting ready to start a big project and think I’m going to base it off WordPress after seeing all these tricks to make WordPress even better then it already is.

  58. 58

    This is probably the coolest post I have ever read on Smashing. You just made my blog re-design so much easier.

  59. 59

    i’ve red this post a few days ago, and here i am reading it again. you guys simply rock!

  60. 60

    “#7 Display Content Only To Registered Users”

    Did not work for me. I had to use this similar function instead:


  61. 61

    This was a great article. I have a large cheat sheet of WordPress hacks and codes that I use on sites I build with WordPress and this helped add to the collection.


  62. 62

    Concerning #2 : I have tested it unfortunately the thumbnails not appear and I can find why…
    I have put the code of timthumb.php in my scripts folder and modify the path in the code in my single.php but it doesn’t work…

    There’s something that I don’t do correctly… I don’t understand what is “post-img” in the code…

    Someone have an idea ?

  63. 63

    binbin, same as you. I can’t make it work. Something’s missing and I tried to find how to get an image from the post. So far I found that :
    http://wphackr.com/get-images-attached-to-post/ … it shows one image, but not the image of the current post. I don’t really want to install a plugin for that since I already modified the related posts. If anybody knows the answers, we’d like to know;) Thanks.

  64. 64

    Great post! Thanks a lot!

  65. 65

    Article “Alternate Post Styling On Your Home Page”, code line 17 : need a ? >

  66. 66

    the third code : Where is the variable $postnum ? This variable is always =0…

  67. 67

    I was looking for a solution for auto resizing images….lucky i cam accross this articls….thanks

  68. 68

    Thanks for this post

  69. 69

    That’s what I did to get the thumbnails work:

    function catch_that_image() {
      global $post, $posts;
      $first_img = '';
      $output = preg_match_all('//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;

    Then in the related code:

    <img src="/script/timthumb.php?src=&h=60&w=60&zc=1" alt="" />

    That’s the solution I found to make it work…there might be another one…

    • 70

      Hey Chris

      I’m new to PHP, so please bear with me…

      Can you tell me where your function should be placed? In single.php, or in functions.php…or does it even matter if it’s in one or the other?

      I don’t get how the $first_img value is used in the img src code? All I can see in your img src code is that the image src=&h=60&w=60&zc=1 – which doesn’t specify the image itself, just the dimension…? It would be really useful if you could show all of your code for this…

      I would love to get this to work, but the images just aren’t coming through…


  70. 71

    nice list! very useful! thanks! XD

  71. 72

    couple of good techniques.. good for wordpress plugin or theme developers, I will call this article is quick reference guide…..

  72. 73

    Awesome tips, nice to have these in one place. I added all of these to my WP hack sheet.

  73. 74

    “#3 Alternate Post Styling On Your Home Page”

    Did not work for me. there might be a typo, please check it.

  74. 75

    Great post! Thanks so much !

  75. 76

    Sorry you have an 404 error on your related posts, the links send to media2.smashingmagazine.com instead of http://www.smashingmagazine.com ….

  76. 77

    Great Post. Keep posting.

  77. 78

    Thank you kind sire. Indeed you are the greatest at stimulating amusement in my gray matter.

  78. 79

    Thanks for that comprehensive and interesting list. I have wondered about some of that stuff, if it was possible to achieve or not, and now I know how to implement these functionalities in my projects.

    Again, thanks!

  79. 80

    Hi Jeane

    Amazing Post.
    But i have noted in #3. Alternate Post Styling On Your Home Page

    In Line 4 – we must add so that it should work. I hope you missed it in a hurry.


  80. 81

    Hi I’m new here.
    What should I change to post related to work with custom fields and not tags?
    thank you very much..

  81. 82

    Hi Jean-Baptiste,

    good article, thanks …

    I have one query also, i developed one site in wordpress MU 2.9.1 and posted more than 100 articles, also i set the Setting => Reading => Blog pages show at most to 10 posts but still my home page is showing 104 articles with long scroll bar :( and after i get the pagination option.

    Please help me out in reducing and limit the number of articles which i configured for the home page.

  82. 83

    Very helpful, thanks!

  83. 84

    would be awesome if someone could figure out #3, it’s an ideal solution for me and I cannot find anything that would do that anywhere else. It’s just that it doesn’t work!! (T^T)

  84. 85

    great tutorial, very very thanks

  85. 86


    Great tips!

    One question about the shortcode imageresizer()

    How do you pass the $atts variable?? As the img src is $content, right???


  86. 87

    Sir, About Number 9 (putting a dropdown box)

    I did it on my wordpress theme, and it appeared on my page.
    But it fails to navigate on the page I put a link it with when you drop one entry on the box.

    That’s all.
    I hope you can help.

  87. 88

    This drop down menu for tags does not work. I tried it on my blog.

  88. 89

    This was a nice article. I’m already finding many of the tips useful on my blog.

  89. 90

    Thank’s in advance.
    Please help me.
    I am using Events Manager in wordpress.
    I have to display current month events in home page, for that i am using below code.
    get_row(“SELECT * FROM chip_em_events WHERE event_category_id=’2′ AND event_id=’4′”, ARRAY_A);
    echo “”;
    echo “$row2[event_name]“;
    echo “$row2[event_notes]“;
    I can get only on event_name and event_notes where id=”4″ but i need to display all events under event_category_id=’2′ for current month.

  90. 91

    This is really helping me build my blog.

  91. 92

    I realise this article is a couple of years old, however I would like to add that you no longer should be using timthumb.php..


    add_theme_support( ‘post-thumbnails’ );
    add_image_size( ‘label’, x, y, true); // Set you thumbnail label, and x and y dimensions

    And to display

    echo get_the_post_thumbnail($thumbnail->ID, ‘label’, array(‘class’ => ‘aligncenter’));

    If you design your site initially, whenever you upload a photo, it will create the required dimensions of thumbnails specific to your theme. This is obviously at the expense of disk space, but improvements in load speed.

    Have fun!

  92. 93

    english: very nice

    persian: دمت گرم


  93. 94

    Oh my goodness! Impressive article dude! Thank you so much, However I am encountering difficulties with your RSS.
    I don’t know why I am unable to join it. Is there anyone else getting the same RSS problems? Anyone who knows the answer can you kindly respond? Thanx!!

    Swimming Gear

  94. 95

    Very useful post.. thank you so very much :)


↑ Back to top