CODEWITHSUNDEEP
wordpress
user3134685
user3134685

Reputation: 39

WordPress 2014 Theme - Header Search Box

I want to remove the green search box from the header but I don't know which file and lines in the Editor I must remove.

Regards.

Upvotes: 1

Views: 5540

Answers (4)

Kate
Kate

Reputation: 1

Topdown is correct. Creating a child theme is very important.

But an easier way to remove search bar in twenty fourteen theme is to put .search-toggle { display: none; } in your child css file.

Here's a bit more information on customizing twenty fourteen theme in WordPress and how to create child theme for twenty fourteen theme.

Upvotes: 0

Rahil Wazir
Rahil Wazir

Reputation: 10132

Goto your_project/wp-content/themes/twentyfourteen/header.php file and open it.

Search for the word search-toggle and search-container (This one is optional).

.search-toggle

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

#search-container

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

Remove both html block of codes or you can wrap them in a comment for later use like this:

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

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

Upvotes: 0

topdown
topdown

Reputation: 456

You should not be editing default themes!

Create a child theme http://codex.wordpress.org/Child_Themes The example actually shows using TwentyFourteen

Then copy the header.php to your child themes folder and edit it.

This way updates for TwentyFourteen will not over-write your changes. When updates do come, compare the TwentyFourteen header.php with your header.php and make the updates to it.

OR better yet, Create the child theme and add this to your style.css after the parent themes import

.search-toggle, #search-container {display: none;}

Then you do not need to modify or copy the header.php file at all.

Upvotes: 1

flo
flo

Reputation: 983

You need to edit the header.php file of your WordPress theme that can be found at [your_WP_folder]/wp-content/themes/twentyfourteen/header.php.

Look for the <header> section and copy and paste the code below instead of the original.

<header id="masthead" class="site-header" role="banner">
        <div class="header-main">
                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

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

                <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
                        <h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
                        <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                </nav>
        </div>

       <!-- Hide Search Form (optional)
       <div id="search-container" class="search-box-wrapper hide">
                <div class="search-box">
                        <?php get_search_form(); ?>
                </div>
        </div>
       -->
</header><!-- #masthead -->

Upvotes: 0

Related Questions