Grow your CSS skills. Land your dream job.

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

    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…

    # May 29, 2013 at 2:36 pm

    Try adding vertical-align:middle to the input.

    # May 29, 2013 at 6:07 pm

    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.

    here and here.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".