Add a widget area after the Woo360 Theme top bar

Out of the box, Woo360 Theme has the following widget areas.

  • Primary sidebar
    This widget area is used when you select a left or right sidebar in Customize > Content > Blog layout.
  • Footer Column 1, Footer Column 2, Footer Column 3, Footer Column 4
    These widget areas appear when you enable the footer widget in Customize > Footer > Footer widgets layout.
  • After post widget
    This widget appears after the single post content and comments area but before the post navigation.

If you know PHP and have some knowledge of Woo360 Bilder hooks, you can add widget areas in other locations with some PHP code and probably some CSS to style the widgets you add. 

This article shows how to add a widget area under the top bar, which you can do even if you're not a developer but can read this article carefully to understand the code explanations, with some tips for adapting this code to other locations.

Note: This tutorial requires that you have both Woo360 Theme and the child theme installed. See this article for why you need a child theme.

Add the PHP code to your child theme

Add the following code to your child theme's functions.php file.

This code first registers a new widget area (Lines 3-17) and then adds that new widget area to the appropriate location, which in this case is after the top bar.  Here's a description of what's going on in the code.

  • Line 5 defines a function called bb_child_widgets_init().
    The function name is arbitrary.
  • Lines 7-14 define the register_sidebar array with the arguments name, id, before_widget, etc.
    For details about the register_sidebar array in Lines 7-14, see the WordPress codex.
  • Line 8: Provide an arbitrary name to help you remember what this function is intended to do.
  • Line 9: Provide a unique ID value.
  • Line 10: before_widget contains HTML markup that will appear before the widget area when the page is rendered in HTML. In this case, the HTML markup for the widget area is a <div> tag with an id attribute, which will be used as a CSS selector to style the widget area.
  • Line 11: after_widget contains the closing </div> tag to balance the HTML markup in Line 10.
  • Line 12: before_title contains the HTML markup for the widget titles when displayed, plus a class that will be used as the CSS selector to style the heading.
  • Line 13: after_title contains the HTML markup that is inserted after the widget title, in this case the closing </h2> tag.
  • Line 17: The add_action command registers the bb_child_widgets_init function as a widget area.
  • Line 22 creates a function called bb_child_add_widget_top(), whose purpose is to call the dynamic_sidebar function in Line 25. The dynamic_sidebar function's syntax uses the ID of the registered widget area, widgets_after_topbar, and renders that widget area's markup and the widgets associated with it.
  • Line 27 has an action that uses the fl_after_top_bar hook to define the exact location in the rendered output where the widget area begins.
    Tip: To change the location of the custom widget area in Line 27, see the current list of Woo360 Theme hooks on this page. You can see a graphic displaying the location of Woo360 Theme hooks at the ProWoo360 site.

Add CSS to style the widget area

We also created CSS rules to arbitrarily make the background color of the widget area purple and the title and body of a text widget white, with the following CSS.

Adding a background color to the widget area and center-aligning the widgets needs a rule for the <div> tag, so the rule starting on Line 4 uses the <div> tag's id attribute as the selector. Lines 6-7 adds top and bottom padding to provide some space between the widgets and the widget area borders.

Because the background is dark, the rules in Lines 11-19 set the text color to white, using the class selector from the PHP code for the widget title.