How to Create a Custom WordPress Widgets

To be honest, it's not your job to create widgets unless you have the technical knowledge related to WordPress development and related programming language to code. I'll try my best to deliver a simple and quick guide on creating custom WordPress widgets, but unless you have related knowledge, I can't guarantee that you'll succeed.

WordPress has been known for the simplicity, and I can assure you that the process of creating widgets is pretty straight and simple. But, still, you need to have those basics covered and must be aware of every technical aspect included within.

You can, of course, ask questions and clear your doubts, by sharing your side in the discussion section, and I'll definitely attend each of your issues. So, shall we move ahead in the process now? Let's hit it!

What's Widget?

Widgets are either available pre-included in the theme your website is using, or they need to be installed using their respective plugins. There is no way you can add a widget without a theme or plugin because that's what works in WordPress.

The reason behind that limitation is that WordPress allows inserting of function codes (the one which defines how a website looks, performs or function), only in the Theme or Plugin. Themes are having the code describing the behavior of a website, while Plugins have the code which always describes the functionality of a website or certain elements.

It totally depends on the theme developer, whether or not, he/she includes widgets in the theme package. If he does, then you'll find them listed on available section under the Widgets tab within Appearance. But if it isn't the case, then you need to take help of plugins. Look for the ones who are offering those widgets you're exactly looking for, and finally installing the same.

Once that plugin is installed, it will rather not do anything else, but will do everything it is possible and can, through its widget. So, this is how it works.

Also, WordPress allows adding widgets mostly in the sidebar, or in the footer, or sometimes at the end of a post or during the start of it. The section where these will be allowed, totally depends on how your theme is coded. If you've installed a theme which not allows any single widget at all, because of offering a single page layout, then you're definitely at the wrong door.

Now, since you're aware of all those initial things, you are ready to move ahead. To create a widget, we need to create a Plugin, right? So, let's start with creating our first custom plugin.

Important – I recommend taking a full backup of the whole WordPress files installed and available on the server.

The very first thing you need to do is to create a new folder inside the Plugin folder (wp-content/plugins). You can name it whatever you want. But, try and think of a unique name. Otherwise, it will collide with the name of an existing plugin, and then WordPress won't allow its presence.

Once the folder appears, create a text file, and name it 'MyWidget.php'. This is the creation of your first widget's code file, and so, you've to add the following code into the same.

<?php

/*

Plugin Name: My Plugin 'or you can name anything'

Version: 1.0 'since this is the first version'

Plugin URI: 'Your URL Here'

Description: 'Description of Your Plugin Here.'

Author: 'Your Name Here'

Author URI: 'Your URL Here'

*/

The text above in single quotes can be changed according to you, and the one I've written are just an example. So, don't simply copy paste the same.

Now, add the following code beneath the previous one, and this time, we will be adding a special set of functionality to the plugin.

public function form( $instance ) {

    $title = ";

    if( !empty( $instance['title'] ) ) {

        $title = $instance['title'];

    }

    $text = ";

    if( !empty( $instance['text'] ) ) {

        $text = $instance['text'];

    }

   ?>

   <p>

        <label for="<?php echo $this->get_field_name( 'title' ); ?>"><?php _e( '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_name( 'text' ); ?>"><?php _e( 'Text:' ); ?></label>

        <textarea class="widefat" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" type="text" ><?php echo esc_attr( $text ); ?></textarea>

    </p>

   <div class='mfc-text'>

   </div>

   <?php

   echo $args['after_widget'];

}

Each function we used above has its purpose, and you need to set it according to the way you wish to use the plugin. You can create different variables; that will help the widget to have different sections. If you want, you can also add a description (in the programming language, its called Comment) for every line of code, so someone other than you, can understand the reason for its existence.

Now, save the file, and refresh the File Manager. Login to the WordPress Dashboard and move into Plugins section. Over there, you'll find the listing of your newly created custom Plugin. Hit the Activate button to start its journey.

Over to you

The procedure is over, and I guess everything went without any issues, at all. The example I shared above in the coding, will do a very little thing. But, if you're looking to insert an entirely custom functionality, then you definitely need to write related code to the same.

This clearly means that you should be aware of everything related to the plugin creation, and most importantly, the PHP programming language being used here. In short, you need to be a WordPress developer, in order to break the leg.

Source: How to Create a Custom WordPress Widgets