Adding headers and footers

To your wordpress blog using serif webplus

Adding headers and footers to your wordpress blog using serif webplus

Adding headers and footers to your wordpress blog using serif webplus

Before we start here’s an example of wordpress blog that has had webplus made headers and footers added to them

1, http://fluxcomputerrepair.com/computer-repair-blog-covering-computer-repair-services-for-home-and-business/

Lets assume that you already know how to install a wordpress blog onto your server if not here is an article written by Brian from the serif forum

http://www.scribd.com/doc/46937454/Installing-and-Integrating-WordPress-With-WebPlus

also you can view the Q&A section here from the forum

http://forums.serif.com/showthread.php?t=84362&highlight=wordpress

 

Quick note:

You can add your header and footer to most in fact probably all wordpress themes apart from the ones that have the word RESPONSIVE in the description,  the code in your theme may look a little different but you will still be editing the same files as i show you below

 

Good luck

 

This tutorial will demonstrate how to add your header and footer to the default theme Twenty Ten

default1

 

That theme comes pre-installed when you install wordpress, any other theme can be used but be warned some themes can be more complicated than others to do.

—————————————————————————————————————————————————

 

First of all lets remove all the crap that we don’t need like the header image and footer

Login to your admin section of your wordpress account and on the left navigate down to appearance and there you will see the word Header (click it)

 

Your admin section will look slightly different than this one as the newest version of WordPress has a slightly different layout

editor5

A new page will open and near the bottom you will see the button named Remove Header Image click that and save

————————————————————————————————————————————————————–

Next lets remove the Proudly powered by WordPress. link in the footer

Follow the steps above but now click Editor now on the right you will see a list of  different pages you can edit you now need to click on the Footer.php a new screen will now open with a load of code but don’t worry you don’t have to be a super geek to what we are going to do today

You now have to locate this bit of code once you have delete it and save

