Support » Fixing WordPress » Adding Submit Button to search form in TwentyElven-Child Theme

  • Hi,

    How can I add a submit button to the search form in TwentyElven-Child Theme?

    I appreciate a step-by-step guide. Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Do you know how to use HTML, PHP and CSS?

    Thread Starter Rokgoo

    (@rokgoo)

    Hi esmi, I am not a “code-freak” but I can handle HTML, PHP and CSS.

    In that case, you should be able to create a searchform.php template file in your child theme using the parent’s copy as a starting point.

    Thread Starter Rokgoo

    (@rokgoo)

    I know that I need a new searchform.php in the child theme but I don’t know what do I need to add/modify in the new file. Can you tell me the code which I need to add to the searchform.php?

    Start by copying the parent’s file into the child theme.

    Thread Starter Rokgoo

    (@rokgoo)

    OK, done.

    Thread Starter Rokgoo

    (@rokgoo)

    Copying the parent’s file into the child theme is done. I understand that I need an “input” command line to the code to display the submit button. Can you help me with that?

    As you will see, there is actually a submit input in the searchform.php template file. You can now add a different class and/or id to the input and then use your child theme’s CSS to style it in any way that you want.

    Thread Starter Rokgoo

    (@rokgoo)

    Can you please write me a sample code line for “Submit-Button”?

    make searchform.php in theme folder and place that code in it

    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
    <div>
    <input class="text" type="text" value=" " name="s" id="s" />
    <input type="submit" class="submit button" name="submit" value="<?php _e('Search');?>" />
    </div>
    </form>

    Change whatever you want !

    I found that the “Search” button was already there but hidden by this css:
    .widget-area #searchsubmit {
    display: none;
    }
    I replaced it with:
    .widget-area #searchsubmit {
    display: inherit!important;
    }

    Now I can’t figure out why it the search button appears below the search box in the left side bar widget but not on my error page. I know to just hit Enter to search but some of my clients got confused. I can’t find anything causing it in searchform.php. (See at http://bannockcountyidaho.com/courts44 )

    I am guessing that it is controlled by the side bar widget css but no matter what I change it won’t move up next to the box. I have tried:

    .widget-area .searchFormInput {
    width: 75%!important;
    display: inherit!important;
    }
    .widget-area .searchFormContainer div {
    display: inherit!important;
    }
    .widget-area #SearchForm {
    display: inherit!important;
    }
    Please help! Thanks!

    I fixed it myself. Maybe it will help someone else.

    .widget-area #searchsubmit {
    display: inherit!important;
    float: right;
    margin-top:-36px;
    margin-left:10px;
    padding: 4px 5px 5px;
    }
    .widget-area .searchFormInput {
    width: 80%!important;
    display: inherit!important;
    }

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Adding Submit Button to search form in TwentyElven-Child Theme’ is closed to new replies.