Building a slide down search box in wordpress

Question

I think it may be the way you are implimenting it.
It appears that you are trying to add this to your theme as individual files however I do not see anywhere in the code you provided where you are calling on the searchform.php file in the theme itself.

As such I tested the code you provided and was able to successfully get it to work on my custom theme by adjusting the location of where I placed the code snippets you provided.

Here was my steps.

First I placed searchform.php code into the header.php file of my theme.

 <div class="search-field">
 </div>
 <form role="search" method="get" class="search-form" action="<?php echo home_url( "https://wordpress.stackexchange.com/" ); ?>">
   <label for="search-input" id="search-label" class="search-label">
     Search for:   
     </label>
 <input id="search-input" type="search" class="search-input" placeholder="Search …" value="" name="s" title="Search for:" />
   <input type="submit" class="search-submit" value="Search" />
 </form>

Next I placed search.js into the footer.php file of my theme by adding the script tag around it and adding it right before the closing tag.

 <script>
 document.getElementById("search-label").addEventListener("click", function(e) {
   if (e.target == this) {
     e.preventDefault();
     this.classList.toggle("clicked");
   }
 });
 </script>

After that I added your function to functions.php of the custom theme

 function searchfunction() {
 wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/search.js', array( 'jquery' ) );
 }
 add_action( 'wp_enqueue_scripts', 'searchfunction' );

Finally I added your css style to themes stylesheet.

 #ht-masthead .search-field {
 background-color: transparent;
 background-image: url(images/search-icon.png);
 background-position: 5px center;
 background-repeat: no-repeat;
 background-size: 24px 24px;
 border: none;
 cursor: pointer;
 height: 37px;
 margin: 3px 0;
 padding: 0 0 0 34px;
 position: relative;
 -webkit-transition: width 400ms ease, background 400ms ease;
 transition: width 400ms ease, background 400ms ease;
 width: 230px;
 }

 #ht-masthead .search-field:focus {
 background-color: #fff;
 border: 2px solid #c3c0ab;
 cursor: text;
 outline: 0;
 }
 #ht-masthead .search-form {
 display: none;
 position: absolute;
 right: 200px;
 top: 200px;
 }
 .search-toggle:hover #ht-masthead .search-form {
 display: block;
 }
 .search-form
 .search-submit {
 display: none;
 }

 .search-form {
 position: relative;
 }

 .search-form label {
 position: relative;
 background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
 background-size: cover;
 width: 50px; height: 50px;
 text-indent: 9999px;
 overflow: hidden;
 white-space: nowrap;
 }

 .search-input {
 transform: translateY(-100%);
 opacity: 0;
 position: absolute;
 top: 100%;
 transition: opacity .25s, transform .25s;
 left: 0;
 z-index: -1;
 border: 0;
 outline: 0;

 }
 .search-label, .search-input {
 background: #ccc;
 padding: .5em;
 display: inline-block;
 }

 .clicked + .search-input {
 opacity: 1;
 transform: translateY(0);
 }

When I load the page I can see the same functionality as on your jsfiddle example you provided. I did notice with my theme, due to me having the header utilizing a high number z-index that it was hiding behind my header when it initially opened. However it is loading up on the site correctly.

Try this solution out and I hope it suits your needs.

Related Posts: