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 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.
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?
Widgets 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 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.
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. Next, click the Text tab, and then copy the content. This provides you with the 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.
The 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.
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
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
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.
The widget now appears in the sidebar of my website, and displays the default title and message that was coded as its display output.
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.
Upload 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]](https://www.godaddy.com/resources/wp-content/uploads/wordpress-widgets-twenty-sixteen.png)
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.
