How to Create a Custom WordPress Widget

In the previous post, I talked about how to create the custom sidebar. Today, I will talk about how to create custom widgets for the sidebar.

You can add the PHP code below into your functions.php in your child theme or create the new widgets plugin which is the same concept as the previous post. In this post, I will add the PHP code into the functions.php in my child theme.

<?php
/**
 * Added by Apple Rinquest
 * Added on 4/2/2020
 * desc: add custom widgets for the recent news 
 * URL: https://codex.wordpress.org/Widgets_API
 */
class Ar_RecentNews_Widget extends WP_Widget
{

	/**
	 * Register widget for WordPress.
	 */
	function __construct()
	{
		parent::__construct(
			'ar_recentnews_widget', // Base ID
			esc_html__('Recent News', 'text_domain'), // Name
			array('description' => esc_html__('Your site’s most recent News.', 'text_domain'),) // Args
		);
	}

	/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param array $args     Widget arguments.
	 * @param array $instance Saved values from database.
	 */
	public function widget($args, $instance)
	{
		echo $args['before_widget'];


		// # Widget title
		if (!empty($instance['title'])) {
			echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
		} else {
			echo $args['before_title'] . apply_filters('widget_title', 'Recent News') . $args['after_title'];
		}


		// # Widget content

		// display the recent news
		$recent_posts = wp_get_recent_posts(
			array(
				'post_type' => 'news',
				'numberposts' => '5'
			)
		);
		if (is_array($recent_posts) && count($recent_posts) > 0) {
			echo '<ul>';
			foreach ($recent_posts as $recent) {
				echo '<li><a href="' . get_permalink($recent["ID"]) . '" title="Look ' . esc_attr($recent["post_title"]) . '" >' .   $recent["post_title"] . '</a> </li> ';
			}
			echo '</ul>';
		}

		echo $args['after_widget'];
	}

	/**
	 * Back-end widget form.
	 *
	 * @see WP_Widget::form()
	 *
	 * @param array $instance Previously saved values from database.
	 */
	public function form($instance)
	{
		$title = !empty($instance['title']) ? $instance['title'] : esc_html__('Recent News', 'text_domain');
?>
		<p>
			<label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_attr_e('Title:', 'text_domain'); ?></label>
			<input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
		</p>
	<?php
	}

	/**
	 * Sanitize widget form values as they are saved.
	 *
	 * @see WP_Widget::update()
	 *
	 * @param array $new_instance Values just sent to be saved.
	 * @param array $old_instance Previously saved values from database.
	 *
	 * @return array Updated safe values to be saved.
	 */
	public function update($new_instance, $old_instance)
	{
		$instance = array();
		$instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';

		return $instance;
	}
} // class Ar_RecentNews_Widget


// register Ar_RecentNews_Widget widget
function register_ar_recentnews_widget()
{
	register_widget('Ar_RecentNews_Widget');
}
add_action('widgets_init', 'register_ar_recentnews_widget');

That’s it. When you navigate to Appearance>Widgets, you will see our custom widgets there.

For more information, you can read more at WordPress API.