Add search bar to header

Create a functions.php file inside travelify-child and place the following code

add_action('travelify_header','header_search');
function header_search()
{
get_search_form();
}

After this the search box will appear in the HTML code but will not be visible because of improper alignment.

To align the search box properly add the following code to the style.css of your child theme

#branding input.s {
    border: 2px solid;
    cursor: text;
    text-indent: 10px;
    width: 200px;
}
#branding .searchform {
    float: right;
    margin: 50px 50px 0;
}
#branding input.s:focus {
    border: 2px solid;
    width: 300px;
}
#branding .assistive-text {
    position: static !important;
}

Thank you so much, Jesin.

I can see it in the HTML, but I still can’t see it on the page. When I inspect the element, I can see that it is being placed on the very top of the header. I can’t see what’s overwriting the placement.

https://www.finditindenver.com

Also, just out of curiosity, why doesn’t the code work if you put it in travelify-child/library/structure/header-extensions.php? I tried it, but no go.

You’re welcome!

That is because there is an error in the style.css of your child theme. You’ve placed the CSS code inside a.readmore {}

The code after /* Readmore */ should be

a.readmore {
	border: 1px solid #002E4D;
}
#branding input.s {
    border: 2px solid;
    cursor: text;
    text-indent: 10px;
    width: 200px;
}
#branding .searchform {
    float: right;
    margin: 50px 50px 0;
}
#branding input.s:focus {
    border: 2px solid;
    width: 300px;
}
#branding .assistive-text {
    position: static !important;
}

Also, just out of curiosity, why doesn’t the code work if you put it in travelify-child/library/structure/header-extensions.php? I tried it, but no go.

WordPress checks only the files mentioned in the template hierarchy inside the child theme directory.
So the file you placed inside the child theme directory will not even come into the picture as WordPress “includes” only the files mentioned in the template hierarchy.
Using a child theme only these files can be overridden (with the exception of functions.php as WordPress loads both the child theme’s and the main theme’s functions.php).

Hope I cleared your doubts ??

I apologize for taking so long to reply, but thank you so much for finding that I was nesting the css inside another element declaration.

I asked about the files because I have used other themes that had nested php files that I was able to change via the child theme. ??

Thank you again for your help!

You’re welcome!

Please mark this thread as resolved if it solves your problem.

This is partially-related, but could I use this method to put a search box in my featured text box on the home page?

Do you know where the files are for the slider featured image?

Where is the “featured text box”, is it the image of the buildings or the weather that is displayed beneath it?

Add this PHP code to the functions.php file of your child theme

function featured_search()
{
get_search_form();
}
add_action('travelify_header','featured_search',20);

Then this to the style.css of your child theme

#branding .searchform {
  float: right;
  position: relative;
  right: 30px;
  top: -80px;
}

Jesin, thank you again.

The css seems to be conflicting with the first search form in the header next to the site logo. I will need it in both places. Is there another place that the code can be injected with a different ID?

I tried putting this in the functions.php:

function featured_search()
{
	get_search_form();
}
add_action('travelify_main_container','featured_search',20);

?>

and this in my style.css

#container .searchform {
  float: right;
  position: relative;
  right: 20px;
  margin-top: -440px;
  z-index: 999;
}

I think I need to do additional styling underneath, but I think that should work…

Hi, I’m new at wordpress I also want to add an adavanced search bar to the header in order to show it in all my pages, I am using Responsive Diectory Theme by presspremium with nexia child theme. Is really important to my to be able to do this and also customize the search bar as I want, how can I do this? I tried using the code y above but it didn’t work out.

@javierdavid2014 – this forum is for a specific theme – “Travelify” – see that at the top of this page? – and since you are using a commercial them, you need to ask the developers for help. Commercial themes aren’t supported on these forums.

Hello sir..
I have search.php file and i want to display search box in header with responsive view.. I dont know, how toad.. anybody know, plz help me..

It’s easy to place a search field anywhere on your site. Simply place this code in the template file:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
	      <div class="blog-search">
		  <input type="text" class="header-search-field" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
		  <input type="submit" class="header-search-submit" value="Search" class="footer-button" />
	      </div>
	    </form>

Then via CSS styling, adapt for responsive. You’ll notice above that I added classes to the field and submit button.

Hope that helps!