how to add the WP search bar In the Navbar

Hi Mgazzar,

Today I just started a website using Customizr theme and also wanted to replay the tagline with a search bar and figured it out.

Do the following:

1. Go to Appearance > Editor from you Dashboard.

2. Assuming you are using a child theme, step #1 will direct you to your child css stylesheet. You will have to access the parent php files by selecting Customizr from the “Select theme to edit” dropdown. This will pull up all the parent files.

3. Open the class-header-menu.php file. You will see the elements for your social icons and the tagline.

4. Remove <?php bloginfo( 'description' ); ?> from between withing the h2 tag.

5. Replace it with the following code:

<form method="get" id="search_form" action="<?php bloginfo('home'); ?>"/>
       <input type="text" class="text" name="s" value="SEARCH" >
       <input type="submit" class="submit" value=""  />
</form>

6. Then make any styling changes in your child css.

Hope this helps.

Parent files should NOT be modified – that’s the point of using a child theme.

So move the core file
FROM: customizr/inc/parts
TO: customizr-CHILD/inc/parts
using the same name.

Make the above changes in the CHILD version.

This way, when customizr is updated, you will keep your changes. You will need to check whether Nic has made any changes in that file in the new release. If so, you’ll need to repeat the process in the updated file.

Incorrect path above. Should be:
FROM: customizr/parts
TO: customizr-CHILD/parts

I’m trying to add a search bar to my navbar as well. I followed the steps above and nothing has changed. Any advice? https://www.joe-the-baker.com

@seahawksean

thank you for ur help .. it appears good but if u try to search in the bar nothing happened … So how I can link the search widget with this

@joethebaker

just replace the code as mention above … did u replace the right code ?

@joethebaker, it looks like your main menu is in the site-description. Not sure if that was intentional on your part, but in the default theme the main menu has it’s own container which only needs to be moved by styling it in your CSS.

<div class="nav-collapse collapse">

                    <?php wp_nav_menu( array( 'theme_location' => 'main' , 'menu_class' => 'nav' , 'fallback_cb' => array( $this , 'tc_link_to_menu_editor' ), 'walker' => tc__ ( 'header' , 'nav_walker' )) );  ?>

                  </div><!-- /.nav-collapse collapse -->

Try opening the default copy of the class-header-menu.php file and looking at the arrangements of the div and seeing where the above php code is located.

I used the site-description element to hold my search bar since I’m not using the tagline on my site. (https://www.biologydesign.com/SarahCHanson).

This is the code for the tag-line:

<h2 class="span7 inside site-description"><?php bloginfo( 'description' ); ?></h2>
                  </div>

All you have to do is replace <?php bloginfo( 'description' ); ?> in the above code with, `<form method=”get” id=”search_form” action=”<?php bloginfo(‘home’); ?>”/>
<input type=”text” class=”text” name=”s” value=”SEARCH” >
<input type=”submit” class=”submit” value=”” />
</form>`

@mgazzar, my search bar is working fine (just double-checked it), so not sure why yours is not. And just in case, remember, you need to have content to search for.

If you could include a link to your site, then myself and others trying to help you could search for the problem via Firebug.

In the meantime, what file did you put the above code in and is it in your child theme?

Hello thanks for the tip. but I don’t see the above code
( <?php bloginfo( ‘description’ ); ?>) in the customizr/inc/parts/class-header-menu.php file

are you sure this is the file?

please help
I am trying to put the search box inside the tag line.
my site- https://www.infosham.com
sham

@infosham,

The above code was for Customizr ver 3.0.9. The 3.0.10 update had some major changes that affected the header and footer. The code you are looking for is now in class-main-header.php line 181.

Hi, all! I am trying to use this same method to insert some linked images using HTML in the header where the tagline typically goes. I want to use the tagline to render the HTML but it gets stripped. I found the code to do this,

echo html_entity_decode(get_bloginfo('description'))

but they all reference the header.php file, which of course has no bearing when using Customizr 3.0.10. This thread helped immensely.

So, I assume I want to modify the line (185)

apply_filters( 'tc_tagline_text ', __( esc_attr( get_bloginfo( 'description' ) ) ) )

in class-main-header.php and let’s just say I wanted a single linked image, which I’d set in the tagline in admin. What would my resulting code look like, if I wanted to use
echo html_entity_decode(get_bloginfo('description'))
instead?

Or, maybe I just replace some portion of this line in class_main_header.php with my HTML? Thanks in advance!

What version of Customizr are you using, @lemasney?

Like I said earlier, I only replaced my site description in ver3.0.9 and what I did might not work in ver3.0.10 and later.

If all you want to do is display static images in that div (and don’t want them automatically changing or anything like that) and from what I see in class-main-header.php you can just replace <?php bloginfo( 'description' ); ?> within the h2 tag on line 181 and replace it with an unordered list of images.

<ul>
  <li>
     <a><img src="https://xxxx.com"/></a>
  </li>
  <li>
     <a><img src="https://xxxx.com"/></a>
  </li>
  <li>
     <a><img src="https://xxxx.com"/></a>
  </li>
</ul>

etc, etc. Then save this altered file in the “parts” folder of your child theme. Then in your child style.css file you can make the necessary changes to the css to style the list as you see fit.

Hope this helps.

Hi friends can someone help point me in the right direction,
I believe this is the code for my verson:

/**
	 * Displays the tagline. This function has two hooks : __header and __navbar
	 *
	 *
	 * @package Customizr
	 * @since Customizr 3.0
	 */
	function tc_tagline_display() {

		if ( '__header' == current_filter() ) { //when hooked on  __header

			$html = sprintf('<div class="container outside"><%1$s class="site-description">%2$s</%1$s></div>',
					apply_filters( 'tc_tagline_tag', 'h2' ),
					apply_filters( 'tc_tagline_text ', __( esc_attr( get_bloginfo( 'description' ) ) ) )
			);

		} else { //when hooked on __navbar
			$html = sprintf('<%1$s class="%2$s inside site-description">%3$s</%1$s>',
					apply_filters( 'tc_tagline_tag', 'h2' ),
					apply_filters( 'tc_tagline_class', 'span7' ),
					apply_filters( 'tc_tagline_text ', __( esc_attr( get_bloginfo( 'description' ) ) ) )
			);

		}

        echo apply_filters( 'tc_tagline_display', $html );
	}

}//end of class

How woulde I modify this code to add the search bar where the site description was?

Thanks for any help

here is the answer, add this to you functions.php child

add_filter( 'tc_tagline_display' , 'my_link_in_tagline');

function my_link_in_tagline() {
    global $wp_current_filter;
    ?>
        <?php if ( !in_array( '__navbar' , $wp_current_filter ) )  :?>
            <div class="container outside">
                <h2 class="site-description">
                    <?php bloginfo( 'description' ); ?>
                </h2>

            </div>
        <?php else : //when hooked on __navbar ?>
            <h2 class="span7 inside site-description">
                <?php bloginfo( 'description' ); ?>
            </h2>

        <?php endif; ?>
    <?php
}

modify as stated! Thanks to theme&co website for the answer!

Now I have one simple question, what is the style css to modify the search bar because mine is too long and doesn’t look right,
any help would be awesome!

See if this will work.

#searchform {
    max-width: 300px;
}
.searchform input[type="text"] {
    width: 50%;
}