embarrasing noob Q: how to add a header i&#8217;ve created!

(@chris777uk)

hi shadoukat

thanks for the quick reply, it has a sidebar header but not a top of the site header – see
http://www.chrissayburn.com

thanks

chris.

(@skaufmann)

Check your index.php and see if the first line contains <?php get_header();?>

This tag calls the file in your template called header.php. If your site doesn’t have one or either of these then you need to add the tag in your index.php and create the header.php file.

It’s likely you have both of these as the header.php page is where all you CSS, META data and the like goes. In this file you will notice the last HTML tag or almost last will be <BODY>. After this tag you should be able to create a table the width you want and insert your header image there.

Use something like this. You may need to further optimize it as this is the most basic table code:

<TABLE>
   <TR>
      <TD>(Insert your image tag here)</TD>
   </TR>
<TABLE>

This will insert your header image at the very top of every page in your template.

771561

Since you are new to wordpress, I suggest you try to choose a theme that currently has a regular header and you can upload your personalized header to overwrite the default one without having to change your code.

If you wish to still use the theme you currently have, can you please post the current code that you have in your style.php? it will be easier to see what you have going on and how to help you.

Thread Starter

(@chris777uk)

/*
Theme Name: Upstart Blogger Minim
Theme URI: http://www.upstartblogger.com
Description: A minimalist, <b>widgetized</b> theme from <a href="http://www.upstartblogger.com/" title="Upstart Blogger">Upstart Blogger</a>.
Author: Robert Ellis
Author URI: http://www.upstartblogger.com
Version: 1.0
License: Creative Commons Attribution-Share Alike 3.0 (http://creativecommons.org/licenses/by-sa/3.0/). Feel free to make any changes, but please keep a link back to Upstart Blogger in your sidebar or footer.
*/

body {
	background-color: #fff;
	font-family: Arial, Helvetica, Geneva, sans-serif;
	padding: 20px;
	font-size: .88em;
	line-height: 1.5em;
	color: #444444;
}

#container {
	width: 840px;
}

#sidebar {
	width: 336px;
	float: leftt;
	font-size: .8em;
	line-height: 1.4em;
	padding: 0 10px 25px 0;
	}

#sidebarleft {
	width:180px;
	float: left;
}

#sidebarright {
	width: 125px;
	float: right;
}

#footer {
	width:180px;
	float: left;
	clear: both;
	font-size: .64em;
}

#entries {
	width: 468px;
	float: right;
	}

.post {
	margin-bottom: 1em;
}

a {
	color: #6699cc;
	text-decoration: none;
	font-weight: bold;

}

a:link h3 {
	color: #951400;
	border: none;
}

a:link img {
	border: none;
}

ul {
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
	margin-top: 0px;
}

li.linkcat {
	list-style-type: none;
}

img {
	border: none;
}

.imgleft {
	float:left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.imgright {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

img.frame {
	padding: 2px;
	border: solid 1px #DEE4E5;
}

h1 {
	font-size: 2em;
	line-height: 1em;
	text-transform: uppercase;
}

.title {
	border-bottom: 1px solid silver;
}

h3 {
	font-weight: bold;
	font-size: 1.2em;
	text-transform: uppercase;
	margin-bottom: .2em;
	margin-top: 2em;
	letter-spacing: .2em;
	color: #34353e;
	border-bottom: 1px solid silver;
}

.post h3 {
	border-bottom: none;
	letter-spacing: normal;
	margin-bottom: -.5em;
}

blockquote {
	background-color: #f3f3f3;
	padding: 10px;
	margin: 15px 0;
}

/* Begin Comments*/

.comments_tiny {
	color: #b8b8b8;
	border-bottom: 1px solid silver;
}

.alt {
	margin: 0;
	padding: 10px;
	background: #f3f3f3;
}

.commentlist {
	margin-top: 0px;

}

.commentlist li {
	margin: 5px 0 0 0px;

}

.commentlist p {
	margin: 10px 5px 10px 0;
}

#commentform p {
	margin: 5px 0;
}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
}

.commentmetadata {
	margin: 0;
	display: block;
}

li.comment {
	font-weight: bold;
	padding: 10px;
	list-style: none;
}

.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
}

#commentform {
	margin-top: 30px;
}

.commentmetadata {
	font-weight: normal;
}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #777;
}

.content {
	margin-bottom: 25px;
	padding-left: 5px;
	font-weight: normal;
}

.commentbox {
	width: 100%;
	height: 100px;
}

/* End Comments */

thanks

Thread Starter

(@chris777uk)

aldo thanks skaufmann, it does have the <?php get_header();?> in the index, and there is a header.php, when i tried to add your code after the <body> end section it just came up with the written code on the site, did i link the image wrong? i did url=(images/banner.png)

sorry to be such a noob, ive managed to do everything else!

(@skaufmann)

Your code should look something like this:

<TABLE>
   <TR>
      <TD><img src="http://www.chrissayburn.com/image.jpg"></TD>
   </TR>
<TABLE>

Of course the URL to the image needs to be set properly.

Also it looks like your theme is using CSS to lay your site out which is why it’s getting stuffed to the left. Possibly try the following:

<TABLE width=840px>
   <TR>
      <TD><img src="http://www.chrissayburn.com/image.jpg"></TD>
   </TR>
<TABLE>

This should tell the table to be a certain width and span across the whole top keeping everything else below.

(@skaufmann)

Also check to see if <div id="container"> is in your header. You’ll want to add the TABLE code I gave you after <div id="container">

Thread Starter

(@chris777uk)

thanks again for the help… its stil not showing any image
am i right in thinking you do mean post the code in the header.php?

here is my code…

<!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<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'); ?>" />

<?php wp_head(); ?>
</head>
<body>
<TABLE width=840px>
   <TR>
      <TD><img src="/images/banner.png"></TD>
   </TR>
<TABLE>

(@skaufmann)

There is no image at this location.
http://www.chrissayburn.com/images/banner.png

Navigating to this image should give you the image, instead it a broken URL.

Thread Starter

(@chris777uk)

its in my wordpress theme’s folder /images/banner.png 🙂

man it hurts to be this noobish at this!