WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
how to add the WP search bar In the Navbar (27 posts)

  1. mgazzar
    Member
    Posted 1 year ago #

    Hi all,

    I wonder if U could allign the logo in the middle of the navbar and adding the search bar in the uppper of the website something like this

    https://www.udemy.com/

    mainly I need to know how to add the search bar in the upper of the website then chaning the CSS will be easy

  2. Seahawksean
    Member
    Posted 1 year ago #

    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.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  4. rdellconsulting
    Member
    Posted 1 year ago #

    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.

  5. rdellconsulting
    Member
    Posted 1 year ago #

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

  6. joethebaker
    Member
    Posted 1 year ago #

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

  7. mgazzar
    Member
    Posted 1 year ago #

    @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 ?

  8. Seahawksean
    Member
    Posted 1 year ago #

    @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. (http://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?

  9. infosham
    Member
    Posted 7 months ago #

    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- http://www.infosham.com
    sham

  10. Seahawksean
    Member
    Posted 7 months ago #

    @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.

  11. lemasney
    Member
    Posted 6 months ago #

    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!

  12. Seahawksean
    Member
    Posted 6 months ago #

    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="http://xxxx.com"/></a>
      </li>
      <li>
         <a><img src="http://xxxx.com"/></a>
      </li>
      <li>
         <a><img src="http://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.

  13. Michael
    Member
    Posted 6 months ago #

    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

  14. Michael
    Member
    Posted 6 months ago #

    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!

  15. Michael
    Member
    Posted 6 months ago #

    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!

  16. batharoy
    Member
    Posted 6 months ago #

    See if this will work.

    #searchform {
        max-width: 300px;
    }
    .searchform input[type="text"] {
        width: 50%;
    }
  17. Michael
    Member
    Posted 6 months ago #

    Hi and thank you bath! you are the man!
    worked perfectly! Cheers

  18. Sky . Design
    Member
    Posted 4 months ago #

    Hey everyone,

    So I'm pretty new to this stuff, but I've been reading a buttload and I think I got how this should work. I also want to replace the tagline with a search bar. However, when I add the code as provided by Micheal into my chil functions.php, nothing changes at all...

    As I said, I am new to this, so maybe I set up the functions.php wrong?
    I'm also not exactly sure where in the fuctions.php to paste this code so that might be it? Probably the answer is pretty simple.

    Thanks in advance

  19. Sky . Design
    Member
    Posted 4 months ago #

    Ah I think I know what went wrong, my child functions.php is not set up to override the main functions.php. Can someone tell me how to getthat done?

  20. Sky . Design
    Member
    Posted 4 months ago #

    Now used "Child Themify" plugin for the creation of the child theme so that's working fine (even though it was allready) just cant seem to get the search bar working

  21. chappie
    Member
    Posted 4 months ago #

    @Michael - should your code work in my v3.10 child functions.php? I badly want it to but it seems to do nothing.

    My Search widget is still in its place in the sidebar and nothing has appeared in the header.

    This is very nearly my last task on this never-ending localhost project. If I can get the Search tool where I want it (top right in the tagline position) I can start trying to go liveā€¦if I can just live long enough.

    Thanks for any help.

  22. Sky . Design
    Member
    Posted 4 months ago #

    @Chappie @Michael - Same here, would really like this one to work, quite a fundamental function. I wil continue to scour the webz for an anwer and post if I find something that works, hope you will do the same.

  23. chappie
    Member
    Posted 4 months ago #

    @Sky . Design - as luck would have it, I didn't have to go far for the answer. d4z_c0nf's solution works like a charm for me.

  24. Sky . Design
    Member
    Posted 4 months ago #

    @chappie - That does seem to be a nice workaround. Issue is, my navbar is sticky to the top of the screen, and I would like to keep it that way. So adding a search bar above the navbar that is stuck to the top of the screen...sounds like this will cause some problems... anyone with thoughts on this?

    Thanks chappie for the input, I might end up unsticking the navbar if all else fails.

  25. Andrew
    Forum Moderator
    Posted 4 months ago #

  26. Sky . Design
    Member
    Posted 4 months ago #

    Sure can do, been rollin' in this one for a couple of days already but sure why not

  27. ElectricFeet
    Member
    Posted 4 months ago #

    There's now a snippet for this in any case. Please open a new thread if you have problems with the snippet.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic