How to Add a Custom Widget Area to WordPress Themes

If you are well aware of WordPress themes, you should know that tons of WP themes come with widget ready or widgetized areas like sidebar, footer and header.

If you visit your site’s Admin Dashboard and head over Appearance, Widgets, you will find the list of available widgets and will be offered to drag and drop them for activating or deactivating.

But apart from using default WP widgets, you are also free to add a custom widget area to your WordPress theme for adding custom links, texts, social links, navigation menus, calendar and much more.

What is Widget in WordPress?

Widgets are modules enabling the user to add content and features to certain theme areas called widget ready areas or sidebars.

Initially, they were added to the themes to generate a simple way for managing the design and structure of the theme.

As for now, you can find loads of widgetized WordPress themes to add header, footer and sidebar in WordPress theme design and structure without having to do with any coding controls.

These widgets can even offer customization options for adding or removing, managing or changing information, images, links, galleries, etc.

WordPress developers are allowed to create custom widget areas as well. There are also many modern themes and plugins packed with their own custom widgets you can quickly add to your sidebar while overcoming any coding processes.
If you don’t find the needed widget area on your WordPress website, you can to add a custom widget area to your WordPress easily with the help of little coding or additional plugins.

1. Add a Custom Widget Area to Your WordPress by creating site specific plugin:

Now, let us walk you through the first way of adding custom widget to your WP site that has to do with pasting the code in your theme’s functions.php.file.

Before creating a custom widget, you need to create a site specific plugin to paste the needed code into it, because, if you paste the code in functions.php.file, it will not be available until the given theme is active.

You can either manually create site specific plugin or get it from FTP client you are using. We recommend the second option for beginners as it is much simpler and easy to follow.

Connect your WP site via FTP client, then go to /wp-content/plugins folder under remote site column. Select site specific plugin folder and upload it to your site.

Site specific plugin folder will be transferred to your site and you will be able to install it on the website.

Now, only activation is to be done by going to the Plugins page on your admin dashboard and activating site specific plugin therefrom. Now this plugin is ready to be utilized.

Once the plugin is added, you can copy the code below and add it to the plugin for the creation of a custom widget welcoming your visitors

// Register and load the widget
function yoursite_load_widget() {
register_widget( ‘yoursite_widget’ );
}
add_action( ‘widgets_init’, ‘yoursite_load_widget’ );

// Creating the widget
class yoursite _widget extends WP_Widget {

function __construct() {
parent::__construct(

// Base ID of your widget
‘ yoursite _widget’,

// Widget name will appear in UI
__(‘ Yoursite Widget’, ‘yoursite_widget_domain’),

// Widget description
array( ‘description’ => __( ‘Sample widget based on SKT Tutorial’, ‘yoursite_widget_domain’ ), )
);
}

// Creating widget front-end

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 __( ‘Greetings!’, ‘yoursite_widget_domain’ );
echo $args[‘after_widget’];
}

// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ ‘title’ ] ) ) {
$title = $instance[ ‘title’ ];
}
else {
$title = __( ‘New title’, ‘yoursite_widget_domain’ );
}
// Widget admin form
?>

<label for="get_field_id( ‘title’ ); ?>”>
<input class="widefat" id="get_field_id( ‘title’ ); ?>” name=”get_field_name( ‘title’ ); ?>” type=”text” value=”” />

<?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 yoursite_widget ends here

As soon as the code is added, you need to visit admin area, Appearance, Widgets, where the new widget is already available. Just drag and drop it to your sidebar. Now, it will be visible on the front end.

2. Add a Custom Widget Area to Your WordPress with a Plugin:

Another simple way of creating and adding custom widgets is presented with practical plugins. Use plugin for adding custom widget areas, sidebars and menu locations without facing difficulties in your work.

Add a custom widget area to your WordPress and collate it anywhere on your website (sidebars, header and footer, and even in page or post content).

Custom Sidebars: Dynamic Widget Area Manager:

Whenever you want to customize and replace sidebars and other widget areas on your WordPress hosted website, Custom Sidebars is what you will need.

Quickly configure your custom sidebar and choose on which posts and pages, category or post type you want those widgets to be showcased.

SiteOrigin Widgets Bundle:

An ideal way to add a custom widget area to your WordPress is available with SiteOrigin Widgets Bundle.

This powerful plugin comes armed with a useful collection of widgets you are free to use and customize the way you want.

The list of available custom widget in this plugin runs as follows: Google Maps Widget, Button Widget, Image Widget, Slider Widget, Call to Action Widget, Price Table Widget, Social Links Widget, Editor Widget, Features Widget, Masonry Widget, Testimonials Widgets and many more.

When it comes to online marketing, it is essential that you have your website up and running in no time at all, especially if you plan on edging your competition out.

You can approach professional web design companies and they’ll usually charge an exorbitant fee for their services or you can always use a WordPress platform for the same.

For starters you may want to check out custom widget area to WordPress themes and find out how to go about it. The good news is that WordPress is free and an open source platform which comes packed with a lot of free and premium themes for you to choose from.

Feel free to check out some of our themes; so now you get why WordPress is so popular among many online users.

What makes WordPress infinitely preferable to getting it done via a web development company is that you can customize your own website with the handy widgets.

Widgets are essentially modules that enable you to add content, links, images and even media to your website with ease. And what’s more, you do not have to code anything, you can just get them all done with a few clicks of the mouse, it’s that easy.

Moreover, you can design and set up custom widget area to WordPress themes once you have selected the right theme to go with your website.

Of course, it is always a good idea to do a dry run with the themes of your choice but once you have made the decision, you will need to start using those widgets to add ‘meat’ to the content.

There are many custom widgets that you can add to your website, so that you can add and tweak the sidebar to feature interesting content. But if you are still not sure on how to go about it, do read on.

Here is how the process works –

Creating the plugin: Before you can create a custom widget to add to your site, you would first be required to create a site specific plugin by adding the code to the file.

But if creating it manually is problematic for you, you can directly get it from the FTP client that you are using.

All you have to do is to connect to your site via the FTP client, head over to /wp-content/plugins folder and select the site specific plugin folder and upload the same to your website.

Once the site specific plugin folder has been uploaded to your site, you should be able to install it in quick succession. Now with the plugin installed, all you have to do is to head over there start creating your own custom widget.

Remember that you would still have to add some code to your WordPress theme file, usually the functions.php folder.

Just search online for the relevant code, copy and customize the same. The process should not take more than a few seconds and with it, you should be set.

Now, you can use the plugin to design and add custom widgets to your website. Additionally, there are various sites that enable you to check out the various plugins, to customize and tweak widgets and use the same to add content to the site.

Now, with these custom widgets and high quality content, your site should get better traction and you should get more prospective leads, than you had before.