How to Create and Add Custom Widgets to WordPress Theme?

WordPress comes with some amazing built-in functions. “Widgets” is one such default function that helps to add functionality to your theme’s sidebar, also known as widget-ready areas. However, default widgets always might not match up to your expectations of coming up with a website that functions according to your wants and needs. Besides, with time, eventually you may need new things which might not be available with default WordPress widgets. In that case implementing and using custom widget area will be a more viable solution.

There are plenty of tutorials and resources available online dedicated to help you learn about the process of creating custom WordPress widgets and how you can add them up to your theme. But, you may find those materials hard to understand. Especially, newbies often find them insufficient to implement, so as to add custom widgets to their website.

So, to help you out, I will be discussing about a basic tutorial on creating a custom sidebar widget that even the novices can understand easily. But, before that let’s first discuss about the most common concern among users!

What are WordPress Widgets?

Widgets allows you to add static and dynamic content to your WordPress posts and page. They are also called executable scripts that you can drag and drop in your theme’s sidebar or other widget-ready areas to embed custom content and functions. The available widgetized areas will vary from one theme to another. You can find several types of widgets. WordPress comes packed with built-in widgets like post categories, tag clouds, navigation menu etc.

Adding a Custom Widget to Your Pages/Post

For implementing your custom widget and widget-ready areas in your WordPress theme, you will have to first get it registered. In our example, we are creating a sidebar widget. And so, let us take a look at the code that will help register our widget. For this purpose, you’ll need to add the following code in your theme’s functions.php file.

register_sidebar(array(
'name' => __('My first Custom Widget'),
'description' => __('You describe your widget here.'),
'id' => 'first-custom-widget',
'before_widget' => '
',
'after_widget' => '
',
'before_title' => '
',
'after_title' => '
'
));

As you can see in the above code, we’re registering only a single sidebar “my first Custom Widget”. Next, an array is declared with different values that are needed to create the custom widget. Let's talk about those values one by one:

Name: This helps to assign name to our custom widget. You can change this name to your Widget name.

Description: This is another parameter that helps to identify what will come in your theme’s sidebar.

id: This parameter is used to call the custom widget that you would like to display in your WordPress widgetized area.

before_widget: It places HTML before your custom widget.

after_widget: It places HTML after your custom widget.

before_title: This argument places your HTML before your custom widget title.

after_title: This argument positions your HTML after your custom widget title.
Once your custom widget is registered, you just need to drag and drop that widget into your WP theme. For this purpose, you will have to go to Appearance -> Widgets screen. Remember that your custom Widget won’t be visible on your theme until it is being called from the place you want to display it.


In order to use your custom widget in your WordPress website, simply copy and paste the following function in your functions.php file:

 //my-first-custom-widget is the id of your widget  

Next, go to your widgets panel and you’ll notice that your newly created “My first Custom Widget” will be visible in your WordPress back end (as you can see in the screenshot below). Finally, you can drag-and-drop the elements in your custom widget area that you want to display in your theme

Summing Up!

Widgets are powerful tools that help to embed additional functionality into your WP theme. You can add them to your WordPress posts/page, however usually they get added to WordPress theme’s widget-ready areas including sidebar, header or any other widgetized regions. WordPress comes with default widgets, but you might feel the need to create a custom one tailored to fit your needs.

Reading this post will help you learn how you can create and add custom Widgets to your WordPress pages or posts.

About Author:

Emily Heming is a professional WordPress developer for a leading PSD to WordPress company. She also provides conversion services like HTML to WordPress theme and many more. She has served many companies helping them in developing user-friendly website. So feel free to contact her.