How to move search box
-
Good for you for using a child theme! You’ll need to edit both header.php and style.css in your child theme (if header.php doesn’t exist, then copy it over from the parent theme).
In header.php, find the line that starts with:
<form role="search" method="get" class="search-form" ...and copy it and everything inside it including the closing tag
</form>
and move it to just above the line that contains<div id="navbar" class"navbar-collapse-collapse">That’s it for header.php.
Then in style.css, put the following anywhere in the file:
navbar.search-form { float:right; }I could not find “<form role=”search” method=”get” class=”search-form” …”in the header php of my child theme but did see it when I inspected the page element. I successfully found “<div id=”navbar” class”navbar-collapse-collapse”>” in the header php.
You suggested “copying” it and moving it. So, I entered the exact code from the page element “<form role=…” into the position you gave and in child theme header php. Then, added the css to the style sheet in the child theme. Nothing happened at all. What did I not understand or do wrong? Second thing I tried was to highlight the line in the web page Element Inspection. I tried to move the line that begins <form role…> above the line <div id=”navbar….” but that didn’t work.
The site looks as if it has not changed at all but could I have damaged something when trying to move those elements? You shouldn’t or can’t make changes to the Elements, right?
Thanks for your patience and willingness to help me.
Interesting – the HTML for your header area is different today than it was yesterday. I’m no longer seeing the <form> tag.
Look for this:
<label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:"> </label>and move all of that to the location I previously indicated, above the navbar div.
Wow, I just did it, and the search box is now above the navigation bar. This is like magic! Is there anything else I should do to make the change stick because when I open a new window for the website the change has not applied. Is that because of browser cache?
My earlier attempt did not produce the proper result. I had duplicated the search box, resulting in a search box above the navigation bar; which is what I wanted, and one below; which I should have removed. I think I know how to proceed.
Thank you, Susuan for the clarification.Either I am foolish, or something spooky happened because I swear I could not find this “<form role=”search” method=”get” class=”search-form” …
in the child theme header php this afernoon but now it is there above the line that starts “<div id=”navbar” class”navbar-collapse-collapse”>”
I am posting the entire header php. If you are willing to take a look and advise, I would be grateful.One piece of advice I was given from another WordPress moderator on a different topic but that involves the header was to copy the whole header php into the child theme editor. But if I select header php in the drop down box, make changes there and then save, does that have the same effect? I need to be super cautious and specifics are very helpful. Thanks.
The theme is backed up daily.
<?php
/**
* The Header of the theme.
*
* Displays all of the <head> section and everything up till <main id=”main”>
*
* @package Modality
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width”>
<link rel=”profile” href=”https://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id=”grid-container”>
<div class=”clear”></div>
<?php $modality_theme_options = modality_get_options( ‘modality_theme_options’ );
if ($modality_theme_options[‘header_top_enable’] == ‘1’) {
get_template_part( ‘top’, ‘header’ );
} ?>
<?php if (get_header_image()!=”) { ?>
<div id=”header-holder” style=”background: url(<?php echo esc_url(header_image()); ?>) 50% 0 no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;”>
<?php } else { ?>
<div id=”header-holder”>
<?php } ?>
<div id =”header-wrap”>
<nav class=”navbar navbar-default”>
<div id=”logo”>
<?php if ( $modality_theme_options[‘logo’] != ” ) { ?>
“><img src=”<?php echo esc_url($modality_theme_options[‘logo’]); ?>” alt=”<?php echo esc_attr($modality_theme_options[‘logo_alt_text’]); ?>”/>
<?php if ($modality_theme_options[‘enable_logo_tagline’] == ‘1’ ) { ?>
<h5 class=”site-description”><?php echo esc_attr(bloginfo(‘description’)); ?></h5>
<?php } ?>
<?php } else { ?>
“><?php esc_attr(bloginfo( ‘name’ )); ?>
<?php if ($modality_theme_options[‘enable_logo_tagline’] == ‘1’ ) { ?>
<h5 class=”site-description”><?php echo esc_attr(bloginfo(‘description’)); ?></h5>
<?php } ?>
<?php } ?>
</div>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#navbar” aria-expanded=”false” aria-controls=”navbar”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
</div><!–navbar-header–>
<form role=”search” method=”get” class=”search-form” action=”https://hersheylibrary.org/”>
<div id=”navbar” class=”navbar-collapse collapse”>
<?php
if (has_nav_menu(‘main_navigation’)) {$modality_default_menu = array(
‘theme_location’ => ‘main_navigation’,
‘menu’ => ‘main_navigation’,
‘depth’ => 0,
‘container’ => false,
‘menu_class’ => ‘nav navbar-nav’,
‘fallback_cb’ => ‘wp_page_menu’,
‘walker’ => new wp_bootstrap_navwalker(),
);} else {
$modality_default_menu = array(
‘theme_location’ => ‘main_navigation’,
‘menu’ => ‘main_navigation’,
‘depth’ => 0,
‘container’ => false,
‘menu_class’ => ‘nav-bar’,
‘fallback_cb’ => ‘wp_page_menu’,
);}
wp_nav_menu( $modality_default_menu );
?>
<?php get_search_form(); ?>
</div><!–/.nav-collapse –></nav>
</div><!–header-wrap–>
</div><!–header-holder–>Sorry, I forgot the barticks.
<?php /** * The Header of the theme. * * Displays all of the <head> section and everything up till <main id="main"> * * @package Modality */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <link rel="profile" href="https://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="grid-container"> <div class="clear"></div> <?php $modality_theme_options = modality_get_options( 'modality_theme_options' ); if ($modality_theme_options['header_top_enable'] == '1') { get_template_part( 'top', 'header' ); } ?> <?php if (get_header_image()!='') { ?> <div id="header-holder" style="background: url(<?php echo esc_url(header_image()); ?>) 50% 0 no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> <?php } else { ?> <div id="header-holder"> <?php } ?> <div id ="header-wrap"> <nav class="navbar navbar-default"> <div id="logo"> <?php if ( $modality_theme_options['logo'] != '' ) { ?> <a href="<?php echo esc_url( home_url( '/' ) ) ?>"><img src="<?php echo esc_url($modality_theme_options['logo']); ?>" alt="<?php echo esc_attr($modality_theme_options['logo_alt_text']); ?>"/></a> <?php if ($modality_theme_options['enable_logo_tagline'] == '1' ) { ?> <h5 class="site-description"><?php echo esc_attr(bloginfo('description')); ?></h5> <?php } ?> <?php } else { ?> <a href="<?php echo esc_url( home_url( '/' ) ) ?>"><?php esc_attr(bloginfo( 'name' )); ?></a> <?php if ($modality_theme_options['enable_logo_tagline'] == '1' ) { ?> <h5 class="site-description"><?php echo esc_attr(bloginfo('description')); ?></h5> <?php } ?> <?php } ?> </div> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div><!--navbar-header--> <form role="search" method="get" class="search-form" action="https://hersheylibrary.org/"> <div id="navbar" class="navbar-collapse collapse"> <?php if (has_nav_menu('main_navigation')) { $modality_default_menu = array( 'theme_location' => 'main_navigation', 'menu' => 'main_navigation', 'depth' => 0, 'container' => false, 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_page_menu', 'walker' => new wp_bootstrap_navwalker(), ); } else { $modality_default_menu = array( 'theme_location' => 'main_navigation', 'menu' => 'main_navigation', 'depth' => 0, 'container' => false, 'menu_class' => 'nav-bar', 'fallback_cb' => 'wp_page_menu', ); } wp_nav_menu( $modality_default_menu ); ?> <?php get_search_form(); ?> </div><!--/.nav-collapse --> </nav> </div><!--header-wrap--> </div><!--header-holder-->Well, first off, if you are editing these things via the WordPress dashboard I would strongly urge you to NOT do that and instead get yourself an FTP client such as Filezilla or similar (lots of free ones out there), connect to your host’s server via FTP, and edit files that way.
And yes, whoever said to copy the entire contents of the parent theme’s header.php into the child theme’s header.php was correct. However, if the child theme doesn’t already have a header.php, you’ll have to create it. And you can’t do that from the Dashboard; you’ll have to do it via FTP.
And now, looking at that code you posted, I can see what’s going on. The search form is output from a core WordPress function
get_search_form();which is located on line 84 in that header.php code above.So forget everything I said about copying anything in the
<form>tag. What you need to do now is:1. create header.php in child theme if not exists.
2. copy all code from parent’s header.php into child theme’s header.php.
3. remove<form role="search" method="get" class="search-form" action="https://hersheylibrary.org/">(line 53)
4. take the contents of line 84, which should be<?php get_search_form(); ?>, and put that on line 53 where the other stuff was.And again, this will all be MUCH easier if you use FTP and a good text editor which gives you line numbers and syntax highlighting. Try Notepad++ or TextWrangler if you’re on a Mac. Both are free.
I can see both codes in the header.php of the child theme and understand what you are describing. I will try it tomorrow if I feel brave enough!
Thank you, Susan, for such great support. I will look in to FTP. I am familiar with using Notepad++.Question: in the Modality child theme editor, (Theme #1) from a dropdown I can select files: style.css or header.php or footer.php and there’s a blank place (Theme #2) to the right of it to copy from one to another so you can repace the original if the change doesn’t work. I also copy all the header.php or style.css into a text file to save it in case I deleted and couldn’t get it back in the right position. Is this the same as your instrctions 1. and 2.?
I do not see these lines 84 and 53 in the child theme. By looking at the page source, I can see numbers, but that it not the same thing, right? How do I see the line numbers in the child theme?
Thank you so very much. That worked. Perseverance paid off. ??
Hey great! Now don’t forget the css, if you want to move the search form over to the right. This goes in your child theme’s style.css file:
navbar.search-form { float:right; }As to your question about the Modality child theme editor: I’m really not sure, but it sounds like you have it figured out! That’s a theme-specific thing, I believe.
As to the question about line numbers: the theme editor area of the WordPress dashboard doesn’t give you line numbers; you’ll only see those in a text editor such as Notepad++. Or, I suppose there might be a plugin somewhere that adds line numbers. But if you’re doing enough code editing to require line numbers, then you should definitely be using FTP.
Cheers!
??I am sorry to say that
navbar.search-form { float:right; }did not work.
Never mind. I am very happy with what we have achieved, Susan.
Regards!
- The topic ‘How to move search box’ is closed to new replies.