Most of these hacks require your WordPress template to have functions.php file, if it doesn’t exist, create one.

1. Add private notes to your WordPress blog posts

If you would like to add reference notes to your posts that will only be visible to authors of your blog, add this function to your theme’s functions.php file which will create a shortcode [note] so that you can add notes for authors by including them in [note] and [/note] while writing the post.

add_shortcode( 'note', 'sc_note' );
function sc_note( $atts, $content = null ) {
	 if ( current_user_can( 'publish_posts' ) )
		return '<div class="note">'.$content.'</div>';
	return '';
}

Source: Add Private Notes to your WordPress Blog Posts – WpRecipes

2. How to disable HTML in WordPress comments

WordPress allows some HTML tags like <a>, <em>, <strong> within comment text. But if you would like to disable this feature on your blog to prevent users from adding any HTML content within comment text, add this function to your theme’s functions.php file. This will treat the HTML content within comment text as literals and display them as it is.

// This will occur when the comment is posted
function plc_comment_post( $incoming_comment ) {

	// convert everything in a comment to display literally
	$incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']);

	// the one exception is single quotes, which cannot be #039; because WordPress marks it as spam
	$incoming_comment['comment_content'] = str_replace( "'", ''', $incoming_comment['comment_content'] );

	return( $incoming_comment );
}

// This will occur before a comment is displayed
function plc_comment_display( $comment_to_display ) {

	// Put the single quotes back in
	$comment_to_display = str_replace( ''', "'", $comment_to_display );

	return $comment_to_display;
}

add_filter( 'preprocess_comment', 'plc_comment_post', '', 1);
add_filter( 'comment_text', 'plc_comment_display', '', 1);
add_filter( 'comment_text_rss', 'plc_comment_display', '', 1);
add_filter( 'comment_excerpt', 'plc_comment_display', '', 1);

Source: How to disable HTML in WordPress Comments

3. Check if a WordPress plugin is active

You might sometime need to check whether a particular plugin is activated or not either to use its functionality or prevent any conflicts from occurring. WordPress provides a function is_plugin_active that accepts path to the plugin file and checks to see if plugin is activated or not.

<?php
if (is_plugin_active('plugin-directory/plugin-file.php')) {
    //plugin is activated
}
?>

Source: Check if a WordPress Plugin is active – WpRecipes

4. Prevent Plugins from automatically loading stylesheets and scripts

Many plugins add their own stylesheets and scripts to your site to perform their function. But if you are using a lot of plugins on your WordPress blog, then this might lead to slow loading of your web pages as lots of scripts and stylesheets will require to be loaded first. What you can do to boost performance of your site while using plugins is combine their CSS and JavaScript files and prevent them to load on their own. For that you’ll need to look into plugin files and find out the handler names of all the CSS and JS files plugins are loading using wp_enqueue_script() and wp_enqueue_style() functions.
For example, if you use wp-pagenavi plugin, it loads its own stylesheet using the function:

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

The first parameter to wp_enqueue_style() or wp_enqueue_script() is the name of handler for CSS or JS file.
In this case the handler name is wp-pagenavi. Now add these lines to your theme’s functions.php file to prevent it from loading.

//Prevent Stylesheets from loading
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

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

//Prevent JavaScript files from loading automatically
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
	wp_deregister_script( 'nameofhandler );
}

Source: How to Disable Scripts and Styles – Justin Tadlock

5. Showing Last Modified Date for a post

If you regularly update your old blog posts, then why not show the last modified date on the post page to let readers know when the post was last updated. Use this code to display the last modified date if the post has been modified at a later date.

Posted on <?php the_time('F jS, Y') ?>
<?php $u_time = get_the_time('U');
$u_modified_time = get_the_modified_time('U');
if ($u_modified_time != $u_time) {
echo "and last modified on ";
the_modified_time('F jS, Y');
echo ". "; } ?>

Source: Showing Last Modified On Your WordPress Posts – WPHacks

6. Custom Taxonomies in WordPress

By default, WordPress has two taxonomies categories and tags to group posts but custom taxonomies allow you to group your pages in your own custom ways, for example if you are running a movie review blog, you might want to add a taxonomy of genre to group movie review by genre, or a taxonomy of actors to group posts by actors. Custom taxonomies free you from restrictions of categories and tags.

You can add a custom taxonomy by adding this code to your theme’s functions.php file.

