All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

How To: WordPress Search Form Design

  • # May 27, 2013 at 6:18 pm

    ‘Allo, fellow artists/programmers. I just visited the Juxtapoz website and I really like their search bar, here. I would like to create something similar, but I can’t seem to get my head around it. I am using WordPress for my website, here, which is currently broken because I added the get_search_form PHP. This is what I have figured out thus far…

    WordPress uses the following PHP for its search form:

    < ?php get_search_form(); ?>

    Or at least, that is what it looks like within my Starkers theme. So I looked at the codex, here, and discovered that I do not have a searchform.php anywhere in my theme, which means that WordPress will render its built-in search form. Now, what do I need to do to style everything the way I would like to? In the codex, they give examples, but I only see one div encapsulating a label class and two input types. I need a way to physically position the search bar, then add a magnifying glass as the search button, and finally have the bar ease-in and out on rollover. Any help would be greatly appreciated! Thank you in advance!

    Edit: Also, I inspected the element on the Juxtapoz website in Google Chrome and they have some funky stuff happening. Overflowing with input types.

    # May 27, 2013 at 6:39 pm

    Take [a look](http://core.trac.wordpress.org/browser/tags/3.5.1/wp-includes/general-template.php#L0) at `get_search_form()` function on line 152 that might give you some ideas.

    # May 27, 2013 at 7:18 pm

    This reply has been reported for inappropriate content.

    Thank you, @AlenAbdula.

    Okay, here is my progress thus far. I had to place get_search_form within the ribbon-content, which makes sense because it quite literally is part of the content within the ribbon. Doh! But the menu is still outside of the ribbon, because I couldn’t get it to work otherwise. I also created a searchform.php. The code is as follows…

    <form action="” method=”get” id=”searchform”>

    <input type="text" name="s" id="search" placeholder="Search" value="” />
    <input type="image" alt="Search" src="/images/search.svg” />

    So, I have the SVG of a magnifying glass as the search button, which is then centered within the ribbon. I have the search bar, which is just your plain, old search bar (not interactive), and finally, I have the word “Search” as a placeholder.

    Any suggestions on how to level the search bar with the ribbon would be appreciated. And lastly, any tips on how to make the search bar interactive on scroll over would be awesome as well.

    # May 29, 2013 at 8:07 am

    This reply has been reported for inappropriate content.

    Any suggestions? I have gotten about as far as I can go without help.

    # May 29, 2013 at 2:36 pm

    This reply has been reported for inappropriate content.

    Try adding vertical-align:middle to the input.

    # May 29, 2013 at 6:07 pm

    This reply has been reported for inappropriate content.

    Thank you, @JoshWhite. That worked perfectly! I don’t think I have ever used that property before. Now, does anyone know how to make the search box interactive? This is what I find on Juxtapoz.

    #Header .Menu #mod-finder-searchform #mod-finder-searchword {
    background-color: #ffe067;
    border-radius: 0px;
    border: 0px;
    color: #000;
    float: right;
    font-size: 12px;
    height: 28px;
    margin: 0px;
    padding: 0px 0px 0px 8px;
    position: absolute;
    right: 23px;
    width: 67px;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    }

    The width changes with overflow: hidden applied from 67px to 165px. Probably the thing I am having the hardest time figuring out is where to apply these properties.

    <form action="” id=”searchform” method=”get”>

    <input type="text" name="s" id="search" placeholder="Search" value="” />
    <input type="image" alt="Search" src="/images/search.svg” />

    That’s all that’s in the search form. Not much, I know, but I have tried applying various properties to form, div, and input with no effect. Thank you for your help thus far. Almost there!

    Edit: Also, if you want to see what I have thus far, visit here and here.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed