Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

I need a search bar added on the header on a Rockwell Theme WordPress

Guys. I am building this site using Rockwell Theme from Theme Forest. The current widgets
setup doesn't allow me to add a search box on the header. Can you help me create a
CSS and PHP code for it.

Here is search PHP code now


<?php
get_header();
?>
<!-- /////////////////////////////////////////////////////////////////////// -->
<!-- // Container // -->
<!-- /////////////////////////////////////////////////////////////////////// -->
<div id="content_container">
<?php get_cat_title(); ?>
<div id="content_wrapper">
<?php include "templates/".get_cat_type()."/".get_cat_template().".php"; ?>
</div><!-- END div#content_wrapper -->
</div><!-- END div#content_container -->
<?php get_footer(); ?>

Here is the header PHP code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<?php if(is_singular()) wp_enqueue_script( 'comment-reply' );?>
<?php wp_enqueue_script("jquery"); // JQUERY including by wordpress ?>
<?php wp_head(); ?>

<?php
/***************************************************************************
* HEADER PART
**************************************************************************/
?>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/header/<?php echo get_header_template(); ?>.css' type='text/css'/>
<link rel="shortcut icon" href="<?php bloginfo('template_url');??>/favicon.ico" />
<?php

/***************************************************************************
* INCLUDE COMMON CSS FILES
**************************************************************************/
?>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/js/prettyphoto/css/prettyPhoto.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/global.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/style.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/sidebar/sidebars.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/comments/comments.css' type='text/css'/>

<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/templates/header/<?php echo get_header_template(); ?>.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/prettyphoto/js/jquery.prettyPhoto.js"></script>

<?php
/***************************************************************************
* SKIN PART
**************************************************************************/
$template_skin = get_option('ff_template_skin');
if( isset($_COOKIE['skin_changer_default']) )$template_skin = $_COOKIE['skin_changer_default'];
echo "<link rel='stylesheet' id='changeable_stylesheet' href='".get_bloginfo('template_url')."/skins/".$template_skin."/".$template_skin.".css' type='text/css'/>";
?>
<!-- <link rel='stylesheet' id="changeable_stylesheet" href='<?php echo get_bloginfo('template_url'); ?>/skins/<?php echo get_option('ff_template_skin').'/'.get_option('ff_template_skin'); ?>.css' type='text/css'/> -->

<?php
/***************************************************************************
* CONTENT PART
**************************************************************************/
require 'font-selector.php';
?>
<?php if(( get_option('ff_header_sub_menu_width') != 100 && get_option('ff_header_sub_menu_width') != '') || ( get_option('ff_header_top_menu_width') != 100 && get_option('ff_header_top_menu_width') != '')) {?>

<style type="text/css">
#header-1 #navigation li a {width: <?php echo get_option('ff_header_top_menu_width'); ?>px !important;}
#header-1 #navigation ul li ul li a {width: <?php echo get_option('ff_header_sub_menu_width'); ?>px !important;}

#header-2 #navigation ul li li a {width: <?php echo get_option('ff_header_sub_menu_width'); ?>px !important;}
#header-2 #navigation ul li li ul li a {width: <?php echo get_option('ff_header_sub_menu_width'); ?>px !important;}
#header-1 #navigation ul li ul li .sub-menu, #header-2 #navigation ul li ul li .sub-menu {margin-left: <?php echo (get_option('ff_header_sub_menu_width') + 20); ?>px !important; }
.sub-menu .has-sub-menu { background-position: <?php echo (get_option('ff_header_sub_menu_width') + 6); ?>px 17px !important;}
.sub-menu .has-sub-menu:hover { background-position: <?php echo (get_option('ff_header_sub_menu_width') + 6); ?>px -83px !important;}


</style><?php } ?>