add_action( 'init', 'create_my_taxonomies', 0 );

function create_my_taxonomies() {
	register_taxonomy( 'genre', 'post', array( 'hierarchical' => false, 'label' => 'Genre', 'query_var' => true, 'rewrite' => true ) );
	register_taxonomy( 'actors', 'post', array( 'hierarchical' => false, 'label' => 'Actors', 'query_var' => true, 'rewrite' => true ) );
}

This will add new boxes to your add post page in admin panel if you are using WordPress 2.8+ using which you can add values for custom taxonomies. Justin Tadlock has written complete tutorial on how to create and use custom taxonomies, refer to it for more.

7. Create Post Only for your RSS Subscribers

If you would like to give an exclusive offer to your regular RSS subscribers, here’s a nice trick to create a post that is only visible to your RSS subscribers.

First of all, create a category that will hold posts to show to your RSS suscribers. For example, create a category ‘RSS’ and add some posts exclusively to it. Note down the category ID of this category. Now in your theme’s functions.php file, add these lines of code so that it is only shown to RSS subscribers.

<?php
function excludeCategory($query)
{
	if($query->is_home | $query->is_archive )
	//Exclude category from all other pages except RSS
	$query->set('cat','-3');
	return $query;
}
add_filter('pre_get_posts', 'excludeCategory');
?>

Source: Create Post only for your RSS Subscribers

8. Get Rid of Curly quotes

WordPress usually replaces pair of double quotes with curly quotes e.g. "something" will become “something”. This is fine for most of the blogs and they look nice too but if you post source code in your posts, then you need to disable this functionality as it’ll also transform quotes within source code. Paste this code into your theme’s functions.php file.

<?php remove_filter('the_content', 'wptexturize'); ?>

Source: Get rid of Curly Quotes in WordPress Blog – WpRecipes

9. Deny Comment Posting to Spammers

You can keep a good number of spam comments away from your blog by checking the referrer URL of the posted comment form. Most of the spam comments are usually made by automated scripts and they just post the data to wp-comments-post.php so that there’s no referral URL through which form is submitted.
You can add a rule to your blog’s .htaccess file so that it restricts the access of wp-comments-post.php to requests that provide referral URL.
Here are the rules you need to add to .htaccess file. Do backup .htaccess file before modifying.

RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*yourblog.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

Source: How To Deny Comment Posting to no referrer requests – WpRecipes

Note: This will only prevent spam bots or automated scripts from posting comment and not those individuals that manually post them. You should use Akismet or other spam preventing tools in addition to this.

10. Insert Ads Within RSS Feed

Here’s a nice hack to add any HTML content into RSS Feeds like ads, copyright info or anything you want to show to just your RSS readers. Add this code to your theme’s functions.php file and you can customize the HTML content to anything you want to append or prepend to posts.

<?php
function insertAds($content) {
    $content = $content.'<hr /><a href="http://webdeveloperplus.com">Visit WebDeveloper Plus for latest Web Design/Development Information</a>';
    return $content;
}
add_filter('the_excerpt_rss', 'insertAds');
add_filter('the_content_rss', 'insertAds');
?>

Source: Web Invent If

11. Disable WordPress Feeds

If you are using WordPress as CMS which has just static content, then you might want to disable RSS feeds as it won’t be of any use for your users. Add this code to your functions.php file to disable RSS feeds.

function fb_disable_feed() {
	wp_die( __('No feed available,please visit our <a href="'. get_bloginfo('url') .'">homepage</a>!') );
}

add_action('do_feed', 'fb_disable_feed', 1);
add_action('do_feed_rdf', 'fb_disable_feed', 1);
add_action('do_feed_rss', 'fb_disable_feed', 1);
add_action('do_feed_rss2', 'fb_disable_feed', 1);
add_action('do_feed_atom', 'fb_disable_feed', 1);

Source: Disable WordPress Feed – WpEngineer

12. Link Post Title to External URL

If you sometimes share just a link to other article out there which your readers might find useful, then here’s a nice hack to link the title of the post in your main template directly to the external URL. This will save your readers some time as they won’t have to open the post page just to find the resource link. Here’s how to do it:
Add these lines of code to functions.php file.

