All of these sites provide a simple way to create these buttons. For example, to add an article to Reddit, the URL is: http://www.reddit.com/submit?url=THE-URL&title=THE-TITLE. As you can see, we just have to fill in the URL and the title for the submission.

I implemented this functionality into my recent ‘Magazine o’Tuts‘ template:

Getting Started

We’ll be applying this functionality to the default WordPress theme, and will use the Social.me icons by jwloh. Download these icons and place the following icons from the 48×48 folder into /wp-content/themes/default/images/

• delicious.png
• digg.png
• facebook.png
• feed.png
• reddit.png
• stumbleupon.png
• twitter.png

The social bookmarks will be displayed on the single post page, between the content and the comments. So open the default theme’s single.php file and enter the following directly above the line:

<div class="social">
 
 <h3>Share This Post!</h3>
 
 <a href="<?php bloginfo('rss2_url'); ?>" title="Subscribe to our RSS feed.">
   <img src="<?php bloginfo('template_directory'); ?>/images/feed.png" alt="Subscribe to our RSS feed." />
 </a>
 
</div>

Take a look at a post page on the blog, you should see the ‘Share This Post!’ heading, followed by an RSS image linking to your RSS feed:

Twitter, Reddit and StumbleUpon

Now we know everything’s in the right place, let’s create the first three social links; Twitter, Reddit and StumbleUpon:

<a href="http://twitter.com/home/?status=<?php the_title(); ?> : <?php the_permalink(); ?>" title="Tweet this!">
 <img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Tweet this!" />
</a>
 
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="StumbleUpon.">
 <img src="<?php bloginfo('template_directory'); ?>/images/stumbleupon.png" alt="StumbleUpon" />
</a>
 
<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Vote on Reddit.">
 <img src="<?php bloginfo('template_directory'); ?>/images/reddit.png" alt="Reddit" />
</a>

The create a Twitter submission, we are using Twitter’s URL API. The link will direct the visitor to their Twitter profile and automatically fill in their ‘Status’ textbox with the title of your blog post, followed by the URL.
All the user has to do, is hit ‘Submit’.

Both StumbleUpon and Reddit’s links are very similar. The link requires the URL for the article, and a title. Each will then take the user to the site’s ‘Submit a Link’ page, with all the fields automatically entered.

Take a look:

Digg, Delicious and Facebook

Just like before, these are also very similar:

<a href="http://digg.com/submit?phase=2&amp;amp;url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Digg this!">
 <img src="<?php bloginfo('template_directory'); ?>/images/digg.png" alt="Digg This!" />
</a>
 
<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Bookmark on Delicious.">
 <img src="<?php bloginfo('template_directory'); ?>/images/delicious.png" alt="Bookmark on Delicious" />
</a>
 
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;amp;t=<?php the_title(); ?>" title="Share on Facebook.">
 <img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Share on Facebook" id="sharethis-last" />
</a>

But, There’s One Problem

Right now, all the links work, but there’s a slight problem with the Twitter one. We’re sending the whole URL to Twitter, which could be very long, and take the tweet over the 140 character limit.

The solution to this is to add in support for one of the many URL shorteners available. We’ll be using TinyURL.com as it is the easiest to incorporate into a site.

Inside the theme’s functions.php file, enter the following below the first line to create a get_tiny_url() function:

function get_tiny_url($url) {
 
 if (function_exists('curl_init')) {
   $url = 'http://tinyurl.com/api-create.php?url=' . $url;
 
   $ch = curl_init();
   curl_setopt($ch, CURLOPT_HEADER, 0);
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
   curl_setopt($ch, CURLOPT_URL, $url);
   $tinyurl = curl_exec($ch);
   curl_close($ch);
 
   return $tinyurl;
 }
 
 else {
   # cURL disabled on server; Can't shorten URL
   # Return long URL instead.
   return $url;
 }
 
}

So we start by creating the function and accepting a URL as a parameter. On line 3, we check whether the server running the WordPress installation has cURL enabled – most will, but it’s good to have a fall-back to avoid any errors.

cURL is a PHP function used to interact with other websites. If cURL does exist, we send a request to TinyURL’s API. We provide it with the current URL, and it will return a TinyURL shortened version.

If cURL is disabled, we will have no choice but to use the full-length URL instead.

To implement this function, edit the Twitter link to:

<a href="http://twitter.com/home/?status=<?php the_title(); ?> : <?php echo get_tiny_url(get_permalink($post->ID)); ?>" title="Tweet this!">
  <img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Tweet this!" />
</a>

Finally, add these two styles to the bottom of style.css:

.social {
 text-align: center;
}
 
.social h3 {
 margin-bottom: 10px;
}

Try it out! Click the Twitter button, and you should get a TinyURL (unless your server has cURL disabled).

