Creating a Widget in WordPress by Web Design London

In WordPress the Widgets are a common feature and it included in many WordPress plugins. If you give functionality in your plugin to creating a widget, you can easily give users a way to add your plugin information to other widget zed areas or their sidebar. For understanding the widgets that how to work it’s helpful to view an overview of the WP_Widget class in WordPress. For building a widget in the widget class features built-in functions are there, every function with a specific purpose, you can see in the following code:

Creating a Widget in WordPress by Web Design London
Creating a Widget in WordPress by Web Design London

In the above example, a basic bio widget you’ll create. By this widget you to set a person’s name and custom bio to display in a widgetized sidebar in WordPress. Use the appropriate hook to initialize your widget this is the first step in creating your own widget. So this hook is called widgets_init and it is triggered right after the default WordPress widgets have been registered:

Creating a Widget in WordPress by Web Design London
Creating a Widget in WordPress by Web Design London

By calling the Action hook widgets_init it executes the function cww_register_widgets(), you can see in the preceding code. Your registered widget here called pro_widget. If needed you could also register multiple widgets in this function. The WordPress 2.8 released the revamped Widget API, it makes creating a widget much easier than before. You have to extend the preexisting WP_Widget class for creating a new class with a unique name, you can see below:

class cww_widget extends WP_Widget {

After that, you’ll add your first function, and this should be the same name as your unique class name. It is referred to as the constructor of the class:

Creating a Widget in WordPress by Web Design London
Creating a Widget in WordPress by Web Design London

You define your classname for your widget in your cww_widget() function. The HTML tag wrapping the widget when it’s displays by the CSS class. It will depend on the theme that CSS class may be <table>, or a <div>, <li>, <aside> or other HTML tags. The description for your widget you can also set. On the widget dashboard below the widget name the description will displays. Then these options passed to WP_Widget. Here you can also pass the CSS ID name (cww_widget_class) and the widget name Bio Widget also. After that you require to create the function to build your widget settings form. The settings of widget are located on the widget admin page upon expanding any widget listed on a sidebar. By the class of widget makes this process very easy and simple, as shown in the following code read it:

4

You do is define your default widget values in the first step. Let’s suppose if the user does not fill in the settings then you can default these values to whatever you like to use. Here in this example the default Setting is the default title to My Bio and default name to Jams smith. After that you pull in the instance values, which are your widget settings. It was just added to a sidebar then there are no settings saved so these values will be empty. At the end you display the three form fields for your widget settings: these are title, name, and bio. For the text input boxes first two values are use and the bio value is using a text area box.  Have you noticed that in the code you don’t require the <form> tags or a submit button; because the widget class will handle this for you. The appropriate escaping functions remember to use when displaying your data, in this case esc_attr() for the two text fields and esc_textarea() for the text area field. After that you need to save your widget settings by using the update() function of widget class:

Creating a Widget in WordPress by Web Design London
Creating a Widget in WordPress by Web Design London

You don’t require to save the settings yourself you’ll notice, the widget class does it for you. For your setting fields you pass in the $new_instance values for each. To strip out any HTML that might be entered You are also using sanitize_text_field() function. Now the final function in your cww_widget class handles displaying your widget:

6

 

Extract the $args parameter is the first thing you do. In this variable you can stores some global theme values such as $after_widget and $before_widget. By the theme developers these variables can be used to customize what code will wrap your widget — Let’s suppose, a custom <div> tag.  After extracting the $args parameter, the $before_widget variable you display. The $after_title and $before_title are also set in this variable. For passing custom HTML tags to wrap the widget title in this is useful.  After that, you display your widget values. Displayed first the title and it wrapped by the $before_title and $after_title variables. After that, you echo out the name and bio values. You remember to escape the widget values for the reasons of security. At the end, you display the $after_widget value. In this article you’ve just created a custom widget for your plugin using the widget class in WordPress. By using the new widget class you can add multiple copies of the same widget to the sidebar.
Below shows the completed widget code see it.

Creating a Widget in WordPress by Web Design London
Creating a Widget in WordPress by Web Design London