Home/Tutorial/WordPress/LayersWP/How To Add Custom Widget Areas To LayersWP
How To Add Custom Widget Areas To LayersWP 2016-11-28T10:58:25+00:00

How To Add Custom Widget Areas To LayersWP

Step 1: Setup the Widget Area or Register a sidebar in functions.php file

// widget Initialization

 

 

 

Line 1: Create your custom function. You can simply replace mytheme in mytheme_widgets_init with a custom name.

Line 2-10: Using register_sidebar() , we set an array of options

Your id must be unique, like the function name. You can simply replace mytheme in this example with a custom name, or make up your own.

before_widget , after_widget , before_title and after_title should stick to the same values used elsewhere in Layers.

Note:
before_widget – HTML to place before every widget(default: <li id=”%1$s” class=”widget %2$s”>). Note: uses sprintf for variable substitution
after_widget – HTML to place after every widget (default: </li>\n).
before_title – HTML to place before every title (default: <h2 class=”widgettitle”>).
after_title – HTML to place after every title (default: </h2>\n).

%1$s – (found to load widget id)
%2$s – (found to load widget class/classes)

Such as for text widget: <aside id=”text-3″ class=”widget widget_text”>
for a custom menu widget: <aside id=”nav_menu-3″ class=”widget widget_nav_menu”>

Line 12: Hook your custom function to widgets_init

Step 2: Add Widget Area to Front-End

Two ways:
a. Hook
b. Direct input

 

// Using Hook

 

Line 1: Create your custom function. You can name this anything you want as long as it is unique – using your theme or plugin name helps ensure this.

Line 3 / 7 : Wrap the widget area in some HTML so you can control the padding, margins, and position more easily. In our example, this container will output inside the post’s <article> wrapper, so it doesn’t need any additional styling to set the width etc. The kind of HTML wrappers a styling you may need in your implementation depends on where the code will be output explained in a bit.

Line 10: Hook your custom function to layers_after_single_content

 

List of hooks:
Layerswp Hooks: http://docs.layerswp.com/section/hooks-reference/
WordPress Hooks: https://codex.wordpress.org/Plugin_API/Hooks
WooCommerce Hook: https://docs.woothemes.com/document/hooks/

 

Direct Input:

Customizing Layout

In our example above, we created a single widget area that is good for Layers widgets or single widgets that will display full width in a vertical stack when more than one is added. But what if you wanted a horizontal sidebar where your users can place normal sidebar widgets and have them appear in columns next to one another?

One way – grid classes to save you the CSS work.
Another is – to add CSS to force each aside to a specific width.

‘before_widget’ => ‘<aside id=”%1$s” class=”span-4 column content widget %2$s”>’,

You can read this link for more clearification: https://konstantin.blog/2012/sprintf-with-wordpress/