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
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. 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.
3. 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); ?>
4. 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;
}
5. 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; ?>
6. 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.');
}
7. 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.
8. 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.
9. 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;
}
?>
10. 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
?>
11. Create 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.
12. 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;
?>
13. 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)
14. 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.
15. 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.
16. 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.
Additional Resources
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
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.