Day 18: Creating an AJAX Contact Form

Resources you May Enjoy…

• jquery.post function
• PHP – filter_var()
• WP Codex- wp_enqueue_script()

• Subscribe to the Theme Forest RSS Feed and follow us on Twitter.

Day 16

Resources you may enjoy:

• Wp Codex: Using Custom Fields
• 20 tutorials and resources for working with custom fields

• Subscribe to the Theme Forest RSS Feed and follow us on Twitter.

Day 15: The Slider

Resources You May Enjoy

• Looped Slider Plugin
• Google AJAX Libraries

Custom queries coming!

On day 16 of our series, we will take the slider we have created and learn how to pull out the information the user has entered. No need for the end user to hard code anything, stay tuned!

• Subscribe to the Theme Forest RSS Feed.

One of the biggest benefits of the functions.php file, is that it allows us some abstraction from our regular theme files. Instead of hard coding information or queries into, say, our single.php file, we can use our functions.php file instead to alter it. Later on down the road, if we need to make any changes, we can simply edit one file instead of many.

1. Make Your Theme Widget Ready

A widget ready sidebar could almost be consider essential for any Wordpress theme. Widgets allow the end user to easily and quickly customize specific content on their WordPress theme. Luckily for us, making our sidebar widget ready is very simple. First, add the below code to your functions.php file:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li class="widget">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h3>',
    ));

The code above registers our sidebar widgets and formats them with some basic HTML markup, this allows the designer to easily use those elements to style the widgets and page as they see fit. Now, all we need to do is add a conditional php statement in our sidebar, like so:

<?php 
		if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : 
		?>
		<!--non widget and sidebar information go here-->
 
		<?php endif; ?>

Our theme is now widget ready, if there are no widgets enabled, the default sidebar information will be displayed. If the widgets are enabled by the user, then the widgets will be displayed along with any markup that we declared in our functions.php file.

2. Add Multiple Sidebar Widgets

What if we wanted to have multiple sidebars or sections for other widgets to be added? This is very similar to the code above, however, we need to let WordPress know we are going to register multiple sidebars. We can achieve this easily by doing something like the below snippet:

<?php
			if ( function_exists('register_sidebar') )
			register_sidebar(array('name'=>'-ColumnOne',
			'before_widget' => '<li class="widget">',
			'after_widget' => '</li>',
			'before_title' => '<h2 class="widgettitle">',
			'after_title' => '</h3>',
		));
		register_sidebar(array('name'=>'-ColumnTwo',
			'before_widget' => '<li class="widget">',
			'after_widget' => '</li>',
			'before_title' => '<h2 class="widgettitle">',
			'after_title' => '</h3>',
		));
	?>

The only other thing we would need to do is add our additional conditional statement like we did in Step 1:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('-ColumnOne') ) : ?>
			<!--Default sidebar info here-->
			<!--do the same thing for -ColumnTwo -->
		<?php endif; ?>

Additional Resources:

• Codex: WordPress Widgets and Dynamic Sidebars
• Creating multiple sidebars in WordPress

3. Promote Your RSS Feed After Individual Articles

You may have noticed that many blogs have a little bit of self promotion that occurs at the end of their articles. Such promotion usually contains things like encouraging you to subscribe to RSS feeds or maybe a list of related posts. Using our functions.php file, we can automatically append a little bit of self promotion onto the end of our individual articles.

<?php
		function promote_blog($content){
			echo $content;
			if(is_single()){
		?>
		<div class='promote'>
			<h3>Enjoy this article?</h3>
			<p>Consider <a href="<?php bloginfo('rss2_url'); ?>" title="Subscribe via RSS">subscribing to our RSS feed!</a></p>
		</div>
		<?php
			}
		}
		add_filter('the_content', 'promote_blog');
		?>

You could easily add any additional classes or divs you need and style away. Below is a great example of promoting ones website after the individual article using WordPress by WP Engineer:

4. Enable Adsense Shortcode

This tip comes from the WordPress expert, Jean-Baptiste Jung, from his article on Smashing Magazine. Basically, wordpress allows developers and theme creators to write functions that allow the user to use shortcode, i.e., [adsense]. This kind of ‘pseudo’ code makes it easy for end users to insert elements where they would like without knowing about coding.

Knowing that we can create shortcodes, we can create one to insert a Google Adsense ad anywhere in theme theme.

function showads() {  
     	return '<div id="adsense"><script type="text/javascript"><!--  
     	google_ad_client = "pub-XXXXXXXXXXXXXX";  
    	 google_ad_slot = "4668915978";  
    	 google_ad_width = 468;  
    	 google_ad_height = 60;  
    	 //-->  
		 </script>  
 
		 <script type="text/javascript"  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  
 		 </script></div>';  
 }  
 
 add_shortcode('adsense', 'showads');

