Add a widget area after the Woo360 Theme top bar
Out of the box, Woo360 Theme has the following widget areas.
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
The function name is arbitrary.
- Lines 7-14 define the
register_sidebararray with the arguments
For details about the
register_sidebararray 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_widgetcontains 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
idattribute, which will be used as a CSS selector to style the widget area.
- Line 11:
after_widgetcontains the closing
</div>tag to balance the HTML markup in Line 10.
- Line 12:
before_titlecontains 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_titlecontains the HTML markup that is inserted after the widget title, in this case the closing
- Line 17: The
add_actioncommand registers the
bb_child_widgets_initfunction as a widget area.
- Line 22 creates a function called
bb_child_add_widget_top(), whose purpose is to call the
dynamic_sidebarfunction in Line 25. The
dynamic_sidebarfunction'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_barhook 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
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.