function print_post_title() {
	global $post;
    $thePostID = $post->ID;
    $post_id = get_post($thePostID);
    $title = $post_id->post_title;
    $perm = get_permalink($post_id);
    $post_keys = array(); $post_val = array();
    $post_keys = get_post_custom_keys($thePostID);

    if (!empty($post_keys)) {
		foreach ($post_keys as $pkey) {
			if ($pkey=='title_url') {
				$post_val = get_post_custom_values($pkey);
			}
		}
		if (empty($post_val)) {
			$link = $perm;
		} else {
			$link = $post_val[0];
		}
    } else {
		$link = $perm;
    }
    echo '<h2><a href="'.$link.'" rel="bookmark" title="'.$title.'">'.$title.'</a></h2>';
}

Next, you need to find out following lines in your theme’s index.php file:

<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

Replace these lines with the following

<?php print_post_title() ?>

Now whenever you want to share an external URL, add a custom field to your post named title_url and set its value as the URL of the resource.
Source: WPBeginner

Related posts:

1. Create Post Only For Your RSS Subscribers in WordPress
2. How To Use Thumbnails Generated By WordPress In Your Theme
3. How To: AJAXify WordPress Comment Posting

1. Change the Layout

Most wordpress theme developers do not give much thought into changing the layout of comment form and usually use the same layout as in the default wordpress theme. By creating a different layout of comment form, you can make your blog stand out from the crowd. Here are some nice comment form layouts you can get inspiration from to create a different and unique layout for your net blog design.

Name, Email, URL in line

Name, Email, URL in line at bottom

Name, Email, URL to right

Name, Email, URL to the left

Name, Email, URL after comment area

2. Using tabindex

tabindex is the attribute for form elements using which you can decide the tab order that is where to focus next when user presses tab to proceed to next input field. By default, tab index will be the order in which input fields are present in html code. But if you change the layout, it will be better to specify tabindex attribute with input fields.

3. Use label and fieldset

The comment forms should be accessible to all, even those who use screen readers, they should be able to comment on your blog. label and fieldset tags make your comment form more accessible as screen readers use information in label tag to specify input fields.

4. Highlight Field in Focus

Highlighting the input field currently in focus makes your comment form more usable. You can use the :focus pseudo CSS selector to define styles for highlighting field in focus.
But the CSS technique does not work everywhere as older versions of IE do not recognize :focus pseudo selector. For that You can use JavaScript. Here’s the sample code in jQuery to highlight field in focus.

$('input').focus(function(){
	$(this).css('border-color', '#000');
})
.blur(function(){
	$(this).css('border-color', '#666');
});

5. Add a Formatting Toolbar to Comment textarea

This one is not that necessary but if you want to enhance user experience by providing them with options to format their comment, you should consider adding a WYSIWIG text editor toolbar to your comment textarea. Here’s a nice plugin called TinyMCE Comments that utilizes the same editor which is used in WordPress Admin area.

6. Let Users Subscribe To Comments

This is a must have feature for any WordPress blog as it lets users know if anyone has replied to their comment or added some useful information to the article. You can use Subscribe to Comments WordPress plugin to add this functionality.

7. Show Errors Instantly

In WordPress, if comment form data has some errors, users are taken to a new page that only displays error message and nothing else. As a result user has to click back button and sometimes comment data is lost which will have to be typed again.

It is always a nice idea to have form validation on the spot using JavaScript and display error messages to user as he leaves a particular field rather than form posting back to server and then coming out with errors. Here’s a nice tutorial on adding form validation with jQuery.

8. Preview Comments

Letting the user have a chance to see what they are about to post prevents not only spell mistakes or grammatical errors but also gives them a chance to have a second thought over what they have written. There are some nice plugins like Live Comment Preview to add this type of feature into WordPress comment form.
But the question is not only the preview functionality but also where the preview will be shown, Lorelle VanFossen has written a good tutorial about live comment preview position.

9. Edit Comment After Posting

An option to edit comment after posting will certainly make your site more usable as user will have the option to correct any mistakes in the comment text or it is possible that user has changed his mind and wants to change or add something to the comment. WP AJAX Edit Comments plugin for WordPress will give users an option to edit their comments within set time interval after posting comment.

10. Spice Up With Graphics

Using some fancy graphics to style your comment form will give it a unique appearance and brand. Moreover, graphics say more than words and will help catch user attention and will motivate them to comment on your blog. Here are some spicy comment forms with appropriate use of graphics.

