Usually, WordPress themes already have predefined Widget Areas. However, for some reason, you may need to create additional Widget Areas for blocks or shortcodes. There are two ways to create additional widget areas: by using the WP Custom Widget Area plugin and by writing code into the theme’s functions.php file.
1. Add an additional widget area using WP Custom Widget area Plugin
To install the WP Custom Widget Area plugin, follow these steps:
Step 1: Download the plugin here or here, or from the WP Custom Widget Area homepage.
Step 2: Install the plugin following the steps in the image below.
On the left menu, click on Plugin > Add New Plugin; then click Upload Plugin, and select Choose File. In the new window that opens, find and select the plugin you just downloaded, then click Install Now.
Step 3: Click “Activate” on the next screen to run the plugin.
Step 4: Create the widget area you want by following the steps as in the image below.
On the left menu, click on the newly added block of CWA Settings, then click Custom Widget Area. In this interface, enter the full name of the area to be created in Name box; the Id will be generated automatically so you can leave it as default; you can enter a description or leave it blank. Finally, click Create, and the newly created widget area will be displayed in the list.
Step 5: Check and use the area you created as shown in the image below.
2. Add an additional widget area with code into the function.php of the theme
First things first, you need to remember the following three functions if you want to create custom widgets:
function widget () This function is responsible for rendering front-end design or how your widget (HTML layout) will look like the front end of the website.
function form () This function allows us to create a form (usually contains HTML input form fields, i.e., textbox, select, etc.).
function update () This function gets called as soon as users hit the submit button if a form is available in the widget. It reloads the object through AJAX request and saves (or processes) your data according to your need.
Now, you need to create a file by the name of custom-widget.php with this code:
- <?php
- // Creating the widget
- class cw_widget extends WP_Widget
- {
- function __construct()
- {
- parent::__construct(
- // Base ID of your widget
- ‘cw_widget’,
- // Widget name will appear in UI
- __(‘Cloudways Widget’, ‘cw_widget_domain’),
- // Widget description
- array(
- ‘description’ => __(‘Sample widget based on Testing Widgets’,
- ‘cw_widget_domain’)
- ));
- }
- // Creating widget front-end
- // This is where the action happens
- public function widget($args, $instance)
- {
- $title = apply_filters(‘widget_title’, $instance[‘title’]);
- // before and after widget arguments are defined by themes
- echo $args[‘before_widget’];
- if (!empty($title))
- echo $args[‘before_title’] . $title . $args[‘after_title’];
- // This is where you run the code and display the output
- echo __($title, ‘cw_widget_domain’);
- echo $args[‘after_widget’];
- }
- // Widget Backend
- public function form($instance)
- {
- if (isset($instance[‘title’])) {
- $title = $instance[‘title’];
- } else {
- $title = __(‘New title’, ‘cw_widget_domain’);
- }
- // Widget admin form
- ?>
- <label for=”<?php
- echo $this->get_field_id(‘title’);
- ?>”><?php
- _e(‘Title:’);
- ?>
- <input class=“widefat” id=”<?php
- echo $this->get_field_id(‘title’);
- ?>” name=”<?php
- echo $this->get_field_name(‘title’);
- ?>” type=”text” value=”<?php
- echo esc_attr($title);
- ?>” />
- <?php
- }
- // Updating widget replacing old instances with new
- public function update($new_instance, $old_instance)
- {
- $instance = array();
- $instance[‘title’] = (!empty($new_instance[‘title’]))
- ? strip_tags($new_instance[‘title’]) : ”;
- return $instance;
- }
- } // Class cw_widget ends here
- // Register and load the widget
- function cw_load_widget()
- {
- register_widget(‘cw_widget’);
- }
- add_action(‘widgets_init’, ‘cw_load_widget’);
You can integrate the custom widget in the function.php of your theme using the following code:
require_once('custom-widget.php');
In the end, you register and load the widget. Go to Appearance > Widgets. Here you can now see your own created custom widget. Drag and drop your widget in any sidebar of your theme.