Adding toggle search form using Parallax PRO Theme

Step 1: Add search Dashicons into main navigation. Navigate to Appearance > Menus and add a custom menu “Search“. Now expend “Screen Options” section and check the “CSS Classes” checkbox. Again expend the “Search” menu and add “toggle-search” css in CSS Classes text field. Now save your menu.

Search menu

Step 2: Adding following CSS in style.css file.

This content is only available to members. You must subscribe the monthly membership plan ($.9.99 USD).

Step 3: Adding search form inside the site-inner div. Add the following code in your functions.php file.

This content is only available to members. You must subscribe the monthly membership plan ($.9.99 USD).

Step 4: Adding JavaScript for toggle effect. Creating a new JavaScript file “toggle-search.js” in js folder and adding the following code.

This content is only available to members. You must subscribe the monthly membership plan ($.9.99 USD).

Enqueuing this new javascript file. Adding the following code inside the parallax_enqueue_scripts_styles() function at functions.php file.

wp_enqueue_script( 'toggle-search', get_bloginfo( 'stylesheet_directory' ) . '/js/toggle-search.js', array( 'jquery' ), '1.0.0' );

Now refresh the site and you will get toggle search form for your site.

search icon

Search Form

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

48 Discussion to This Post

  1. I’m trying to use this in Aspire Pro, but the icon doesn’t trigger the search bar – it just renders a line through the icon. Please advise?

    • Okay, I now see that the problem is the search bar is unstyled. However, styling it leaves it inline and doesn’t drop it below the navigation bar as expected.

  2. I’d like to implement this in Genesis Sample and don’t succeed. What code should be different? Can’t figure it out. 🙁

  3. Hello this is my website http://n-ergetics.com/blog i added the custom search bar according to your instruction but it is just an and not working. Please help me how can i make it work.

    • Can you update the JQUERY code with this one?

      jQuery(document).ready(function(){
         jQuery(".toggle-search a").click(function() {
            jQuery(".search-wrap").slideToggle('slow', function(){
      	jQuery(".toggle-search").toggleClass('active');
            });
         });
      });
      
      • Thanks for reply i have replaced the query with this one but still it is not working. Please help

        • I am not getting the toggle-search.js file on your site. Are you enqueue it? Check the Step 4.

          • Yes i have done step -4 …First i create a new JavaScript file “toggle-search.js” in js folder and added the code. After that i go to Function.php file and added the script like this

            parallax_enqueue_scripts_styles() {wp_enqueue_script( ‘toggle-search’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/toggle-search.js’, array( ‘jquery’ ), ‘1.0.0’ );
            Is it right?

            • C. Paul
              I am using the Parallax Pro them that I purchased, ALL that you have suggested fails to work for us. I have a second site that I want to use the same “toggle-search-bar” on, can you help further?
              Thanks
              N-ergetics, Derrill

              • Sure. Can you share the FTP and wp-admin access via Contact form?

  4. I am having and issue getting this to work on my WordPress website with a Parallax Pro theme. I am currently building a website for

    http://www.beavercreekbaptist.com

    I implimented the code into the files, but I have had no success in getting it to work.
    Would you mind taking a look and see if there could be something I missed? I went over this 2 times and have not had any luck.

    Thank you!

    Josh

    • Hi

      If you follow the all steps in correct way then it will work. Upload the file in right folders. Add the code in right place. Then it will work.

      Thanks
      Chinmoy

      • Thank you, I did some investigating and I figured out one issue. I copied and pasted the section above when creating the new javascript file

        Step 4: Adding JavaScript for toggle effect. Creating a new JavaScript file “toggle-seach.js” in js folder and adding the following code. The search is spelled wrong in the name. It says seach instead of search.

        I now have the logo but when I click on it nothing happens.

        Thank you,

        Josh

        • Ooops!! I made a typo there. Thank you for pointing this. Hope that you solved your problem.

  5. I have implemented this solution in the new Digital Pro child theme, but I have two issues. First is that the search icon is only visible when I’m logged in to the website. The second issue is that the drop down search bar is visible at the bottom of the homepage. Do you have a solution? The website is https://www.nowastemarketing.nl/

    I will appreciate your help.

    With kind regards,

    Sjors

    • Digital Pro is using the ionicons library for icons. Parallax Pro is using the Dashicons. So you will modify the CSS title bit.

      Replace

      li.toggle-search a:before{
        content: "\f179";
        display: block;
        font-family: "Dashicons";
        font-size: 26px;
        left: 10px;
        position: absolute;
        top: -16px;
        vertical-align: middle;
        width: 33px;
      }
      

      WITH

      li.toggle-search a:before {
        content: "\f2f5";
        display: block;
        font-family: "ionicons";
        font-size: 20px;
        left: 10px;
        position: absolute;
        top: -16px;
        vertical-align: middle;
        width: auto;
      }
      
    • Also you will adjust the hook. Following line is using the genesis_before_content hook.

      add_action('genesis_before_content', 'parallax_toggle_search');

      Replace the above line with this new line

      add_action('genesis_after_header', 'parallax_toggle_search', 8);
  6. I have been playing with the css file and wondering how to make the search form responsive. It doesn’t play well on small screen such as an iphone 5

Leave A Reply

Your email address will not be published. Required fields are marked *