From our proof of concept, we learned that the Digg button needs to have some special JavaScript in the HTML document head. Although we could simply paste the necessary JavaScript into our template files, that defeats the purpose of dynamically adding it via a plugin. Besides, we want a solution that doesn't break when we switch templates.
As we've already done this a couple of times, you might be ready to scan through the available actions and filters in the WordPress Codex to find a viable event you can hook into. If you did that, you might come to the conclusion that using the wp_head action would be your ticket to making this work. It's true that the wp_head action would allow you to print the necessary HTML into the head of your pages, but that's actually not the recommended way of accomplishing this.
When working with plugins in any CMS, it is a common need to add both JavaScript and CSS to augment your plugin – the scripts expect to have certain JavaScript and CSS available to them in order to function correctly. WordPress, like other CMS's, has dedicated a few API functions designed explicitly to help solve this problem:
wp_register_script() and wp_enqueue_script(). Together, these functions allow you to include an external JavaScript file exactly once. When used correctly, they prevent you from including the same file multiple times. That's important with JavaScript because many plugins might require the same JavaScript library, but including the same file multiple times can cause conflicts in the same way as redeclaring PHP functions. It's also inefficient to include the same file multiple times, so WordPress' functions here are an effective solution.
Our fist task then is to get the necessary JavaScript into a separate file. If you have working JavaScript inside a <script> tag, you can put its contents into an external file and reference it using the src attribute. Create a new file named digg.js and paste the contents of the <script> tag into it. Here is what we have added to our newly created digg-this/digg.js file:
(function() {
var s = document.createElement('SCRIPT'), s1 = document.
getElementsByTagName('SCRIPT')[0];
To include this on our pages, we would typically add something like this to our document head:
<script type="text/javascript" src="http://yoursite.com/plugins/digg-this/digg.js"></script>
In order to have WordPress do this automatically for us, we are going to make use of the aforementioned wp_register_script() and wp_enqueue_script() as well as the plugins_url() function, which helps us generate the correct URL to our new JavaScript file:
function diggthis_add_js_to_doc_head() { $src = plugins_url('digg.js', __FILE__);
wp_register_script( 'diggthis', $src );
wp_enqueue_script( 'diggthis' );
}
Download from Wow! eBook <www.wowebook.com>
The function plugins_url() generates a URL to the digg.js file inside of our plugin's folder when we pass it the __FILE__ constant, which PHP interprets as the path and name of the current file. Now we have a function that will cause the necessary JavaScript file to be loaded, but we need to tie this to a WordPress event so that this function executes. The event to which we want to tie this is the init action that fires when WordPress is initialized.
// Tie into WordPress Hooks and any functions that should run on load.
add_action('init','diggthis_add_js_to_doc_head');
When we've finished this, our index.php file looks like the following:
<?php
/*-
---Plugin Name: Digg This
Plugin URI: http://www.tipsfor.us/
Description: This plugin will add a "Digg This" button link to each post on your WordPress site.
Author: Everett Griffiths Version: 0.1
Author URI: http://www.tipsfor.us/
---*/
// include() or require() any necessary files here...
// Settings and/or Configuration Details go here...
// Tie into WordPress Hooks and any functions that should run on load.
add_filter('the_content', 'diggthis_get_button');
add_action('init', 'diggthis_add_js_to_doc_head');
// "Private" internal functions named with a leading underscore function _diggthis_get_post_description() { }
* Add the local digg.js to the <head> of WordPress pages
*
* @return none adds HTML to the document <head>
*/
function diggthis_add_js_to_doc_head() { $src = plugins_url('digg.js', __FILE__);
wp_register_script( 'diggthis', $src );
wp_enqueue_script( 'diggthis' );
}
function diggthis_check_wordpress_version() { } /**
* Adds a "Digg This" link to the post content.
*
* @param string $content the existing post content
* @return string appends a DiggThis link to the incoming $content.
*/
function diggthis_get_button($content) {
return $content . '<a class="DiggThisButton DiggMedium"></a>';
}
/* EOF */
If you haven't already, activate this plugin and then visit the homepage of your site.
You should now see a functioning Digg button. Try viewing the source HTML and verify that the Digg JavaScript is being added to the head. You should see something like the following show up in your document head when you view the source HTML:
<script type='text/javascript' src='http://yoursite.com/wp-content/
plugins/digg-this/digg.js?ver=3.0.4'></script>
Tricky, eh? We are now dynamically modifying our pages and we have achieved basic functionality! If you are developing locally on your own desktop computer, you may get some errors when you try to submit a link to Digg: Unable to access this content. This is normal—Digg is trying to connect to your site, but if you are developing locally, your site is not publicly available, so it throws this error.
If you get any other errors, the PHP information printed to the screen should help you track down their source.