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.
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 e.g. 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.
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
Related
I created a index.php file that's uses <?php require("sidebar.html"); ?> to include a sidebar; the HTML element of the sidebar shows, however the css styling isn't showing. I've search Google and tried different method but it's not showing, any help would be highly appreciated.
The sidebar.html is located in HTML/ folder. And index.php is located in root/ folder
The css styling for the sidebar is being reference within the sidebar.html file
My css file is located in CSS/ folder
new to web development; Trying to make a sidebar that I can call on every page instead of hard-coding it to every page.
When you include an HTML file into a PHP script, path to all the related files (i.e. files that are referenced in the HTML document) must be relative to the PHP script in which you have included the HTML.
Have a look at the file structure below:
Home
index.php
Includes
Assets
style.css
action.js
header.html
The Assets directory contains CSS and JS files which are included in header.html. Now, if header.html has to be included in index.php that is inside the Home directory, the src/href attributes need to point to the path of css/js files relative to index.php.
Something like this:
<link rel="stylesheet" href="../Includes/Assets/style.css" />
Happy coding :)
Prepare a BASE URL at the top of the page like below (based on your project directory location).
Try
$baseURL = "http://".$_SERVER['SERVER_NAME'];
or
$baseURL = "http://".$_SERVER['SERVER_NAME']."/your_project_dir/";
Use HTML base tag in your <head> tag before your<link> tags like
<html>
<head>
<title>Project Title</title>
<base href="<?php echo $baseURL;">
<link href="your_css_file.css" type="text/css">
</head>
<body>
page content
</body>
</html>
Cross check your "your_css_file.css" location (like css/your_css_file.css or styles/your_css_file.css ...)
Try to add
<style>
...
</style>
In the first and end of your css require file, the css will read as internal stylesheet. And change the extension .css to
.php
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a view like this:
index.html.php:
/**......
...... Some code......
**/
<link ... href="???????">
/**.....
..... Some code .....
.....**/
Which route should use ???
My css is in: Myproyect/web/bundles/myfolder/css/purple.css but it didnt worked.
PD:
index.html.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lionel Richemond - Multimedia Designer</title>
<link type="text/css" rel="stylesheet" href="web/bundles/LionelBundle/css/purple.css" />
Just have your file named "index.php". You do not need the .html.php. You can now write full blown html in your .php file, this will work by itself. Include your link tag in the head section of your html code as usual, no change there. Now, wherever you need to do some php work, simply add your
<?php ?>
tags as usual and code away. The php will execute inside the page based on where it is in the html. If it is above your html tag, for example, it will all execute before any of the html is rendered. If your php chunk generates a table, you will need to place this chunk where you would have written the table if it were in html (not above your html tag).
I believe your issue is that your path is incorrect. You are using a relative path. So if your index.php file is at C:/web/site1/index.php and your css file is at C:/web/site1/purple.css then your link href should just be purple.css. If index.php exists in the same directory as a css/ folder where purple.css lives, then your link href should just be css/purple.css. Check into relative paths
You seem to be new to this based on the question, so I'm going to work from the ground up and you can clarify things from there.
Here are the basics. Let's simplify your hierarchy and say your project is organized like so:
MyProject
bundles
mycss.css
index.php
Let's assume your website root path points to MyProject so that your URL looks like this:
http://mysite.ext/index.php
If you want to include CSS in your index.php page, it would look like this:
<link rel='stylesheet' type='text/css' href='bundles/mycss.css' />
When the browser looks at this it's going to look relative to the file it THINKS it's executing. If it thinks it's loading /index.php, then you are golden. However, if you have MVC style routing, relative paths won't work. Let's say that your route looks something like this:
http://mysite.ext/controller/action
If that is the case, the browser is going to look for:
http://mysite.ext/controller/bundles/mycss.css
To fix this, you need to use a URL starting from your root web directory like so:
<link rel='stylesheet' type='text/css' href='/bundles/mycss.css' />
By adding that slash to the front of the path, the browser knows to start from the base URL rather than trying to work up from the directory it thinks it's in.
I have my index.php call to insert a html section during the page load:
index.php:
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- navigation -->
<?php include 'navigation.html'; ?>
</body>
</html>
navigation.html:
<div>
<p class="paragraph-inline">Welcome to the amazing navigation system!</p>
</div>
Ok, it's an simple example, the jist of the matter is that at the moment the navigation.html is rendered entirely before being inserted into the page. This means the css is not being called and can only be called if I include the css within the html blob.
I would prefer not to include css into every blob (footer, header, etc...)
So how can I force the site to load the html and apply the styles afterwards? I only want one css link at the top of the main page.
Your navigation should be .php as well. I'm not sure if there are options as far as syntax, but I write it like this <?php include("whatever-partial.php"); ?> This has never been an issue for me. I usually make a head.php with the boring stuff, and then include that in the header.php - and then an index.php - which pulls in header.php and footer.php for example. The server reads all that php - and spits out an html page that is served to your browser and applies the styles. It's not dynamic.
Make sure your include is a php file - then it will be inserted into the page before the browser gets ahold of the page and renders the css. Should be simple as that.
I have a contact page on my site set up like this;
contact.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="webpage.css">
<?php include 'header.php'; ?>
</head>
...rest of content
I recently set up an htaccess page with some mod_rewrite changes.
So now, I have urls like
www.example.com/user
and
www.example.com/user/contact
When I look at www.example.com/user/contact the CSS is not recognized and the page does not print any of my divs but just some worded content.
So if I have
<div id="userinfo">
User info
</div>
It just displays "User info" on the left of the page without the div being recognized.
How can I fix this problem?
The href in your CSS is a relative link. So for www.example.com/user the browser will request the css file at www.example.com/webpage.css, but for www.example.com/user/contact it will request www.example.com/user/webpage.css
That may cause part of your problem and can be fixed by preceding your hrefs with a /, so href="/webpage.css". The / will cause the browser to always request from the root of your domain so it will always request www.example.com/webpage.css regardless of the page you're on. If your css is inside some folder within your DocumentRoot (I assume you're using Apache here), you should be providing the full path to the file from the start of the doc root so possibly something like href="/css/webpage.css"
In the comments, Michael is also correct that you may have a rewrite rule error so please add that information to your question.
Use absolute URL beginning from /:
<link rel="stylesheet" href="/webpage.css" />
I used to create a unique header and load it in all my pages like this.
<?php
require_once('include/_header.php');
?>
<div id="main">
<!-- My Page -->
</div>
<?
require_once('include/_footer.php');
?>
In my root folder I have a folder named css where I put all my css stylesheets
in the header I call <link rel="stylesheet" href="css/style.css" type="text/css">.
Now, suppose I have to create a subfolder inside my root and I create a web page into it. When I call my stylesheets from the header, the page doesn't show correctly, because I call the stylesheet in a wrong way. How can I call my stylesheet in a way so that it can always be reachable from any position?
Here is the schema:
css
-style.css
include
-_header.php
-_footer.php
folder
-mypage.php
Use an absolute path:
<link rel="stylesheet" href="/css/style.css" type="text/css">
(Note the slash before the css directory)
Let me offer a way to debug this particular issue and other CSS reference issues in the future. Open up your page and then activate your browser's developer tools. (CTRL+SHIFT+I in Chrome).
Go to the Elements tab. Navigate the DOM until you see the CSS Entry. The URL for the stylesheet will be a clickable hyperlink. Click it. See where the browser navigates you. this should give you an indication as to what the fix is. Maybe you are too deep in the folder structure, maybe you are too shallow. In any case, I solve 99% of my CSS reference issues this way.
You should a base URL in your HTML header
<base href="http://website.com/"/>
Then everything regardless will become as follows..
<link href="css/style.css" rel="stylesheet" type="text/css">
Down the track for your menus you and simply go
Contact
Change your stylesheet href to href="/css/style.css"