header.php with search and social icons built in


/ Published in: HTML
Save to your folder(s)

This is the header.php file from Soul Care Aesthetics - complete with CSS and social icons spaces


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
  3. <head profile="http://gmpg.org/xfn/11">
  4. <meta http-equiv="Content-Type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
  5. <title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
  6. <link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" type="text/css" media="screen" />
  7. <!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
  8. <!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
  9. <?php if(WP_VERSION < 3.0): ?>
  10. <link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
  11. <link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
  12. <?php endif; ?>
  13. <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
  14. <?php
  15. remove_action('wp_head', 'wp_generator');
  16. wp_enqueue_script('jquery');
  17. if ( is_singular() && get_option( 'thread_comments' ) ) {
  18. wp_enqueue_script( 'comment-reply' );
  19. }
  20. wp_head(); ?>
  21. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
  22. </head>
  23. <body <?php if(function_exists('body_class')) body_class(); ?>>
  24. <div id="main">
  25. <div class="cleared reset-box"></div>
  26.  
  27. <div class="header">
  28. <div class="header-wrapper">
  29. <div class="header-inner">
  30. <div class="headerobject"><a href="<?php echo get_option('home'); ?>/"><img src="<?php echo get_bloginfo('stylesheet_directory'); ?>/images/header-object.png" alt="Soul Care Aesthetics covering Staffordshire and the West Midlands" title="Soul Care Aesthetics" /></a>
  31.  
  32. </div>
  33.  
  34. <!-- Contact Details -->
  35. <div id="contact">
  36.  
  37. <div id="search">
  38. <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
  39. <input type="text" value="Search this website... " name="s" id="searchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" class="art-searchbox" />
  40. <input type="submit" id="searchbutton" value="SEARCH" />
  41. </form>
  42.  
  43. </div> <!-- #end of search -->
  44.  
  45. <div id="contact-areas"><h2>Soul Care Aesthetics</h2>Cheslyn Hay, Great Wyrley, Bloxwich, Essington, Cannock, Rugeley and Wolverhampton</br>
  46. <div id="contact-details"><span>Tel:</span> 07501 459 453</br><span>Email:</span> [email protected]
  47. </div> <!-- end of #contact-areas -->
  48. </div> <!-- end of #contact-details -->
  49.  
  50. <div id="social">
  51. <ul>
  52. <li><a href="http://www.facebook.com" target="_blank" title="Facebook"><img src = '<?php bloginfo('template_directory'); ?>/images/facebook.png' alt = 'Picture' /></a></li>
  53. <li><a href="http://www.google.com" target="_blank" title="Google"><img src = '<?php bloginfo('template_directory'); ?>/images/google.png' alt = 'Picture' /></a></li>
  54. <li><a href="http://www.linkedin.com" target="_blank" title="LinkedIn"><img src = '<?php bloginfo('template_directory'); ?>/images/linkedin.png' alt = 'Picture' /></a></li>
  55. <li><a href="http://www.google.com" target="_blank" title="RSS"><img src = '<?php bloginfo('template_directory'); ?>/images/rss.png' alt = 'Picture' /></a></li>
  56. </ul>
  57.  
  58. </div> <!-- end of #social -->
  59. </div> <!-- end #contact div -->
  60.  
  61. <div class="logo">
  62. <?php if(theme_get_option('theme_header_show_headline')): ?>
  63. <h1 class="logo-name"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
  64. <?php endif; ?>
  65. <?php if(theme_get_option('theme_header_show_slogan')): ?>
  66. <h2 class="logo-text"><?php bloginfo('description'); ?></h2>
  67. <?php endif; ?>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72.  
  73. <div class="cleared reset-box"></div>
  74. <div class="nav">
  75. <div class="nav-l"></div>
  76. <div class="nav-r"></div>
  77. <div class="nav-outer">
  78. <div class="nav-wrapper">
  79. <div class="nav-inner">
  80. <?php
  81. echo theme_get_menu(array(
  82. 'source' => theme_get_option('theme_menu_source'),
  83. 'depth' => theme_get_option('theme_menu_depth'),
  84. 'menu' => 'primary-menu',
  85. 'class' => 'hmenu'
  86. )
  87. );
  88. ?>
  89.  
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. <div class="cleared reset-box"></div>
  95. <div class="sheet">
  96. <div class="sheet-cc"></div>
  97. <div class="sheet-body">
  98.  
  99. <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
  100.  
  101.  
  102.  
  103. CSS Here:
  104. /*begin page content styles*/
  105. #col1 {
  106. width: 60%;
  107. float: left;
  108. }
  109.  
  110. #col2 {
  111. width: 36%;
  112. float: right;
  113. margin-left: 10px;
  114. }
  115.  
  116. /* begin search */
  117. #search {
  118. position: absolute;
  119. margin-top: 0;
  120. bottom: 175px;
  121. }
  122.  
  123. .searchbox {
  124. background:#FFF !important;
  125. color: #004b5c;
  126. font-weight: normal;
  127. padding:2px 0px 2px 2px;
  128. margin:0 2px 0 10px;
  129. border:1px solid #6B6B6B;
  130. width:140px;
  131. display: inline;
  132. position: relative;
  133. font-size: 10px;
  134. }
  135.  
  136. #searchbutton {
  137. font-weight: bold;
  138. background: #004b5c;
  139. color: #f1f6f5;
  140. margin:0;
  141. padding:1px 2px 1px 2px;
  142. border:1px solid #000000;
  143. display:inline;
  144. width:auto;
  145. cursor:pointer;
  146. position: relative;
  147. font-size: 10px;
  148. }
  149.  
  150. /* end Search */
  151.  
  152. div.staffname {
  153. padding-bottom: 6px;
  154. padding-top: 0;
  155. }
  156.  
  157. div.blurb {
  158. margin-top: 10px;
  159. }
  160.  
  161. #contact {
  162. width: 300px;
  163. position: absolute;
  164. left: 677px;
  165. height: 120px;
  166. margin-top: 88px;
  167. }
  168.  
  169. div#contact-areas h2 {
  170. font-size: 16px;
  171. font-weight: bold;
  172. line-height: 23px;
  173. }
  174.  
  175. div#contact-areas {
  176. display: inline;
  177. float: right;
  178. color: #004b5c;
  179. font: 12px/14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  180. position: relative;
  181. }
  182.  
  183. div#contact-details span {
  184. font-weight: bold;
  185. font-size: 12px;
  186. }
  187.  
  188. div#contact-details {
  189. display: inline;
  190. float: right;
  191. width: 300px;
  192. right: 0;
  193. bottom: -15px;
  194. height: 10px;
  195. color: #004b5c;
  196. font: 17px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  197. position: relative;
  198. }
  199.  
  200. #social {
  201. float: left;
  202. width: 200px;
  203. position: absolute;
  204. bottom: 120px;
  205. }
  206.  
  207. #social ul {
  208. height: 50px;
  209. width: 50px;
  210. display: inline;
  211. position: relative;
  212. }
  213.  
  214. #social ul li {
  215. float: left;
  216. height: 50px;
  217. margin: 0px;
  218. position: relative;
  219. }
  220.  
  221. #social ul li a {
  222. float: left;
  223. height: 50px;
  224. margin: 0px;
  225. position: relative;
  226. }
  227.  
  228. #social ul li a:hover {
  229. top: 5px;
  230. }
  231.  
  232. #social img {
  233. float: left;
  234. height: 50px;
  235. margin: 0px;
  236. width: 50px;
  237. }
  238.  
  239. #offers a img {
  240. padding: 0;
  241. margin: 0;
  242. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.