How to Create Editor Choice Widget in WordPress


Editor choice widget is mostly used to show the most loved one article by its writer. This Widget is something different as this does not work on total number of view. Editor Choice Widget can also be used to Enhance your website’s Page rank too !

Yes, its true , But that I will discuss  in another Web-post.

This is not a default widget in WordPress. So today, We are going to create this Widget using a user defined tag ‘rakesh’. Final version of your Editor choice widget is as follows

editor choice widget

 

It means it will display all the post that will contain this tag ‘rakesh’ from our WordPress database and display that post in a widget.

Step 1 : Open your functons.php file and add the following code to initialize a new Widget- Editor choice

add_action( 'widgets_init', 'popular_post_load_widgets' );
function popular_post_load_widgets() {
register_widget( 'editor_choice');
}

This way we have registered our custom Widget in WordPress. Now its time to start its functionality. We have already defind a new function to find out all the post from our database using a tag ‘rakesh’ so to enable this function, you are again requested to launch your functions.php file and paste the following code

Function to Show Editor Choice Post

/*------------------------------Editor's Choice article--------------------------------------*/
function post_choice($tagname = 'rakesh',$postcount = 20) {
query_posts(array('tag' => $tagname, 'showposts' => $postcount));
echo '<div style="margin-top:10px;margin-left:10px; margin-bottom:10px;">';
if (have_posts()) while (have_posts()) : the_post(); ?>
<div class="media">
<a class="pull-left" href="<?php the_permalink() ?>"><?php the_post_thumbnail('preview'); ?></a>
<div class="media-body">
<div class="media-heading">
<a class="pull-left" href="<?php the_permalink() ?>"><?php  the_title(); ?></a>
</div>
</div>
</div>
<?php endwhile;
echo '</div>';
}

The above code takes two default parameter $tagname and $postcontent to find out desired number of posts from your database. Since we are using bootstrap 3.0 framework to render, thus do not giving you these CSS again.

Now its time to open a new file in your favorite text editor and copy paste the following code

Php Class to Create Editor Choice Widget in WordPress

/*----------------------class to create editor Choice Widgets---------------------*/
class editor_choice extends WP_Widget {
/*** Widget setup.*/
function editor_choice() {
/* Widget settings. */
$widget_ops = array( 'classname' => 'editor_choice', 'description' => __('A widget to show Editor Choice Post for the readers and OFF COURSE for SEARCH ENGINE.', 'choice') );
/* Widget control settings. */
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'editor-choice-widget' );
/* Create the widget. */
$this->WP_Widget( 'editor-choice-widget', __('editor_choice Widget', 'editor_choice'), $widget_ops, $control_ops );
}
/*** How to display the widget on the screen.     */
function widget( $args, $instance ) {
extract( $args );
/* Our variables from the widget settings. */
$title = apply_filters('widget_title', $instance['title'] );
$postcount = $instance['postcount'];

/* Before widget (defined by themes). */
echo $before_widget;
/* Display the widget title if one was input (before and after defined by themes). */
if ( $title )
echo $before_title . $title . $after_title;
post_choice('rakesh',$postcount);
echo $after_widget;
}
/*** Update the widget settings.     */
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
/* Strip tags for title and name to remove HTML (important for text inputs). */
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['tagname'] = strip_tags( $new_instance['tagname'] );
$instance['postcount'] = strip_tags( $new_instance['postcount'] );
return $instance;
}
/*** Displays the widget settings controls on the widget panel.
* Make use of the get_field_id() and get_field_name() function
* when creating your form elements. This handles the confusing stuff.
*/
function form( $instance ) {
/* Set up some default widget settings. */
$defaults = array( 'title' => __('Editor Choice', 'Choice'), 'name' => __('John Doe', 'example'), 'sex' => 'male', 'show_sex' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
<!-- Widget Title: Text Input -->
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'hybrid'); ?></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
</p>
<!-- Tag Name: Text Input -->
<p>
<label for="<?php echo $this->get_field_id( 'tagname' ); ?>"><?php _e('Tag Name to Search', 'Choice'); ?></label>
<input id="<?php echo $this->get_field_id( 'tagname' ); ?>" name="<?php echo $this->get_field_name( 'tagname' ); ?>" value="<?php echo $instance['tagname']; ?>" style="width:100%;" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'postcount' ); ?>"><?php _e('No of Post:', 'editor_choice'); ?></label>
<input id="<?php echo $this->get_field_id( 'postcount' ); ?>" name="<?php echo $this->get_field_name( 'postcount' ); ?>" value="<?php echo $instance['postcount']; ?>" style="width:100%;" />
</p>
<?php
}
}

save this file as widget.php in your theme folder.  The above code is loosely based on justin Tedlok’s widget tutorial.

Now everything is there but nothing will appear on your dashboard. so again open functions.php file and add the following code

require_once(TEMPLATEPATH .'/widgets.php');

Download Editor Choice Plugin

Now everything is there- Its time to show your favorite posts to your readers. if you are able to find any bug, please inform me through your comments.

 




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>