Home > iNove > iNove theme: HTML5 search button

iNove theme: HTML5 search button

This will help you to change the default search box with one in HTML5, like the one that you can find in Twenty Thirteen theme.

In

[cce]wp-content/themes/inove/functions.php[/cce]

just before

[cce_php]/** Comments */[/cce]

add

[cce_php]/** Search **/
add_theme_support( 'html5', array( 'search-form') );[/cce]

In

[cce]wp-content/themes/inove/templates/header.php[/cce]

delete

[cce_php]    <!-- searchbox START -->
    <div id="searchbox">
        <?php if($options['google_cse'] && $options['google_cse_cx']) : ?>
            <form action="http://www.google.com/cse" method="get">
                <div>
                    <input type="text" name="q" size="24" />
                    <input type="submit" name="sa" value="" />
                    <input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />
                    <input type="hidden" name="ie" value="UTF-8" />
                </div>
            </form>
        <?php else : ?>
            <form action="<?php bloginfo('home'); ?>" method="get">
                <div>
                    <input type="text" name="s" size="24" value="<?php echo wp_specialchars($s, 1); ?>" />
                    <input type="submit" value="" />
                </div>
            </form>
        <?php endif; ?>
    </div>
<script type="text/javascript">
//<![CDATA[
    var searchbox = MGJS.$("searchbox");
    var searchtxt = MGJS.getElementsByClassName("textfield", "input", searchbox)[0];
    var searchbtn = MGJS.getElementsByClassName("button", "input", searchbox)[0];
    var tiptext = "<?php _e('Type text to search here...', 'inove'); ?>";
    if(searchtxt.value == "" || searchtxt.value == tiptext) {
        searchtxt.className += " searchtip";
        searchtxt.value = tiptext;
    }
    searchtxt.onfocus = function(e) {
        if(searchtxt.value == tiptext) {
            searchtxt.value = "";
            searchtxt.className = searchtxt.className.replace(" searchtip", "");
        }
    }
    searchtxt.onblur = function(e) {
        if(searchtxt.value == "") {
            searchtxt.className += " searchtip";
            searchtxt.value = tiptext;
        }
    }
    searchbtn.onclick = function(e) {
        if(searchtxt.value == "" || searchtxt.value == tiptext) {
            return false;
        }
    }
//]]>
</script>
    <!-- searchbox END -->[/cce]

and instead paste

[cce_php]<?php get_search_form(); ?>[/cce]

Now give it some style. At the end of style.css add

[cce_css]input[type="search"] {
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}


#navigation .search-form {
  float: right;
}

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

#navigation .search-field:focus {
  background-color: #fff;
  border: 2px solid #D7D7D7;
  cursor: text;
  outline: 0;
  width: 230px;
  margin: 1px;
  -moz-box-sizing: border-box;
}

.screen-reader-text {
  display: none;
}

.search-form .search-submit {
  display: none;
}[/cce]

No, it will not work in Internet Explorer 8 :DGo and get a serious browser 😛

 

 

 

Enjoy 🙂

Categories: Wordpress, iNove
  1. No comments yet.
  1. No trackbacks yet.