Title: Search button function
Last modified: August 31, 2016

---

# Search button function

 *  [alederodesign](https://wordpress.org/support/users/alederodesign/)
 * (@alederodesign)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/search-button-function/)
 * Hello,
    I have added three icon images in the header with this function as you
   suggested me in the previous messages:
 *     ```
       function meso_custom_icon() { ?>
       	<ul class="icone">
   
       <li><a href="https://www.facebook.com/DWGlab/?fref=ts"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/fb.png"></a></li>
       <li><a href="#"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/a.png"></a></li>
       <li><a href="#"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/cerca.png"></a></li>
       <?php }
       add_action('bp_inside_top_nav','meso_custom_icon');
       ```
   
 * _[Moderator Note: Please post code & markup between backticks or use the code
   button. Your posted code may now have been damaged by the forum’s parser.]_
 * It’s a menu icon. Now my customer would like the third link ( which shows a lens)
   can function as a search button. So I’m wondering if is possible to add a javascript
   function so when i click the lens it appears an input search.
    Thank you for 
   any kind of suggestion
 * Alessandra

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Theme Author [Richie KS](https://wordpress.org/support/users/rkcorp/)
 * (@rkcorp)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/search-button-function/#post-7222262)
 * maybe something like this
 *     ```
       function meso_custom_icon() { ?>
       	<ul class="icone">
       <li><a href="https://www.facebook.com/DWGlab/?fref=ts"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/fb.png"></a></li>
       <li><a href="#"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/a.png"></a></li>
       <li><div class="search-lens"><?php get_search_form(); ?></div><a class="search-click" href="#"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/cerca.png"></a></li>
       <?php }
       add_action('bp_inside_top_nav','meso_custom_icon');
       ```
   
 * see i’ve edit code in your functions
    `<li><div class="search-lens"><?php get_search_form();?
   ></div><a class="search-click" href="#"><img src="http://www.alesitiprova.it/
   wp-content/uploads/2016/02/cerca.png"></a></li>`
 * and add this to style.css or customize->general->custom css
 * `div.search-lens {display:none;}`
 * and add this to lib/scripts/custom.js, right after
    _jQuery(document).ready(function(){_
 *     ```
       jQuery(".search-click").click(function(){
       jQuery(".search-lens").show('fast');
       }
       ```
   
 *  Thread Starter [alederodesign](https://wordpress.org/support/users/alederodesign/)
 * (@alederodesign)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/search-button-function/#post-7222265)
 * Thank you Richie,
    i think you are close to my solution. But now what’s happening
   is that when i click on the icon lens, all the whole menu disappear. Maybe I 
   should work on the custom css?
 *  Thread Starter [alederodesign](https://wordpress.org/support/users/alederodesign/)
 * (@alederodesign)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/search-button-function/#post-7222268)
 * Yes it’s definitely was I’m looking for. I worked a bit the custom css and now
   it’s almost ok.
    I would like also that when i click the lens it hides the input
   form… I guess the code is the opposite: `jQuery(“.search-lens”).hide(‘fast’);
 * I’m only wondering how to put it in the correct way in the custom.js
 * Can you help me with this?
    Thanks a lot
 *  Theme Author [Richie KS](https://wordpress.org/support/users/rkcorp/)
 * (@rkcorp)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/search-button-function/#post-7222273)
 * need to edit the previous code
 *     ```
       jQuery(".search-click").click(function(){
       jQuery(".search-lens").toggle('fast');
       }
       ```
   
 * show to toggle might work.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Search button function’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/mesocolumn/1.6.5.1/screenshot.
   png)
 * MesoColumn
 * [Support Threads](https://wordpress.org/support/theme/mesocolumn/)
 * [Active Topics](https://wordpress.org/support/theme/mesocolumn/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/mesocolumn/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/mesocolumn/reviews/)

## Tags

 * [button](https://wordpress.org/support/topic-tag/button/)
 * [function](https://wordpress.org/support/topic-tag/function/)

 * 4 replies
 * 2 participants
 * Last reply from: [Richie KS](https://wordpress.org/support/users/rkcorp/)
 * Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/search-button-function/#post-7222273)
 * Status: not resolved