1

I am building a slide down search box. I have successfully coded it, and it does work on jsfiddle. However, when I am trying to implement it on wordpress it does not work. Since it does work on jsfiddle it has to be something on wordpress, but I don't see what the problem is. Does anyone see any errors?

jsfiddle - https://jsfiddle.net/jd0a433f/1/

searchform.php

<div class="search-field">
</div>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <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>

search.js

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

functions.php

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

css

#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);
}

footer.php*

<footer class="site-footer">
    <!-- footer-widgets -->
    <div class="footer-line"></div>
<div class="footer-widgets clearfix">
<?php if (is_active_sidebar('footer1')) : ?>
<div class="footer-widget-area">
<?php dynamic_sidebar('footer1'); ?>
</div>

<?php endif; ?>
<?php if (is_active_sidebar('footer2')) : ?>
<div class="footer-widget-area">
<?php dynamic_sidebar('footer2'); ?>
</div>

<?php endif; ?>

<?php if (is_active_sidebar('footer3')) : ?>
<div class="footer-widget-area">
<?php dynamic_sidebar('footer3'); ?>
</div>

<?php endif; ?>
<?php if (is_active_sidebar('footer4')) : ?>
<div class="footer-widget-area">
<?php dynamic_sidebar('footer4'); ?>
</div>

<?php endif; ?>
</div><!-- /footer-widgets -->
         <nav class="site-nav">
                <?php 

             $args = array(
                'theme_location' => 'footer'
             );

              ?>

             <?php wp_nav_menu( $args ); ?>

            </nav>

<div style="display:inline-block;vertical-align:top;"><p id="copyright">&copy; <?php echo date('Y');?> <?php bloginfo('name'); ?> | </div>
<div style="display:inline-block;vertical-align:top;"><?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'secondary-footer' ) ); ?></p></div>

</footer>

</footer>

</div><!-- container -->

<?php wp_footer(); ?>
</body>
</html>
1

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( '/' ); ?>">
   <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.

  • How did you add the javascript into the footer.php? I added my footer.php into my original question. Would you mind showing me how to place the javascript in? – user7548188 Jun 13 '17 at 1:27
  • Simply add the <script></script> tags around your script and add it right before the closing body tag. (typically located in the footer.php file for your theme.) I have updated the answer to reflect these changes. – DigitalDesigner Jun 13 '17 at 2:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.