<div id=”site-generator”> <?php do_action( ‘twentyten_credits’ ); ?> <a href=”<?php echo esc_url( __( ‘http://wordpress.org/’, ‘twentyten’ ) ); ?>” title=”<?php esc_attr_e( ‘Semantic Personal Publishing Platform’, ‘twentyten’ ); ?>” rel=”generator”><?php printf( __( ‘Proudly powered by %s.’, ‘twentyten’ ), ‘WordPress’ ); ?></a> </div><!– #site-generator –>
</div><!– #colophon –> </div><!– #footer –>

You are now ready to add the header and footer from your webplus site, this is where it gets a bit complicated so take your bloody time or just go and pester Mick on the Irc channel if you get stuck 🙂

————————————————————————————————————————————————————–

Ok this is the site that we are going to extract the header and footer from and add those to the blog

This can be seen at http://seriftemplates.gimboo.co.uk/serif-webplus-templates.html

gimboo-design2

 

First of all open your site in webplus and add a new link in the navagation bar to your blog

blog-link1

 

As you can see the link is an absolute link that’s the full address including  http:// of your wordpress blog not blog.html the full address, also keep the rest of the details the same as i have above

 

Now your header will have a link to the blog like the image below, if everything looks correct upload your modified site to the normal place on your server

 

header1

————————————————————————— ————————————————————————————-

[to_like id=”1234″]

Now for the tricky part

The tools that you will need are

1, an external editor like Dreamweaver/ coffee cup ( download) or notepad which comes installed in every version of windows

2, a big bag of strong coffee

3, defiantly no kids running around screaming

[to_like]

In webplus you now need to make a new page just with your header on it and name it header.htmlthen make the page height the same height as the header ( see below)

 wp-just-headder

 

Next do exactly the same just for the footer and name it (footer.html) once you have completed the header and footer you now have to publish your header and footer pages to a folder on your desktop ie:

1, Make a folder on your desktop named head-foot

2, Go back into webplus and publish the header and footer to the new folder on your desktop named head-foot like this

3, Click File

4, Click Publish File

5, Click Publish to disk Folder

6, Click Choose folder

7, Locate new folder on destop named head-foot

8, Click Ok ok etc etc

Now your header and footer has been published in the head-foot folder on your desktop

——————————————————————————————————————————————————

Open the folder on your desktop and right click on the header.html and open that with which ever editor you are using.

Ok now opened in your editor you will see the html for the header so we dont get mixed up with which code we need lets delete some

Delete anything that has a  <meta> tag or < title > tag and the Doc type at the top, so for example on the header i am using this will be deleted

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html lang=”en”><head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″><meta name=”Generator” content=”Serif WebPlus X4″><title>header</title>

<meta name=”description” content=”.”>

<meta name=”keywords” content=”” />

 

Next you will have to change evey link in the header to an absolute link so for example if you have

<img src=”wpimages/wp5dfa1fbb.jpg” width=”420″

you will need to change it to

<img src=”http://your-site/wpimages/wp5dfa1fbb.jpg” width=”420″

The reason for this is that all images and scripts used for the header are not in the same directory/ folder that your blog is stored in,  you will need to do this for every link and when i say EVERY that means EVERY link otherwise it will NOT work.

There are other ways to do this but if you know that there are other ways I really doubt that you need this tutorial

 

Now go back into the wordpress admin and locate Editor as discussed earlier then click Header.php

next you need to add the css and any links to external stylesheets/ javascript etc  from the webplus header so anything above the </head> tag needs to be copied then inserted into the header.php

 

Below is the code that i need for my header

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/wpscripts/jsNavBarFuncs.js”></script>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/wpscripts/wp_navbar_menub.js”></script>

<link rel=”stylesheet” href=”http://gimboo.co.uk/wp/wpscripts/wp_navbar_menub_H1.css” type=”text/css”>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/customnavtree5.js”></script>

<style type=”text/css”>

<!–body{margin: 0px; padding: 0px;}

a:link {color: #2c3651;}

a:visited {color: #1f5b8b;

}a:hover {color: #2c3651;

}a:active {color: #2c3651;}

 

.Body-P        {        margin:0.0px 0.0px 12.0px 0.0px; text-align:center; font-weight:400;

}

.Body-C        {        font-family:”Georgia”, serif; font-size:48.0px; line-height:0.92em;         color:#6b6b6b;

}

.Body-C0        {        font-family:”Georgia”, serif; font-size:15.0px; line-height:1.20em;         color:#6b6b6b;

}

/*Master Page StyleSheet*/

–>

</style>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/wpscripts/jspngfix.js”></script>

<script type=”text/javascript”><!–var blankSrc = “wpscripts/blank.gif”;–></script>

 

Before you copy the code remove the crap which is in bold above so you end up with something like this

 

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/wpscripts/jsNavBarFuncs.js”></script>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/wpscripts/wp_navbar_menub.js”></script>

<link rel=”stylesheet” href=”http://gimboo.co.uk/wp/wpscripts/wp_navbar_menub_H1.css” type=”text/css”>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/customnavtree5.js”></script>

<style type=”text/css”>

 

.Body-P        {        margin:0.0px 0.0px 12.0px 0.0px; text-align:center; font-weight:400;

}

.Body-C        {        font-family:”Georgia”, serif; font-size:48.0px; line-height:0.92em;         color:#6b6b6b;

}

.Body-C0        {        font-family:”Georgia”, serif; font-size:15.0px; line-height:1.20em;         color:#6b6b6b;

}

/*Master Page StyleSheet*/

–>

</style>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/wpscripts/jspngfix.js”></script>

<script type=”text/javascript”><!–var blankSrc = “wpscripts/blank.gif”;–></script>

 

Ok now we have the correct code it now needs to be pasted into your the header.php in wordpress, you will paste it just above the </head> tag in the header.php file

Next we need to add the code for the body

Locate this in the header.php

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

and delete

Go back to your webplus header and copy everything  from and including <body      to the last      </div> then paste that in the same place you have just deleted <body <?php body_class(); ?>>

One thing you must do  is change  text-align:center;   to   text-align:left; in the first line of code in your webplus header otherwise all the text will be centered

Save the header.php and view your wordpress site and hopefully you will see the header attached

———————————————————————————————————————————————————–

 

Next we will add the footer and this is where it becomes difficult depending on how much info you have in your footer

I assume that you have made a page in webplus with just your footer on it/ published it to a folder on your desktop and opened it in your editor. Do exactly the same as the header by adding absolute links to all images/ scripts etc

Goto your editor which you have opened the footer from your webplus site and locate the style sheet which looks like this

.Body-P

{        margin:0.0px 0.0px 12.0px 0.0px; text-align:left; font-weight:400;

}

.Body-P0

{        margin:0.0px 0.0px 12.0px 0.0px; text-align:center; font-weight:400;

}

Etc Etc

Now here comes the tricky part because the header and footer have been made in separate pages in webplus you may have to change the selectors ie:  .Body-P   .Body-P0 and so on as the header and footer may be sharing the same selectors which will mess up the layout

You MAY  have a matching selectors in your header and  footer so you need to change the selectors in your footer ( not on all occasions)

ie: .Body-P    to    .Body-PP

and change any other part that corresponds to the same selector

<div class=”Body-P”>

to

<div class=”Body-PP”> and so on, it doesn’t matter what you call them as long as the corresponding parts match  also do remember to delete this crap that webplus adds

body {margin: 0px; padding: 0px;}

a:link {color: #2c3651;}

a:visited {color: #1f5b8b;}

a:hover {color: #2c3651;}

a:active {color: #2c3651;}

 

Now copy everything  inside <style> and </style>

Open the header.php again

and paste it with the rest of the css in the header

 

Go back to your footer made in webplus and copy everything from the first <div right down to the bottom of the page DO NOT copy the first line beginning with <body

Go to the footer.php in wordpress and paste the code directly over this right at the bottom

</body>

</html>

Save and preview in your browser and hopefully you should see the header and footer attached

 

WARNING

If you ever update your theme your work will be overwritten so make sure you copy

header.php
&
footer.php

then once updated it should only take a few mins to add the code again

—————————————————————————————————————————————————————–

If there is something i have not mentioned please feel free register and  post in the comments box below

Also if  you don’t feel like you can manage this please feel free to contact me through the quote button at the top and if i have time i will sort it out for you

 

Ok, it looks like you have finally made it to the end of this. Thanks for putting up me and I hope that the advice I gave will help some of you.

Warm regards Lee