How to Display Recent Posts Widget in WordPress
— July 18, 2019
• 6 Minutes Read
Showcasing your recently published content is one of the most simple ways of improving almost every website performance metrics.
The good thing to know is that you can display your recently published content in high-traffic areas such as sidebars, after the posts and the footer. This makes sure that you give maximum visibility to your content and get all the benefits of publishing content. In this article, I will show you how you can create a recent post plugin that simplifies the process of showcasing the recent posts on your website.
Register the Plugin
I will start by registering the plugin on the website. Once registered, the plugin will show up in the Plugins section of the website.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Plugin Name: Recent Posts widget extended Description: This plugin creates a widget for displaying recent posts on the front end. Version: 1.X Author: WordPress Recent Posts Widget */ class RecentPostsWithExcerpts extends WP_Widget { function __construct() { $widget_ops = array('classname' => 'recent_with_excerpt', 'description' => __( 'Your most recent posts, with optional excerpts', 'recent_posts_with_excerpts') ); parent::__construct('RecentPostsWithExcerpts', __('Recent Posts with Excerpts', 'recent_posts_with_excerpts'), $widget_ops); } |
In the code snippet above, RecentPostsWithExprects() function registers the plugin. As a result, this is how the plugin entry would appear in the Plugin list:
The Code of the Widget
Here is the code snippet that carries out multiple actions. First, it creates the widget that would appear on the frontend. Next, the snippet retrieves the latest published blogs. Once this is done, the excerpts (both the built-in ones and the Advanced Excerpts) of the blogs are displayed through a loop (see the comment within the snippet). Once this is done, the function wp_reset_query() restores the $wp_query and the global post data of the original main query.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
function widget( $args, $instance ) { global $before_widget,$instance; extract( $args ); $title = apply_filters('widget_title', $instance['title']); echo $before_widget,$title; $ul_classes = 'recent_posts_with_excerpts'; $ul_classes = apply_filters('recent_posts_with_excerpts_list_classes', $ul_classes); if ( !empty( $ul_classes ) ) $ul_classes = ' class="'.$ul_classes.'"'; $li_classes = ''; $li_classes = apply_filters('recent_posts_with_excerpts_item_classes', $li_classes); if ( !empty( $li_classes ) ) $li_classes = ' class="'.$li_classes.'"'; $h2_classes = 'recent_posts_with_excerpts'; $h2_classes = apply_filters('recent_posts_with_excerpts_heading_classes', $h2_classes); if ( !empty( $h2_classes ) ) $h2_classes = ' class="'.$h2_classes.'"'; do_action('recent_posts_with_excerpts_begin'); echo '<ul'.$ul_classes.'>'; // retrieve last n blog posts $q = array('posts_per_page' => $instance['numposts']); if (!empty($instance['tag'])) $q['tag'] = $instance['tag']; $q = apply_filters('recent_posts_with_excerpts_query', $q, $instance); $rpwe = new wp_query($q); // the Loop if ($rpwe->have_posts()) : while ($rpwe->have_posts()) : $rpwe->the_post(); echo '<li'.$li_classes.'>'; echo '<h2'.$h2_classes.'><a href="'.get_permalink().'">'.get_the_title().'</a></h2>'; if (!empty($date)) echo '<h3 class="date">'.get_the_time($date).'</h3>'; { // show the excerpt ?> <blockquote> <?php // the excerpt of the post if (function_exists('the_excerpt_reloaded')) the_excerpt_reloaded($instance['words'], $instance['tags'], 'content', FALSE, '', '', '1', ''); else the_excerpt(); // this covers Advanced Excerpt as well as the built-in one if (!empty($instance['more_text'])) { ?><p class="alignright"><small><a href="<?php the_permalink(); ?>"><?php echo $instance['more_text']; } ?></a></small></p> </blockquote> <?php }?></li> <?php endwhile; endif; ?> </ul> <?php do_action('recent_posts_with_excerpts_end'); wp_reset_query(); } |
The Form for the Widget Placement
The next snippet generates the form that the user will see when placing the widget on the front end. This snippet creates a simple form that the user can fill out to place the widget on the website.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
function form( $instance ) { if (get_option('show_on_front') == 'page') $link = get_permalink(get_option('page_for_posts')); else $link = home_url(); //Defaults $instance = wp_parse_args( (array) $instance, array( 'title' => __('Recent Posts', 'recent_posts_with_excerpts'), 'numposts' => 5, 'numexcerpts' => 5, 'date' => get_option('date_format'), 'more_text' => __('Read More', 'recent_posts_with_excerpts'), 'words' => '25', 'tag' => '', )); ?> <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:', 'recent_posts_with_excerpts'); ?></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 $instance['title']; ?>" /></p> <p><label for="<?php echo $this->get_field_id('numposts'); ?>"><?php _e('Number of posts to show:', 'recent_posts_with_excerpts'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('numposts'); ?>" name="<?php echo $this->get_field_name('numposts'); ?>" type="text" value="<?php echo $instance['numposts']; ?>" /></p> <p> <label for="<?php echo $this->get_field_id('more_text'); ?>"><?php _e('"More" link text:', 'recent_posts_with_excerpts'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('more_text'); ?>" name="<?php echo $this->get_field_name('more_text'); ?>" type="text" value="<?php echo $instance['more_text']; ?>" /> <br </p> <?php if (function_exists('the_excerpt_reloaded')) { ?> <p> <label for="<?php echo $this->get_field_id('words'); ?>"><?php _e('Limit excerpt to how many words?', 'recent_posts_with_excerpts'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('words'); ?>" name="<?php echo $this->get_field_name('words'); ?>" type="text" value="<?php echo $instance['words']; ?>" /> </p> <p> <label for="<?php echo $this->get_field_id('tags'); ?>"><?php _e('Allowed HTML tags:', 'recent_posts_with_excerpts'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('tags'); ?>" name="<?php echo $this->get_field_name('tags'); ?>" type="text" value="<?php echo htmlspecialchars($instance['tags'], ENT_QUOTES); ?>" /> <br /><small><?php printf( __('E.g.: %s', 'recent_posts_with_excerpts')); ?> </small></p> <?php } ?> <?php } |
Here’s how the widget’s form would look like in action:
How to Set up and Use the Recent Post plugin
First, create folder having name “recent-post-widget-extended”. In this folder create file having name “recent-post-widget-extended.php”. Activate plugin than it shows in widget area as shown in fig.
To set up and get the plugin operational, create a folder named recent-post-widget-extended in the WordPress Plugin folder. In this folder, create a file and name it recent-post-widget-extended.php. Paste the code of the plugin in this file and save it.
Next, activate the plugin and you would be able to see it on the Plugin section of the WordPress Dashboard.
When you are ready, you can insert the widget in any location on the frontend of your WordPress websites
Once deployed, here is how the widget would look on the frontend:
The Full Code of the Plugin
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<?php /* Plugin Name: Recent Posts widget extended Description: Insert description with the help of content writer. Version: 1.X Author: WordPress Recent Posts Widget */ class RecentPostsWithExcerpts extends WP_Widget { function __construct() { $widget_ops = array('classname' => 'recent_with_excerpt', 'description' => __( 'Your most recent posts, with optional excerpts', 'recent_posts_with_excerpts') ); parent::__construct('RecentPostsWithExcerpts', __('Recent Posts with Excerpts', 'recent_posts_with_excerpts'), $widget_ops); } function widget( $args, $instance ) { global $before_widget,$intance; extract( $args ); $title = apply_filters('widget_title', $instance['title']); echo $before_widget,$title; $ul_classes = 'recent_posts_with_excerpts'; $ul_classes = apply_filters('recent_posts_with_excerpts_list_classes', $ul_classes); if ( !empty( $ul_classes ) ) $ul_classes = ' class="'.$ul_classes.'"'; $li_classes = ''; $li_classes = apply_filters('recent_posts_with_excerpts_item_classes', $li_classes); if ( !empty( $li_classes ) ) $li_classes = ' class="'.$li_classes.'"'; $h2_classes = 'recent_posts_with_excerpts'; $h2_classes = apply_filters('recent_posts_with_excerpts_heading_classes', $h2_classes); if ( !empty( $h2_classes ) ) $h2_classes = ' class="'.$h2_classes.'"'; do_action('recent_posts_with_excerpts_begin'); echo '<ul'.$ul_classes.'>'; // retrieve last n blog posts $q = array('posts_per_page' => $instance['numposts']); if (!empty($instance['tag'])) $q['tag'] = $instance['tag']; $q = apply_filters('recent_posts_with_excerpts_query', $q, $intance); $rpwe = new wp_query($q); // the Loop if ($rpwe->have_posts()) : while ($rpwe->have_posts()) : $rpwe->the_post(); echo '<li'.$li_classes.'>'; echo '<h2'.$h2_classes.'><a href="'.get_permalink().'">'.get_the_title().'</a></h2>'; if (!empty($date)) echo '<h3 class="date">'.get_the_time($date).'</h3>'; { // show the excerpt ?> <blockquote> <?php if (function_exists('the_excerpt_reloaded')) the_excerpt_reloaded($instance['words'], $instance['tags'], 'content', FALSE, '', '', '1', ''); else the_excerpt(); if (!empty($instance['more_text'])) { ?><p class="alignright"><small><a href="<?php the_permalink(); ?>"><?php echo $instance['more_text']; } ?></a></small></p> </blockquote> <?php }?></li> <?php endwhile; endif; ?> </ul> <?php do_action('recent_posts_with_excerpts_end'); wp_reset_query(); } function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = sanitize_text_field($new_instance['title']); $instance['numposts'] = intval($new_instance['numposts']); $instance['more_text'] = sanitize_text_field($new_instance['more_text']); $instance['date'] = sanitize_text_field($new_instance['date']); $instance['words'] = intval($new_instance['words']); $instance['tags'] = $new_instance['tags']; $instance['tag'] = sanitize_text_field($new_instance['tag']); return $instance; } function form( $instance ) { if (get_option('show_on_front') == 'page') $link = get_permalink(get_option('page_for_posts')); else $link = home_url(); //Defaults $instance = wp_parse_args( (array) $instance, array( 'title' => __('Recent Posts', 'recent_posts_with_excerpts'), 'numposts' => 5, 'numexcerpts' => 5, 'date' => get_option('date_format'), 'more_text' => __('Read More', 'recent_posts_with_excerpts'), 'words' => '25', 'tag' => '', )); ?> <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:', 'recent_posts_with_excerpts'); ?></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 $instance['title']; ?>" /></p> <p><label for="<?php echo $this->get_field_id('numposts'); ?>"><?php _e('Number of posts to show:', 'recent_posts_with_excerpts'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('numposts'); ?>" name="<?php echo $this->get_field_name('numposts'); ?>" type="text" value="<?php echo $instance['numposts']; ?>" /></p> <p> <label for="<?php echo $this->get_field_id('more_text'); ?>"><?php _e('"More" link text:', 'recent_posts_with_excerpts'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('more_text'); ?>" name="<?php echo $this->get_field_name('more_text'); ?>" type="text" value="<?php echo $instance['more_text']; ?>" /> <br /> </p> <?php if (function_exists('the_excerpt_reloaded')) { ?> <p> <label for="<?php echo $this->get_field_id('words'); ?>"><?php _e('Limit excerpt to how many words?', 'recent_posts_with_excerpts'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('words'); ?>" name="<?php echo $this->get_field_name('words'); ?>" type="text" value="<?php echo $instance['words']; ?>" /> </p> <p> <label for="<?php echo $this->get_field_id('tags'); ?>"><?php _e('Allowed HTML tags:', 'recent_posts_with_excerpts'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('tags'); ?>" name="<?php echo $this->get_field_name('tags'); ?>" type="text" value="<?php echo htmlspecialchars($instance['tags'], ENT_QUOTES); ?>" /> <br /><small><?php printf( __('E.g.: %s', 'recent_posts_with_excerpts')); ?> </small></p> <?php } ?> <?php } } function recent_posts_with_excerpts_init() { register_widget('RecentPostsWithExcerpts'); } add_action('widgets_init', 'recent_posts_with_excerpts_init'); |
Conclusion
This plugin is a great way of showcasing your recently published content on the website frontend. When placed on the location of your choice, the recent posts would attract readers into further exploring your website. All you need to do is to fil out a simple form that includes the title of the post, the number of posts to be visible in the widget and the excerpt from the post.
If you need help with this plugin, Do leave a comment and I will get back to you.
Create Faster WordPress Websites!
Free eBook on WordPress Performance right in your inbox.
Owais works as a WordPress Community Manager at Cloudways and contributes occasionally at WPblog. He spends his time developing different websites on WordPress and finds special interest in WooCommerce.
