Creating Custom Widget for WordPress – Featured Post Widget

We already knew how to create WordPress Plugin based on the older posts here.

Like we have the code snippets below.

/*
Plugin Name: Featured Post
Plugin URI: http://angelohere.wordpress.com/plugin
Description: Displaying Featured Post
Version: 1.0
Author: Angelo M.
Author URI: http://angelohere.wordpress.com
License: A "Slug" license name e.g. GPL2
*/

One of the good features of wp was having some custom widget created

based on the coder.

Like for example you want to add a widget in some section of your page or posts, archive, or any templates of your site.

You will just have to drag that widget and add it on the particular sidebar container or any section container of the site

wherein you want it to show, isn’t it that simple?

But the problem is how about, if you want to add some dynamic widgets and it is not available on the widgets area.

So you have no choice instead you will look for some existing plugins that functions the same with what you want.

However the said creation of widget is just very simple to create.

So if you can carry how to do the said functionality and include it on your own custom widget and add it to the List of Widgets of WP,

just follow the simple steps here below:

1. Create A Plugin that Describes the functionality of the widget.

Plugin Name: Featured Post
Plugin URI: http://angelohere.wordpress.com/plugin
Description: Displaying Featured Post
Version: 1.0
Author: Angelo M.
Author URI: http://angelohere.wordpress.com
License: A "Slug" license name e.g. GPL2

2. Create a class and then extends the WP widget class named ‘WP_Widget’

include its constructor method of the class

class FeaturedPost extends WP_Widget {

$widget_options = array(‘classname’ => ‘FeaturedPost’, ‘description’ => ‘Displayed Featured Posts’);
parent::__construct(false, ‘Featured Post’, $widget_options, $control_options);

}

3. Override the 3 important methods of the WP_Widget class

function widget($args, $instance) {}

function update($new_instance, $old_instance) {}

function form($instance) {}

*widget method – the used of this method is the one who will handle on how you are going to display the said contents of any on the pages,posts,etc. on your site the layouts or the contents on how you are going to display.

*update method – used for any updates you have in the input forms of the widget, so it is basically updating the said content, it only updates the data, no layout here.

*form method – used for any input controls you are going to add on the widget form like the Title text field, Name textfield, etc.

So assuming we have now the three methods included on our custom class widget.

We will now add the functionality code of our content widget.


/**
*
* @param type $args
* @param type $instance 
*/
function widget($args, $instance) {
extract($args);
$title = $instance[‘title’];
$catID = $instance[‘feat_category’];
//for custom css of the widget contents
echo ‘<link rel=”stylesheet” media=”all” type=”text/css” href=”‘ . get_bloginfo(‘url’) .’/wp-content/plugins/featuredPost/css/style.css”/>’;
echo $before_widget;
?>
<h3><?php echo $title; ?></h3>
<?php
$this->displayFeaturedPost($catID);
echo $after_widget;
}

/**
*
* @param type $new_instance
* @param type $old_instance
* @return type 
*/
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance[‘title’] = $new_instance[‘title’];
$instance[‘feat_category’] = $new_instance[‘feat_category’];
return $instance;
}


/**
*
* @param type $instance 
*/
function form($instance) {
?>
<p> 
<label for=”<?php echo $this->get_field_id(‘title’); ?>”><?php _e(‘Title: ‘); ?></label>
<input id=”<?php echo $this->get_field_id(‘title’);?>” name=”<?php echo $this->get_field_name(‘title’); ?>” type=”text” value=”<?php echo $instance[‘title’]; ?>” style=”width:200px”/>
</p> 
<?php 
$gender = $instance[‘gender’]; 
$selCategory = $instance[‘feat_category’];
$categories = get_categories();
?>
<p>
<label for=”<?php echo $this->get_field_id(‘gender’); ?>”><?php _e(‘Featured Category: ‘); ?></label><br/>
<select id=”<?php echo $this->get_field_id(‘feat_category’); ?>” name=”<?php echo $this->get_field_name(‘feat_category’)?>”>
<?php
foreach ($categories as $category) {
?>
<option <?php if ($selCategory == $category->cat_ID) echo ‘selected=”selected”‘;?> value=”<?php echo $category->cat_ID; ?>”>
<?php echo $category->name; ?>
</option>
<?php
}
?>
</select>
</p>
<?php
}

/**
* @author Angelo M.
* @param type $catID
* @uses for Displaying and managing thg Featured Post 
*/
function displayFeaturedPost($catID) {

$args = array( ‘numberposts’=> 5,
‘offset’ => 0,
‘cat’ => $catID,
‘orderby’ => ‘post_date’,
‘order’ => ‘DESC’, 
‘post_type’ => ‘post’, 
‘post_status’ => ‘publish’ );

$posts = get_posts($args);
$count = count($posts);
for($i = 0; $i < $count; $i++) {
?>
<?php
if ($i != $count-1) {
?>
<div id=”home-headlines-article”>
<?php
} else {
?>
<div id=”home-headlines-article-last”>
<?php
}
$anchor = ‘<h1 id=”headlines-post-title” >’. $posts[$i]->post_title . ‘”</h1>’; 
echo ‘<p>’. $anchor . ‘</p>’;
$content = $posts[$i]->post_content;
$ellipseLength = 300;
$strLen = strlen($content);
if ($ellipseLength <= $strLen)
$subContent = $this->stringEllipsis($content, $ellipseLength, ”);
else
$subContent = $this->stringEllipsis($content, $strLen, ”); 
echo $subContent;
?>
<div style=”float: right;”>
<br><a style=”color: #BB0011;” href=”<?php echo get_permalink($posts[$i]->ID); ?>”>Read More&nbsp;>></a> 
</div> 
</div>
<?php
}
}


So that’s it.

The Featured Post Widget is now available on the list of widgets in your WP dashboard.

It’s up to you on where you will put the said Featured Post Widget in your Section Container (header, sidebar, footer, etc.)

One thought on “Creating Custom Widget for WordPress – Featured Post Widget

  1. Yоu mean like once we sing praise songs in Church?? Larry asked
    and daddy nodded. ?Ⲛicely I could make up a
    worship song.? So Larгү jumped to his ft and
    commenced to mᴡke up a trаcк to a rezllү dangerous tune.
    ?Jesus is so cool. Its enjoyable being with God.
    He is thhe funnest Gоd anybody mighht have.? Larry sang
    very badly so Lee had put his ffingers ⲟver his ears.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.