Tips, Tricks & Tutorials

10 WordPress ‘HOW-TO’ to Give Your Blog the Quality it Deserves

August 26th, 2009

As a web developer, you can broaden your potential client base and add value for existing clients by listing ‘WordPress’ as an area of expertise. WordPress is incredibly versatile, it can be tweaked to add many non traditional features to run a more effective blog.

Throughout this article, we’ll be focus on 10 WordPress Theme ideas, tips and useful tutorials you need to have ready in hand when developing your WordPress website to enhance your blog and give it the quality it deserves.

1. How to disable scripts and styles

Many plugins and themes add JavaScript and CSS files to your site. While this alone isn’t necessarily a bad thing, using several plugins that do this can bog down your site with loads of requests for these files.

In this tutorial Justin Tadlock describes a smart solution to disable scripts and styles of your plugins by looking for wp_enqueue_script() and wp_enqueue_style() in your plugin file and then disable it in your theme’s functions.php. He chosen two popular plugins: Contact Form 7 and WP-PageNavi.

Disabling JavaScript

Doing a search for wp_enqueue_script will turn up the following bit of code:

wp_enqueue_script( 'contact-form-7', wpcf7_plugin_url( 'contact-form-7.js' ), array('jquery', 'jquery-form'), WPCF7_VERSION, $in_footer );

Now, open your theme’s functions.php file and add this PHP code:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
	wp_deregister_script( 'contact-form-7' );
Disabling Styles

Now, let’s repeat the previous step but this time we will search for wp_enqueue_style in the plugin file and the following bit of code will be returned:

wp_enqueue_style('wp-pagenavi', get_stylesheet_directory_uri().'/pagenavi-css.css', false, '2.50', 'all');

Again to disable the style of this plugin, you will open your theme’s functions.php file and add this PHP code:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );

By doing the above 2 steps, you’ll disable the stylesheet and the script for this plugin. Feel free to deregister as many styles as you want within this function.

Source: How to disable scripts and styles

2. Display Thumbnails For Related Posts in WordPress

In this tutorial you’ll learn how to increase page views by adding thumbnails to related posts using the popular YARPP plugin and WordPress custom fields.

Source: Display Thumbnails For Related Posts in WordPress

3. A Custom Read More

In this post you’ll learn how to create a custom “Read More” messages on a per-post basis using custom fields in WordPress.

All you need to do is replace your usual the_content template tag with this code. Then when you write a post, create a new custom field with the key of custom_more.

<?php $custommore = get_post_meta($post->ID, 'custom_more', true); ?> 
<?php if (!$custommore) { $custommore = 'Read More &raquo;'; } ?> 
<?php the_content($custommore); ?>

Source: A Custom Read More

4. Get the first image from the post automatically and display it

Most WordPress users including me are using custom fields to display thumbs on their blog homepage but i recently stumbled across a simple php function that allows you to grab the first image from the post automatically, and display it on your home page without the need to add any custom field to the post.

All you need to do is paste the following function on your theme’s functions.php file.

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

After that you need to open your theme’s index.php and paste the following code where you want to display the first image in each post.

<?php echo catch_that_image() ?>

Source: Get the first image from the post and display it

5. How to Highlight Search Terms with jQuery

Spice up your WordPress search page by highlighting search terms within your search results. The solution described in this tutorial will highlight both the title and post content and is a drop-in modification for WordPress.

Now you need to paste the following code in your theme’s functions.php file.

