Integrated Tech Solutions

How to make Custom Widgets in Wordpess

By - Admin, Updated on December 1, 2021

Introduction

Widgets are certain components in WordPress which you can drag and place in any widget sidebar.

Function to Make your Own Widget

Code Example to make a Recent Posts Widget

Different Type of Widgets you can create in WordPress

  1. Recent Posts Widget
  2. Recent Comments Widget
  3. Categories Widget
  4. Gallery Widget
  5. Contact form widget
  6. Newsletter Widget.
  7. Social Links Widget.

Let’s Get Started

1. Make Widget Class

class recent_posts_widget extends WP_Widget {

    //widget code here

}

2. Construct Function

//widget constructor function

function __construct() {

    $widget_options = array (
     'classname' => 'class recent_posts_widget',
     'description' => 'Widget to display latest posts.'
    );
   
    parent::__construct( 'my_custom_widget', 'Recent Posts', $widget_options );
   
   }

3. Create the Form

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $postcount = ! empty( $instance['postcount'] ) ? $instance['postcount'] : 'Select No. of Posts';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'postcount'); ?>">Select No. of Posts</label>
 <input class="widefat" type="number" id="<?php echo $this->get_field_id( 'postcount' ); ?>" name="<?php echo $this->get_field_name( 'postcount' ); ?>" value="<?php echo esc_attr( $postcount ); ?>" /></p>


<?php }

4. Save the Widget

//function to define the data saved by the widget

 function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
    $instance['title'] = strip_tags( $new_instance['title'] );
    $instance['postcount'] = strip_tags( $new_instance['postcount'] );
    return $instance;          
   
   }

5. Show the widget

//function to display the widget in the site

 function widget( $args, $instance ) {
    //define variables
    $title = apply_filters( 'widget_title', $instance['title'] );
    $postcount = $instance['postcount'];
   
    //output code
    echo $args['before_widget']; ?>
    
    <div class="widget-area">
    <?php   if ( ! empty( $title ) ) {
        echo $args['before_title'] . $title . $args['after_title'];
        };

   
    //widget output starts
   
   $query_args = array(
                    'post_type' => 'post',
                    'status' => 'publish',
                    'posts_per_page' => $postcount
                );
                // the query
                $the_query = new WP_Query( $query_args ); 
                
                    if ( $the_query->have_posts() ) : 
                     while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                        <p ><a href="" class="text-dark"><?php the_title(); ?></a></p>
   
                <?php endwhile;endif; ?>
                
            </div>
            
            <?php

    //widget output ends

    echo $args['after_widget'];
   
   }

Complete Code to Make a Recent Posts Widget in WordPress

Paste this code into your theme’s functions.php file

Register a Sidebar to Place Your widget

Paste this code into your theme’s functions.php file

You May Also Like –

Keep Reading

👋 Hi, Find this Helpful? There is More

Display Product Variants as Separate Products in Shopify[Code]

Introduction: Shopify offers an array of features to empower merchants to showcase their products effectively and provide a seamless shopping...

Know More »

How to Bulk Compress Images like a Programmer

Introduction In the digital age, image resizing is a common task encountered by photographers, designers, and web developers alike. Whether...

Know More »
fix japanese keyword hack

Looking for Video Tutorials?

Explore Our Youtube Channel for in-depth Tutorials

Yes I am Curious »