Adding toggle search form using Parallax PRO Theme

52 Comments

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

C. Paul

Creating Genesis Framework related themes, plugins, articles and troubleshooting the issues. Also I am doing the freelance work for clients.

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
Signup Now

Reader Interactions

52 Discussion to This Post

  1. Joe says

    I am unable to get this to work on a fresh install of Parallax Pro. Clicking the search icon doesn’t do anything.

    If I navigate away from the homepage to a standard page the search form is just sitting there on top of the page title. Clicking the search icon does not affect the appearance of the search box.

    Reply

  2. Ief says

    Hello,

    It works but if you scroll down in a page or post and I click the search icon in the menu I see nothing. It works only if you on top. Would it possible to place the toggle search above the header?

    Thanks,
    Ief

    Reply

    • C. Paul says

      May be it is z-index issue. Can you share the site URL?

      Reply

  3. Resa says

    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?

    Reply

    • Resa says

      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.

      Reply

  4. Annamaria says

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

    Reply

  5. Nergetic says

    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.

    Reply

    • C. Paul says

      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');
      });
   });
});
      Reply

      • Nergetic says

        Thanks for reply i have replaced the query with this one but still it is not working. Please help

        Reply

        • C. Paul says

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

          Reply

          • Nergetic says

            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?

            Reply

            • Derrill says

              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

              Reply

              • C. Paul says

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

                Reply

  6. Josh says

    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

    Reply

    • C. Paul says

      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

      Reply

      • Josh says

        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

        Reply

        • C. Paul says

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

          Reply

  7. Sjors says

    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

    Reply

    • C. Paul says

      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;
}
      Reply

    • C. Paul says

      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);
      Reply

  8. Peter says

    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

    Reply

Leave A Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.