Now whenever you would like to add your adsense code in your articles or pages, just simply insert [adsense].

Article Source

5. Add a ‘Send to Twitter’ Link With TinyURLs in the Status

If you’re on Twitter and want to give users the option of sending the current article to their status with your link (in the form of a TinyURL) and post title, you can add this custom function to your functions.php file. As noted, credit to my friend Brian Cray for the one line TinyURL solution:

if(!function_exists('dd_tiny_tweet_init')){
 
	function dd_tiny_tweet_init($content){
		//Thanks to http://briancray.com for the one line $tiny_tweet_url solution. 
		$tiny_tweet_url = file_get_contents('http://tinyurl.com/api-create.php?url=' . urlencode('http://' . $_SERVER['HTTP_HOST']  . '/' . $_SERVER['REQUEST_URI']));
		//Grab the title of the current post
		$tiny_tweet_title = get_the_title();
		//Reduce title to 100 characters
		$tiny_tweet_title = substr($tiny_tweet_title, 0,100);
		//Append an ellipsis to the end
		$tiny_tweet_title .='...';
		//Set up the status and url to send to twitter
		$tiny_tweet_status_url = 'http://twitter.com/home?status=Currently reading "'.$tiny_tweet_title."\" ".$tiny_tweet_url;
		//If the current page is an individual article, promote it with a Twitter link!
		if(is_single()){
			$content .=  '<div class=\'tiny_tweet\'>Enjoy this post? <a href=\''.$tiny_tweet_status_url.'\'>The give it a tweet!</a></div>';
		}
	return $content;
  }
  add_filter('the_content', 'dd_tiny_tweet_init');
 
}

Note you will need to make sure your host supports file_get_contents() for this to work. Below is a screenshot of the basic output:

The comments in the code above should explain most of it. When a user views an individual article, they can click on the link to send the article to their current Twitter status. If our article was named ‘Hello World’, then the status would read:

Currently reading ‘Hello World…’ http://tinyurl.com/5ng3n8

Customize and style to your liking and you have a fully functioning send to Twitter link!

6. Disable Commenting on Posts Older Than 1 Month

Sometimes blog conversations can get a little off topic and out of hand to say the least. If you wish to keep things relative and up to date on the latest discussions, you cal close comments automatically after one month. This handy tip comes to us from forthelose and looks like so:

<?php
 
		function close_comments( $posts ) {
 
			if ( !is_single() ) { return $posts; }
 
			if ( time() - strtotime( $posts[0]->post_date_gmt ) > ( 30 * 24 * 60 * 60 ) ) {
			$posts[0]->comment_status = 'closed';
			$posts[0]->ping_status    = 'closed';
			}
 
		return $posts;
		}
		add_filter( 'the_posts', 'close_comments' );
 
		?>

You can find a nice example of this on the website of Elliot Jay Stocks:

7. Add a PayPal Donation Link

Perhaps you run a website or blog that likes to give away free tutorials, images, and/or code and you would like to offer your readers a way to give back. Using a custom PayPal url and function, we can automatically create a shortcut code to create a donation link. All credit to Blue Anvil for this wonderful snippet:

function donate_shortcode( $atts ) {
   			 extract(shortcode_atts(array(
       			 'text' => 'Make a donation',
       			 'account' => 'REPLACE ME',
       			 'for' => '',
  			  ), $atts));
 
   			 global $post;
 
    		if (!$for) $for = str_replace(" ","+",$post->post_title);
 
   			return '<a class="donateLink" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation+for+'.$for.'">'.$text.'</a>';
 
}
add_shortcode('donate', 'donate_shortcode');

Next, just replace the ‘text’ and ‘account’ values with your own within this function. Now all you need to do is add the shortcode wherever you like in your post, i.e. [donate]

8. Change the Default Gravatar

Our next tip comes to us from CatsWhoCode and is a simple option to change the default WordPress gravatar with one of your own. This is a fantastic way to further brand yourself and your website.

if ( !function_exists('fb_addgravatar') ) {
 
	function fb_addgravatar( $avatar_defaults ) {
 
		$myavatar = get_bloginfo('template_directory').'/gravatar.gif';
        //default avatar below
		$avatar_defaults[$myavatar] = 'Exciting new gravtar';
 
		return $avatar_defaults;
	}
 
	add_filter( 'avatar_defaults', 'fb_addgravatar' );
}

In the above code, change ‘Exciting new gravatar’ and point it to the filename of your new Gravatar and you’re done!

9. Changing Your WordPress Feed Links Without .htaccess

For our last function we will have a look at a snippet written by WordPress Guru, Justin Tadlock. Though there are many plugins that can do this for us, it is quite easy to pull off. For the snippet we will assume you would like the links to point to a feedburner account.

