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:
Next create an element on your page that you want to call your twitter feed into. For example #tweets:
Now you can initiate the plugin by calling tweetable onto your selected element:
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:
<?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 */
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):
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:
// Add shortcode support for widgets add_filter('widget_text', 'do_shortcode');
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.