Add a searchbox to navigation bar
Viewing 15 replies - 1 through 15 (of 15 total)
-
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>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#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>Oh yeah!
I have completed this work !
Visit the demo http://w3.akasuna.com/chinmoy, thank you for your help !
where to put the above code??
Hi, cascd88
put the above code into “style.css” and “header.php”
I followed intsructions the best I could, I have it in there, it looks terrible, thoughts for a newbie?
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.
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">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">thank you!
how do i do that in thesis ?
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!
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
Sorry, the Website is: RiDFiCK
Viewing 15 replies - 1 through 15 (of 15 total)
- The topic ‘Add a searchbox to navigation bar’ is closed to new replies.