<?php if(is_front_page()) { ?>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/home/home-1.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/home/message-1.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/<?php echo get_cat_type(); ?>/<?php echo get_cat_template(); ?>.css' type='text/css'/>
<?php if( get_option('ff_slider2_show') != 'false') { ?> <link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/slider/<?php echo get_slider_type();?>.css' type='text/css'/><?php } ?>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/jquery.easing.js"></script>
<script type="text/javascript">
var show_slider2_grid = '<?php echo get_slider_grid();?>';
var show_slider_title = '<?php echo get_slider_title();?>';
var slider_autoslide = '<?php echo get_option('ff_slider_autoslide')?>';
</script>
<?php if( get_option('ff_slider2_show') != 'false') { ?> <script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/templates/slider/<?php echo get_slider_type(); ?>.js"></script><?php } ?>
<?php }
else if(is_category() || is_search() || is_archive() || is_author() ) { ?>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/<?php echo get_cat_type(); ?>/<?php echo get_cat_template(); ?>.css' type='text/css'/>
<?php }
else if(is_single()) {
?>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/<?php echo get_single_cat_type(); ?>/<?php echo get_cat_single_template(); ?>.css' type='text/css'/>
<?php } ?>

<script type="text/javascript">
jQuery(document).ready(function($){
$('a[rel^="prettyPhoto"]').prettyPhoto({theme: '<?php echo get_option('ff_template_lightbox')?>',slideshow:5000, autoplay_slideshow:false, overlay_gallery:false});
$('.size-thumbnail, .size-medium, .size-large, .size-full').parent().prettyPhoto({theme: '<?php echo get_option('ff_template_lightbox')?>', autoplay_slideshow:false, overlay_gallery:false});
});
</script>

<title><?php if(is_home()) { echo bloginfo('name'); echo ' | '; echo bloginfo('description'); } else { echo wp_title(' | ', false, right); echo bloginfo('name'); } ?></title>



<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/main.js"></script>

<?php
if( get_option('ff_css') != '' ) {
echo '<style type="text/css">'.stripslashes(get_option('ff_css')).'</style>';
}
if( get_option('ff_tracking') != '' ) {
echo stripslashes(get_option('ff_tracking'));
}
?>
</head>
<body class="<?php echo get_stencil(); ?>">
<?php include "templates/header/".get_header_template().".php"; ?>

Here is the link to site if you need to see it...

http://visuallythinking.juliegoes2uganda.com

I can use some help soon so I can finish this website for JOhn. Mucho thanks.

Elle Gamboa

2012-07-20 by Elle Gamboa Jr.

Answers (7)

2012-07-20

Arnav Joy answers:

placed this form in the header.php where you want to show search box

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
</form>

Arnav Joy comments:

can you provide me header_template file

possibly it is under "templates/header/" folder

or find following line

<div class="contact_holder">
</div>

and place my above code as follows:-
<div class="contact_holder">
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s" class="assistive-text"><?php _e( 'Search', 'themename' ); ?></label>
<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'themename' ); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'themename' ); ?>" />
</form>
</div>

Elle Gamboa Jr. comments:

Arnav..where do u position this search bar. do u also need the css code for position/
Here is header PHP again?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<?php if(is_singular()) wp_enqueue_script( 'comment-reply' );?>
<?php wp_enqueue_script("jquery"); // JQUERY including by wordpress ?>
<?php wp_head(); ?>

<?php
/***************************************************************************
* HEADER PART
**************************************************************************/
?>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/header/<?php echo get_header_template(); ?>.css' type='text/css'/>
<link rel="shortcut icon" href="<?php bloginfo('template_url');�?>/favicon.ico" />
<?php

/***************************************************************************
* INCLUDE COMMON CSS FILES
**************************************************************************/
?>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/js/prettyphoto/css/prettyPhoto.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/global.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/style.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/sidebar/sidebars.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/comments/comments.css' type='text/css'/>

<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/templates/header/<?php echo get_header_template(); ?>.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/prettyphoto/js/jquery.prettyPhoto.js"></script>

<?php
/***************************************************************************
* SKIN PART
**************************************************************************/
$template_skin = get_option('ff_template_skin');
if( isset($_COOKIE['skin_changer_default']) )$template_skin = $_COOKIE['skin_changer_default'];
echo "<link rel='stylesheet' id='changeable_stylesheet' href='".get_bloginfo('template_url')."/skins/".$template_skin."/".$template_skin.".css' type='text/css'/>";
?>
<!-- <link rel='stylesheet' id="changeable_stylesheet" href='<?php echo get_bloginfo('template_url'); ?>/skins/<?php echo get_option('ff_template_skin').'/'.get_option('ff_template_skin'); ?>.css' type='text/css'/> -->

