23+ Excellent Tutorials For WordPress Theme Developers

Posted in Wordpress

WordPress 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 login to your WordPress blog in a lightbox window. Quite useful for multi-author blogs or blogs that allow users to login 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 twitter timeline. You can specify the tags or keyword 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 custom field, simply replace the ‘customfield’ in fourth line with your own custom field.

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'customField', true);
?>

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, first image of the post is given special attention as thumbnail version of it is used on blog homepage, sometimes a more smaller thumbnail in sidebar or footer alongside 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.

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;
}

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 administration panel. Now to use that thumbnail version within your theme, simply use the following code:

<?php
//Get images attached to the post
$args = array(
	'post_type' => 'attachment',
	'post_mime_type' => 'image',
	'numberposts' => -1,
        'order' => 'ASC',
	'post_status' => null,
	'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		$img = wp_get_attachment_thumb_url( $attachment->ID );
                break;
        }
//Display image
echo '<img src="'.$img.'" alt="something" />';
}
?>

This one is useful if your theme requires only single sized thumbnail version of the first image, if you require multiple thumbnail versions, then use the method specified by 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 any where in your theme, preferably sidebar to show upcoming scheduled posts.

<h3>Upcoming Posts</h3>
<?php query_posts('showposts=5&post_status=future'); ?>
<?php if ( have_posts() ) : ?>
  <ul>
  <?php while ( have_posts() ) : the_post(); ?>
    <li>
        <?php the_title(); ?> <?php edit_post_link('e',' (',')'); ?><br />
	<span class="datetime"><?php the_time('j. F Y'); ?></span>
    </li>
<?php endwhile; ?>
  </ul>
<?php endif; ?>

9. Using Cron to Schedule Events in WordPress

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

if (!wp_next_scheduled('my_task_hook')) {
	wp_schedule_event( time(), 'hourly', 'my_task_hook' );
}

add_action( 'my_task_hook', 'my_task_function' ); 

function my_task_function() {
//code for your scheduled task
	wp_mail('you@yoursite.com', 'Automatic email', 'Hello, this is an automatically scheduled email from WordPress.');
}

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 some times thing might go wrong and you might want to view all the hooks that are being used, then this tutorial will come 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.

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>

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.

<?php
	query_posts('category_name=work');
	if (have_posts()) : while (have_posts()) : the_post();
        $posttags = get_the_tags();
		if ($posttags) {
			foreach($posttags as $tag) {
				$all_tags_arr[] = $tag -> name; //USING JUST $tag MAKING $all_tags_arr A MULTI-DIMENSIONAL ARRAY, WHICH DOES WORK WITH array_unique
			}
		}
	endwhile; endif; 

	$tags_arr = array_unique($all_tags_arr); //REMOVES DUPLICATES
	echo '<pre>'.print_r($tags_arr, true).'</pre>'; //OUTPUT FINAL TAGS FROM CATEGORY
?>

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:

<?php
$sticky = get_option('sticky_posts');
rsort( $sticky );
$sticky = array_slice( $sticky, 0, 5);
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
if (have_posts()) :
    while (have_posts()) : the_post();
        the_title();
        the_excerpt();
    endwhile;
endif;
?>

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.

<?php query_posts('meta_key=[custom field name]&meta_value=[custom field value]');  ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
    //display posts
<?php endwhile; endif; 
?>

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.

<?php
query_posts('showposts=8');
$ids = array();
while (have_posts()) : the_post();
$ids[] = get_the_ID();
the_title();
the_content();
endwhile;
?>

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

<?php
query_posts(array('post__not_in' => $ids));
while (have_posts()) : the_post();
the_title();
the_content();
endwhile;
?>

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 ow styles.

<div id="authorbox">
   <?php if (function_exists('get_avatar')) { echo get_avatar(get_the_author_meta('user_email'), '80'); }?>
   <div>
      <h4>About <a href="<?php the_author_meta('user_url'); ?>"><?php the_author_meta('display_name'); ?></a></h4>
      <p><?php the_author_meta('description'); ?></p>
   </div>
</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 different version of 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.

function wp_echoTwitter($username){
     include_once(ABSPATH.WPINC.'/rss.php');
     $tweet = fetch_rss("http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=1");
     echo $tweet->items[0]['atom_content'];
}

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

<?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 nice custom field hack from WP-Recipes.
Add the below code to your theme’s header.php file between <head> and </head> tags.

<?php if (is_single()) {
    $css = get_post_meta($post->ID, 'css', true);
    if (!empty($css)) { ?>
        <style type="text/css">
        <?php echo $css; ?>
        <style>
    <?php }
} ?>

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 feedsmith plugin, then it becomes nearly impossible to provide feeds for 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 community, then you not only need to code and develop it but also, its your job to promote it to the wordpress community. This article from WP Lover guides about how to successfully promote your theme.

Additional Resources

Theme Development Checklist

Theme development checklist
With theme development checklist, you can keep track of important things to do during theme development and make sure you have completed everything required. Here are two theme development checklists.

Theme Development Sample Content

Sample content for wordpress helps you test your wordpress theme’s functionality easily and see how different types of content looks in it. To add sample content, simply login to WordPress Dashboard and go to Tools > Import > WordPress.

WordPress Template Hierarchy Diagram

Template hierarchy diagram
WordPress template hierarchy diagram comes handy when you want to know which theme file is used when and which file will be used if a particular theme file is absent. Here’s a nice template hierarchy diagram from WPCandy .

Share your favorite WordPress tutorials or resources in comments below so that this post becomes more useful.

Tags:

Share


Subscribe to Full RSS Feed

RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

27 Responses (Add Your Comment)

  1. Gabriel says:

    Great list. Thanks for it!

  2. Sunil says:

    I think you have missed this. Create Thickbox in WordPress with just 3 lines of code. http://www.myhtmlworld.com/wordpress/create-thickbox-wordpress.html

  3. Cam says:

    Holy crap this is awesome!

  4. Nice List ……. really useful resource………..

  5. jhon says:

    please give more detail . in whitch file i have to paste file

  6. wonderful list for wp developers, thanks a lot..

  7. V.C says:

    I like the idea Getting First Image from post and display it.
    My theme doesn’t support this feature by default.
    Thank you very much.

  8. libertacara says:

    Great post. Very useful. Thanks.

  9. tobiCOM says:

    Thx for sharing

  10. Thanks for the tutorial, very useful

Comments are closed for this post.