Adding a Widgetized Area to a Web Design Services Theme

When we build your site, we definitely do our best to “future-proof” your site so that you have access to everything on the site. This means, access to the items in the header and the footer. We use a plugin called Black Studio TinyMCE which allows for a visual editor to be used in the widget area.

Widgets aren’t just for sidebars. Adding a widgetized area to a WordPress theme is a great way to add things like menus, embed code, etc. By using a widget area, creating a custom menu, and adding that menu with the Custom Menu widget in WordPress (Appearance > Widgets > Custom Menu) you can create a menu that anyone can easily update. This is especially handy for things like footer menus, and makes it possible for customers to easily update these areas, and can save everyone time. 

1. Copy and paste existing widget/sidebar code in functions.php, will look similar to this:

   register_sidebar( array(
           'name' => __( 'Right Sidebar', 'yourweblayout' ),
           'id' => 'sidebar-2',
           'before_widget' => '<aside id="%1$s" class="widget %2$s">',
           'after_widget' => '</aside>',
           'before_title' => '<h1 class="widget-title">',
           'after_title' => '</h1>',
       ) );

2. Change name (e.g. ‘Right Sidebar’) and id (e.g. ‘sidebar-2’) to name and id you will use for your new widget area. Will look similar to this once changed:

   register_sidebar( array(
           'name'          => __( 'Header Widget', 'yourweblayout' ),
           'id'            => 'header-1',
           'before_widget' => '<aside id="%1$s" class="widget %2$s">',
           'after_widget'  => '</aside>',
           'before_title'  => '<h1 class="widget-title">',
           'after_title'   => '</h1>',
       ) );

3. If needed, adjust before_widget, after_widget, before_title, and after_title to change the element and/or add classes.
4. Add following code (change header-1 to match the id you used for your widget area in Step 2) to wherever you want to add the widgetized area (e.g. header.php or footer.php):

   <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header-1') ) : endif; ?>

Please note: When you copy the code from these areas, that they will properly indent and each line will have the correct format when you paste it into your code editor program.

For more tutorials and information on how to customize your website or get started with the design process, please check our Web Design Services channel!