How to Add a Dynamic Search Bar to Oxygen Builder

Annoyingly, the Oxygen builder doesn’t really provide a built-in search form that pops out when you click a button (like you see in other themes like Kadence or Divi). You have to build it yourself.

In my Oxygen version, the magnifying glass search icon is to the right of the menu. When you click it, the search field slides out below the main menu. Clicking the magnifying glass again slides it back in.

Here’s what it looks like (click Play button to see animation):

Note, since writing this article I’ve migrated that site back to Divi for various reasons. But the code below should still work for Oxygen.

Adding the Search Icon

The first step is to add the magnifying glass icon to the right of your main menu.

1. Edit your main Oxygen template containing your site’s header.
2. Then add an Icon (Basics -> Icon) to the right of your main menu.
3. Search for the string “search” and you’ll see some magnifying glass options. Make sure you have selected the Font Awesome set.
4. Choose the one you want.
5. Adjust the icon size and color. (I chose 21px size).
6. Add some left padding as needed. (I added 20px).
7. In the Advanced -> Custom CSS section for the Icon, add “cursor: pointer;”
8. In the Advanced -> Attributes section for the Icon, add the attribute “tabindex” with value “0”. This is so that keyboard users can tab to your magnifying glass (accessibility compliance).

OK, you should now have a magnifying glass icon to the right of your main menu that doesn’t do anything, other than change the mouse pointer to a pointer instead of an arrow when you hover over it.

Oh, and you should be able to tab to it using the keyboard, but again, it won’t do anything when you hit return.

Adding the Search Box

Next you’ll want to add the search box. I did this by adding another Row to my Header Builder. I simply copied one of the existing ones and deleted the content.

In the rightmost section of the row, add a Search Form (WordPress -> Search Form).

In the front end, it should look like this:

Hiding the Search Box

Once the search box is to your liking, it’s time to hide it.

Go back to the row containing your search box and set its height to zero under Size and Spacing.

Then add this custom CSS to that row:

overflow:hidden;
transition: height 0.5s;

The row containing your search box should be hidden! Of it’s not, make sure you’ve set the height to zero in Size and Spacing.

Adding the Magic (the Animation)

Now for the magical part. Right below your Search form, add a Code block (Basics -> Code Block).

Remove the default PHP code, then add the following JavaScript code to it:

var dmc_search = false;

function toggleSearchRow() {
  dmc_search = !dmc_search;
  if ( dmc_search )
    jQuery( "#_header_row-63-2691" ).attr('style', 'height: 46px !important');
  else
    jQuery( "#_header_row-63-2691" ).attr('style', 'height: 0px !important');
}

jQuery( "#fancy_icon-69-2691" ).click( toggleSearchRow );

// THIS PART IS FOR KEYBOARD ACCESSIBILITY
jQuery( document ).on( "keypress", "#fancy_icon-69-2691", function(e) {
  if (e.which == 13) 
    toggleSearchRow();
});

Now, replace “#fancy_icon-69-2691” with the ID of your icon. Then, replace “_header_row-63-2691” with the ID of the row containing your search form.

If you save everything and clear caches, clicking the search button should cause the search form to slide out! Clicking again will cause it to slide in.

Debugging

If it’s not working, check your browser’s inspector to see if there are any JS errors. If still not working, check your IDs. Let me know if you find any errors in my description!

Styling for Mobile

Okay, you should now have a dynamic search form that works great on desktop. But on my iPhone, the Search field and button spilled over to two lines, and so it was chopped and looked terrible when slid out.

To solve this, we need to limit the width of the search field. I did this by adding this CSS to the code block above.

#_search_form-72-2691 form {
  text-align: right;
}
#_search_form-72-2691 #s {
  max-width: calc(100% - 100px);
}

Replace “_search_form-72-2691” with the ID of the row containing your search form. If you’ve changed any styling, you might need to adjust the max-width parameter. Be sure to test on a variety of phones, as I’ve only tested on iPhone 7. The value of 100px may need to be increased if your search form takes up two lines.

The result should look like this:

Conclusion

I hope this was helpful! I was pretty stoked to get this done. Please leave your comments, corrections, and questions below! – Brian

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com