Add new widget areas to your WordPress theme for total control

WordPress allows users to decide what to have in the sidebar using widgets. Gavick themes also come with a few useful widget areas where you can place any widgets you like. Sometimes, however, you need to add your own (new) widget area.

Open gk_TemplateName/gavern/config/en_US/widgets.json file. All widget areas used in the theme are defined here.

Examples of multiple widget-capable areas:

    {
        "name": "Search",
        "id": "search",
        "description": "Widgets area on the top of website",
        "before_widget": "<div id=\"%1$s\" class=\"box %2$s\">",
        "after_widget": "</div>",
        "before_title": "",
        "after_title": ""
    },
    {
        "name": "Header",
        "id": "header",
        "description": "Widgets area on the header of website",
        "before_widget": "<div id=\"%1$s\" class=\"box %2$s\">",
        "after_widget": "</div>",
        "before_title": "",
        "after_title": ""
    },

The following code should be used to define a new widget area:

    {
        "name": "NewOne",
        "id": "newone",
        "description": "New Block",
        "before_widget": "<div id=\"%1$s\" class=\"box %2$s\">",
        "after_widget": "</div>",
        "before_title": "<h3 class=\"box-title\">",
        "after_title": "</h3>"
    }

To register new widget area copy the code above and paste it before the closing ‘]’ bracket. And of course change the ‘name’, ‘id’ and ‘description’ values to yours. An important point to remember is that the names of widget areas must be unique!.

How to insert the widget area into the theme

Once you have added a new widget position to the widget list, you can display them on your site easily by adding short code in the location that you want the widgets to appear. Go back to the ‘wp-content/themes/gk_theme###‘ folder. Find the location where you want to place the widget and paste the following code to the index.php file:

<?php if(gk_is_active_sidebar('newone')) : ?>
  <?php gk_dynamic_sidebar('newone'); ?>
<?php endif; ?>

You will need to do this with a code editor and then upload the file via an FTP client. Take a backup of index.php first, just in case you need to put everything back to how it was before. Of course you can place widget area between DIV’s:

 <?php if(gk_is_active_sidebar('newone')) : ?> 
  <div class="newone">
  <?php gk_dynamic_sidebar('newone'); ?>
 </div>
<?php endif; ?>

After pasting that code and if everything has been done correctly the new widget area will be available and you should now see the “Name of Widgetized Area” section on the right side of your screen. Now just click and drag widgets into the box like normal!

You can register an unlimited number of widgets for your theme. This flexibility allows you to create several widgetized areas and widget features in different areas of your site.