I have registered a new widget area, code as below and want to add a button after the .textwidget
, however cannot seem to do it properly. Adding it after the </li>
results in the button not being contained within a container and thus messes up the page - which is to be expected.
It's not possible to add a container to the <li class="parallax">
boxes using conventional methods - the only way i can think of is via jQuery which really isn't ideal. I want to know if there's anything i can add to the register sidebar function, or something else, in order to get a <button>
directly after the .textwidget
.
At the moment i have the button inside the .textwidget
by adding the code in to the widget areas in the back-end, but it's not quite as i want it. Of course i could absolutely position the buttons and what-not, but there would be an issue with extending the button outside of it's parent container (it has some padding too).
The functions.php
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name'=> 'Parallax Area',
'id' => 'parallax',
'before_widget' => '<li class="parallax-box">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}
The HTML
<div class="parallax">
<div class="container">
<ul>
<?php
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Parallax Area')) : ?>
<?php endif; ?>
</ul>
</div><!-- .container -->
</div><!-- .parallax -->
The current HTML output
<div class="parallax">
<div class="container">
<ul>
<li class="parallax-box">
<h2>Computer Repair</h2>
<div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.
<button class="btn-action">Learn More...</button></div>
</li>
<li class="parallax-box">
<h2>Computer Repair</h2>
<div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.
<button class="btn-action">Learn More...</button></div>
</li> <li class="parallax-box">
<h2>Computer Repair</h2>
<div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.
<button class="btn-action">Learn More...</button>
</div>
</li> <li class="parallax-box">
<h2>Computer Repair</h2>
<div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.
<button class="btn-action">Learn More...</button></div>
</li>
</ul>
</div><!-- .container -->
</div>