Adding a Widgetized Area to a Web Design Services Theme

widgetizing your site

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. 

A modern, user-friendly website can boost your online engagement and help build your business. Contact our professional web design team today for a beautiful, custom WordPress website.
  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!

SL
Stephanie Lask Lead Front-End Developer

Stephanie is one of the lead front-end developers for Web Design Services. She builds custom websites from scratch with WordPress, using the approved design from clients. She also performs poetry, is a teaching artist with Arts For Learning, A Young Audiences of Virginia Affiliate, and is the coach for the poetry slam team called Verb Benders.

More Articles by Stephanie

Was this article helpful? Let us know!