• ProBeaver Weekly
    Weekly for all things Beaver

  • Add new widget area below header in Beaver Builder theme

    Out of the box “Beaver Builder theme” comes with lot of options via the customizer panel. You can easily extend Beaver theme to add more refined customizations using theme hooks. Beaver theme has lot of pre-defined hooks (view Beaver theme hooks) which you can use to neatly display additional content in the front-end.

    Create new widget area in Beaver theme

    Creating a new widget area involve following three steps:
    1. Register a new widget area.
    2. Hook widget to a specific location in the theme.
    3. Define function with the code it will execute.

    Code to add new widget area in Beaver theme

    *** Backup before making any code changes ***
    1. In WordPress dashboard, go to Appearance > Editor
    2. Click to open “Theme Functions” (functions.php) file.
    3. Add the following code at bottom of functions.php file.

    This code will add a new widget area “Top Section” to your Beaver theme. To add contents to this widget area, go to Appearance > Widgets and then drag & drop any widget to “Top Section” widget area.

    Use Beaver template Shortocde in this widget

    By default, shortcodes do not execute (or work) when placed directly in a widget area. However, you can easily enable shortcode execution by adding following code at the end of your functions.php file

    Beaver template shortcode in widget area.

    Extending code with conditionals

    What if I want to show this widget area only on the homepage or specific on a page? You can easily add a conditional statement to this code.

    Show widget only on the homepage. Use the following code instead:

    Show widget only on specific page (Replace 34 with ID of that page).

    Add new widget that does not show when “no header footer template” is selected

    Davinder Singh Kainth

    About Davinder Singh Kainth

    Davinder love creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create digital products at SimpleProThemes(.com) and digital solutions at iGuiding(.com)

    10 Comments

    1. David Waumsley on June 27, 2016 at 5:49 pm

      Excellent post Davinder. Thank you.

      It’s so crazy given my Genesis experience that have not really thought about registering widget areas in the Beaver Builder theme. I shall be using this as it’s more accessible for clients.

      Love what you are doing here!

      • Davinder Singh Kainth on July 28, 2016 at 2:29 pm

        Welcome David.

        Yep, we tend to forget… in the end “Beaver”, “Genesis”… all are kids of the same mother called “WordPress” 🙂

    2. Michelle on June 28, 2016 at 3:59 am

      Awesome, thanks for sharing. This may be very useful for a site I’m developing at the moment, and I was thinking of going down the custom fields route, but widgets might be an better fit.

      • Davinder Singh Kainth on July 28, 2016 at 2:30 pm

        Welcome Michelle.
        Yes, widgets routine is much neater and way easy to update.

    3. Peter Luit on June 28, 2016 at 5:55 am

      This kind of examples prove the power of BB theme as a good alternative for Genesis. With the base of all possible hooks and Beaver Tunnels, BBtheme and BBplugin offer a whole new view on powerful webdevelopment with WordPress.

      • Davinder Singh Kainth on July 28, 2016 at 2:31 pm

        Oh yes… Beaver is a powerful theme under the hood – specially when you start exploring through Beaver Theme Hooks.

    4. V K Rajagopalan on November 27, 2016 at 7:04 am

      I would like to create a custom sidebar widget area specifically for the homepage (this homepage is a static page) and the primary sidebar should be for all the other pages.

      How to achieve this in beaver builder theme?

      Thanks

      • Davinder Singh Kainth on April 20, 2017 at 5:43 am

        You can use “display widgets” plugin for displaying different sidebar content on different pages.

    5. Audrey Bennett on March 28, 2017 at 7:55 pm

      Thank you so much for this. As a novice, I have spent 3 days trying to just get a product search box to show up somewhere useful in place of the standard wordpress search. Just one thing, it is far too left justified, in that the left side is cut off. Can you tell me how I can move it over a bit (set some padding or margins)? Or just right justify it?

      Our website is not up and running yet, just an IP address.

      Thank you!

      • Davinder Singh Kainth on April 20, 2017 at 5:45 am

        Without looking at the website, it is difficult to check on such issue.

    Leave a Comment





  • Pro Stuff

    for  Beaver Builder

    Pro Styles for Beaver

    Customize Beaver Builder Modules beautifully with pre-made CSS packs

    Creative9

    A premium modern agency template for Beaver Builder users