<?php
/***************************************************************************
* CONTENT PART
**************************************************************************/
require 'font-selector.php';
?>
<?php if(( get_option('ff_header_sub_menu_width') != 100 && get_option('ff_header_sub_menu_width') != '') || ( get_option('ff_header_top_menu_width') != 100 && get_option('ff_header_top_menu_width') != '')) {?>

<style type="text/css">
#header-1 #navigation li a {width: <?php echo get_option('ff_header_top_menu_width'); ?>px !important;}
#header-1 #navigation ul li ul li a {width: <?php echo get_option('ff_header_sub_menu_width'); ?>px !important;}

#header-2 #navigation ul li li a {width: <?php echo get_option('ff_header_sub_menu_width'); ?>px !important;}
#header-2 #navigation ul li li ul li a {width: <?php echo get_option('ff_header_sub_menu_width'); ?>px !important;}
#header-1 #navigation ul li ul li .sub-menu, #header-2 #navigation ul li ul li .sub-menu {margin-left: <?php echo (get_option('ff_header_sub_menu_width') + 20); ?>px !important; }
.sub-menu .has-sub-menu { background-position: <?php echo (get_option('ff_header_sub_menu_width') + 6); ?>px 17px !important;}
.sub-menu .has-sub-menu:hover { background-position: <?php echo (get_option('ff_header_sub_menu_width') + 6); ?>px -83px !important;}


</style><?php } ?>

