23 Excellent Tutorials For WordPress Theme Developers

23 Excellent Tutorials For WordPress Theme Developers

By in SEO

WordPress is undoubtedly an amazing publishing platform. You can get started as quickly as with few clicks or you can customize it to any level you want. The internet is filled with good-quality tutorials on customizing every aspect of WordPress.

Here are 23+ excellent tutorials that will help WordPress theme developers make better themes and give them an idea of different and unique ways to customize WordPress according to need.

1. Create a Login Form Overlay

Login form overlay
Give your users a quick way to log in to your WordPress blog in a JQuery lightbox window. Quite useful for multi-author blogs or blogs that allow users to log in to comment.

2. Add Tweets Related To Your Posts in WordPress

Tweets Related to Posts
Awesome tutorial on showing tweets related to your posts from the Twitter timeline. You can specify the tags or keywords in the custom field which will be used to fetch tweets.

3. Create an Awesome WordPress Theme Options Page

This is a two-part tutorial on how to create an options page for your WordPress Theme to make it stand out from the crowd.

4. How To Get Custom Field Outside WordPress Loop

Ever thought of using post custom fields outside the WordPress loop, then use the following code to access the custom field, simply replace the ‘custom field in the fourth line with your own custom field. 

  1. <?php  
  2. global $wp_query;  
  3. $postid = $wp_query->post->ID;  
  4. echo get_post_meta($postid, ‘customField’, true);  
  5. ?>  

5. Using Multiple WordPress Loops in Your Theme

Sometimes, you might want to show featured posts before the normal posts or you want or you want to format posts from a particular category in a different way from others, then you will have to use multiple WordPress loops in your theme. Cristian Antohe explains everything you need to know about using multiple WordPress loops in your theme.

6. How To Get First Image from post and display it

In most of the premium-like themes, the first image of the post is given special attention as a thumbnail version of it is used on the blog homepage, sometimes a smaller thumbnail in the sidebar or footer alongside the post listings. Simply paste this function into your theme’s functions.php file and use the statement <?php echo catch_that_image() ?> in the WordPress loop where you need the first image.view plaincopy to clipboardprint?

  1. function catch_that_image() {  
  2.   global $post, $posts;  
  3.   $first_img = ”;  
  4.   ob_start();  
  5.   ob_end_clean();  
  6.   $output = preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’, $post->post_content, $matches);  
  7.   $first_img = $matches [1] [0];  
  8.   
  9.   if(emptyempty($first_img)){ //Defines a default image  
  10.     $first_img = “/images/default.jpg”;  
  11.   }  
  12.   return $first_img;  
  13. }  

7. How To Use Thumbnails Generated By WordPress in Your Theme

WordPress also creates a thumbnail version of each image you upload inside WordPress post whose size you can alter from Settings > Media in the administration panel. Now to use that thumbnail version within your theme, simply use the following code:view plaincopy to clipboardprint?

  1. <?php  
  2. //Get images attached to the post  
  3. $args = array(  
  4.     ‘post_type’ => ‘attachment’,  
  5.     ‘post_mime_type’ => ‘image’,  
  6.     ‘numberposts’ => -1,  
  7.         ‘order’ => ‘ASC’,  
  8.     ‘post_status’ => null,  
  9.     ‘post_parent’ => $post->ID  
  10. );  
  11. $attachments = get_posts($args);  
  12. if ($attachments) {  
  13.     foreach ($attachments as $attachment) {  
  14.         $img = wp_get_attachment_thumb_url( $attachment->ID );  
  15.                 break;  
  16.         }  
  17. //Display image  
  18. echo ‘<img src=”‘.$img.'” alt=”something” />’;  
  19. }  
  20. ?>  

This one is useful if your theme requires only a single-sized thumbnail version of the first image, if you require multiple thumbnail versions, then use the method specified by the 6th point.

8. Display Future Scheduled Posts on Your Blog

Show your readers in advance which posts are you writing and when should they come to see the new post. Add the following code anywhere in your theme, preferably sidebar to show upcoming scheduled posts.view plaincopy to clipboardprint?

  1. <h3>Upcoming Posts</h3>  
  2. <?php query_posts(‘showposts=5&post_status=future’); ?>  
  3. <?php if ( have_posts() ) : ?>  
  4.   
  5.   <ul>  
  6.   <?php while ( have_posts() ) : the_post(); ?>  
  7.     <li>  
  8.         <?php the_title(); ?> <?php edit_post_link(‘e’,’ (‘,’)’); ?><br />  
  9.     <span class=”datetime”><?php the_time(‘j. F Y’); ?></span>  
  10.   
  11.     </li>  
  12. <?php endwhile; ?>  
  13.   </ul>  
  14. <?php endif; ?>  