function custom_feed_link($output, $feed) {
 
	$feed_url = 'http://feeds.feedburner.com/justintadlock';
 
	$feed_array = array('rss' => $feed_url, 'rss2' => $feed_url, 'atom' => $feed_url, 'rdf' => $feed_url, 'comments_rss2' => '');
	$feed_array[$feed] = $feed_url;
	$output = $feed_array[$feed];
 
	return $output;
	}
 
	function other_feed_links($link) {
 
	$link = 'http://feeds.feedburner.com/justintadlock';
	return $link;
 
	}
	//Add our functions to the specific filters
	add_filter('feed_link','custom_feed_link', 1, 2);
	add_filter('category_feed_link', 'other_feed_links');
	add_filter('author_feed_link', 'other_feed_links');
	add_filter('tag_feed_link','other_feed_links');
	add_filter('search_feed_link','other_feed_links');

Change the $feed_url variable to your current feed and go grab some lunch!

Have any custom functions or code snippets you like to use? Share them with us in the comments section below, and don’t forget to check out our WordPress for Designers series we are currently running. Happy coding!

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.

Day 14

Resources you may find useful

• WordPress Codex: WP_Query()
• Quick tips for WordPress query
• WordPress Codex: Using custom fields
• WordPress Codex: the_content_rss()
• WordPress Codex: wp_list_pages()

• Subscribe to the Theme Forest RSS Feed.

Day 11: The PSD

PSD Links and Sources

A special thanks to Joefrey Mahusay for letting us work with his .psd theme to continue on our Wordpress series!

• Paper Business .psd
• Paper Business Screenshots

Please Note

Please take some time to answer the questions asked towards the end of the screencast above. Would you like to go from slicing our images into an HTML theme and then into Wordpress? Or would you like to dive straight from slicing into Wordpress? In addition, any comments or suggestions are always welcome and wanted!

Stay Tuned!

In day 12 we will get familiar with slicing our images and splitting them up as we prepare to use them in our final Wordpress theme!

• Subscribe to the Theme Forest RSS Feed.

Day 10: Your First Plugin

Be sure to click on the “Full Screen Toggle” to move to full screen.

Resources You May Enjoy

• WP Codex: Plugin API
• WP Codex: Filter Reference
• Feedburner Home Page

PSD is Coming Soon!

I know you have all been waiting for us to get to the .psd and I am excited to say we are nearly there! Stay with us and be sure to add any questions or suggestions you have in the comments section below!

Please Note

If you had any issues with the last series and the Wordpress 2.7 comments template, please watch the beginning of this screencast and read all of the comments from that day. There were a few mistakes in the source code all of which have been resolved in the comments and this screencast. The source code above should contain the fixed comments.php file as well. Thanks to all who helped find and clear up any bugs!

Help Us!

We put a great deal of effort into bringing you these videos free of charge. If they have helped, we would greatly appreciate a submission to your favorite social networking site. Even a retweet will help! It allows us to continue providing you with top quality content. Thanks again.

• Subscribe to the Theme Forest RSS Feed.

Day 9: Tweaking the Comments

Be sure to click on the “Full Screen Toggle” to move to full screen.

Resources You May Enjoy

• Codex: Migrating plugins and themes to 2.7
• Codex:paginate_comments_links
• Codex: wp_list_comments

PSD is Coming Soon!

I know you have all been waiting for us to get to the .psd and I am excited to say we are nearly there! Stay with us and be sure to add any questions or suggestions you have in the comments section below!

Feedback?

I encourage all of you to keep up the fantastic feedback and continue to ask any questions you may have. In addition, if you have any suggestions or would like to see a certain tip or trick with Wordpress, be sure to let us know. We are here to help! Remember that we will be going over more of the comments file in Day 9.

Help Us!

We put a great deal of effort into bringing you these videos free of charge. If they have helped, we would greatly appreciate a submission to your favorite social networking site. Even a retweet will help! It allows us to continue providing you with top quality content. Thanks again.

• Subscribe to the Theme Forest RSS Feed.

Day 8: Comments

Be sure to click on the “Full Screen Toggle” to move to full screen.

Resources You May Find Helpful

• Unraveling the secrets to comments.php
• Codex:Using gravatars
• Top 10 tutorials for working with Wordpress comments

Feedback?

I encourage all of you to keep up the fantastic feedback and continue to ask any questions you may have. In addition, if you have any suggestions or would like to see a certain tip or trick with Wordpress, be sure to let us know. We are here to help! Remember that we will be going over more of the comments file in Day 9.

Help Us!

We put a great deal of effort into bringing you these videos free of charge. If they have helped, we would greatly appreciate a submission to your favorite social networking site. Even a retweet will help! It allows us to continue providing you with top quality content. Thanks again.

• Subscribe to the Theme Forest RSS Feed.