<?php if(is_front_page()) { ?>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/home/home-1.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/home/message-1.css' type='text/css'/>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/<?php echo get_cat_type(); ?>/<?php echo get_cat_template(); ?>.css' type='text/css'/>
<?php if( get_option('ff_slider2_show') != 'false') { ?> <link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/slider/<?php echo get_slider_type();?>.css' type='text/css'/><?php } ?>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/jquery.easing.js"></script>
<script type="text/javascript">
var show_slider2_grid = '<?php echo get_slider_grid();?>';
var show_slider_title = '<?php echo get_slider_title();?>';
var slider_autoslide = '<?php echo get_option('ff_slider_autoslide')?>';
</script>
<?php if( get_option('ff_slider2_show') != 'false') { ?> <script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/templates/slider/<?php echo get_slider_type(); ?>.js"></script><?php } ?>
<?php }
else if(is_category() || is_search() || is_archive() || is_author() ) { ?>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/<?php echo get_cat_type(); ?>/<?php echo get_cat_template(); ?>.css' type='text/css'/>
<?php }
else if(is_single()) {
?>
<link rel='stylesheet' href='<?php echo get_bloginfo('template_url'); ?>/templates/<?php echo get_single_cat_type(); ?>/<?php echo get_cat_single_template(); ?>.css' type='text/css'/>
<?php } ?>

<script type="text/javascript">
jQuery(document).ready(function($){
$('a[rel^="prettyPhoto"]').prettyPhoto({theme: '<?php echo get_option('ff_template_lightbox')?>',slideshow:5000, autoplay_slideshow:false, overlay_gallery:false});
$('.size-thumbnail, .size-medium, .size-large, .size-full').parent().prettyPhoto({theme: '<?php echo get_option('ff_template_lightbox')?>', autoplay_slideshow:false, overlay_gallery:false});
});
</script>

<title><?php if(is_home()) { echo bloginfo('name'); echo ' | '; echo bloginfo('description'); } else { echo wp_title(' | ', false, right); echo bloginfo('name'); } ?></title>



<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/main.js"></script>

<?php
if( get_option('ff_css') != '' ) {
echo '<style type="text/css">'.stripslashes(get_option('ff_css')).'</style>';
}
if( get_option('ff_tracking') != '' ) {
echo stripslashes(get_option('ff_tracking'));
}
?>
</head>
<body class="<?php echo get_stencil(); ?>">
<?php include "templates/header/".get_header_template().".php"; ?>

2012-07-20

Manoj Raj answers:

You have the search function now at the footer right?

Manoj Raj comments:

At the right bottom of the footer, you have a search box. Just copy place the footer search thing and paste it where you want it... Paste your footer.php thing here

Elle Gamboa Jr. comments:

manoj..but I want the words ..search this site to show on the header to the far right of the logo and above the line
of the navigation bar....

Manoj Raj comments:

Just paste the following code in your header area inside class contact holder(for now)

<div class="right">
<div class="footer2_search">
<form method="get" action="#">
<p><input name="s" type="text" onfocus="if (this.value == 'Enter keywords..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter keywords..';}" value="Enter keywords.." class="footer2_search_input">
<input type="submit" class="footer2_search_button" value="."></p>
</form>
</div><!-- END div.footer2_search -->
</div>

Then you need to add styles accordingly...

Add the following for now as it replicates the footer search bar

.contact_holder .right { float: right; padding: 21px 0 22px 20px; width: 220px; }
.contact_holder .right p { padding: 0; margin: 0;}
.contact_holder .footer2_search_button { background-image: url(gfx/footer2_search.png) }
.contact_holder .footer2_search { position: relative;}
.contact_holder .footer2_search_input { border: none; font-size: 10px; width: 200px; font-weight: normal;}
.contact_holder .footer2_search_button { width: 11px; height: 12px; display: block; background-repeat: no-repeat; background-color: transparent; background-position: center center; border: none; outline: none; cursor: pointer; text-indent: -9999px; position: absolute; top:0px; right: 0px; padding: 10px;}

Manoj Raj comments:

For changing the words to "Search this site..." to the input area

add the following


<div class="right">

<div class="footer2_search">

<form method="get" action="#">

<p><input name="s" type="text" onfocus="if (this.value == 'Search this site...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this site...';}" value="Search this site..." class="footer2_search_input">

<input type="submit" class="footer2_search_button" value="."></p>

</form>

</div><!-- END div.footer2_search -->

</div>

Elle Gamboa Jr. comments:

Manoj...thanx for the suggestion but I will add the codes tomorrow. one am in the morning in los angeles.
I am falling asleep. I will be up again in 7 hours. sorry. I am really tired. thanks.

elle

Manoj Raj comments:

Modify the ".contact_holder .footer2_search_input "css element as following

.contact_holder .footer2_search_input { font-size: 10px; width: 154px; font-weight: normal; background: whiteSmoke; border: 1px solid #d0d0d0; padding: 4px; height: 20px;}

You can have your background image in place of background color if you want...

Manoj Raj comments:

Alright Elle.

I have styled the things better than the existing one. You can have a look and play with the CSS to create your own style...

Replace

<div class="contact_holder">.</div>

in your header with

<div class="contact_holder">
<div class="right">
<div class="footer2_search">
<form method="get" action="#">
<p><input name="s" type="text" onfocus="if (this.value == 'Search this site...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this site...';}" value="Search this site..." class="footer2_search_input">
<input type="submit" class="footer2_search_button" value="."></p>
</form>
</div>
</div>
</div>

And then add the following CSS to your global.css file

.contact_holder .right{ float: right; padding: 21px 0 22px 20px; width: 200px; }
.contact_holder .right p{ padding: 0; margin: 0;}
.contact_holder .footer2_search_button { background-image: url("/wp-content/themes/rockwell_v1.7.1/skins/white/gfx/footer2_search.png");}
.contact_holder .footer2_search{ position: relative;}
.contact_holder .footer2_search_input { font-style: italic; font-size: 12px; width: 174px; font-weight: normal; background: whiteSmoke; border: 1px solid #d0d0d0; padding: 4px; height: 20px;}
.contact_holder .footer2_search_button{ width: 11px; height: 12px; display: block; background-repeat: no-repeat; background-color: transparent; background-position: center center; border: none; outline: none; cursor: pointer; text-indent: -9999px; position: absolute; top: 5px; right: 20px; padding: 10px;}

Manoj Raj comments:

Hi Elle,

Have you tried my code? Let me know whether you are okay with the final version? I tried it in my domain and it worked.

Elle Gamboa Jr. comments:

Manoj..sorry for late reply. almost noon time here in orange county, california. I am waiting for the new template
from freshface the gusy who created the rockwell template.
elle

2012-07-20

Martin Pham answers:

Hi calelle619,
Contact me ([email protected]) I will help you add it.

2012-07-20

Jatin Soni answers:

Okay this is finally done and tested and working fine without any issue ( I believe you are using Header 2 set from theme option)

<strong>SEE THE ATTACHED SCREEN SHOT</strong>

In your rockwell theme

go to "rockwell theme folder/templates/header/" and open header-2.php

than find below code

<div class="contact_holder"><?php echo get_option('ff_header3_contact'); ?></div>

and paste below code after that

<div class="h-box">
<div class="search">
<?php get_search_form(); ?>
</div>
</div>

now from the same location "rockwell theme folder/templates/header/" open header-2.css

and at the end of css place below code

/* header search form */
#header-2 .h-box{
width:100%;
display:block;
clear:right;
margin:5px 0;
}
#header-2 .search{
width:230px;
float:right;
}

Here you go. Now you should be able to see search box in header right corner.

Elle Gamboa Jr. comments:

morning Jatin..its 916 am...I will try your method.

elle gamboa
san diego

2012-07-21

lontiellshelt answers:

The Liebo authentic 2011 New Spring and Autumn printing base rou - $43.00 :

2012-07-22

180 180 answers:

Imported ceramic authentic watches of the female form female for - $199.00 :

2012-07-22

lbridalbridal answers:

Kasman / 2011 Casima nova velocidade de corrida cronógrafo relóg - $278.00 :