Building a WordPress plugin: Tweetable

Today we are going to build a Tweetable WordPress plugin from scratch, This plugin will pull latest 5 tweets from Twitter and display it in our WordPress sidebar.

Building a WordPress plugin seems difficult, but you will see that, after some practice, it becomes easier every time you write one.

What is Tweetable?

Tweetable is a lightweight jQuery plugin which enables you to display your twitter feed on your site quickly and easily.

More than just displaying the feeds you can highlight @replys as well as links being dynamically generated for ease of use.

How to use Tweetable?

Tweetable version 1.6 has been developed to work with jQuery 1.4.2. Firstly call in the framework and the jquery.tweetable.js file:

[code lang=”html”]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tweetable.js"></script>
[/code]

Next create an element on your page that you want to call your twitter feed into. For example #tweets:

[code lang=”html”]
<div id="tweets"></div>
[/code]

Now you can initiate the plugin by calling tweetable onto your selected element:

[code lang=”javascript”]
$(‘#tweets’).tweetable({username: ‘codeforest’});
[/code]

This is real basic usage of the plugin, for more options consider reading the documentation at Philip Beel’s Tweetable jQuery plugin page.

Now let me explain how to make a WordPress plugin out of this.

What is a WordPress plugin?

Well, according to the WordPress Team:

A WordPress Plugin is a program, or a set of one or more functions, written in the PHP scripting language, that adds a specific set of features or services to the WordPress weblog, which can be seamlessly integrated with the weblog using access points and methods provided by the WordPress Plugin Application Program Interface (API).

For this tutorial you will have to obtain and install WordPress.

First, we will create a folder where all our plugin files will be. Let’s call this folder cf_tweetable and create it under our wp-content/plugins folder inside WordPress installation.

As we are building the plugin for Tweetable jQuery Plugin, download it and put inside our cf_tweetable folder.

Inside this folder, create a cf_tweetable.php file. This is the main plugin file.

To tell WordPress that this is a plugin, we need to enter some comments on top of the main plugin file. So, open up cf_tweetable.php and enter this:

[code lang=”php”]
<?php
/*
Plugin Name: Cf_Tweetable
Plugin URI: https://www.codeforest.net
Description: This plugin shows last n Tweets for a Twitter username in sidebar
Version: 1.0
Author: Zvonko Biskup
Author URI: https://www.codeforest.net
License: GPL2
*/
[/code]

Now, go to your Plugins page inside your WordPress admin and our new Tweetable plugin should be available in the list. Simple, eh?

Building WordPress plugin

As we want the user to be able to enter desired Twitter username, we will build a shortcode functionality inside our plugin. Open up your main plugin file and paste this code in (under the comment added above):

[code lang=”php”]
class CFTweetable {

public function __construct()
{
// Set Plugin Path
$this->pluginPath = dirname(__FILE__);

// Set Plugin URL
$this->pluginUrl = WP_PLUGIN_URL . ‘/cf_tweetable’;

add_shortcode(‘Tweetable’, array($this, ‘shortcode’));

// call jquery
if (!is_admin()) {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js’);
wp_enqueue_script( ‘jquery’ );
}

}

public function getTweets($username)
{

//call Tweetable plugin js file
echo ‘<script type="text/javascript" src="’ . $this->pluginUrl . ‘/tweetable/jquery.tweetable.min.js"></script>’;

// render results div
echo ‘<div id="tweets"></div>’;

// render javascript code to do the magic
echo ‘<script type="text/javascript">’;
echo ‘jQuery(function(){‘;
echo ‘jQuery("#tweets").tweetable({‘;
echo ‘username: \” . $username . ‘\’,’;
echo ‘limit: 5,’;
echo ‘replies: true,’;
echo ‘position: "append"});’;
echo ‘});’;
echo ‘</script>’;

}

public function shortcode($atts)
{
// pass the attributes to getTweets function and render the tweets
return $this->getTweets($atts[‘username’]);
}

}

$cfTweetable = new CFTweetable();
[/code]

This is all the code we need to create our little plugin.

Now, activate the plugin in WordPress admin. If you want to show the last 5 Tweets, simply use a shortcode inside your Post or Page. You simply write [Tweetable username=codeforest] and you will get last 5 Tweets rendered on that spot.

If you want to use the plugin inside Text widget, you must add this line to __construct method above:

[code lang=”php”]
// Add shortcode support for widgets
add_filter(‘widget_text’, ‘do_shortcode’);
[/code]

That’s it. A simple way to build a cool WordPress plugin.

You can see this plugin in action in the left side of the footer of this blog.