function hls_set_query() {
  $query  = attribute_escape(get_search_query());
  if(strlen($query) > 0){
    echo '
      <script type="text/javascript">
        var hls_query  = "'.$query.'";
function hls_init_jquery() {
add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

After that you need to open your theme’s header.php and paste the following code (just before the </head> tag)

<style type="text/css" media="screen">
  .hls { background: #D3E18A; } /* <- Change the CSS style of */
                                /*    highlighted texts here. */
<script type="text/javascript">
  highlight: function(search, insensitive, hls_class){
    var regex = new RegExp("(<[^>]*>)|(\\b"  search.replace(/([-.* ?^${}()|[\]\/\\])/g,"\\$1")  ")", insensitive ? "ig" : "g");
    return this.html(this.html().replace(regex, function(a, b, c){
      return (a.charAt(0) == "<") ? a : "<strong class=\""  hsl_class  "\">"   c   "</strong>";
  if(typeof(hls_query) != 'undefined'){
    $("#post-area").highlight(hls_query, 1, "hls"); // <- Change 'post-area' to ID of HTML tag you
                                                    //    want to highlight search terms in.

Source: How to Highlight Search Terms with jQuery

6. Display Latest Posts by Category Archive

This tutorial will help you build a ‘Latest Posts by Category Archive‘ easily, this can be used to set up custom blog homepages, 404 pages, landing pages or even a special archive page. If you are looking for a plugin to generate such an archive, please check out: WP Plugin: Latest Posts by Category Archive.

Source: Latest Posts by Category Archive

7. Only Show Posts With a Specific Custom Field

Sometimes you only want to show posts that you’ve added a specific custom field to. A typical post loop begins like this:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Now you just add a simple query_posts function immediately above the loop code. In our scenario it would look like this:

<?php query_posts('meta_key=review_type&meta_value=movie');  ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Source: Only Show Posts With a Specific Custom Field

8. Find Page’s Top Level Parent ID

This post discusses the problem of displaying 2nd and 3d level of navigation in a sidebar no matter what page you are on. First thing you need to create is a new page (subnav.php) in your theme folder that you will be using for displaying side navigation from 2nd level downwards and include it in your theme’s sidebar.php

<?php include("subnav.php"); ?>

Now you just add the following code to your subnav.php:


if ($post->post_parent)	{
	$parent = $ancestors[$root];
} else {
	$parent = $post->ID;
$children = wp_list_pages("title_li=&child_of=". $parent ."&echo=0");
if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
<?php } ?>

This code checks if the current page has a parent. If so, that means that we are at least 2 levels deep in the navigation. In that case function get_post_ancestors is called and returns an array of all the ancestors’ IDs up to the top level (root). Once we get the ID of the top level parent we can use it in wp_list_pages function to get its children.

Source: Find Page’s Top Level Parent ID

9. List latest posts from certain category

Currently i am working on Noupe’s new theme, and i wanted to display recent posts from one category. I stumbled across a smart code snippet that will get this job done.

<?php query_posts('category_name=photoshop&showposts=7'); ?>
<?php while (have_posts()) : the_post(); ?>
           <a href="<?php the_permalink(); ?>">
               <?php the_title(); ?>
<?php endwhile; ?>

The query_posts code is telling WordPress to locate the latest 7 posts in the Photoshop category. The loop then runs the code to display them.

Source: List Recent Posts from One Category

10. Add Breadcrumbs to WordPress Without a Plugin

Breadcrumbs are a great way to give people a perspective of where they are on your site. You can easily add them via several good plugins. But if you want to build breadcrumbs into a theme without using a plugin, here is what you need to do.

Create a php file called breadcrumbs.php and insert the following code:

<div class="breadcrumbs">
function breadcrumbs() {
    $theFullUrl = $_SERVER["REQUEST_URI"];
    echo %u2018You Are Here: <a href="/">Home</a>%u2019;
    while (list($j,$text) = each($urlArray)) {
        if ($j > 1) {
            while ($i < $j) {
                $dir .= %u2018/%u2019 . $urlArray[$i];
                $text = $urlArray[$i];
                $i  ;
            if($j < count($urlArray)-1) echo %u2018 &raquo; <a href="%u2019.$dir.%u2018">%u2019 . str_replace("-", " ", $text) . %u2018</a>%u2019;
    echo wp_title();

Wherever you want to add the breadcrumbs in your theme files, just add the following line…

<?php include ( TEMPLATEPATH . %u2018/breadcrumbs.php%u2019); ?>

Source: Add Breadcrumbs to WordPress Without a Plugin

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.


76 comments for „10 WordPress ‘HOW-TO’ to Give Your Blog the Quality it Deserves
  1. Rainer Bendig on August 26th, 2009 at 7:41 pm

    Hi ;-)

    some great hints.

    (And a wrong image in the breadcrumbs part)


  2. dlv on August 26th, 2009 at 8:57 pm

    excellent as always !
    I’m goonna check the #1, I have to fix something around that using that snipe..

    I don’t understand the difference between #6 “Display Latest Posts by Category Archive” and #9 “List latest posts from certain category ” jejeee

  3. Martin Brumana on August 26th, 2009 at 9:07 pm

    I like wordpress, i use wp in my blog… is fantastic, i from argentine!


  4. KayRose on August 26th, 2009 at 10:00 pm

    I realy love 7.Query_Posts, use it alot, however there are some draw backs, since you can’t use pagination that easily with ‘showposts=’ :)

  5. yasser on August 26th, 2009 at 10:03 pm

    Important post ..

    Thanks noupe :)

  6. joyoge designers' bookmark on August 26th, 2009 at 10:18 pm

    Nice guide, thanks.

  7. Tom Karels on August 26th, 2009 at 11:05 pm

    The breadcrumbs code is money, thank you thank you thank you.

    I will be implementing to all my sites from now on.

    I love you

  8. Shawn Hesketh on August 26th, 2009 at 11:44 pm

    Great list, once again. Can’t wait to share this list with my readers!

    Keep up the great work, you guys!

  9. Alif Rachmawadi on August 27th, 2009 at 12:00 am

    Great post as usual. Ready to implement on my blog. Thanks!

  10. Skech on August 27th, 2009 at 1:56 am

    Love this post. Thank you! Now i need lot of time to use all of this tips.

  11. Zhu on August 27th, 2009 at 3:58 am

    These are awesome tips! I’m implementing the thumbnail trick on my blog right and looking into displaying related post with images.

    Thanks! :-)

  12. Brandon Cox on August 27th, 2009 at 4:20 am

    Wow, just saw myself in the source for the breadcrumbs code – thanks for the inclusion, and great article!

  13. Brett Widmann on August 27th, 2009 at 4:22 am

    Excellent post. Wonderful code snippets and suggestions. Going to give a few of these a try and see what happens!

  14. toniecw on August 27th, 2009 at 4:44 am

    very good information. thank you

  15. James on August 27th, 2009 at 7:33 am

    Great post! Must read for any serious wordpress blogger. Gonna try out some of these tips in my blog!

  16. Andrea Cima Serniotti on August 27th, 2009 at 4:03 pm

    Excellent post! I’m new on this site but ?I just love it.. Thanks a million.

    ID; if(count($post->ancestors) > 0) $parentId = $post->ancestors[0];
    $pages = get_pages();
    $count = 0;

    function pSort($p1,$p2){
    if($p1->menu_order == $p2->menu_order)
    return 0;

    return (($p1->menu_order > $p2->menu_order)? 1 : -1);


    foreach($pages as $p)
    // echo ”.print_r($p,true).”;

    $class = ”;
    if($p->post_parent == $parentId)

    if($count == 1)
    echo ‘In this section’;
    echo ”;

    echo ‘ID).'”>’.$p->post_title.’‘;

    if($count > 0)
    echo ”;


  17. Andrea Cima Serniotti on August 27th, 2009 at 4:08 pm

    Ups! I’m sorry.. I didn’t finish my comment above but for some weird reason it’s been posted! Basically, I’ve used the above code to sort out the problem regarding point no. 8 – Find Page’s Top Level Parent ID

    This bit of code allows me to set an active class on the menu item and manage the order of the items too.

    I’m sure it might be rewritten in a better way though!

    • Noupe on August 27th, 2009 at 4:10 pm

      Thanks Andrea :) Will try it and hopefully it will save us some time.

  18. Andrea Cima Serniotti on August 27th, 2009 at 4:42 pm

    It’s always a pleasure to give a contribution to you guys! In fact, it would be great if somebody with PHP skills (something I’m missing :-)) could merge the two codes and come up with a clean script that allows to set the active class and to manage the items order.
    Thanks again and keep posting such great and useful articles!

  19. Rishi Luchun on August 27th, 2009 at 5:19 pm

    Thanks for these, going to try and implement some of these.

  20. Aayush on August 27th, 2009 at 11:23 pm

    Sweet!…I am working on my blog theme update…these will come in handy…

  21. Kevin Lloyd on August 27th, 2009 at 11:39 pm

    I have a question about #1.

    Won’t that just dequeue all JS for that plugin? How would I disable just ONE? For example, all the scripts that need jQuery and decide to package their own versions.

  22. Rahul - Web Guru on August 28th, 2009 at 9:55 am

    A superb wp hack for any wp developers.

  23. Jamie Allsop on August 28th, 2009 at 3:06 pm

    Thanks for sharing these useful tips. Next time I get a chance I am going to try some of these tips and see what happens.

  24. PiccoloSocrate on August 28th, 2009 at 10:31 pm

    Thanks for sharing about the “custom read more”. Who does know how to improve it with an image?

  25. purwokerto on August 29th, 2009 at 3:15 pm

    it has been a long i found this one.thanks a lot.

  26. Corbin on August 31st, 2009 at 7:09 am

    Always love to read these posts. Great work as always.

  27. Gerhard on August 31st, 2009 at 2:42 pm

    Hey man.. awesome collection!

    Thanks a lot :D

  28. WPDITE on August 31st, 2009 at 11:36 pm

    That’s the perfect 10 for wordpress. Thanks for sharing.

  29. cooledit on September 1st, 2009 at 2:45 pm

    thx man…

  30. CMYK on September 1st, 2009 at 3:55 pm

    Thanks 4 information !!!!

    Nice BloG!

  31. Wordpress Arena on September 1st, 2009 at 5:10 pm

    this is really gr8 and helpful

  32. denbagus on September 2nd, 2009 at 9:13 am

    The best information i have found exactly here. Keep going Thank you

  33. Ahmed on September 3rd, 2009 at 9:00 pm

    Very nice i liked the tut about show posts using custom filed

  34. jonty on September 6th, 2009 at 2:53 pm

    this is a useful techniques.thanks for a nice article i might be thinking to change my theme and this will be a very useful guide for me.

  35. info bisnis purwokerto on September 9th, 2009 at 6:18 pm

    what a great post.thanks i can enjoy my wordpress now.pram from Indonesia say HELLO there..nice job Bos.

  36. manSur on October 1st, 2009 at 8:44 am

    Oh my god, Almost every I need for my blog…

    seriously awesome post…
    tq for this…

  37. Satish Gandham on October 4th, 2009 at 10:01 am

    Great post, disabling plugin styles really helped me improve my theme :)

  38. Jojo on October 28th, 2009 at 12:54 am

    Excellent tutorials;
    Btw, I am newbie in wp and am trying to display the first image of the post (tutorial #4) but failed. When I insert the code, the index template become mess. Any clue?

  39. Peter Netz Lassen on October 28th, 2009 at 1:20 pm

    Hi Lads,

    Thx for sharing. Just what I was looking for!
    This is cool hacks – I will be coming back to check for some more goodies.


  40. Rachelle on November 10th, 2009 at 5:21 am

    hi.. good article.. but er.. do u have 1 for dummies?? hehe.. i oso wanna learn but kinda not understanding the codes and how to. pretty pretty please??? =)

    tx lots.. god bless!

  41. Andrew @ on November 23rd, 2009 at 4:05 pm

    These are really techy stuffs but you’ve delivered it in a way that it can be easily understood. Thanks for sharing this useful and important information.

  42. Joey Briglio on December 2nd, 2009 at 10:32 am

    Great post. Thanks for the insights.

  43. BeyondRandom on December 17th, 2009 at 9:59 am

    some great tips here to use! thanks alot

  44. Digital Products on December 19th, 2009 at 7:45 am

    After disabling scripts and styles my blogs are downloading faster. Thanks for the other great tips.

  45. WPExplorer on December 25th, 2009 at 1:57 am

    These are some great tips. I will be adopting some of them shortly. Thank you.

  46. trickyourwhip on January 13th, 2010 at 2:28 pm

    This is a great website to post secret messages on using Google Secret Speedtags, just go to Goole and search for ” leave a response” to find others like this to post your own secret messages…

    google register speedtag secretspeedtag apagetopostsecretmessageson

  47. Roodude on January 13th, 2010 at 10:48 pm

    Has Noupe given up on WP posts? Seems like both Noupe and SM have scaled way back. Some of us really miss them because what you used to do was well done.

  48. Kris on January 24th, 2010 at 11:03 am

    I love your Archives page with the dropdown menu and the listing of posts with thumbnail and title.

    Would you be willing to share how you set that up?

    Thank you kindly. Your site is very valuable and I appreciate all the fantastic resources here!

  49. wparena on February 3rd, 2010 at 11:22 am

    After reading now have add Related post by using An other related post plugin, its really helpful ..once again thanks for sharing

  50. RodgerFox on February 4th, 2010 at 3:43 am

    Thanks, nice. Many bloggers from Russia love reading your blog

  51. Webtoolfeed on February 6th, 2010 at 4:15 pm

    Great post, nice points!

  52. KARTIK on February 16th, 2010 at 1:26 am


  53. indir on March 10th, 2010 at 12:57 pm

    10 wordpress how to give your blog article is very educative.. thanks

  54. Amazon Wordpress Marketing on June 8th, 2010 at 12:45 am

    You got a truly helpful blog I’ve been right here reading for about an hour. I’m a newbie and your accomplishment is incredibly a lot an inspiration for me.

  55. Adam on June 11th, 2010 at 7:23 am

    I don’t consider myself a techie, but found a lot of the information here very easy to follow and understand. The “Custom Read More” tip is especially helpful for a project I’m currently working on. Thanks for putting it together and sharing.

  56. Hieu Martin on July 8th, 2010 at 12:33 am

    Great post. Thanks for sharing

  57. Vadim Bitner on July 10th, 2010 at 1:34 am

    that is a good point

  58. VahnDee on July 13th, 2010 at 8:09 pm

    wow… nice post..
    i really need it..
    thx.. :)

  59. free music podcast on July 23rd, 2010 at 6:10 am

    Nice tips. I run my music podcast blog via wordpress and its cool to get these tips thanks for sharing them.

  60. Ali on August 20th, 2010 at 3:03 am

    Really a nice post and some good stuff to use. Appreciated.

  61. Evgeniy on September 7th, 2010 at 6:19 am

    Really nice ‘How to’ advices – i use it in my site. Thanks!

  62. dori girsang on October 11th, 2010 at 8:32 am

    i really like it CRTL + D

  63. PTEC on November 23rd, 2010 at 1:09 pm

    Thank you for your useful post
    a lot …

  64. Beatris Mireles on December 2nd, 2010 at 7:58 am

    I like this concept. I visited your blog for the first time and simply been your supporter. Continue to keep writing as I am planning to come to read it everyday!!

  65. Cialis on January 20th, 2011 at 8:27 am

    The following time I read a weblog, I hope that it doesnt disappoint me as much as this one. I mean, I know it was my choice to learn, but I actually thought youd have something interesting to say. All I hear is a bunch of whining about one thing that you can fix in case you werent too busy in search of attention.

  66. cinnamon on February 8th, 2011 at 1:08 am

    Thanks! great info

  67. Ed on February 19th, 2011 at 10:43 am

    absolutely useful post for intermediate WordPress users. Thanks.

  68. gbsquared on March 1st, 2011 at 7:16 am

    some great tips!

    i look forward to implementing them in some of my designs.

  69. Awais on March 29th, 2011 at 3:16 pm

    wow these are awesome and cool tricks….

  70. Ajay on May 19th, 2011 at 4:27 pm

    Awesome tutrial.
    “Add Breadcrumbs to WordPress Without a Plugin” is the one I was looking for. For some reason the breadcrumb plugin doesn’t install on one of my blog and I needed a custom code for it.

    Tx for sharing.

  71. Dipesh on July 26th, 2011 at 9:26 pm

    Simply amazing guide. I never knew that this will be so easy.

  72. Pulkit Kaushik | TheDolt on October 15th, 2011 at 10:12 am

    I really liked the disabling script thing. Thanks!

  73. Mary on December 30th, 2011 at 7:08 pm

    Wow, there are so many great tips for more advanced WordPress users. I love them. Thank you for putting them and sharing!

  74. ApipCinta on August 23rd, 2012 at 11:26 am

    Thanks for your information and for your sharing…Great Article

  75. Simon on September 7th, 2012 at 8:46 am

    These tips are not something that the noob would know to do to optimize their WordPress site. So I appreciate you mentioning some of these tips. They’re great. Especially the one creating the custom “read more” button. Most people just go on .. and on… with their text.