WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] [closed] search field in the nav menu (21 posts)

  1. Sevar
    Member
    Posted 1 year ago #

    Hi! I put this code now in the functions.php:

    add_filter('wp_nav_menu_items','add_search_box', 10, 2);
    function add_search_box($items, $args) {
    
            ob_start();
            get_search_form();
            $searchform = ob_get_contents();
            ob_end_clean();
    
            $items .= '<li >' . $searchform . '</li>';
    
        return $items;
    }

    so now I have the search field in the nav menu but it's a very bad looking: everything: the word, field and the button settled upright and awry but I need it all inline and in the right side of the menu. What to do?

  2. Sevar
    Member
    Posted 1 year ago #

    Solved by adding following code and styles:

    This in the header.php after  <div class="navbar-wrapper clearfix row-fluid">  :
    
    <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
     <div><input type="text" size="18" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
     <input type="submit" id="searchsubmit" value="Найти" class="btn" />
     </div>
     </form>
    <p class="forhelp"></p>
    
    This is CSS:
    
      #searchform{ width: 200px;  float:right; margin-top: 20px; margin-right: 70px;   margin-left: 430px; margin-bottom: -10px;  }
    #searchsubmit{ position: absolute;  margin-left: 4px;  }
       .forhelp{  width: 1300px; float: left;}
  3. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    Thanks for sharing that sevar!
    Could you also share the url of the website to see the result?
    Cheers,
    Nicolas.

  4. Sevar
    Member
    Posted 1 year ago #

    Only now it is not in the nav menu but a little above. Here but it is not finished yet: http://video-walks.ru.com/

  5. linkomatic
    Member
    Posted 1 year ago #

    Thanks for this code, Sevar. I had the same request from my customer, so you have helped me make them happy! ;0) (Would be nice to have this added as a future theme option.)

  6. Sevar
    Member
    Posted 1 year ago #

    Enjoy it! Yes it would be good as an option.

  7. Sevar
    Member
    Posted 1 year ago #

    .forhelp{ width: 1300px; float: left; } to be changed to
    .forhelp{ width: 100%; float: left; } or it will be no good in IE.

  8. behmtt
    Member
    Posted 5 months ago #

    Hello,

    When i put the code in the function.php of my child theme is won't show the search bar in the navbar.
    Here is my site: durksweb.nl.
    This is the code from my function.php:

    <?php
    /**
    *
    * This program is a free software; you can use it and/or modify it under the terms of the GNU
    * General Public License as published by the Free Software Foundation; either version 2 of the License,
    * or (at your option) any later version.
    *
    * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without
    * even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
    *
    * You should have received a copy of the GNU General Public License along with this program; if not, write
    * to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
    *
    * @package   	Customizr
    * @subpackage 	functions
    * @since     	1.0
    * @author    	Nicolas GUILLAUME <nicolas@themesandco.com>
    * @copyright 	Copyright (c) 2013, Nicolas GUILLAUME
    * @link      	http://themesandco.com/customizr
    * @license   	http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    */
    
    /**
    * This is where Customizr starts. This file defines and loads the theme's components :
    * 1) A function tc__f() used everywhere in the theme, extension of WP built-in apply_filters()
    * 2) Constants : CUSTOMIZR_VER, TC_BASE, TC_BASE_CHILD, TC_BASE_URL, TC_BASE_URL_CHILD, THEMENAME, TC_WEBSITE
    * 3) Default filtered values : images sizes, skins, featured pages, social networks, widgets, post list layout
    * 4) Text Domain
    * 5) Theme supports : editor style, automatic-feed-links, post formats, navigation menu, post-thumbnails, retina support
    * 6) Plugins compatibility : jetpack, bbpress, qtranslate, woocommerce and more to come
    * 7) Default filtered options for the customizer
    * 8) Customizr theme's hooks API : front end components are rendered with action and filter hooks
    *
    * The method TC__::tc__() loads the php files and instanciates all theme's classes.
    * All classes files (except the class__.php file which loads the other) are named with the following convention : class-[group]-[class_name].php
    *
    * The theme is entirely built on an extensible filter and action hooks API, which makes customizations easy as breeze, without ever needing to modify the core structure.
    * Customizr's code acts like a collection of plugins that can be enabled, disabled or extended.
    *
    */
    
    /**
    * The best and safest way to extend Customizr with your own custom functions is to create a child theme.
    * You can add functions here but they will be lost on upgrade. If you use a child theme, you are safe!
    * More informations on how to create a child theme with Customizr here : http://themesandco.com/customizr/#child-theme
    */
    
    /**
    * The tc__f() function is an extension of WP built-in apply_filters() where the $value param becomes optional.
    * It is shorter than the original apply_filters() and only used on already defined filters.
    *
    * By convention in Customizr, filter hooks are used as follow :
    * 1) declared with add_filters in class constructors (mainly) to hook on WP built-in callbacks or create "getters" used everywhere
    * 2) declared with apply_filters in methods to make the code extensible for developers
    * 3) accessed with tc__f() to return values (while front end content is handled with action hooks)
    *
    * Used everywhere in Customizr. Can pass up to five variables to the filter callback.
    *
    * @since Customizr 3.0
    */
    if( !function_exists( 'tc__f' )) :
        function tc__f ( $tag , $value = null , $arg_one = null , $arg_two = null , $arg_three = null , $arg_four = null , $arg_five = null) {
           return apply_filters( $tag , $value , $arg_one , $arg_two , $arg_three , $arg_four , $arg_five );
        }
    endif;
    
    /**
    * Fires the theme : constants definition, core classes loading
    *
    *
    * @package      Customizr
    * @subpackage   classes
    * @since        3.0
    * @author       Nicolas GUILLAUME <nicolas@themesandco.com>
    * @copyright    Copyright (c) 2013, Nicolas GUILLAUME
    * @link         http://themesandco.com/customizr
    * @license      http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    */
    
    class TC___ {
    
        //Access any method or var of the class with classname::$instance -> var or method():
        static $instance;
    
        public $tc_core;
    
        function __construct () {
    
            self::$instance =& $this;
    
            //this is the structure of the Customizr code : groups => ('path' , 'class_suffix')
            $this -> tc_core = apply_filters( 'tc_core',
                            array(
                                'fire'      =>   array(
                                                array('inc' , 'init'),//defines default values (layout, socials, default slider...) and theme supports (after_setup_theme)
                                                array('inc' , 'ressources'),//loads style and scripts
                                                array('inc' , 'utils'),//those are helpers used everywhere
                                                array('inc' , 'widgets'),//widget factory
                                                array('inc/admin' , 'admin_init'),//fires the customizer and the metaboxes for slider and layout
                                            ),
                                //the following files/classes define the action hooks for front end rendering : header, main content, footer
                                'header'    =>   array(
                                                array('parts' , 'header_main'),
                                                array('parts' , 'menu'),
                                                array('parts' , 'nav_walker'),
                                            ),
                                'content'   =>  array(
                                                array('parts', '404'),
                                                array('parts', 'attachment'),
                                                array('parts', 'breadcrumb'),
                                                array('parts', 'comments'),
                                                array('parts', 'featured_pages'),
                                                array('parts', 'gallery'),
                                                array('parts', 'headings'),
                                                array('parts', 'no_results'),
                                                array('parts', 'page'),
                                                array('parts', 'post'),
                                                array('parts', 'post_list'),
                                                array('parts', 'post_metas'),
                                                array('parts', 'post_navigation'),
                                                array('parts', 'sidebar'),
                                                array('parts', 'slider'),
                                            ),
                                'footer'    => array(
                                                array('parts', 'footer_main'),
                                            ),
                                'addons'    => apply_filters('tc_addons_classes' , array() )
                            )//end of array
            );//end of filter
    
            /* GETS INFORMATIONS FROM STYLE.CSS */
            // get themedata version wp 3.4+
            if( function_exists( 'wp_get_theme' ) )
              {
                //get WP_Theme object of customizr
                $tc_theme                     = wp_get_theme();
    
                //Get infos from parent theme if using a child theme
                $tc_theme = $tc_theme -> parent() ? $tc_theme -> parent() : $tc_theme;
    
                $tc_base_data['prefix']       = $tc_base_data['title'] = $tc_theme -> name;
                $tc_base_data['version']      = $tc_theme -> version;
                $tc_base_data['authoruri']    = $tc_theme -> {'Author URI'};
              }
    
            // get themedata for lower versions (get_stylesheet_directory() points to the current theme root, child or parent)
            else
              {
                 $tc_base_data                = get_theme_data( get_stylesheet_directory().'/style.css' );
                 $tc_base_data['prefix']      = $tc_base_data['title'];
              }
    
            /* CUSTOMIZR_VER is the Version */
            if( ! defined( 'CUSTOMIZR_VER' ) )      { define( 'CUSTOMIZR_VER' , $tc_base_data['version'] ); }
    
            /* TC_BASE is the root server path of the parent theme */
            if( ! defined( 'TC_BASE' ) )            { define( 'TC_BASE' , get_template_directory().'/' ); }
    
            /* TC_BASE_CHILD is the root server path of the child theme */
            if ( ! defined( 'TC_BASE_CHILD' ) )     { define( 'TC_BASE_CHILD' , get_stylesheet_directory().'/' ); }
    
            /* TC_BASE_URL http url of the loaded parent theme*/
            if( ! defined( 'TC_BASE_URL' ) )        { define( 'TC_BASE_URL' , get_template_directory_uri() . '/' ); }
    
            /* TC_BASE_URL_CHILD http url of the loaded child theme*/
            if( ! defined( 'TC_BASE_URL_CHILD' ) )  { define( 'TC_BASE_URL_CHILD' , get_stylesheet_directory_uri() . '/' ); }
    
            /* THEMENAME contains the Name of the currently loaded theme */
            if( ! defined( 'THEMENAME' ) )          { define( 'THEMENAME' , $tc_base_data['title'] ); }
    
            /* TC_WEBSITE is the home website of Customizr */
            if( ! defined( 'TC_WEBSITE' ) )         { define( 'TC_WEBSITE' , $tc_base_data['authoruri'] ); }
    
            /* theme class groups instanciation */
            $this -> tc__ ( $this -> tc_core );
    
        }//end of __construct()
    
        /**
        * Class instanciation with a singleton factory :
        * Thanks to Ben Doherty (https://github.com/bendoh) for the great programming approach
        *
        *
        * @since Customizr 3.0
        */
        function tc__ ( $load ) {
    
            static $instances;
    
            foreach ( $load as $group => $files ) {
                foreach ($files as $path_suffix ) {
                    //checks if a child theme is used and if the required file has to be overriden
                    if ( $this -> tc_is_child() && file_exists( TC_BASE_CHILD . $path_suffix[0] . '/class-' . $group . '-' .$path_suffix[1] .'.php') ) {
                        require_once ( TC_BASE_CHILD . $path_suffix[0] . '/class-' . $group . '-' .$path_suffix[1] .'.php') ;
                    }
                    else {
                        require_once ( TC_BASE . $path_suffix[0] . '/class-' . $group . '-' .$path_suffix[1] .'.php') ;
                    }
    
                    $classname = 'TC_' . $path_suffix[1];
                    if( !isset( $instances[ $classname ] ) )
                    {
                        $instances[ $classname ] = class_exists($classname)  ? new $classname : '';
                    }
                }
            }
    
            return $instances[ $classname ];
        }
    
        /**
        * Checks if we use a child theme. Uses a deprecated WP functions (get_theme_data) for versions <3.4
        * @return boolean
        *
        * @since  Customizr 3.0.11
        */
        function tc_is_child() {
            // get themedata version wp 3.4+
            if( function_exists( 'wp_get_theme' ) ) {
                //get WP_Theme object of customizr
                $tc_theme       = wp_get_theme();
                //define a boolean if using a child theme
                $is_child       = ( $tc_theme -> parent() ) ? true : false;
             }
             else {
                $tc_theme       = get_theme_data( get_stylesheet_directory() . '/style.css' );
                $is_child       = ( !empty($tc_theme['Template']) ) ? true : false;
            }
    
            return $is_child;
        }
    
    }//end of class
    
    add_filter('tc_fp_single_display', 'rdc_fp_single_display', 10, 2);
    function rdc_fp_single_display($output, $area) {
         return preg_replace('|fp-button"|', 'fp-button fp-button-'.$area.'"',
    $output);
    }
    
    add_filter('tc_logo_text_display', 'your_logo_display');
    add_filter('tc_logo_img_display', 'your_logo_display');
    function your_logo_display($output) {
    return preg_replace('/brand span3/', 'brand span10 offset1', $output, -1);
    }
    
    add_filter('tc_tagline_display', 'rdc_tagline2_display');
    function rdc_tagline2_display($output) {
        return preg_replace('|</h2>|', '</h2><h5 class="rdc_tagline2"><a href="mailto:you@yourmail.com">you@yourmail.com</a></h5> ', $output);
    }
    
    add_filter('wp_nav_menu_items','add_search_box', 10, 2);
    function add_search_box($items, $args) {
    
            ob_start();
            get_search_form();
            $searchform = ob_get_contents();
            ob_end_clean();
    
            $items .= '<li >' . $searchform . '</li>';
    
        return $items;
    }
  9. ElectricFeet
    Member
    Posted 5 months ago #

    Behmtt, that is the Customizr functions.php, not a child one. You shouldn't be adding to that. See this explanation of how to set up a proper functions.php here: http://www.themesandco.com/customizr/how-to-customize-customizr-wordpress-theme/

  10. behmtt
    Member
    Posted 5 months ago #

    I got the searchbox in the navbar but now the seachbox is not clickable.
    This is the code in the header.php:

    <?php
    /**
     * The Header for Customizr.
     *
     * Displays all of the <head> section and everything up till <div id="main-wrapper">
     *
     * @package Customizr
     * @since Customizr 1.0
     */
    ?>
    <!DOCTYPE html>
    <!--[if IE 7]>
    <html class="ie ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html class="ie ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 7) | !(IE 8)  ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    
        <?php
        if(function_exists('wplb_login')) {
            wplb_login();
        }
    ?>
    
    	<?php
    		//the '__before_body' hook is used by TC_header_main::$instance->tc_head_display()
    		do_action( '__before_body' );
    	?>
    
    	<body <?php body_class(); ?> <?php echo tc__f('tc_body_attributes' , 'itemscope itemtype="http://schema.org/WebPage"') ?>>
    
    		<?php do_action( '__before_header' ); ?>
    
    	   	<header class="<?php echo tc__f('tc_header_classes', 'tc-header clearfix row-fluid') ?>" role="banner">
    
    			<?php
    			//the '__header' hook is used by (ordered by priorities) : TC_header_main::$instance->tc_logo_title_display(), TC_header_main::$instance->tc_tagline_display(), TC_header_main::$instance->tc_navbar_display()
    				do_action( '__header' );
    			?>
    
    <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
     <div><input type="text" size="18" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
     <input type="submit" id="searchsubmit" value=">>>" class="btn btn-info" />
     </div>
     </form>
    <p class="forhelp"></p>
    
    	</header>
    
    		<?php
    		 	//This hook is filtered with the slider : TC_slider::$instance->tc_slider_display()
    			do_action ( '__after_header' )
    		?>

    If i put the code <div class="navbar-wrapper clearfix row-fluid"> in the header.php the seachbox works but then the menu is not clickable.
    Something is going wrong.

    Then there is another thing. When i hide the navbox lilke mentioned in the snippet remove-navbar-box the searcbox is vissible and when i want to show the navbox the searchbox is gone.
    Here is my site: durksweb.nl.

  11. Sevar
    Member
    Posted 5 months ago #

    Hi!

    Find this file: class-header-header_main.php.

    Find there this line: <div class="navbar notresp row-fluid pull-left">.

    Put your form under this line and apply some css as you wish.

    Cheers!

  12. ElectricFeet
    Member
    Posted 5 months ago #

    behmtt: you should not be editing core Customizr files like this. Did you read the link I gave above?

  13. liuzhongjun
    Member
    Posted 5 months ago #

    I don't really see the solution, as the original website of Sevar dropped.

    I'd really like to have such a search bar for my new site.

    Thanks a lot.

  14. behmtt
    Member
    Posted 5 months ago #

    Hello Sevar,
    i did succeed in getting the searchbox in the navbox. But with possitioning the searchbox witch css it was either not clickable or the the menu was not clickable. So i give up and placed the searchbox in the footer.

  15. Sevar
    Member
    Posted 5 months ago #

    Hi!

    All changes must be done only by means of a child theme.

    The file must be copied and placed into the child theme directory and the changes be made there.

    If you couldn't succeed with having it in the navbox working maybe your theme isn't updated.

  16. joe-the-baker
    Member
    Posted 3 months ago #

    Hello - I used the php and CSS in my child theme as instructed above and it is really close but the search bar is a little above my menu items. What do I need to fix to make it line up?
    http://www.joe-the-baker.com

  17. rdellconsulting
    Member
    Posted 3 months ago #

    Try this:

    #searchform {
      float: right;
      margin: 0 70px 0 430px;
      position: relative;
      top: 40px;
      width: 200px;
    }
  18. joe-the-baker
    Member
    Posted 3 months ago #

    Thanks! It's definitely better, but still a little out of alignment: http://www.joe-the-baker.com.

  19. rdellconsulting
    Member
    Posted 3 months ago #

    The code I've given you may need tweaking to be pixel-perfect. But I don't read minds so need better info please!

  20. joe-the-baker
    Member
    Posted 3 months ago #

    Sorry, I'm not a coder and don't know the proper lingo, but basically right now there is quite a bit of black space above the menu items and the search bar. I'm just trying to figure out how to reduce the height of that black box so that it fits the menu/search bar. Does that make sense?

  21. ElectricFeet
    Member
    Posted 2 months ago #

    Hi Joe. Quick answer is that there's a whole paragraph in your code that seems to do nothing. Take out <p class="forhelp"></p> and you should reduce your menu height.

    However, in the meantime, I wrote this search snippet—with your question as a prompt to getting down to my to-do list!

    It shows you how to make a much nicer search bar for your site.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.