That’s It! With a litlle thought and time, you can make your blog’s comment form more usable and enhance the user experience.

Related posts:

1. Free WordPress Theme For Personal Blogs – YouAre
2. How To: AJAXify WordPress Comment Posting
3. AJAX Multiple File Upload Form Using jQuery

Demo Download

Here are some of the features of this nice theme:

1. Multiple Color Schemes

You can select an alternate stylesheet from the theme options panel to change the look. By default, it has five different color schemes. You can also create your own and place it in YouAre Theme folder and it’ll automatically load in the stylesheet options.

2. Latest Twitter and YouAre Updates on Homepage and sidebar.

3. Total Feedburner Management (Username, Feed Counter, Email Subscription)

4. Flickr Badge : Show latest flickr pics in the sidebar by just entering your flickr username in theme options.

5. Your Photo in About Page

6. Author Summary in the sidebar.

7. Footer Promo Section – Show off your featured work or write a promo about your company.

8. SEO Optimized Code (meta, canonical, dynamic h1 tags…)

9. Multi-language support with automatic user language detection (wp-config.php): English, Spanish and Catalan.

10. Gravatar ready. Header auto recognition gravatar

11. Widget ready: supports widgets in sidebar

12. Threaded-replies

13. Edit/Delete/Mark as spam link on comments

14. Print ready post pages.

15. Accessibility Features (access keys, pdf and zip icons to provide information to user about hyperlink)

Requirements

To use YouAre WordPress Theme to its full potential, you’ll need to install and activate some plugins which are included in the download package. Two of them Smart Archives Reloaded and WP Page Numbers are required while rest are recommended but optional to use.

You can set your personal blog up in no time using this theme as does not require any theme editing, just upload all the plugins to plugins folder and theme files to themes folder and then just activate the plugins, theme and modify the theme options as you want them to be.
Demo Download Visit Theme Page

Related posts:

1. 23+ Excellent Tutorials For WordPress Theme Developers
2. How To Use Thumbnails Generated By WordPress In Your Theme
3. New WordPress Plugin: WDP AJAX Comments

Features

• Enable AJAX Commenting
• Client Side Form Validation
• Easily rolls back if JS disabled
• Easily configure custom styles for messages

Download

Download the Plugin from official WordPress Plugin repository.

Installing & Activating

Here’s how to install and use this plugin to its full potential:
1. Firstly, go to Add New Plugin in your WordPress admin panel, and search for wdp ajax comments and you’ll see the listing, install the plugin by clicking on ‘Install’. Or you can go to WordPress plugin repository page and download the plugin and extract it in your wp-content/plugins folder.
2. Now activate this plugin, and your blog is ready with AJAX comment posting, but one thing you still need to do is enabling the client side comment form validation.
3. To enable form validation, refer to the below section.

Enabling Comment Form Validation

This plugin makes use of jQuery Validation plugin to validate comment form, so you will need to add some css classes to your comment form. Here’s how to do that:
1. Open up your theme’s comments.php file in an editor.
2. Find out the code lines where comment form starts.
3. Now, you need to add following CSS classes to comment form inputs:

• To comment author name input, add class="required"
• To comment author email input, add class="required email"
• To comment author URL input, add class="url"
• To the comment textarea, add class="required"

4. Save the file and now your comment form validation will work.

Styling The Messages

WDP AJAX Comments provides you with full control over the looks of various messages using CSS. To define your own styles, create a new stylesheet file named wdp-ajax-styles.css in your theme’s folder and define styles for these classes:

• .wdpajax-error This class is used for the message shown when AJAX error is encountered.
• .wdpajax-success This class is used for success message shown after successful comment submission.
• .wdpajax-loading This class is used to show the ‘Processing..’ message while performing AJAX request. You can add animated loading gif’s as background to give a nice AJAX effect.
• label.error This class is used to show validation errors.

If your theme folder does not contain wdp-ajax-styles.css file, the default stylesheet of the plugin will be used.

Demo

If you would like to see the demo, go to the demo page.

What to Expect in Coming Versions

Currently, this plugin just AJAXifies comment submission and does not update the comments displayed automatically. So, this is one of the feature you should expect in coming editions. Another feature i have thought is giving you control over the messages displayed on AJAX requests.

If you would like to suggest a new feature, feel free to comment below, just prepend your comment with Suggestion.

