WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Customizing Search Widget (4 posts)

  1. czone
    Member
    Posted 3 years ago #

    Is there any way to customized the default WordPress Search Widget?
    i.e.

    • Replacing the submit button with Image.
    • Setting the Char. width and Max Char for the TextBox.
    • Adding CSS Style to TextBox.

      I believe many WordPress users including me would like to find a solution for this, any help would really be a great favor.
      Thank you

  2. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    You should have searchform.php in your theme, if you don't have one go ahead and create it.

    Basic styles:

    <div class="search-box">
    <form method="get" id="searchform" action="<?php echo home_url() ; ?>/">
    <input type="text" value="<?php echo esc_html($s, 1); ?>" name="s" id="s" maxlength="33" />
    <input type="image" src="<?php bloginfo('template_directory'); ?>/images/button_search.png" class="button" value=""/>
    </form>
    </div>

    CSS:

    .search-box input {
    	color: #999;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	width: 170px;
    }

    That would be good start.

  3. czone
    Member
    Posted 3 years ago #

    Thanks Emil Uzelac,
    Problem solved

  4. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    you're very welcome, if this was all for the topic, please help the community and click on resolved from your end.

    Enjoy WordPress,
    Emil

Topic Closed

This topic has been closed to new replies.

About this Topic