I need help with this code. How can I get the search field to display when clicking on the search-icon.svg?

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field"
        placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>"
        value="<?php echo get_search_query() ?>" name="s"
        title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
<input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search-icon.svg" />

.site-header .search-field  {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 37px;
    padding: 0 0 10px 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
.site-header .search-field:focus  {
    background-color: #fff;
    border: 2px solid #333;
    cursor: text;
    outline: 0;
    width: 230px;
.search-submit {
input[type="image"] {
    height: 30px;
  • I don't see anything wrong with this code. What isn't working? – Jacob Peattie Oct 8 '18 at 1:43
  • The icon is not clickable. It should open the search field. – Eva Oct 8 '18 at 1:50
  • input[type="image"] is for having a submit button that's an image. If you want the image to be a toggle you should output it as a regular image, or inside a <button> element and toggle it with JavaScript. Not really anything to do with WordPress. – Jacob Peattie Oct 8 '18 at 2:07

You have to use javascript or jQuery for this form. You can use like this:

<!-- Custom Style for the form -->
    <style type="text/css">
        body {
            margin: 0;
            padding: 30px 0;
            font-family: arial;
            font-size: 16px;
            line-height: 22px;
            max-width: 800px;
            margin: 0 auto;
            overflow: hidden;
        body:after {
            content: '';
            clear: both;
            display: table;
            max-width: 100%;
            display: inline;
            max-height: 100%;
        form#search-form {
            float: left;
            width: 80%;
            display: none;
        button#search {
            float: right;
            width: 20%;
            padding: 8px;
            height: 50px;
            cursor: pointer;
            text-align: center;
            margin-top: 21px;
        input.search-field {
            display: block;
            padding: 11px;
            font-size: 20px;
            width: 100%;

    <!-- Search form-->
    <form id="search-form" action="">
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search..." name="s" />
    <!-- Search form button -->
    <button id="search"><img src="https://image.flaticon.com/icons/svg/54/54481.svg" alt="Search Icon" /></button>

    <!-- Search form script -->
    <script type="text/javascript">
        var button = document.getElementById("search");
        button.addEventListener('click', function() {
            var form = document.getElementById("search-form");
            if( form.style.display === "block" ) {
                form.style.display = "none";
            } else {
                form.style.display = "block";

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.