WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Add a searchbox to navigation bar (16 posts)

  1. akasuna
    Member
    Posted 4 years ago #

    How to add a searchbox to navigation bar

  2. sanypoo
    Member
    Posted 4 years ago #

    hi try this...

    add one text box and use this coding..

    <form method="get" id="searchform" action="<?php bloginfo('home');?>">
    <div class="headersearchcontainleft">
    <input type="text" value="<?php echo wp_specialchars($s,1);?>" name="s" size="14" maxlength="50" width="100" style="border:none" />
    </div>
    <div class="headersearchcontainright">
    <input type="image" src="<?php bloginfo('template_directory'); ?>/images/search_icon.png" value="<?php echo wp_specialchars($s,1);?>" />
    </div>
    </form>

  3. akasuna
    Member
    Posted 4 years ago #

    hi sanypoo,
    twenty ten use "wp_nav_menu" function to get menulist, but I don't know how to add your code into this function.

    And my website is http://w3.akasuna.com/
    but what I want to is http://www.kingcosmonaut.de/blix/
    you can ses the searchbox is on the right of the navigation bar

  4. chinmoy
    Member
    Posted 4 years ago #

    #access {
    background:#A3C159 none repeat scroll 0 0;
    display:block;
    float:left;
    margin:0 auto;
    width:700px;
    }
    
    #searchform{
     float: right;
     width: 240px;
     background: #FEC42D;
    }
    <div id="search_form">
    <form method="get" id="searchform" action="<?php bloginfo('home');?>">
    <div class="headersearchcontainleft">
    <input type="text" value="<?php echo wp_specialchars($s,1);?>" name="s" size="14" maxlength="50" width="100" style="border:none" />
    </div>
    <div class="headersearchcontainright">
    <input type="image" src="<?php bloginfo('template_directory'); ?>/images/search_icon.png" value="<?php echo wp_specialchars($s,1);?>" />
    </div>
    </form>
    </div>
  5. akasuna
    Member
    Posted 4 years ago #

    Oh yeah!
    I have completed this work !
    Visit the demo http://w3.akasuna.com/

    chinmoy, thank you for your help !

  6. cascd88
    Member
    Posted 4 years ago #

    where to put the above code??

  7. akasuna
    Member
    Posted 4 years ago #

    Hi, cascd88

    put the above code into "style.css" and "header.php"

  8. lazyym
    Member
    Posted 4 years ago #

    I followed intsructions the best I could, I have it in there, it looks terrible, thoughts for a newbie?

    http://topmontanasites.com/blog/

  9. akasuna
    Member
    Posted 4 years ago #

    I think you mean instructions, the intsructions is for twentyten theme, and i noticed that the theme of your blog is not twentyten

    the latest demo is on my site http://www.akasuna.com , and it works ok.

  10. lazyym
    Member
    Posted 4 years ago #

    I hate being the dumb newbie, I guess where exactly do I put the code in the header?

    in this site now: http://valuesboard.com/

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package WordPress
     * @subpackage Twenty_Ten
     * @since Twenty Ten 1.0
     */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php
    	/*
    	 * Print the <title> tag based on what is being viewed.
    	 */
    	global $page, $paged;
    
    	wp_title( '|', true, 'right' );
    
    	// Add the blog name.
    	bloginfo( 'name' );
    
    	// Add the blog description for the home/front page.
    	$site_description = get_bloginfo( 'description', 'display' );
    	if ( $site_description && ( is_home() || is_front_page() ) )
    		echo " | $site_description";
    
    	// Add a page number if necessary:
    	if ( $paged >= 2 || $page >= 2 )
    		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
    
    	?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php
    	/* We add some JavaScript to pages with the comment form
    	 * to support sites with threaded comments (when in use).
    	 */
    	if ( is_singular() && get_option( 'thread_comments' ) )
    		wp_enqueue_script( 'comment-reply' );
    
    	/* Always have wp_head() just before the closing </head>
    	 * tag of your theme, or you will break many plugins, which
    	 * generally use this hook to add elements to <head> such
    	 * as styles, scripts, and meta tags.
    	 */
    	wp_head();
    ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="wrapper" class="hfeed">
    	<div id="header">
    		<div id="masthead">
    			<div id="branding" role="banner">
    				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    				<<?php echo $heading_tag; ?> id="site-title">
    					<span>
    						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    					</span>
    				</<?php echo $heading_tag; ?>>
    				<div id="site-description"><?php bloginfo( 'description' ); ?></div>
    
    				<?php
    					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    					if ( is_singular() &&
    							has_post_thumbnail( $post->ID ) &&
    							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
    							$image[1] >= HEADER_IMAGE_WIDTH ) :
    						// Houston, we have a new header image!
    						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    					else : ?>
    						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    					<?php endif; ?>
    			</div><!-- #branding -->
    
    			<div id="access" role="navigation">
    			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
    				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
    				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    			</div><!-- #access -->
    		</div><!-- #masthead -->
    	</div><!-- #header -->
    
    	<div id="main">
  11. akasuna
    Member
    Posted 4 years ago #

    It's the header.php of my website
    I add a <div id="search_form_nav" class="extt"> to it, you can see.

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package WordPress
     * @subpackage Twenty_Ten
     * @since Twenty Ten 1.0
     */
    ?><!DOCTYPE html>
    <html >
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php
    	/*
    	 * Print the <title> tag based on what is being viewed.
    	 * We filter the output of wp_title() a bit -- see
    	 * twentyten_filter_wp_title() in functions.php.
    	 */
    	wp_title( '|', true, 'right' );
    
    	?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php
    	/* We add some JavaScript to pages with the comment form
    	 * to support sites with threaded comments (when in use).
    	 */
    	if ( is_singular() && get_option( 'thread_comments' ) )
    		wp_enqueue_script( 'comment-reply' );
    
    	/* Always have wp_head() just before the closing </head>
    	 * tag of your theme, or you will break many plugins, which
    	 * generally use this hook to add elements to <head> such
    	 * as styles, scripts, and meta tags.
    	 */
    	wp_head();
    ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="wrapper" class="hfeed">
    	<div id="header">
    		<div id="masthead">
    			<div id="branding" role="banner">
    				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    <!--
    				<<?php echo $heading_tag; ?> id="site-title">
    					<span>
    						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    					</span>
    				</<?php echo $heading_tag; ?>>
    				<div id="site-description"><?php bloginfo( 'description' ); ?></div>
    -->
    				<?php
    					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    					if ( is_singular() &&
    							has_post_thumbnail( $post->ID ) &&
    							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
    							$image[1] >= HEADER_IMAGE_WIDTH ) :
    						// Houston, we have a new header image!
    						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    					else : ?>
    						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    					<?php endif; ?>
    			</div><!-- #branding -->
    
    			<div id="access" role="navigation">
    			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
    				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
    				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    
    			</div><!-- #access -->
    <div id="search_form_nav" class="extt">
    <form method="get" id="searchformnav" action="<?php bloginfo('home');?>">
    <input type="text" value="<?php echo wp_specialchars($s,1);?>" name="s" id="s" size="14" maxlength="50"  />
    <input type="submit"  value="Go!" id="searchbutton"/>
    </form>
    </div>
    		</div><!-- #masthead -->
    	</div><!-- #header -->
    
    	<div id="main">
  12. lazyym
    Member
    Posted 4 years ago #

    thank you!

  13. orenlebbo
    Member
    Posted 3 years ago #

    how do i do that in thesis ?

  14. joannavaiou
    Member
    Posted 3 years ago #

    Hi there Acasuna!

    I wanted to ask your advice on a similar request, as I dont mess with the code of my wp website.

    I have bought a premium theme from "I'Themes" and I only have the option to include a search box as a widget but I dont want that, I want to add a search box on the right side of the pages navigation bar.

    Can you please advice me what code should I add and where exactly should I put it (in which file and in what place) within the editor tab of my appearance tab within my wp dashboard?

    I am looking forward to your help !

    Thanks!

  15. RiDFiCK
    Member
    Posted 3 years ago #

    Hello,

    I'm trying to make the same changes on my Website, but I can't find the exact place to ad the code.

    My Website is: RiDFiCK and I would like to as the search-box on the second navbar.

    Here is the header.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/glide.css" media="screen" />	
    
    <?php
    wp_enqueue_script('jquery');
    wp_enqueue_script('cufon', get_stylesheet_directory_uri() . '/js/cufon.js');
    wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');
    wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');
    wp_enqueue_script('Myriad', get_stylesheet_directory_uri() . '/js/Myriad_Pro_700.font.js');
    wp_enqueue_script('Effects', get_stylesheet_directory_uri() .'/js/effects.js');
    
    ?>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
    	if (!document.getElementsByTagName) return false;
    	var sfEls1 = document.getElementById("catmenu").getElementsByTagName("li");
    	for (var i=0; i<sfEls1.length; i++) {
    		sfEls1[i].onmouseover=function() {
    			this.className+=" sfhover1";
    		}
    		sfEls1[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover1\\b"), "");
    		}
    	}
    		var sfEls1 = document.getElementById("menu").getElementsByTagName("li");
    	for (var i=0; i<sfEls1.length; i++) {
    		sfEls1[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls1[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>
    
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php //comments_popup_script(); // off by default ?>
    <?php
    if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
    wp_head(); ?>
    
    </head>
    
    <body>
    <div id="catmenucontainer">
    
    	<?php wp_nav_menu( array( 'container_id' => 'catmenu','theme_location' => 'primary','fallback_cb'=> '' ) ); ?>
    
    </div>
    <div id="wrapper">
    
    <div id="top"> 
    
    <div class="blogname">
    	<h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>"><?php bloginfo('name');?></a></h1>
    	<h2><?php bloginfo('description'); ?></h2>
    </div>
    
    <?php include (TEMPLATEPATH . '/topad.php'); ?>
    
    </div>
    
    <div id="foxmenucontainer">
    
    	<?php wp_nav_menu( array( 'container_id' => 'menu', 'theme_location' => 'secondary','fallback_cb'=> '' ) ); ?>
    
    </div>
    
    <div id="casing">

    Does someone know where to put the code, so I can call the search-box? Will after that edit the style.css myself.

    Thanks in advice

  16. RiDFiCK
    Member
    Posted 3 years ago #

    Sorry, the Website is: RiDFiCK

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags