0

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>
| improve this question | | | | |
  • Can you please display where the button is now and also display where you want it to be? I think I can help if you show the current HTML. – Douglas.Sesar Jul 27 '14 at 2:13
  • Added the outputted HTML to my original post – Nikki Mather Jul 27 '14 at 2:48
0

Well as long as the buttons are all the same:

if (function_exists('register_sidebar')) {
 register_sidebar(array(
    'name'=> 'Parallax Area',
    'id' => 'parallax',
    'before_widget' => '<li class="parallax-box">',
    'after_widget' => '<button class="btn-action">Learn More...</button></li>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
));
}

If the buttons were not all the same, you could make them be the same and specify the target href in the .textwidget on the button click action with jQuery:

 <li class="parallax-box">
            <h2>Computer Repair</h2>            
            <div class="textwidget" data-href="http://link/to/your/content">Here will be some text that explains the contents of this box and allows them to click through to a page.

            </div>
           <button class="btn-action">Learn More...</button>
 </li>  

.

    <script type="text/javascript">
        jQuery(document).ready(function() { 
            (function ($) { 

                $('.btn-action').on('click',function(e){
                    e.preventDefault();
                    var url = $(this).sibling('.textwidget')[0].getAttribute('data-href');
                    window.location.href=url;
                });

            })(jQuery);
        });
    </script>
| improve this answer | | | | |
0

If you can distinguish the text widgets by title and/or text content and you don't mind having a dummy <div> around the button, you could use the widget_text filter to close the textwidget div, open a new dummy one, and then append the button:

function wpse155912_widget_text( $text, $instance ) {
    if ( $instance['title'] == 'title1' && strpos( $text, 'text1' ) !== false ) {
        $href1 = esc_attr( get_permalink( get_page_by_title( 'page1' ) ) );
        $text .= '</div><div class="dummy"><button class="btn-action" onclick="window.location.href=\'' . $href1 . '\'">Learn more...</button>';
    } elseif ( $instance['title'] == 'title2' && strpos( $text, 'text2' ) !== false ) {
        // etc.
    }
    return $text;
}
add_filter( 'widget_text', 'wpse155912_widget_text', 10, 2 );
| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.