0

How to Create Custom Widget in WordPress Theme Step by Step

Create Custom Widget in WordPress
Do you want to add custom functionality in your WordPress theme. WordPress Widget is perfect solution for it.

Although WordPress has in-built Text Widget area, where you can place HTML code along with CSS and JavaScript. But if requirement is something else, than you need custom widget to fulfill it.

What is Widget in WordPress

Widget contain an specific code, which you can use anywhere in WordPress site. This can be placed using drag and drop feature.

WordPress comes with some built-in widget like Calendar, Categories, Archives etc. which can be use with any theme.

Widget gives you some control of WordPress theme. They can be manage under Appearance -> Widgets section at Admin end.

Generally Widgets can add in Sidebar, footer area of WordPress theme.

wordpress widget area

In WordPress you can develop own custom widget area like add custom form, Specific category post etc. Lets check it out, How to create own custom widget step by step.

Add Widget Area in WordPress as Plugin

We get started with create custom widget as WordPress plugin. This plugin can be use in any of WordPress website.

For example we are going to create Custom Form as a widget. You can place this custom form anywhere on your site with just drag and drop it.

Step 1:

First create an Plugin file and add WP_Widget class like below:

Step 2:

The next step is showing widget name and Title. Use below code to show its name.

form() : Its defines the widget settings under admin area.

$instance is the required (array) parameter of current settings. This method by default return ‘noform’.

Step 3:

Now define the update ( array $new_instance, array $old_instance ) function. This method check that $new_instance is set correctly and identify that $instance return value or not.

update() : When any new setting saved at admin end. This method update widget settings in WordPress.

Step 4:

In this step, widget() method use to create HTML custom form. This is the area where your custom form code code used.

widget() : This method belong to widget output. Below mention form showing because of this method.

Step 5:

Now combine above mentioned functions code and create a file with the name of “custom_contact_form.php”.

Here is the Full Code:

Step 6:

Now upload this “custom_contact_form.php” file under \wp-content\themes\plugins directory path. After doing this, a new plugin showing with the name of “Custom Quote Form”. Activate this plugin.

custom wordpress widget

Now this custom widget showing under Appearance -> Widgets section at Admin end. You can drag and drop this widget in sidebar. A custom form showing at admin end.

Create Custom Widget WordPress Without Plugin

As above we explained custom widget as a plugin. Now if you need to add widget without any plugin.

Use above mentioned full code in theme function.php file. This will add custom widget in your WordPress theme. After doing this widget shown at admin end.

This method has one limitation, that this widget work on only current active theme. If you want to make widget for general purpose than use above plugin method. You can install and use this plugin in any WordPress site.

Add Widget to Pages and Posts in WordPress

To add a Widget on Page or Post, use this WordPress plugin amr shortcode any widget. This will allow to add any widget via shortcode.

Go on Page or Post edit page and write shortcode in text area and Publish it. Widget start showing on front end.

Something like this:

[do_widget calendar]
[do_widget archives]

Note:- If widget name have space in between than use quote like this.

[do_widget “custom form”]

Via this plugin, quite easy to add any widget on Post or Pages in WordPress.

Harish

I am professional web developer and blogger. Use this blog to share own api and other web development experience with you. I do accept paid work. Write to me to start working on your dream project - codefixup@gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *