Toggled WP Search Function in Spirit?

Hello,

I would like to incorporate a toggle effect for the built-in WP search function. I attempted the method at the following link, with no luck: http://www.wpbeginner.com/wp-themes/how-to-add-a-search-toggle-effect-in-wordpress/

Is that method compatible with Spirit?

Alternatively, implementing search functionality similar to the one on my other WPMU Dev-connected site (se***********th.com) would also be okay.

Support access granted, if you need it. Please perform any testing on the stage_addsearch1 site.

Thank you so much!

Clyde

  • Nithin
    • Support Wizard

    Hi Clyde Sebastian,

    Hope you are doing good today. :slight_smile:

    You'll have to make use of the Code element, and implement the code using the Embed 3rd Party Code function.

    I have added the codes mentioned in your given tutorial at the bottom of your homepage, and added the CSS in the Global Theme CSS section.

    Please give a look, and let us know if you still need any further assistance. Have a nice weekend. :slight_smile:

    Kind Regards,

    Nithin

  • Kasia Swiderska
    • Support nomad

    Hello Clyde,

    To achieve similar effect you can use widget search element (draggable element) in your site header

    and add this CSS:

    .widget.widget_search .widgettitle {
    width: 24px;
    height: 24px;
    text-indent: -99999em;
    color: transparent;
    background-image: url('http://yoursite.com/pathtoimage/play-button.png');
    background-size: 24px 24px;
    cursor: pointer;}

    .widget.widget_search .widgettitle::after {display: none;}

    .search-form {position: absolute; width: 285px; height: 30px;display: none;}

    .search-form.show {display: block;}

    .widget.widget_search .upfront-search-submit_group {float: right;}

    In above code replace http://yoursite.com/pathtoimage/play-button.png with path to your image that should toggle search bar.

    Widget has to have a title – we are using it for toggling search bar.

    Code from your example was using only css, but with this one we will use one small jQuery script.

    <?php

    function wpmudev_togglesearchbar() {
    ?>
    <script>
    jQuery( document ).ready(function() {
    jQuery('.widget.widget_search .widgettitle').click( function() {
    jQuery('.search-form').toggleClass('show');
    });
    });
    </script>
    <?php
    }

    add_action('wp_footer','wpmudev_togglesearchbar');

    use this one as MU plugin http://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    All look adjustment can be done in CSS above.

    Let me know if this works for you.

    kind regards,

    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.