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.
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.
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.
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.
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); ?>
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 Antoheexplains everything you need to know about using multiple WordPress loops in your theme.
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;
}
WordPress also creates a thumbnail version of each image you upload inside wordpress post whose size you can alter fromSettings > Mediain 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.
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; ?>
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 intofunctions.phpfile 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.’);
}
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 forwp_list_commentsfunction. With WordPress 2.7 or later, you can simply pass a parameter towp_list_comments()function to separate comments and trackbacks. e.g.
Usewp_list_comments(’type=comment’)to show comments andwp_list_comments(’type=pings’)to show pings and trackbacks.
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.
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 yourfunctions.phpfile 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;
}
?>
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
?>
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.
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;
?>
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;
?>
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)
WordPress 2.8 includes a new functionthe_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>
If you design themes for WordPress 2.7 or later, then you might be usingwp_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.
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 tofunctions.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’); ?>
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’sheader.phpfile 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.
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.
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.
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.
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 toTools > Import > WordPress.
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 nicetemplate hierarchy diagramfromWPCandy.
Share your favorite WordPress tutorials or resources in comments below so that this post becomes more useful.
About the Author | |
|
alman
Hi... I am alman admin of this oorch.com. I am web development enthusiastic. Recently I had started digging lot on wordpress and web developments stuffs. | |
The latest Doodle:
|
