How to add widget area to WordPress theme


Have you ever asked yourself what the WordPress widgets and widget areas are? If the answer is yes, then you are at the right place. We will explain what the widgets are and how to effectively use then. In the following tutorial we will learn how to add widget area to our theme.

If you are familiar with theme options, then you know that WordPress offers a great number of options and features that help developers to create flexible solutions and extend the standard functionalities. In the following tutorial we will learn how to add widget area or areas to WordPress theme.

Before starting with the detailed explanations, let’s define what widget and widget areas are:

What is wordpress widget

In essence WordPress widget is a small piece of code that is designed to perform certain actions upon execution. Usually well developed widget is ready to use option available in wp-admin section and any user with admin privileges can easily drag and drop widgets to the available widget areas.

Widget area definition

Widget areas are those places on your website that are designed to house the widgets and more specifically the code generated by them. Usually the developers place widget areas at the sidebar, but each section of your website can become a widget area. With just a little code, you can easily make your header or footer sections widgets areas and then drag and drop your widgets there.

Why do we use widgets?

Well, widgets are extremely handy tools. You can use them to point the attention of the visitors to a specific content, display image or play video or music. Depending on the widgets options, you can easily make your website more dynamically looking and easy to use by the people who read your website or blog. Moreover, WordPress widgets allow you to fully control the output and change it if necessary.

Before starting with the code, we will need to make some preparations. If you followed the instructions in the tutorial named How to create WordPress theme from scratch, then you have a simple WordPress theme skeleton you can use to work on, if not, then perhaps you are developing your own them. In both cases you will need to edit two files– functions.php and sidebar.php. Here are detailed instructions on how to add widgets areas and put widgets there:

How to add widget area – preparation

   1. Edit theme files

Open sidebar.php file of your theme and put the following piece of code in the place where you want your widget to show up:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("WPP Widget") ) : ?>

<?php endif;?>

This code says, if there is dynamic sidebar and widget named WPP Widget, then display its output here.

     2. Update your functions.php file

To do so, you have to open functions.php file and add the following code at the bottom:

if ( function_exists('register_sidebar') )

  register_sidebar(array(

    'name' => 'WPP Widget',

    'before_widget' => '<div class = "wpp_widget_area">',

    'after_widget' => '</div>',

    'before_title' => '<h4>',

    'after_title' => '</h4>',

  )

);

This is a built in function that registers a sidebar with options in a form of array. This code defines a name, CSS class to wrap the output and h4 tags that wrap the title. Note that the name can be changed. The same applies for the other arguments as well. To control the output, you may add properties for wpp_widget_area CSS class in your style.css file.

    3. How to add WordPress widgets – the actual work

To avoid misunderstanding, make sure that you sidebar.php and functions.php file are updated and saved as explained. Then login to wp-admin section and navigate to Appearance and then Widgets. There you will see the newly defined Widget area name WPP Widget and you are ready to put a widget there.

WordPress widget in the admin panel

WordPress widget in the admin panel

Now you can drap and drop some of the available widgets and then check the front page. In my case I picked up Calendar widget and set border for wpp_widget_area class. Here is how it appears at the front end:

WordPress widget at the front end

WordPress widget at the front end

Summary
What are wordpress widgets and how to add widget area
Article Name
What are wordpress widgets and how to add widget area
Description
How to add widget area in wordpress? What files to edit ? What is the preparation and actual work in wordpress admin panel. Code examples, tests and detailed explanations
Author
Publisher Name
wppotion


Do you want to share your opinion?

Your email address will not be published. Required fields are marked *


*

We are not industry specific. We are WordPress specific. We work with everyone to help them find solutions with their troubles.
If you show us the problem you are experiencing, we will show you how to fix it. It is that simple.


Reported WordPress issues

  1. Can't Install Security Certificate with Apache
  2. Unique list of meta_values by multiple specific meta_key. Possible in Word Press?
  3. How to fadeup words each with a little delay to make a great headline
  4. Wordpress - Filter data from an external API
  5. MySQL won't start on Bitnami EC2 instance
  6. How to display the last four blog posts using Json api on html
  7. How can I include WordPress search results inside a post?
  8. Execute a plugin-installed WP-CLI command with Docker Compose
  9. Can anyone please help me to make a custom database in wordpress?
  10. WordPress Child Page Menu

WordPress problems we are working on

  1. How Do you Properly Add An Image Control To Wordpress Customizer?
  2. Centering image captions in the Gutenberg editor
  3. Catch Infinite Scroll plugin
  4. Wordpress Shortcodes only displayed on posts
  5. Wordpress add_rewrite_rule not working with pagination
  6. Wordpress AJAX load more check end of posts
  7. how to create section inside a section uisng wp_customize function in wrodpress
  8. Drag & Drop trashed error in Wordpress site [on hold]
  9. Once user sign in they are directed to a gravity form - only when it is complete will they be directed to the site
  10. Bootstrap 4 dropdown menu disappears on hover on Microsoft Surface only

Resolved issues

  1. WordPress multisite different user registration for different sites
  2. WP_Query::posts orderby doesn't preserve order of post__in
  3. How to fix 'null value of add_setting()'
  4. How to create the following detail in Wordpress
  5. migrating wordpress website from localhost in windows to centos7
  6. How to add %custom-taxonomy% to permalink (e.g. %subject% which is one we created)
  7. How to hide continue shopping after customer selects the second product
  8. Use styling and behavior on tags input that exists on back-end but on a front-end form
  9. WordPress Edit Page Fails with “TypeError: Converting circular structure to JSON”
  10. Wordpress REST API: failurejava.lang.IllegalStateException: Expected BEGIN_ARRAY but was BEGIN_OBJECT
wppotion - powered by persistence and passion