Wordpress 2.3 Excellent tutorials for wordpress

Document Sample
Wordpress 2.3 Excellent  tutorials for wordpress Powered By Docstoc
					                                                                                                                    About   Contact   Advertise   Archives




                                                                                              Search:                                                   Search


      HOME        AJAX     CSS       DESIGN      JQUERY        PHOTOSHOP         PHP       WORDPRESS

  

    23+ Excellent Tutorials For WordPress Theme 
    Developers
       Aug 6th, 2009 | Filed in Wordpress
Sponsored Links

                             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. 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.  
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 ); 
           '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. 
U s e   wp_list_comments('type=comment')  t o   s h o w   c o m m e n t s   a n d   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. 
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
                                  } 
                       } 
           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 
    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 
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 
<?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. 

     n   Theme Development Checklist From WordPress Docs  

     n   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. 

     n   Theme Development Sample Content From WordPress Docs  

     n   Sample Content For WordPress Theme Developers – WPCandy  


    WordPress Template Hierarchy Diagram 
         n   Theme Development Sample Content From WordPress Docs  

         n   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. 



    Tags: wordpress hacks , wordpress theme  




         Bookmark n Share
                                                                                                               
                   12
                 tweets

                 retweet  




         Subscribe to Full RSS Feed
                          If you found this article useful, then consider subscribing to our RSS Feed or e­mail 
                          updates to stay updated with latest Web Developer Plus articles. You can also follow 
                          @webdevplus on twitter for latest updates. 




        Related posts:
         n How To Use Thumbnails Generated By 
         WordPress In Your Theme  

         n  Create Post Only For Your RSS Subscribers 
         in WordPress  

         n    10 Incredibly Useful WordPress 2.8 Tutorials  




        Leave a Reply
     
              Name                                                    

              E­mail                                                  

             Website                                                  




        Name, E­mail and Comment are required.  

				
DOCUMENT INFO
Shared By:
Tags:
Stats:
views:10
posted:9/21/2011
language:English
pages:8
Description: 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.