• Is there a way to make a search box in Twenty Twelve theme just like the search box on the right top of Twenty Fourteen theme?

    If that’s not doable, at least like the search box on the Twenty Thirteen theme.

    I would love to have a “dynamic” search box near my Main Menu where only the search icon visible and once you click it that the text box re-appear.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Are you already using a child theme?

    Thread Starter Superezin

    (@superezin)

    Yes i have

    Site url?

    Thread Starter Superezin

    (@superezin)

    Sorry, i haven’t made it online, still local on my laptop.

    Basically i just copy the whole Twenty Twelve folder, and empty out the code on style.css and function.php. Then i just add codes on the style.css.

    No – that’s not how you create a child theme. You start with a child theme folder that just contains a style.css file and perhaps an empty functions.php file. Then you add your changes to those files and copy in any other files that you actually want to amend – such as header.php.

    Thread Starter Superezin

    (@superezin)

    Yeah, actually i put a lot of stuffs that i don’t need in my new folder theme.

    Anyway, when i just start learning WordPress, so when i started a week ago i already edit a lot of php files like the header and footer on Twenty Twelve. Then i learn there’s a thing called Child Theme. Then i created a child theme, put a blank style.css there and used Twenty Twelve as the parent theme. And now i’m still clean up the mess, figuring what files i have edited and need to be put in the child theme folder and so on, but no problem there, i think i can manage it. I’ll scream out in forum again if i ran into problem there 🙂

    Can you help me with the search box? Do you need to look it online?

    actually i put a lot of stuffs that i don’t need in my new folder theme.

    Then you need to remove it except the child’s style.css file and an empty functions.php file.

    If you examine the 2014 theme’s header.php file, you will see that it contains the following lines:

    <div class="search-toggle">
    <a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
    </div>

    You need to add something similar to a copy of the 2012 header.php file in your child theme – replacing 'twentyfourteen' with something like 'my-child-theme' – just before:

    <nav id="site-navigation" class="main-navigation" role="navigation">

    Then, using Firefox with the Firebug add-on (or whatever developer tool is available in your web browser(, examine the CSS that 2014 applies to the .search-toggle & .screen-reader-text classes and add that to your child thmee’s stylesheet. You’ll still need to play around with the CSS to get it all to work nicely together but that should get you on your way.

    Thread Starter Superezin

    (@superezin)

    Fabulous! Let me try it first and let you know the result soon! Thanks in advance!

    Thread Starter Superezin

    (@superezin)

    Just in the middle of adding classes to my child’s theme, and i noticed that the text box to put the search is not included on the header.php.

    Should i include this on my child’s header.php at the position that i want it to appear?

    ‘<div id=”search-container” class=”search-box-wrapper hide”>
    <div class=”search-box”>
    <?php get_search_form(); ?>
    </div>
    </div>’

    Thread Starter Superezin

    (@superezin)

    BTW, how do you make the code in a box in this comment like you did? 🙂

    Oh gosh – yes! I forgot that bit.

    Thread Starter Superezin

    (@superezin)

    Okay i’m stuck 🙁

    Even though the layout is still a mess but i think i can figure it out later. But what i’m stuck is i can’t make the search box re-appear when clicking the search icon. It stays hidden after i add this class:

    .hide {
    display: none;
    }

    I can see a lot of .show-… classes in Twenty Fourteen style.css manually. But nothing appear on the firebug style window.

    Or is is any related to jquery files? Any difference between 2012 & 2014 theme on their jquery files related to the behavior on clicking the search icon?

    That’s just me guessing, i haven’t dig into any other stuff on WordPress beside the theme styling.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Custom Search Box Twenty Fourteen Style’ is closed to new replies.