If you have used this plugin on your blog, post the address of your blog too, so that other can have a look.
In case you need any assistance, feel free to use the comment section below

Related posts:

1. How To: AJAXify WordPress Comment Posting
2. 10 Ways To Make Your Blog’s Comment Form Stand Out
3. AJAX Multiple File Upload Form Using jQuery

Today i will show you how to enable AJAX comments with client side JavaScript comment form validation on your WordPress blog step by step that should work with most versions of WordPress. We’ll be modifying the WordPress theme files to do that. In few days, i’ll be releasing a WordPress plugin that will automatically enable AJAX Comments. So, do subscribe to our RSS Feed or e-mail updates so that you are the first to know about it.

Let’s start with it.

Functions.php file

Add the following lines of code to your theme’s functions.php file. If your theme doesn’t have one, then create a new file and add it to your theme folder.

add_action('init', 'wdp_ajaxcomments_load_js', 10);
function wdp_ajaxcomments_load_js(){
		wp_enqueue_script('ajaxValidate', get_stylesheet_directory_uri().'/wdp-ajaxed-comments/js/jquery.validate.min.js', array('jquery'), '1.5.5');
		wp_enqueue_script('ajaxcomments', get_stylesheet_directory_uri().'/wdp-ajaxed-comments/js/ajax-comments.js',	array('jquery', 'ajaxValidate'), '1.1');
}
add_action('comment_post', 'wdp_ajaxcomments_stop_for_ajax',20, 2);
function wdp_ajaxcomments_stop_for_ajax($comment_ID, $comment_status){
	if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
	//If AJAX Request Then
		switch($comment_status){
			case '0':
				//notify moderator of unapproved comment
				wp_notify_moderator($comment_ID);
			case '1': //Approved comment
				echo "success";
				$commentdata=&get_comment($comment_ID, ARRAY_A);
				$post=&get_post($commentdata['comment_post_ID']); //Notify post author of comment
				if ( get_option('comments_notify') && $commentdata['comment_approved'] && $post->post_author != $commentdata['user_ID'] )
					wp_notify_postauthor($comment_ID, $commentdata['comment_type']);
				break;
			default:
				echo "error";
		}
		exit;
	}
}

Code Explanation: Firstly, we load required JavaScript files jQuery, jQuery Validation and ajax-comments.js using the wp_enqueue_script() function. wp_enqueue_script() accepts four parameters.

• First is the name of the handler for JavaScript file, you can use any name here for your own custom JavaScript, but for files that wordpress include by default like jQuery, there are pre-fixed handlers like ‘jquery’.
• Second parameter is path to JavaScript file.
• Third parameter is the array of name of handlers of JavaScript files, which must be loaded before the specified file.
• Last is the version number of JavaScript file which you should use in case you use caching on your blog.

The function wdp_ajaxcomments_stop_for_ajax() hooks onto the comment_post action which is triggered after a comment has been successfully added to the database. normally, what happens when you post a comment is that you are redirected back to the original post, but since we will be using AJAX, we don’t want a redirect but a message about the status of comment posted.

I recently read a nice post from David Walsh where he told about how to identify AJAX requests using $_SERVER["HTTP_X_REQUESTED_WITH"] which is populated by most JavaScript frameworks like in our case jQuery.
I used it to hook into comment_post and check whether it is AJAX request or normal request. If it is AJAX request then check the status of comment, if it is unapproved or approved, a message ‘success’ is output and moderator or post author is notified accordingly.
After identifying AJAX request, i stopped the script execution using exit statement so as to prevent the redirect.
Now rest is the job of JavaScript code.

The JavaScript Code

You will need to add two JavaScript files jquery.validate.min.js and ajax-comments.js in the js directory of your theme(Files are available at the end of article). Create the js directory and add files if it does not exist. Though jQuery is required to work, but since it is included in WordPress by default, it will automatically be loaded as we specified it as a requirement while loading JavaScript files in functions.php.

jQuery Validation plugin is used to validate comment form data.
Here’s the code and explanation for ajax-comments.js.

