WordPress. How to add widget area

This tutorial is going to show how to add a new widget area to your WordPress Cherry Framework template.

WordPress. How to add widget area

1. On your FTP, go to the wp-content/themes/CherryFramework folder.

2. Open functions.php.

3. Hit Ctrl (Command) + F, search for the following lines:

   //Sidebar
   include_once (CHILD_DIR . '/includes/sidebar-init.php');
   

   This line defines the $includes_path variable value:

   $includes_path = TEMPLATEPATH . '/includes/'; 

   And shows that the widgets are defined in the wp-content/themes/theme#####/includes/sidebar-init.php file

4. Go to the wp-content/themes/theme#####/includes folder and open sidebar-init.php to edit.

5. Copy the following block of code:

   // Footer Widget Area
   // Location: at the top of the footer
   register_sidebar(array(
      'name' => __("Footer Area", CURRENT_THEME),
      'id' => 'footer-sidebar',
      'description' => theme_locals("footer_desc"),
      'before_widget' => '<div id="%1$s">',
      'after_widget' => '</div>',
      'before_title' => '<h4>',
      'after_title' => '</h4>',
   ));
   }
   

   and paste it before the closing ‘}’ bracket of the elegance_widgets_init() function.

6. Change the ‘name’, ‘id’ and ‘description’ values. Change the comments:

   // New Widget Area
   // Location: at the top of the gallery page
   register_sidebar(array(
      'name' => __("New Widget Area", CURRENT_THEME),
      'id' => 'new-widget-area-sidebar',
      'description' => __("New Widget Area", CURRENT_THEME),
      'before_widget' => '<div id="%1$s">',
      'after_widget' => '</div>',
      'before_title' => '<h4>',
      'after_title' => '</h4>',
   ));
   }
   

7. Save the changes to the file. Now, if you go to the Appearance>Widgets menu in your admin, the new widget area should be there. Go ahead and add a widget to that area.

   

8. Now you can insert the widget area to any part of the template. Go back to the ‘wp-content/themes/ CherryFramework‘ folder. You can insert the newly created widget area to any of the layout files.

9. For instance, if you need to add the widget area to the “Gallery2” page (that uses “Filter Folio 2 cols” page template), copy page-Portfolio2Cols-filterable.php from the wp-content/themes/CherryFramework folder.

10. Paste it to the wp-content/themes/theme#####‘ folder and open it to edit.

11. Paste the following code to the required place to insert the widget area (where ‘New Widget Area’  is your widget area name) and save the changes:

      <?php if (!dynamic_sidebar('New Widget Area')) :?> <?php endif;?>
    

12. If everything was done correctly, the new widget area will be available on the pages that use a page template you added it to.

    

Feel free to check the detailed video tutorial below:

WordPress. How to add widget area