WordPress widgets: How to create a widget in WordPress

Make your own

One of the things that makes WordPress such a powerful and adaptable platform is its ability to add new features through the use of widgets. WordPress widgets are great for adding elements to your website such as ads, search boxes, categories, menus, logins and lots more.

WordPress currently includes close to 20 widgets, but you’re not limited to those. It’s possible to add your own.

In this article, we’ll look at how to create WordPress widgets — both with and without code.

What are WordPress widgets and widget areas?

WordPress Widgets Areas WordPress widgets are blocks of code that add a new feature or a way to display content when they’re placed within a widget area of your theme.

A widget area is a place within your theme that will display WordPress widgets.

 

These are usually sidebars and footers. Many themes have widget areas that display sidebars on the right, left, or both. Others have widget areas within the content area, above or below content, or within headers.

Your available WordPress widgets are seen from the backend in the Available Widgets menu. To see the menu, go to Appearance, and then in the Dashboard select Widgets. Available widgets appear on the left and the widget areas appear on the right.

Customize WordPress Widgets Widgets can also be seen from the front end in the theme customizer. From the dashboard, go to Appearance, and then select Customize, and then from the menu select Widgets. From there you can select the widget area.

WordPress widgets are not active on your website until they’re placed in a widget area.

 

To activate widgets in those areas simply drag the widget you want to use and drop it into the widget area where you want it to display.

What are WordPress widgets useful for?

WordPress Widgets Fresh StartWidgets give you control over the content that displays in the sidebar, which can enhance your theme and provide useful features to your audience. You can see this in the example above. This is the Fresh Start Interiors Blog demo from GoDaddy’s WordPress Design Service.

They are great for displaying information, content, links, images, products, ads, calls-to-action (CTA), search boxes, categories, tags, social feeds, social follow buttons, social feeds, forms, calendars, video, custom code — and lots more.

How do you create custom WordPress widgets without code?

The easiest way to create custom WordPress widgets without having to write code is to have WordPress write the code for you. You can use the standard Visual editor with all of its bells and whistles, and then place the code within an HTML widget.

WordPress Widgets GoDaddy In this example, I’m going to create an ad. To start, I create a new page or post and place the content. I’m placing an image, text, and link within the content area using the Visual tab. I’ve added some content from the GoDaddy website to create my ad. I’ve centered the content and added a link.WordPress Widgets Feature Block Code Next, click the Text tab, and then copy the content. This provides you with the HTML.

WordPress Widgets Copy HTML Navigate to the widget menu, and then drag and drop a Custom HTML widget in your preferred location. Paste in the code and click Save.

WordPress Widgets Custom HTML ExampleThe result places a widget in the sidebar. I’ve included the post I used to create the layout so you can compare (but you don’t need to publish that post). This can be used for ads, messages, links, or any type of content you can create within the Visual editor.

Inactive WordPress Widgets In order to deactivate the widget but still keep its settings, drag it to Inactive Widgets in the widget menu.

How do you create custom WordPress widgets with code?

You can also code your custom widget from scratch. You can place your code in either a plugin or within the functions.php file of your theme. If you place the code within your theme I recommend using a child theme so you don’t lose your code when the parent theme updates. If you change your theme you’ll need to add the code to your new theme.

Always test your code off-site, such as on a test server, before posting it to your live website.

The code will register and load the widget, provide the ID, name and description, define the front end, provide an output, define the backend, and sanitize the form values.

This is done by extending the Widget Class and calling its functions. Function and code structure can be found at the Widgets API in the WordPress Codex. You’ll need a good knowledge of PHP to understand the code.

Example

WordPress Widgets Code Using the example from the WordPress Codex, I’ve placed the code in a code editor called Brackets, and then named it Example Widget. I’ve added a few lines to create an ID, name and description.

Here’s the code:

Change the code within the front end display to create your own output.

Add code for your WordPress widgets

WordPress Widgets Edit Themes Code

Add your code to the functions.php file in the editor. From the dashboard menu, go to Appearance, and then from Editor, select Update File. The Example Widget now appears in the widget menu with the name and description I gave it. The widget includes a field to enter a title.

WordPress Widgets Blog Sidebar

The widget now appears in the sidebar of my website, and displays the default title and message that was coded as its display output.

WordPress Widgets Sidebar Example

Creating a WordPress plugin

An alternative to pasting the code into your functions.php file is to create a plugin. First, you must add a PHP wrapper and plugin files.

Here’s the code that I added to the file:

Save the code as PHP, and then zip it. If you’re using an editor like Brackets click Save As and place .php at the end of the file’s name.

WordPress Widgets Add PluginsUpload the file as a plugin by going to Plugins, and then from the dashboard selecting Add New. Navigate to the plugin’s location on your computer, and then upload and activate the plugin. Make sure you’re not using the same code in the theme’s functions.php file.

The widget is now available for use with any theme. Here’s the widget area using the Twenty Sixteen theme.

WordPress Widgets Twenty Sixteen] Final thoughts on creating WordPress widgets

Widgets are one of the most useful features of WordPress, as they allow you to add new functions to your sidebars in order to present information or features to your audience. Even though WordPress comes with lots of widgets, you can expand on that functionality by creating your own custom widgets — both with and without code.

Randy A. Brown
Randy A. Brown is a professional writer specializing in WordPress, eCommerce, and business development. He loves helping the WordPress community by teaching readers how to improve their websites and businesses. His specialties include product reviews, plugin and theme roundups, in-depth tutorials, website design, industry news, and interviews. When he's not writing about WordPress he's probably reading, writing fiction, or playing guitar. You can learn more about Randy and his work at his website, randyabrown.com.