jQuery('document').ready(function($){
	var commentform=$('form[action$=wp-comments-post.php]');
	commentform.prepend('<div id="wdpajax-info" ></div>');
	var infodiv=$('#wdpajax-info');
	commentform.validate({
		submitHandler: function(form){
			//serialize and store form data in a variable
			var formdata=commentform.serialize();
			//Add a status message
			infodiv.html('<p>Processing...</p>');
			//Extract action URL from commentform
			var formurl=commentform.attr('action');
			//Post Form with data
			$.ajax({
				type: 'post',
				url: formurl,
				data: formdata,
				error: function(XMLHttpRequest, textStatus, errorThrown){
					infodiv.html('<p class="wdpajax-error" >You might have left one of the fields blank.</p>');
				},
				success: function(data, textStatus){
					if(data=="success")
						infodiv.html('<p class="wdpajax-success" >Thanks for your comment. We appreciate your response.</p>');
					else
						infodiv.html('<p class="wdpajax-error" >Error in processing your form.</p>');
					commentform.find('textarea[name=comment]').val('');
				}
			});
		}
	});
});

Code Explanation: Firstly, we append a div to comment form that will show AJAX status messages. Then we intialize jQuery Validation on comment form and if validation is successful, we will use jQuery AJAX to send the form data to the action URL of comment form and display a message accordingly.

Now, uptill here, if you have followed along and worked as told, you’ll find that AJAX comment posting works but validation doesn’t. Since, we are using jQuery Validation plugin, you will have to now edit the theme’s comments.php file.

Enable Comment Form Validation

Open your theme’s comments.php and add some CSS classes to comment form input fields as described:

• To comment author name input, add class="required"
• To comment author email input, add class="required email"
• To comment author URL input, add class="url"
• To the comment textarea, add class="required"

Now the comment form validation should work. But it might be having awkward looks or styles, now the last step is to customize the looks of messages using CSS.

Customize the Styles of Messaages

The error messages from validation use labels with CSS class error. While the AJAX post request status messages use two CSS classes, wdpajax-success for AJAX success and wdpajax-error for error message. Define the styles for these classes in your theme’s stylesheet file. Here’s what i have used:

.wdpajax-error{
	border:1px solid #f9d9c9;
	padding:5px;
	color:#ff3311;
}
.wdpajax-success{
	border:1px solid #339933;
	padding:5px;
	color:#339933;
}
label.error{
	float:none !important;
	padding-left:5px;
	color:#ff3311;
}

There you are with cool AJAX comments on your WordPress Blog.

Click here to view the Live demo(Try commenting on one of the posts).

To download the required files, Click here
If you find any problems or error, do let me know in comments.

Plugin

If you find modifying theme file difficult, or if you regularly change your blog’s theme then it will be difficult for you to modify theme files every-time you apply a new theme. so, i have created a plugin named WDP AJAX Comments that will automatically add AJAX commenting to your blog.
So, do subscribe to our RSS Feed or email updates so that you are among the first one to get the plugin.
Enjoy!

Related posts:

1. New WordPress Plugin: WDP AJAX Comments
2. 10 Ways To Make Your Blog’s Comment Form Stand Out
3. 12 Lesser Known But Useful WordPress Hacks

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. Add Tweets Related To Your Posts in WordPress

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

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

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

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 Checklist From WordPress Docs
• WordPress Theme Development Checklist From WPToy (Download PDF)

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.

• Theme Development Sample Content From WordPress Docs
• Sample Content For WordPress Theme Developers – WPCandy

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.

Related posts:

1. How To Use Thumbnails Generated By WordPress In Your Theme
2. Free WordPress Theme For Personal Blogs – YouAre
3. 10 Incredibly Useful WordPress 2.8 Tutorials

WordPress 2.8 was released yesterday and it has a long list of new features, fixes and enhancements. Here’s a round up of 10 incredibly useful tutorials to learn about how to use the new functionality and enhancements of WordPress 2.8

1. Build a WordPress 2.8 Widget with New Widget API – WPEngineer

WPEngineer Michael Preuss walks you through the new simpler Widget API in WordPress 2.8 to create a simple widget. Very simple and easy to understand tutorial.

2. The Complete Guide To Creating Widgets in WordPress2.8 – Justin Tadlock

This is another great resource to learn how to build a widget using the new Widget API by Justin Tadlock.

3. Tutorial on WordPress 2.8 Widget API – Jesse Altman

Another easy to understand hello world tutorial on working with new WordPress widget API.

4. Custom Taxonomies in WordPress 2.8 – Justin Tadlock

If you find categories and tags too restricting for the stuff you write, Justin Tadlock explains how to define your own taxonomies in WordPress 2.8 to label your posts in the way you want.

