Mixing HTML Template with Wordpress PHP File
Question
I'm trying to create a Wordpress template on one of my website pages, http://www.windowblindshadeshutters.com/blog/ . The blog is now created, but I want to keep our original existing HTML template header so that it appears like the rest of the website, and then have the Wordpress template PHP file appear as the content on this page.
I started off just copying and pasting our original HTML header code in the top of the Wordpress PHP file, but it doesn't seem to be working right. I'm also wanting to include a doctype at the top, just like the original header, but I'm thinking that you shouldn't do this in a PHP file. My desired result would also require me to mix the original css file with the Wordpress css file, and it just seems like it's not working correctly.
So my question is, "How do I use an existing HTML header (that contains all of the original CSS styling) and insert it into a Wordpress theme effeciently?" Is it as easy as cutting and pasting code, transferring the CSS files, etc?
The original website header can be found at the root domain of the link above.
2 answers
solution1
2 ACCPTED 2011-11-01 19:34:54
I'm not entirely sure if I got your question right, so I stand to be corrected: You are intending bring some HTML elements in your main site's header into the blog section's header which is residing in a Wordpress install on your server right?
Well, you're right in the sense that it is copy and paste effort, but I think the more important questions are: from which point on you should be adding those HTML elements in the header.php and what are the things that can or cannot be changed / deleted.
Perhaps a better way to go about this would be for me to tell you the standard things in a header.php and break it down.
<!--the mark up-->
<!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">
<!--the mark up-->
<head>
<!--meta-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--meta-->
<!--document title-->
<title><?php bloginfo('name');?></title>
<!--document title-->
<!--links to scripts and stylesheets-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/style.css" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.6.1.min.js"></script>
<!--links to scripts and stylesheets-->
</head>
<?php wp_head();?> <!--do not remove-->
THE MARK UP
Okay, so the markup definition in the Doctype is definitely needed in the header.php otherwise the Wordpress theme will not know what it's marked up as. Moreover, the blog section is a Wordpress install on a sub-directory right? Chances are is that it is so it's not gonna be able to grab any information in the root directory where your actual main site is residing in.
META
You can copy the meta description tags or keywords tags from your actual main site and add them to the header.php
DOCUMENT TITLE
You can either choose to hard code and enter the title on the code level or change the blog title in the Wordpress Dashboard and leave it as <?php bloginfo('name');?> . This PHP tag automatically draws whatever is defined as the blog title in the Wordpress Dashboard as the document title. So if the blog title is different from your actual site's title then you will most probably see a discrepancy in that.
LINKS TO SCRIPTS AND STYLESHEETS
If you wish to include the stylesheet from your actual main site that is residing in the root directory, then you will have to change the href to an absolute link that goes there. For eg it will look something like <link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/css/style.css" /> rather than <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/style.css" /> which only links to within your Wordpress install's theme directory. So suppose that you link that external stylesheet from the main site's location to the header.php by means of the method I just mentioned, you can go ahead and paste the necessary HTML content from your actual site's header and the styles should come out right - as long as the classes or ids remain the same.
ADD REQUIRED HTML CONTENT
So once that is all done, go ahead and add any required HTML content from your actual site's header after the <?php wp_head();?> tag. You can add it anywhere you want to and in any order you like to. Just be sure not to mess or overwrite any default template codes that the theme has.
Hope this has answered your question somehow.
solution2
0 2011-10-31 22:37:45
You have to edit the header.php file.
After you finished the <header> section, you can start adding the page header.
This will be included in all WP pages / posts.
If you add wrapper start tags in haeder.php , don't forget to end them in footer.php
Read more about this here: http://codex.wordpress.org/Designing_Headers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.