Law & Legal & Attorney Wills & trusts

How to Create a Fluid Width Header for WordPress

    • 1). Create a file in Notepad or a code editor and save it as "header.php". Copy and paste this code in the file to start your header file:

      <!DOCTYPE html>

      <html <?php language_attributes(); ?>>

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <meta charset="<?php bloginfo('charset'); ?>">

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

      <title><?php bloginfo('name'); ?></title>

      <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

      <link rel="stylesheet" href="/links/?u=<?php bloginfo('stylesheet_url'); ?>" media="screen">

      <link rel="pingback" href="/links/?u=<?php bloginfo('pingback_url'); ?>">

      <?php wp_head(); ?>

      </head>

      <body <?php body_class(); ?>>

      This code uses HTML5Shim to add HTML5 support when visitors load your blog in non-HTML5 browsers, namely Internet Explorer 8 and below.

    • 2). Place this code inside your "header.php" file, after the opening "<body>" tag:

      <header>

      <h1><a href="/links/?u=<?php bloginfo('wp_url'); ?>" title="<?php bloginfo('name'); ?>"><span><?php bloginfo('name'); ?></span></a></h1>

      </head>

      Note the use of "bloginfo()" to output the home page URL and the blog name or title. This function is pulling information from the database that runs WordPress.

    • 3). Add the tagline to your header, whether or not you want to show it to visitors:

      <h2><span><?php bloginfo('description'); ?></span></h2>

      Save your file and upload it to "/wp-content/themes/theme_name/" on your server via FTP.

    • 4). Log in to WordPress and navigate to "Editor" under the "Appearance" menu in the sidebar. Load the "style.css" file by clicking on its link on the right side of the "Edit Themes" screen. Go to the bottom of the file and write a new style rule for the "<header>" tags:

      header {

      }

      Tag-type selectors do not need any prefixes, so "header" is the correct way to select those tags.

    • 5). Add a width to the header, but use a percentage value instead of a pixel value. This will make your header width fluid:

      header {

      width: 75%;

      }

    • 6). Add these two style rules to replace the text title and tagline with a logo:

      header h1 a {

      background: url(path/to/logo.png) center no-repeat;

      width: 200px;

      height: 150px;

      display: block;

      }

      header span {

      margin-left: -999em;

      }

      Change the path to the logo to match your own and change the width and height to that of your logo. You must use "display: block" when adding dimensions to "<a>" tags. The "margin-left: -999em" code shifts your text off-screen without removing it from the sight of search engine crawlers.



Leave a reply