All you need to change at the snippet you used above is where to add the widget area. That is controlled by:
add_action ('__after_header', 'add_my_widget_area', 0);
So, you need to remove/disable that add_action first, but leave all the rest of the snippet in place. Now we’re going to filter the output of the slider and add the result of a custom function add_my_widget_area to it.
add_filter('tc_display_slider', 'add_widget_to_slider');
// we're capturing the output of tc_display_filter function
// and apply the function add_widget_to_slider to it.
Now let’s write the function:
function add_widget_to_slider($contents){
return $contents.add_my_widget_area();
// we're returning $contents unchanged + the result of
// add_my_widget_area function (already defined in the snippet)
}
All the code from above goes into functions.php, where you already placed the snippet. Don’t forget to disable (prefix with //) the initial add_action. Also, you don’t need the comments (what is after the // signs). I just put them to help you understand the code.
For centering the contents of the widget area I’ll need to look at your page first to give you the best solution. We’re gonna do that through use of CSS.
To answer your where is custom CSS question:
In Customizr you can add CSS easily with two methods:
1. Go to Dashboard > Appearance > Customize and find the Custom CSS section. Put your code in and save.
2. Make a child theme for Customizr (the child theme is a place where you can make modifications to the parent theme without the fear of them being lost on parent theme update). You can find out how on Customizr website, in the guide. Once created, open style.css of your child theme and put your code at the end of the file. Upload and you’re done.
Thank you so much for your elaborate explanation. I guess I am too new to understand all that.
Couldn’t get it to work.
My code looks like this after modifying and adding the code the way you have shown. I don’t even know what I did wrong.
function add_my_widget_area() {
if (function_exists('dynamic_sidebar')) {
dynamic_sidebar('Extra Header Widget Area');
}
}
add_filter('tc_display_slider', 'add_widget_to_slider');
function add_widget_to_slider($contents){
return $contents.add_my_widget_area();
}
If you can share a block of code that I can just copy from here and paste where you tell me to paste it, that will be fool-proof. In shaa Allah.
Can you please help me in this way?
@sanjidashaheed
can you mark this as resolved please?
FYI
the original snippet can output the widget area also after the slider, but always outside the content container.
This snippet has priority set to 20 instead of the default 10.
// Adds a widget area.
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Extra Header Widget Area',
'id' => 'extra-widget-area',
'description' => 'Extra widget area after the header',
'before_widget' => '<div class="widget my-extra-widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}
// Place the widget area after the header and after the slider
add_action ('__after_header', 'add_my_widget_area', 20); // from 10 priority set to 20 to output the widget after the slider
function add_my_widget_area() {
if (function_exists('dynamic_sidebar')) {
dynamic_sidebar('Extra Header Widget Area');
}
}
