How to write WordPress plugin with widget

In this tutorial we are going to learn how to create a WordPress Plugin with a widget that You can place on a website. Our sample plugin’s widget will display newest posts links which are available through ITCuties’s RSS feed available at http://www.itcuties.com/feed/. Follow this few simple steps to achieve this goal:

1. Create WordPress plugin directory and plugin PHP file

Go to plugins directory under wp-content directory of Your WordPress instance. Create a directory named itcuties-rss-plugin. Under that newly created directory create itcuties-rss-plugin.php file.

2. Write WordPress plugin code

Edit the itcuties-rss-plugin.php file. Write above code:

<?php
/*
Plugin Name: ITCUTIES RSS Plugin
Plugin URI: http://www.itcuties.com/itcuties-rss-plugin
Description: Display ITCUTIES RSS data
Version: 1
Author: ITCUTIES
Author URI: http://www.itcuties.com
*/

class ITCRssWidget extends WP_Widget {

	function ITCRssWidget() {
		parent::WP_Widget( false, $name = 'ITCRss Widget' );
	}

	function widget( $args, $instance ) {
		extract( $args );
		$title = apply_filters( 'widget_title', $instance['title'] );
		echo $before_widget;
		if ($title) {
			echo $before_title . $title . $after_title;
		}

		// Display RSS info
		itcRssDisplay();
		echo $after_widget;
	}

	function update( $new_instance, $old_instance ) {
		return $new_instance;
	}

	function form( $instance ) {
		$title = esc_attr( $instance['title'] );
		echo '<input id="'.$this->get_field_id( 'title' ).'" type="text" name="'.$this->get_field_name( 'title' ).'" value="'.$title.'" />';
	}
}

function itcRssDisplay() {
	$doc = new DOMDocument();
	$doc->load('http://www.itcuties.com/feed/');
	foreach ($doc->getElementsByTagName('item') as $node) {
		$postTitle   = $node->getElementsByTagName('title')->item(0)->nodeValue;
		$postLink    = $node->getElementsByTagName('link')->item(0)->nodeValue;
		$postDate   = $node->getElementsByTagName('pubDate')->item(0)->nodeValue;
		echo '<strong><a href="'.$postLink.'">'.$postTitle.'</a></strong>';
		echo '<em>'.$postDate.'</em>';
	}
}

add_action( 'widgets_init', 'ITCRssWidgetInit' );

function ITCRssWidgetInit() {
	register_widget( 'ITCRssWidget' );
}

?>

Very important thing is that You should place a comment at the beginning of the plugin file that indicates that this is a plugin. The format of that comment looks like this:

/*
Plugin Name: {PUT A PLUGIN NAME HERE}
Plugin URI: {LINK TO A PLUGIN’S PAGE}
Description: {BRIEF DESCRIPTION OF A PLUGIN}
Version: {VERSION}
Author: {AUTHOR NAME}
Author URI: {AUTHOR PAGE URL}
*/

Our plugin contains a widget which is indicated with

class ITCRssWidget extends WP_Widget

Function which renders widget’s body is


function widget( $args, $instance )

It calls our custom


function itcRssDisplay()

This peace of code contains the functionality of connecting to RSS feed, parse it and display data.

In our example we wanted to have full control over widget’s title which is coded in


function form( $instance )

Our widget is being initialized with this code fragment:


add_action( 'widgets_init', 'ITCRssWidgetInit' );

function ITCRssWidgetInit() {
	register_widget( 'ITCRssWidget' );
}

3. Test Your work

Everything is done. Now go to Plugins page and activate Your plugin. Next go do Widget’s page and add Your widget to site.

Download source code for this tutorial here.

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>