How to Design a WordPress Header

Your WordPress header gives visitors a preview of what your website offers.

The WordPress header is the top section of your blog or website where your logo or title is located along with other components such as the navigation menu and search box. Some WordPress themes come with options to change the color and image on the header and allow you to customize your site menu. If you have a self-hosted WordPress blog, you can customize the header (like other sections of the blog) by adding or changing code within your WordPress theme's header template.

Instructions

1. Create a mock-up of your design. You can use a graphics application such as Photoshop or PaintShop Pro to fully visualize what you want your header to look like.

2. Open Notepad or your preferred text editor and type in the basic framework of your header. For example, a basic framework for a header that includes the site name, description and site navigation should look like this:

   <div id ="header">

   <h1>

   <a href="<?php bloginfo('URL'); ?>"><?php bloginfo('name'); ?></a>

   </h1>

   <div class="description">

   <?php bloginfo('description'); ?>

   </div>

   <ul class="nav">

   <li ><a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('name'); ?>">Home</a></li>

   <?php wp_list_pages('title_li='); ?>

   </ul>

   </div>

   Save this code in a file named "header.php".

3. Add your header styles in the "styles.css" file of your WordPress theme. This can be found within your theme's folder. Add a background color, define fonts and set layouts for each section. For example, a header with a background image and fonts written in Courier will have the following CSS code:

   #header {

   background: URL("/images/headerimage.jpg") no-repeat bottom center;

   font-family: Courier, serif;

   font-weight: bold;

   }

4. Attach the style sheet to your "header.php" file by using the following code:

   <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

   Save and upload the "header.php" file to your WordPress theme folder.

References

• Wordpress.org: Designing Headers