5. WordPress 2.8 and body_class() function – Nathan Rice

WordPress 2.8 supports location-specific classes for body tag with which you can control the looks of almost everything with just CSS.

6. Load JavaScript Files in Footer of Your Theme – Lester Chan

Now you can make your WordPress blog faster by loading JavaScript files in the footer. Lester Chan explains how to do that in WordPress 2.8

7. Displaying Author Meta Information in WordPress 2.8 – Zach Dunn

WordPress 2.8 include two new functions the_author_meta() and get_the_author_meta() to display information about authors. Zach Dunn explains how to use these new functions in your WordPress theme.

8. the_author_meta() in WordPress Codex

The WordPress codex explains the new author meta information methods, its parameters and examples.

9. Handling Plugin Options in WordPress 2.8 – PlanetOzh

WordPress 2.8 includes interesting register_setting() function that lets plugin authors leave the dirty stuff to WordPress and concentrate on the functionality of plugin.

10 WordPress Proxy Support – WP Engineer

If you are using WordPress on your local network which is behind a proxy, then now you can easily fetch content from other websites or RSS feeds as WordPress 2.8 requires just a little edition to wp-config.php to work behind a proxy.

If you know of some other nice tutorials on WordPress 2.8, feel free to share them with us.

Related posts:

1. 23+ Excellent Tutorials For WordPress Theme Developers
2. 12 Lesser Known But Useful WordPress Hacks
3. How To Use Thumbnails Generated By WordPress In Your Theme

But WordPress has inbuilt functionality of generating thumbnails of the images you add to your post. This functionality is enabled by default unless you have explicitly set it from Media Settings in WordPress Settings panel.

Today, I’m going to show you how to use thumbnails generated by WordPress in your theme without requiring any third party script, plugin or custom field.

1. First of all set the thumbnail size to what you want in the Media Settings of WordPress.

2. Now open up index.php of your WordPress theme and inside the WordPress loop, add the following lines of code to get the path of thumbnail image of the first image in the post.

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

Code Explanation: Firstly we fetch the images attached to the post in the order they were added to the post. And if images are there we fetch the path to the thumbnail image of the first image in the post using wp_get_attachment_thumb_url function.

Now you have path of the image in $img which you can use to display the post thumbnail using img tag.

If you have visited the homepage of Web Developer Plus, I am using this technique to display post thumbnails with post excerpts.

Related posts:

1. 23+ Excellent Tutorials For WordPress Theme Developers
2. Free WordPress Theme For Personal Blogs – YouAre
3. 12 Lesser Known But Useful WordPress Hacks

1. First of all, you need to define a category specifically for posts that are to be displayed only in RSS Feed. Let’s say you define a new category ‘RSS Only’ to handle RSS only posts.

After defining the category note down its category ID. To know category ID of the category, open the edit category page for that category and in the address bar of the page, you can find category ID.

2. Now open your theme’s functions.php file in an editor or use the theme editor in WordPress admin. If your theme does not have functions.php file, create one. Add the following code to your functions.php file.

<?php
function excludeCategory($query)
{
	if($query->is_home | $query->is_archive )
	$query->set('cat','-3');
	return $query;
}
add_filter('pre_get_posts', 'excludeCategory');
?>

pre_get_posts is a WordPress filter which is run before fetching posts from the database. What we’ve done here is to exclude the category defined above from all pages except RSS Feed. Remember to use the negative sign before category ID to exclude that category.

Now whenever you add a post to this category, it won’t show up on your blog’s homepage, category page, tag page or any other archive page but will be visible in your RSS Feed exclusively for your RSS subscribers.

The post page would however be there as it is for every other post but the post won’t show up anywhere else on your blog.

3. And lastly, if you are using wp_list_categories function to display categories list somewhere in your theme, you need to pass a parameter to wp_list_categories to exclude category meant only for RSS feeds from displaying.

wp_list_categories('exclude=3');

And if wp_list_categories already has parameters then append the exclude parameter using & sign.

wp_list_categories('show_count=1&exclude=3');

Now you can create special posts meant only for your RSS readers. If you know or use some other method of creating RSS only posts, feel free to share them in comments below.

Related posts:

1. 12 Lesser Known But Useful WordPress Hacks
2. 23+ Excellent Tutorials For WordPress Theme Developers
3. How To: AJAXify WordPress Comment Posting