Categories
Tutorial

How to Create a ‘Recent Comments with Gravatar’ Widget

sidebar-widget

Many people new to the WordPress community seem to have a common question – “How to create a WordPress Widget?”. Today I’m going to help you to code a simple widget with which you can display the Recent Comments with the Author Gravatar in Sidebar.

WP has given the feature to extend the default functionality of widgets. We can achieve this by extending the WP_Widget class.

when we extend the WP_Widget Class we need not repeat the code and thus the features of this class are available to our class say “rt_comments_widget” (custom class).

ADVERTISEMENT

First we will create the skeleton of our widgets in functions.php :

<?php
class rt_comments_widget extends WP_Widget {

    function rt_comments_widget() {
    //Constructor
    }

    function widget($args, $instance) {
    // prints the widget
    }

ADVERTISEMENT
function update($new_instance, $old_instance) { //save the widget } function form($instance) { //widgetform in backend } } add_action( 'widgets_init', create_function( '', 'return register_widget("rt_comments_widget");' ) ); ?>

As seen in the code above, we have created a class rt_comments_widget, which inherits the properties and methods of the WP_Widget class (extends).

Further, we have called four functions –

ADVERTISEMENT
  1. The rt_comments_widget function which acts as a constructor
  2. The widget function which prints the widget
  3. The update function which saves the widget
  4. The form function which handles the widget form in the backend.
  5. The function add_action is used to register the widget.

Let’s fill up our widget.

Step 1:

<?php
function rt_comments_widget() {
    $widget_ops = array( 'classname' => 'widget_rt_comments_widget', 'description' => __( 'Widget for Show Recent Comment with Author Gravatar in Sidebar.' ) );
    $this->WP_Widget( 'rt-comments-widget', __( 'RT: Comments with Gravatar' ), $widget_ops );
} // end of function rt_comments_widget()
?>

In the code above, we now describe the rt_comments_widget where in you can give a class to your widget to style your widget, give a description to your custom widget and give your widget a title which is showed in the widget area of the admin panel.

ADVERTISEMENT

In our example “RT: Comments with gravatar” is our widget title.

Step 2:

<?php
function widget( $args, $instance ) {
    extract( $args, EXTR_SKIP );
    $title = empty( $instance['title'] ) ? 'Recent Comments' : apply_filters( 'widget_title', $instance['title'] );
    $gravatar = !empty( $instance['gravatar'] ) ? $instance['gravatar'] : 64;
    $count = !empty( $instance['count'] ) ? $instance['count'] : 3;
    $alternative = !empty( $instance['alternative'] ) ? $instance['alternative'] : '';

    echo $before_widget;
        if ( $title )
            echo $before_title . $title . $after_title;
                global $wpdb;
                $total_comments = $wpdb->get_results( "SELECT comment_date_gmt,comment_content, comment_author, comment_ID, comment_post_ID, comment_author_email, comment_date_gmt FROM " . $wpdb->comments . " WHERE comment_approved = '1' and comment_type != 'trackback' ORDER BY comment_date_gmt DESC" );

                $comment_total = count($total_comments);

ADVERTISEMENT
echo '<ul>'; for ( $comments = 0; $comments < $count; $comments++ ) { if( $alternative == "on" ) { $right_grav = $comments % 2 ? 'style="float:right"' : '' ; $left_readmore = $comments % 2 ? 'style="float:left"' : '' ; } else { $right_grav = ''; $left_readmore = ''; } echo '<li>'; echo "<div class='comment-container clearfix'>"; echo "<div class='author-vcard' $right_grav title='".$total_comments[$comments]->comment_author."'>"; echo get_avatar( $total_comments[$comments]->comment_author_email, $gravatar, $default='<path_to_url>' ); echo "</div>"; echo "<div class='comment-section'>"; echo '<div class="comment-date">'; echo '<a title="'. mysql2date( 'F j, Y - g:ia', $total_comments[$comments]->comment_date_gmt) .'" href="'. get_permalink($total_comments[$comments]->comment_post_ID) . '#comment-' . $total_comments[$comments]->comment_ID . '">'; echo mysql2date( 'F j, Y - g:ia', $total_comments[$comments]->comment_date_gmt); echo '</a>'; echo '</div>'; echo "<div class='author-comment'>"; $str = wp_html_excerpt ( $total_comments[$comments]->comment_content,65 ); if( strlen( $str ) >= 65 ) { echo $str.'...'; } else { echo $str; } echo "</div>"; echo '<div class="sidebar-readmore" '.$left_readmore.' >'; echo '<a title="Reply" href="'. get_permalink($total_comments[$comments]->comment_post_ID) . '#comment-' . $total_comments[$comments]->comment_ID . '">'; echo 'Reply &rarr;'; echo '</a>'; echo '</div>'; echo '</div>'; //end of .comment-section echo '</div>'; //end of .comment-container echo '</li>'; } echo '</ul>'; echo $after_widget; } // end of function widget() ?>

Now we describe the widget function. In our example above, I fetched the date of the posted comment, author comments, author Gravatar, and reply to that comment from the database.

Here are the code snippets in the widget function:

  1. date:
    <?php mysql2date( 'F j, Y - g:ia', $total_comments[$comments]->comment_date_gmt ); ?>
  2. author gravatar:
    <?php get_avatar( $total_comments[$comments]->comment_author_email, $gravatar, $default='<path_to_url>' ); ?>
  3. author comment:
    <?php $total_comments[$comments]->comment_content; ?>
    ( With Word Count '65' )
  4. reply link:
    <?php echo '<a title="Reply" href="'. get_permalink( $total_comments[$comments]->comment_post_ID ) . '#comment-' . $total_comments[$comments]->comment_ID . '">Reply &rarr;</a>'; ?>

Step 3:

<?php
function update($new_instance, $old_instance) {
    global $wpdb;
    $total_comments = $wpdb->get_results("SELECT comment_date_gmt,comment_content, comment_author, comment_ID, comment_post_ID, comment_author_email, comment_date_gmt FROM " . $wpdb->comments . " WHERE comment_approved = '1' and comment_type != 'trackback' ORDER BY comment_date_gmt DESC" );
    $comment_total = count($total_comments);
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['gravatar'] = strip_tags($new_instance['gravatar']);
    $instance['count'] = strip_tags($new_instance['count']) > $comment_total ? $comment_total : strip_tags($new_instance['count']);
    $instance['alternative'] = strip_tags($new_instance['alternative']);
    return $instance;
} // end of function update()
?>

With the help of code in the update function you can save your widget or update your data which is changed in admin panel.

Step 4:

<?php
function form( $instance ) {
    $title = isset( $instance['title'] ) ? ( $instance['title'] ) : '';
    $gravatar = !empty( $instance['gravatar'] ) ? $instance['gravatar'] : 64;
    $count = !empty( $instance['count'] ) ? $instance['count'] : 3;
    $alternative = !empty( $instance['alternative'] ) ? $instance['alternative'] : ''; ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title: </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>

    <p>
        <label for="<?php echo $this->get_field_id( 'gravatar' ); ?>">Gravatar Size: </label>
        <select id="<?php echo $this->get_field_id( 'gravatar' ); ?>" name="<?php echo $this->get_field_name( 'gravatar' ); ?>" style="float: right;width: 100px;">
            <option value="32" <?php selected( '32', $gravatar ); ?>>32x32</option>
            <option value="40" <?php selected( '40', $gravatar ); ?>>40x40</option>
            <option value="48" <?php selected( '48', $gravatar ); ?>>48x48</option>
            <option value="56" <?php selected( '56', $gravatar ); ?>>56x56</option>
            <option value="64" <?php selected( '64', $gravatar ); ?>>64x64</option>
            <option value="72" <?php selected( '72', $gravatar ); ?>>72x72</option>
        </select>
    </p>

    <p>
        <label for="<?php echo $this->get_field_id( 'count' ); ?>">Show Comments: </label>
        <input class="widefat show-comments" id="<?php echo $this->get_field_id( 'count' ); ?>" name="<?php echo $this->get_field_name( 'count' ); ?>" type="text" value="<?php echo $count; ?>" />
    </p><?php
        global $wpdb;
        $total_comments = $wpdb->get_results("SELECT comment_date_gmt,comment_content, comment_author, comment_ID, comment_post_ID, comment_author_email, comment_date_gmt FROM " . $wpdb->comments . " WHERE comment_approved = '1' and comment_type != 'trackback' ORDER BY comment_date_gmt DESC" );
        $comment_total = count($total_comments);
        echo "<div style='color: #444444;font-size: 11px;padding: 0 0 12px;'>You have total '" . $comment_total . "' comments to display</div>"; ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'alternative' ); ?>">Show Alternate Comments: </label>
        <input name="<?php echo $this->get_field_name( 'alternative' ); ?>" type="hidden" value="off" />
        <input class="alternate" id="<?php echo $this->get_field_id( 'alternative' ); ?>" value="on" name="<?php echo $this->get_field_name( 'alternative' ); ?>" type="checkbox" <?php echo checked( 'on', $alternative ); ?> />
    </p>

    <script type="text/javascript">
        jQuery( '.show-comments' ).keyup(function () {
            this.value = this.value.replace(/[^0-9.]/g,'' );
        });
    </script>
    <?php
} // end of function form()
?>

With the form function you can develop widgetform in the back end(admin panel) such as – entering a widget title, showing Gravatar size in the dropdown list, choosing the number of comments shown in sidebar and showing alternate comments. (refer 2nd screnshot below)

The simple javascript (jQuery) at the end of the code above is to validate your form field.

Your widget will now be appear in Admin Panel > Appearance > Widgets > Available Widgets

widget-area

Here is the screenshot of your widget in the back end:

backend

Here is the Final Screenshot of your widget: Normal View and Alternate View

normal-viewalternate-view

Hope with the help of this widget you can easily show your “Recent Comments with Gravatar” in Sidebar. Do drop in your opinions and comments below 🙂

Download the Complete code of Widget Here.

Categories
Reviews

Akismet: WordPress Spam Comment Detector Plugin

When ever we Install WordPress, we have a list of some most essential plugins which every WordPress blog should have. In this post I’m going to talk about one WordPress plugin name Akismet which I believe is one of the most essential plugin and every blog should have from day one.

What is Akismet WordPress plugin?

Akismet WordPress plugin catches spam comments and trackbacks on your blog.  It uses Akismet Web services to find comments and trackbacks spam.

If you just started with wordpress, this is the first plugin which you should install to fight against comment spam in WordPress.

Here is a screenshot of Akismet plugin and see what it did for me in last 1 and half year.

Aksimet WordPress Plugin Stats
Aksimet WordPress Plugin Stats

Download Akismet plugin

In the next post, I will be talking about how to configure Akismet WordPress plugin.