9. Using Cron to Schedule Events in WordPress

You might sometimes need to schedule certain events in WordPress like a daily backup of the database, send a summary report to blog administrator, etc, WordPress has the ability to cater to this need too. Simply paste the following code into the functions.php file to create a scheduled event.

  1. if (!wp_next_scheduled(‘my_task_hook’)) {  
  2.     wp_schedule_event( time(), ‘hourly’, ‘my_task_hook’ );  
  3. }  
  4.   
  5. add_action( ‘my_task_hook’, ‘my_task_function’ );   
  6.   
  7. function my_task_function() {  
  8. //code for your scheduled task  
  9.     wp_mail(‘[email protected]’, ‘Automatic email’, ‘Hello, this is an automatically scheduled email from WordPress.’);  
  10. }  

10. Separate Comments and Trackbacks in WordPress

This tutorial shows you how to separate comments and trackbacks in the comments section. This tutorial uses comments.php file from WordPress 2.5 or earlier which did not have support for wp_list_comments function. With WordPress 2.7 or later, you can simply pass a parameter to wp_list_comments() function to separate comments and trackbacks. e.g.
Use wp_list_comments('type=comment') to show comments and wp_list_comments('type=pings') to show pings and trackbacks.

11. List All Hooked WordPress Functions

WordPress Hooks are very useful and help developers to customize WordPress the way you want, but sometimes things might go wrong and you might want to view all the hooks that are being used, then this tutorial will come in handy.

12. Detect Visitor Browser Within WordPress

One of the lesser known features of WordPress is that it provides global variables for browser detection which you can use to customize your theme for different browsers. Here’s a useful function which you can add to your functions.php file that adds browser specific css classes to body tag so that you can control looks for different browsers.

  1. <?php  
  2. add_filter(‘body_class’,’browser_body_class’);  
  3. function browser_body_class($classes) {  
  4.     global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;  
  5.   
  6.     if($is_lynx) $classes[] = ‘lynx’;  
  7.     elseif($is_gecko) $classes[] = ‘gecko’;  
  8.     elseif($is_opera) $classes[] = ‘opera’;  
  9.     elseif($is_NS4) $classes[] = ‘ns4’;  
  10.     elseif($is_safari) $classes[] = ‘safari’;  
  11.     elseif($is_chrome) $classes[] = ‘chrome’;  
  12.     elseif($is_IE) $classes[] = ‘ie’;  
  13.     else $classes[] = ‘unknown’;  
  14.   
  15.     if($is_iphone) $classes[] = ‘iphone’;  
  16.     return $classes;  
  17. }  
  18. ?>  

13. Get Tags Specific to a Particular Category in WordPress

Wouldn’t it be nice to show tags related to the category of the post instead of showing all the tags and eating up page real estate. Here’s the code that shows only the tags related to a particular category.

  1. <?php  
  2.     query_posts(‘category_name=work’);  
  3.     if (have_posts()) : while (have_posts()) : the_post();  
  4.         $posttags = get_the_tags();  
  5.         if ($posttags) {  
  6.             foreach($posttags as $tag) {  
  7.                 $all_tags_arr[] = $tag -> name; //USING JUST $tag MAKING $all_tags_arr A MULTI-DIMENSIONAL ARRAY, WHICH DOES WORK WITH array_unique  
  8.             }  
  9.         }  
  10.     endwhile; endif;   
  11.   
  12.     $tags_arr = array_unique($all_tags_arr); //REMOVES DUPLICATES  
  13.     echo ‘<pre>’.print_r($tags_arr, true).'</pre>’; //OUTPUT FINAL TAGS FROM CATEGORY  
  14. ?>  

14. Create Archive Page Using WordPress Loop

Archive Page Using WordPress Loop
This is a nice tutorial from WP-Recipes about how to create an archive page for your blog that lists all the posts without installing any plugin. Simply create a custom page template and paste the given code in it and then create a new blank page with its template set to the one with custom code.

15. Get The Latest Sticky Posts

One of the useful features in WordPress 2.7 or later is the sticky posts, so if you need to output 5 latest sticky posts using WordPress loop, here’s the code:

  1. <?php  
  2. $sticky = get_option(‘sticky_posts’);  
  3. rsort( $sticky );  
  4. $sticky = array_slice( $sticky, 0, 5);  
  5. query_posts( array( ‘post__in’ => $sticky, ‘caller_get_posts’ => 1 ) );  
  6. if (have_posts()) :  
  7.     while (have_posts()) : the_post();  
  8.         the_title();  
  9.         the_excerpt();  
  10.     endwhile;  
  11. endif;  
  12. ?>  

