xybermatthew

In our last article we once again expanded our plugin and updated it for other themes and begin using some plugin hooks. Lets continue on with our final part of our four part series.

Adding a Digg button using JavaScript code

Our Digg link works fine for submitting the content, but isn’t very pretty, and does not show the number of Diggs we received. That is why we need to use a standard Digg button.

This is accomplished by using a simple piece of JavaScript code provided by Digg, and passing it the necessary information.

Time for Action – Implement a Digg button

Let us implement a Digg button, using information from the Digg API. We will use the newly created button on single posts, and keep the simple Digg link for all the other pages.

1. Create a new function for displaying a nice Digg button using JavaScript code.

     /* Return a Digg button */
     function WPDiggThis_Button()
     {
       global $post;
       // get the URL to the post
       $link=js_escape(get_permalink($post->ID));
       // get the post title
       $title=js_escape($post->post_title);
   
       // get the content
       $text=js_escape(substr(strip_tags($post->post_content),
         0, 350));
   
       // create a Digg button and return it
       $button="
       <script type='text/javascript'>
       digg_url = '$link';
       digg_title = '$title';
       digg_bodytext = '$text';
       </script>
       <script src='http://digg.com/tools/diggthis.js'
         type='text/javascript'></script>"
     return ($button);
     }
     

2. Modify our filter function to include the Digg button for single posts and pages, and a Digg link for all the other pages:

     /* Add Digg This to the post */
     function WPDiggThis_ContentFilter($content)
     {
       // if on single post or page display the button
       if (is_single() || is_page())
         return WPDiggThis_Button().$content;
       else
         return $content.WPDiggThis_Link();
     }
     

3. Digg button now shows at the beginning of the single post page.

   

What just happened?

WordPress will parse our content filter function according to the conditional statement we have added:

function WPDiggThis_ContentFilter($content)
{
  // if on single post or page display the button
  if (is_single() || is_page())
    return WPDiggThis_Button().$content;

This means that if the current viewed page is a single post or page, we will append our Digg button at the beginning of that post.

If we are viewing all the other pages on the blog (like for example the home page or archives) we will show the Digg This link instead.

if (is_single() || is_page())
  return WPDiggThis_Button().$content;
else
  return $content.WPDiggThis_Link();
}

The reason for doing so is that we do not want to clutter the home page of the blog with a lot of big yellow Digg buttons. So we just place a subtle link below the post instead. On single pages, we show the normal button using our new WPDiggThis_Button() function.

The first part is similar to our previous WPDiggThis_Link() function, and it acquires the necessary post information.

/* Return a Digg button */
function WPDiggThis_Button()
{
  global $post;
  // get the URL to the post
  $link=js_escape(get_permalink($post->ID));
  // get the post title
  $title=js_escape($post->post_title);
  // get the content
  $text=js_escape(substr(strip_tags($post->post_content),
    0, 350));

However in this case, we are treating all the information through the js_escape() WordPress function, which handles formatting of content for usage in JavaScript code. This includes handling of quotes, double quotes and line endings, and is necessary to make sure that our JavaScript code will work properly.

We then create a code using Digg API documentation for a JavaScript button:

  // create a Digg button and return it
  $button="
  <script type='text/javascript'>
  digg_url = '$link';
  digg_title = '$title';
  digg_bodytext = '$text';
  </script>
  <script src='http://digg.com/tools/diggthis.js'
    type='text/javascript'></script>";

Conditional Tags

We have used two functions in our example, is_single() and is_page(). These are WordPress conditional tags and are useful for determining the currently viewed page on the blog. We used them to determine if we want to display a button or just a link.

WordPress provides a number of conditional tags that can be used to control execution of your code depending on what the user is currently viewing.

Here is the reference table for some of the most popular conditional tags.

Conditional tags are used in a variety of ways. For example, is_single('15') checks whether the current page is a single post with ID 15. You can also check by title. is_page('About') checks if we are on the page with the title ‘About’.

Quick reference

is_single(), is_page(): These are conditional tags to determine the nature of the currently viewed content

js_escape(): A WordPress function to properly escape the strings to be used in JavaScript code

WordPress Conditional Tags: http://codex.wordpress.org/Conditional_Tags

Styling the output

Our Digg button looks like it could use a better positioning, as the default one spoils the look of the theme. So, we will use CSS to reposition the button.

Cascading Style Sheets or CSS for short ( http://www.w3.org/Style/CSS/ ) are a simple but powerful tool that allows web developers to add different styles to web presentations. They allow full control over the layout, size, and color of elements on a given page.

Time for Action – Use CSS to position the button

Using CSS styles, we will move the button to the right of the post.

1. We will accomplish this by first encapsulating the button in a <div> element. Then we will add a CSS style to this element stating that the button should appear on the right, with a left margin towards the text of 10 pixels.

       // create a Digg button and return it
       $button="
       <script type='text/javascript'>
       digg_url = '$link';
       digg_title = '$title';
       digg_bodytext = '$text';
       </script>
       <script src='http://digg.com/tools/diggthis.js'
         type='text/javascript'></script>";
       // encapsulate the button in a div
       $button='
       <div style="float:right;margin-left:10px;
         margin-bottom:4px;">
       '.$button.'
       </div>';
     return $button;
     

2. The result of applying this simple CSS code is that Digg Button now shows to the right of the post.

What just happened?

We used CSS to move the button to a desired position. CSS is extremely useful for these kinds of tasks and is commonly used in WordPress development to enhance the user experience.

// encapsulate the button in a div
$button='
  <div style="float:right;margin-left:10px;
    margin-bottom:4px;">
  '.$button.'
  </div>';

We have basically encapsulated our button in a <div> element and forced it to the right edge by using float:right CSS command inside a style tag.

We could further experiment with the placement of the button until we find the most satisfying solution.

For example, if we hook to the_title filter instead of the_content, and moved the button to the left, we would get the following result:

Certainly, having good CSS skills is a very valuable asset in WordPress plugin development.

Have a go Hero

Now that our button is finished, there are a lot of possible customizations you can make to the look or position of your button, using both built-in Digg options and CSS.

• You can use the digg_bgcolor, digg_skin, digg_window parameters of Digg JavaScript to control the appearance of the button (refer to http://digg.com/tools/integrate)
• Use CSS to play with the layout of the button
• Create similar plugins that will allow the user to submit content to sites such as Stumble Upon or Reddit

Summary

In this article, we created a working, useful, and attractive WordPress plugin from scratch. Our plugin now displays a fully functional Digg button.

We learned how to extract information using WordPress API and how to use CSS to improve the appearance of our plugin. We also investigated some more advanced WordPress functionalities such as hooks.

Specifically, we covered:

• Creating a plugin: How to fill in the informati on header and create a simple plugin template
• Checking WordPress version: How to check that our plugin is compatible with the user’s version of WordPress
• Modifying theme files: How to safely add functions to the theme files when we need to
• Accessing post information: Different ways of obtaining data from the post such as title, permalink and content
• Using WordPress hooks: How to use actions and filters to get things done from within our plugin (and not modifying the theme for instance)

WordPress Plugin Development (Beginner’s Guide)

Build powerful, interactive plug-ins for your blog and to share online Everything you need to create and distribute your own plug-ins following WordPress coding standards Walk through the development of six complete, feature-rich, real-world plug-ins that are being used by thousands of WP users Written by Vladimir Prelovac, WordPress expert and developer of WordPress plug-ins such as Smart YouTube and Plugin Central Part of Packt’s Beginners Guide series:expect step-by-step instructions with an emphasis on experimentation and tweaking code http://www.packtpub.com/wordpress-plug-in-development/book