• Registered: 2009-02-21
  • Posts: 7

Topic: Custom Header for Wordpress Theme

I am following a video series I purchased on KIllersites to design my own Wordpress theme. It worked great but he did not cover how to insert a custom designed header  into a custom Wordpress theme. Can any one help as to the proper php markup as well as how to reference my custom header.

Thanks!!!

  • Susie
  • Advanced Member
  • Offline
  • Gender: Female
  • From: Columbus, OH
  • Registered: 2008-12-19
  • Posts: 3,027

Re: Custom Header for Wordpress Theme

The header is just inserted with XHTML and CSS.  There's no special trick.  And usually, it goes in the header.php file.  If you still need help, maybe you could post the code you have so far or a link to your page?

  • Registered: 2009-02-21
  • Posts: 7

Re: Custom Header for Wordpress Theme

HI:

Here is the header.php markup I have so far. Where do I insert the markup for my custom designed header?

Thanks!!

<!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">


<html>

   <head>


<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

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


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


    <?php wp_head(); ?>



   </head>

<body>
<div class= "canvas">
    <div class= "header">
       <h1><a href="<?php echo get_option('home'); ?>/"> <?php bloginfo('name');?></a></h1>
       <h2> <?php bloginfo('description');?></h2>


<div class="nav">


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



       </div>

    </div>

  • Susie
  • Advanced Member
  • Offline
  • Gender: Female
  • From: Columbus, OH
  • Registered: 2008-12-19
  • Posts: 3,027

Re: Custom Header for Wordpress Theme

Well, I would put it here:

<div class= "header">
       <h1><a href="<?php echo get_option('home'); ?>/"> <?php bloginfo('name');?></a></h1>
       <h2> <?php bloginfo('description');?></h2>

       <img src=header-imagename.jpg alt="" />

      <div class="nav">
      <?php   wp_list_pages('title_li=');?>
      </div>
</div>

And then you'll have to do some CSS work on the blog name/description to either display them on top of your header image or to hide them behind it.

Last edited by Susie (2009-07-11 08:26:38)