16. Only Show Posts With a specific Custom Field Value

You might some time need to show posts having a specific custom field value, then use the code below to get posts in the loop.

  1. <?php query_posts(‘meta_key=[custom field name]&meta_value=[custom field value]’);  ?>  
  2. <?php if (have_posts()) : ?>  
  3. <?php while (have_posts()) : the_post(); ?>  
  4.     //display posts  
  5. <?php endwhile; endif;  
  6. ?>  

17. Use Multiple Loops on a Page Without printing Duplicate Posts

If you use multiple loops within your theme file, then chances are that some posts might be output by both loops simultaneously. To prevent this, do the following:
When you use loop for first time, record the id’s of posts in an array e.g.view plain copy to clipboard print?

  1. <?php  
  2. query_posts(‘showposts=8’);  
  3. $ids = array();  
  4. while (have_posts()) : the_post();  
  5. $ids[] = get_the_ID();  
  6. the_title();  
  7. the_content();  
  8. endwhile;  
  9. ?>  

And when you use the loop next time, modify your query to exclude the post with id’s already displayed by first loop.view plain copy to clipboard print?

  1. <?php  
  2. query_posts(array(‘post__not_in’ => $ids));  
  3. while (have_posts()) : the_post();  
  4. the_title();  
  5. the_content();  
  6. endwhile;  
  7. ?>  

Source: 10 Useful WordPress Loop Hacks(Smashing Magazine)

18. Displaying Author Meta Information in WordPress 2.8

Display Author Info in WordPress
WordPress 2.8 includes a new function the_author_meta() to display author information easily. This tutorial explains every aspect of the new function. Here’s the sample code to make an author info box like the image, you will need to apply your own styles.

  1. <div id=”authorbox”>  
  2.   
  3.    <?php if (function_exists(‘get_avatar’)) { echo get_avatar(get_the_author_meta(‘user_email’), ’80’); }?>  
  4.    <div>  
  5.       <h4>About <a href=”<?php the_author_meta(‘user_url’); ?>”><?php the_author_meta(‘display_name’); ?></a></h4>  
  6.       <p><?php the_author_meta(‘description’); ?></p>  
  7.   
  8.    </div>  
  9. </div>  

19. Make Your Theme Comments Backward Compatible with version 2.7 and earlier

If you design themes for WordPress 2.7 or later, then you might be using wp_list_comments() to show comments but since this function is not supported by earlier functions, you’ll have to use legacy methods to show comments. This tutorial shows you how to make your theme compatible by using a different versions of the comments file depending on the WordPress version.

20. Show Your Latest Tweet in Just 5 Lines of Code

This piece of code is just awsome as it lets you show your latest tweet with no more than 5 lines of code using the twitter search feed. Add this code to functions.php.

  1. function wp_echoTwitter($username){  
  2.      include_once(ABSPATH.WPINC.’/rss.php’);  
  3.      $tweet = fetch_rss(“http://search.twitter.com/search.atom?q=from:” . $username . “&rpp=1”);  
  4.      echo $tweet->items[0][‘atom_content’];  
  5. }  

To display the latest tweet within your theme, use the below line of code, remember to replace the username with your own.

  1. <?php wp_echoTwitter(‘webdevplus’); ?>  

21. How To Embed CSS in your posts With Custom Field

If you would like to style a particular post in a different style from the rest, then here’s a nice custom field hack from WP-Recipes.
Add the below code to your theme’s header.php file between <head> and </head> tags.

  1. <?php if (is_single()) {  
  2.     $css = get_post_meta($post->ID, ‘css’, true);  
  3.     if (!emptyempty($css)) { ?>  
  4.         <style type=”text/css”>  
  5.         <?php echo $css; ?>  
  6.         <style>  
  7.     <?php }  
  8. } ?>  

Now whenever you want a custom-styled post, add a custom field named CSS to it with its value set to the styles you want to apply.

22. Create Custom User-Defined RSS Feeds

If you are redirecting your feed to FeedBurner using the feed smith plugin, then it becomes nearly impossible to provide feeds for a particular category, but this one is a really nice solution from WP-Recipes that involves creating a custom page template for your custom feed.

23. Guide To Launch Your WordPress Theme

If you develop Free WordPress Themes for the community, then you not only need to code and develop it but also, it’s your job to promote it to the WordPress community. This article from WP Lover guides on how to successfully promote your theme.

Comments are closed.