Adding Search Bar to Slider Image

I’ve seen a couple threads on this subject, but it seems the code used is always changing and I have been sitting here the last 3 hours trying to figure it out. How do I add a search widget in the header slider (positioned above the call-to-action button but still under the slider text). ? Simillar to this page here https://www.trulia.com/. I’ve tried the solutions found on the topic here on this forum and have placed the links below (also have tried the disabling plugin troubleshooting tip to no avail)…

Also…

how would i go about adding a litebox around the slider text, call-to-action, and the added search bar?

Thanks

Is there anyone there?

Hello there,

Add this function into your child theme’s functions.php file. Or use a plugin that allows functions addition like Code Snippets.

function sydney_pro_child_top_search() {
  echo '<div class="top-search">';
  get_search_form();
  echo '</div>';
}
add_action( 'sydney_before_site', 'sydney_pro_child_top_search' );

Then do the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      if( $('.slide-inner').length ) {
        $('.top-search').remove().clone().appendTo($('.slide-inner'));
      }

    })(jQuery);
  1. Update

Regards,
Kharis

Hey Kharis,
So I got the search bar code to work (I had forgotten to update the theme). But it messed up the placement of the second call to action button I had added to my slider. Now they look as pictured in the screenshot I attached. I added on the header with the “Header & Footer Scripts Plugin” and the following jQuery code in the footer scripts

In the previous version, the buttons were side by side but the search bar wouldn’t show up. How do I adjust the placement of the button and the width of the searchbar on this version. with Css? Would like it sitting next to the other call-to-action button, with the search bar above both (stretched a bit)

.

sorry can’t get code I used to post. Got it from this forum thread though

Hello there,

Try replacing the jQuery code with this one:

    (function($){

      if( $('.slide-inner').length ) {

        $('.top-search').remove().clone().insertBefore($('.button-slider'));

        var myButton1 = '<a href="http://example.org" class="roll-button button-slider button-slider-extra">My Button 1</a>';
        var myButton2 = '<a href="http://example.org" class="roll-button button-slider button-slider-extra">My Button 2</a>';
        var myButton3 = '<a href="http://example.org" class="roll-button button-slider button-slider-extra">My Button 3</a>';

        $( '.header-slider .slide-item .slide-inner' ).append(myButton1);
        $( '.header-slider .slide-item .slide-inner' ).append(myButton2);
        $( '.header-slider .slide-item .slide-inner' ).append(myButton3);

      }

    })(jQuery);

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .button-slider-extra {
      margin-left: 10px;
    }

    .top-search {
      margin-bottom: 15px;  
    }

    .top-search .search-field {
      width: 400px;
      max-width: 100%;
    }

Regards,
Kharis

Hey Kharis,
that worked great! Thank you so much. Is there still a way to send you a coffee or something? I added a little bit of CSS to space em out and they look great. Any idea on how to change the 2nd buttons text/URL destination for each slide in the slideshow?

To do so, you could use the donate button on my homepage at https://kharis.risbl.co/#donate. Thank you very much for your kindness.

You’ve to update the last code I’ve suggested with this one:

    (function($){

      if( $('.slide-inner').length ) {

        $('.top-search').remove().clone().insertBefore($('.button-slider'));

        var myButton1 = '<a href="http://example.org" class="roll-button button-slider button-slider-extra">My Button 1</a>';
        var myButton2 = '<a href="http://example.org" class="roll-button button-slider button-slider-extra">My Button 2</a>';
        var myButton3 = '<a href="http://example.org" class="roll-button button-slider button-slider-extra">My Button 3</a>';

        $( '.header-slider .slide-item .slide-inner' ).append(myButton1);
        $( '.header-slider .slide-item .slide-inner' ).append(myButton2);
        $( '.header-slider .slide-item .slide-inner' ).append(myButton3);


        // Function to alter button text and link address
        $.fn.slideButtonAttribute = function(myText, myUrl) {
          if( this.length ) {
            this.text(myText).attr('href', myUrl);
          }
        }

        // Second slide
        $('.slide-item:nth-of-type(2) .button-slider-extra').slideButtonAttribute('My Button Text', 'http://mysite.com/other-page');

        // Third slide
        $('.slide-item:nth-of-type(3) .button-slider-extra').slideButtonAttribute('My Button Text', 'http://mysite.com/other-page');


      }

    })(jQuery);

For second’s slide button, you can use the line of code that looks like this:

    $('.slide-item:nth-of-type(2) .button-slider-extra').slideButtonAttribute('My Button Text', 'http://mysite.com/other-page');

Specify the button’s class to target specific button which the text and link will be altered. In the code above, it’s .button-slider-extra

You might need to set your own class in the button variables.

    var myButton1 = '<a href="http://example.org" class="roll-button button-slider button-slider-extra">My Button 1</a>';
    var myButton2 = '<a href="http://example.org" class="roll-button button-slider button-slider-extra">My Button 2</a>';
    var myButton3 = '<a href="http://example.org" class="roll-button button-slider button-slider-extra">My Button 3</a>';

Let me know in a new topic if you have other else we can help.

Have a nice day! :slight_smile:

Regards,
Kharis