Wordpress plugins are pieces of addon code that extend the functionality of Wordpress, either behind-the-scenes or extra visual code. Widgets allow these code segments to be quickly and easily added to predefined sidebars on most themes. Before WordPress version 2.0, these extra visual plugins had to be hand coded into the theme template, so knowledge of PHP was required. In version 2.0 they introduced "Widgets" which wrap around a plugin and allow a non code editing method for incorporating into a theme using sidebars and a drag and drop interface. This tutorial covers creating a Widget, creating a plugin widget, adding sidebars to a theme, and upgrading a non-widget plugin.
Creating a Simple WordPress Plugin
<?php
/*
Plugin Name: Hello World
Plugin URI: http://example.com/
Description: Sample Hello World Plugin
Author: Deep
Version: 1
Author URI: http://example.com/
*/
function sampleHelloWorld() {
echo "<h2>Hello World</h2>";
}
?>
The lines inside /* and */ are used by WordPress to find out about the plugin. We have one function called sampleHelloWorld which does exactly that.
Now, traditionally we would have had to open up the sidebar of the theme you are using, find the location of where you want the Hello World displayed, and hard code the function in. Upload to the server and test. If for some reason there is a problem with your plugin (or a third party plugin) then your site would almost certainly stop working. Changing the location from the left to the right sidebar means editing both files accordingly. This isn't very good.
Widgets
Widgets take away the need for editing the sidebar files of a theme and allow for a drag and drop interface in the admin panel. Let's have a look at how we can widget enable our plugin.
Open up the Hello World plugin file again and add these lines.
<?php
function widget_myHelloWorld() {
?>
<h2 class="widgettitle">My Widget Title</h2>
<?php sampleHelloWorld(); ?>
<?php
}
function myHelloWorld_init(){
register_sidebar_widget(__('Hello World'), 'widget_myHelloWorld');
}
add_action("plugins_loaded", "myHelloWorld_init");
//**Add action just tells WordPress to call myHelloWorld_init when the plugin is loaded.
?>
To make Widget Theme compatible
While this widget will function fine, we can make some improvements to enable greater theme compatibility – not everyone uses the same themes as you test on.WordPress will pass parameters to your widget, which contain information about the sidebar and the CSS classes. We should process these parameters and output the correct tags, or you risk breaking some themes.The first thing we need to do is change our sampleHelloWorld function so that it will accept parameters, then to process these parameters into variables. This is done using the extract function.
function widget_myHelloWorld($args) {
//** $args had been added as parameter
extract($args);
?>
<h2 class="widgettitle">My Widget Title</h2>
<?php sampleHelloWorld(); ?>
<?php
}
again we change hello world function.
These two lines will allow us to reference some variables and output correct html structure for the theme being used. The most important variables are before_widget, after_widget, before_title and after_title. Previously we have surrounded the widget title with a hard coded H2 tag with a css class widgettitle, but many themes do not support these tags. They may use a div, or a h1 or a span, so we need our widget to be flexible.
function widget_myHelloWorld($args) {
extract($args);
echo $before_widget;
echo $before_title;?>My Widget Title<?php echo $after_title;
sampleHelloWorld();
echo $after_widget;
}
//** These changes will allow our plugin to use the same tags as the theme author informs us we need to use, and will allow your widget to look the same as the other widgets in the sidebar.
Complete Plugin:
<?php
/*
Plugin Name: Hello World
Plugin URI: http://azuliadesigns.com/
Description: Sample Hello World Plugin
Author: Tim Trott
Version: 1
Author URI: http://azuliadesigns.com/
*/
function sampleHelloWorld()
{
echo "<h2>Hello World</h2>";
}
function widget_myHelloWorld($args) {
extract($args);
echo $before_widget;
echo $before_title;?>My Widget Title<?php echo $after_title;
sampleHelloWorld();
echo $after_widget;
}
function myHelloWorld_init() {
register_sidebar_widget(__('Hello World'), 'widget_myHelloWorld');
}
add_action("plugins_loaded", "myHelloWorld_init");
?>
If Theme Does Not Have Widget Enable SideBars. If your theme does not have widget enabled sidebars, this will help make it widget enabled. I am using a very basic sidebar theme, most sidebars are a little more complex than this.
<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?><br/>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
<?php endif; ?>
</ul>
</div>
The first of these lines does an if else statement, if we have a sidebar function call it otherwise we do the existing hard coded sidebar.The second line (endif) tells the if statement where the hard coded sidebar ends. Anything between the first and second lines will be shown if widgets are disabled or no widgets are assigned to the sidebar.Before you can add a widget to this sidebar, we need to make WordPress aware of it by registering it.Open, or create, functions.php in your theme folder, and find (or add) a line like this.
<?php
if ( function_exists('register_sidebars') )
register_sidebars(1);
?>
Where the parameter to register_sidebars is the number of sidebars defined in your theme. You can have any number of sidebars. Now you will be able to add widgets to your sidebar.
Should you wish to configure the elements that will appear before and after a widget, or the tags that a widget title will appear in, you can setup the options array and pass it to the register_sidebar function.
register_sidebar(array(
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<div class="sidebar_title">',
'after_title' => '</div>',
));
//** This will cause the widget to be contained within <li></li> tags and the widget title will be in a div with the css class sidebar_title.
materials supplied by
By http://azuliadesigns.com/create-wordpress-widgets/
Creating a Simple WordPress Plugin
<?php
/*
Plugin Name: Hello World
Plugin URI: http://example.com/
Description: Sample Hello World Plugin
Author: Deep
Version: 1
Author URI: http://example.com/
*/
function sampleHelloWorld() {
echo "<h2>Hello World</h2>";
}
?>
The lines inside /* and */ are used by WordPress to find out about the plugin. We have one function called sampleHelloWorld which does exactly that.
Now, traditionally we would have had to open up the sidebar of the theme you are using, find the location of where you want the Hello World displayed, and hard code the function in. Upload to the server and test. If for some reason there is a problem with your plugin (or a third party plugin) then your site would almost certainly stop working. Changing the location from the left to the right sidebar means editing both files accordingly. This isn't very good.
Widgets
Widgets take away the need for editing the sidebar files of a theme and allow for a drag and drop interface in the admin panel. Let's have a look at how we can widget enable our plugin.
Open up the Hello World plugin file again and add these lines.
<?php
function widget_myHelloWorld() {
?>
<h2 class="widgettitle">My Widget Title</h2>
<?php sampleHelloWorld(); ?>
<?php
}
function myHelloWorld_init(){
register_sidebar_widget(__('Hello World'), 'widget_myHelloWorld');
}
add_action("plugins_loaded", "myHelloWorld_init");
//**Add action just tells WordPress to call myHelloWorld_init when the plugin is loaded.
?>
To make Widget Theme compatible
While this widget will function fine, we can make some improvements to enable greater theme compatibility – not everyone uses the same themes as you test on.WordPress will pass parameters to your widget, which contain information about the sidebar and the CSS classes. We should process these parameters and output the correct tags, or you risk breaking some themes.The first thing we need to do is change our sampleHelloWorld function so that it will accept parameters, then to process these parameters into variables. This is done using the extract function.
function widget_myHelloWorld($args) {
//** $args had been added as parameter
extract($args);
?>
<h2 class="widgettitle">My Widget Title</h2>
<?php sampleHelloWorld(); ?>
<?php
}
again we change hello world function.
These two lines will allow us to reference some variables and output correct html structure for the theme being used. The most important variables are before_widget, after_widget, before_title and after_title. Previously we have surrounded the widget title with a hard coded H2 tag with a css class widgettitle, but many themes do not support these tags. They may use a div, or a h1 or a span, so we need our widget to be flexible.
function widget_myHelloWorld($args) {
extract($args);
echo $before_widget;
echo $before_title;?>My Widget Title<?php echo $after_title;
sampleHelloWorld();
echo $after_widget;
}
//** These changes will allow our plugin to use the same tags as the theme author informs us we need to use, and will allow your widget to look the same as the other widgets in the sidebar.
Complete Plugin:
<?php
/*
Plugin Name: Hello World
Plugin URI: http://azuliadesigns.com/
Description: Sample Hello World Plugin
Author: Tim Trott
Version: 1
Author URI: http://azuliadesigns.com/
*/
function sampleHelloWorld()
{
echo "<h2>Hello World</h2>";
}
function widget_myHelloWorld($args) {
extract($args);
echo $before_widget;
echo $before_title;?>My Widget Title<?php echo $after_title;
sampleHelloWorld();
echo $after_widget;
}
function myHelloWorld_init() {
register_sidebar_widget(__('Hello World'), 'widget_myHelloWorld');
}
add_action("plugins_loaded", "myHelloWorld_init");
?>
If Theme Does Not Have Widget Enable SideBars. If your theme does not have widget enabled sidebars, this will help make it widget enabled. I am using a very basic sidebar theme, most sidebars are a little more complex than this.
<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?><br/>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
<?php endif; ?>
</ul>
</div>
The first of these lines does an if else statement, if we have a sidebar function call it otherwise we do the existing hard coded sidebar.The second line (endif) tells the if statement where the hard coded sidebar ends. Anything between the first and second lines will be shown if widgets are disabled or no widgets are assigned to the sidebar.Before you can add a widget to this sidebar, we need to make WordPress aware of it by registering it.Open, or create, functions.php in your theme folder, and find (or add) a line like this.
<?php
if ( function_exists('register_sidebars') )
register_sidebars(1);
?>
Where the parameter to register_sidebars is the number of sidebars defined in your theme. You can have any number of sidebars. Now you will be able to add widgets to your sidebar.
Should you wish to configure the elements that will appear before and after a widget, or the tags that a widget title will appear in, you can setup the options array and pass it to the register_sidebar function.
register_sidebar(array(
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<div class="sidebar_title">',
'after_title' => '</div>',
));
//** This will cause the widget to be contained within <li></li> tags and the widget title will be in a div with the css class sidebar_title.
materials supplied by
By http://azuliadesigns.com/create-wordpress-widgets/
No comments:
Post a Comment