I have the php file and in that I am linking a HTML file.
include 'practice.html';
In the HTML file I have a few CSS files linked.
<link href="practice1.css" rel="stylesheet" />
<link href="practice2.css" rel="stylesheet" />
Now, what is happening is the Page Template is displaying only the HTML part and not able to access the CSS files.
How can I possibly use CSS files?
PS : ALL my PHP, HTML, and CSS files are under the same folder (wordpress\wp-content\themes\*).
On your PHP template page, use:
<?php require(TEMPLATEPATH.'\practice.html'); ?>
And on your HTML page, use:
<link href="\wordpress\wp-content\themes\YourThemeName\practice1.css" rel="stylesheet">
<link href="\wordpress\wp-content\themes\YourThemeName\practice2.css" rel="stylesheet">
Make sure to replace YourThemeName with, your theme's name. And also to provide the correct path of where your CSS files are located.
If your wondering about what TEMPLATEPATH does, it provides the path to the template in use by WordPress so you do not have to type out the full path ex. \wordpress\wp-content\themes\YourThemeName\
Are you working on a local server or a live website? Depending on which one it is, you will have to change up the paths.
Example:
For a live website use:
/wordpress/wp-content/themes/YourThemeName/
or
For a local server use:
\wordpress\wp-content\themes\YourThemeName\
try using Include PHP function for including HTML file and for the CSS you can simply use echo
<?php
echo '<link href="practice1.css" rel="stylesheet">';
include('practice.html');
?>
Related
So I have a webpage where I use the same header/footer for every page:
<?php include 'header.php?>
In header link to css looks like this:
<link rel="stylesheet" type="text/css" href="styles.css">
they both are in the same folder.
Problem:
When I try to load page in another folder (products/page.php) - the assets wont load properly. I put a link to header like this:
<?php include '../header.php' ?>
header and footer loads properly but the assets defined in them do not.
How can I fix the paths so I would not need to copy same files to every folder.
Sorry for noob question :)
A pssible solution is to use absolute paths:
<link rel="stylesheet" type="text/css" href="/styles.css">
This way your assets are indepent to your phps structure.
I have looked over the code and cant seem to see where the link between the two files is failing. My index page uses the exact same code to link the files and it works fine. When I add the styling in the header of the php/html file it works but otherwise nothing happens.
The reference that you have for the stylesheet is relative to the url of the page you're on.
For example, this:
<link rel="stylesheet" type="text/css" href="style.css">
... says that the stylesheet is at the same path that the page is on. So if the url in the address bar is https://somewebsite/admin/index.php then that page will try to load the stylesheet at https://somewebsite/admin/style.css. If the url is https://somewebsite/index.php then the page will try to load the stylesheet at https://somewebsite/style.css.
If the stylesheet resides at the root of the site then your link tag should look like this:
<link rel="stylesheet" type="text/css" href="/style.css">
This will make your page look for the stylesheet at https://somewebsite/style.css regardless of what the path of the url says.
You should make the right path, right into your css file at
Example:
<link href="assets/css/blabla.css" rel="stylesheet">
<link href="/app/app.css" rel="stylesheet" type="text/css">
The above is the code I'm using to access a stylesheet, but it's not working at the .
Some extra details:
This is in a .php file, but it's located within the head of an html section
I'm working on a temporary url (i.e. 'my.ipa.dd.res/mydomain.com/dir/'). This might be the reason it's not working.
Edit:
It's a stylesheet I'd like to use on several pages, which is why I'm trying to point to a root directory (so that I don't need the file in every single folder I create).
Well I think you need to store your root directory path as a string to include your css file with an absolute URL.
Something like :
<link href="{$absoluteRootPath}/css/styles.css" rel="stylesheet" type="text/css">
If you remove the leading slash it will look for the css file in the folder relative to the current.
<link href="app/app.css" rel="stylesheet" type="text/css">
Edit: to reuse in multiple scripts in different dirs you would need to specify an absolute path, so to avoid having to change it in multiple places when you go live (ie stop using the temporary url) you should define a variable.
<?php
// set absolute path to the stylesheet
$cssPath = 'http://my.ipa.dd.res/mydomain.com/dir/';
?>
And
<link href="<?php echo $cssPath; ?>app/app.css" rel="stylesheet" type="text/css">
Depending on your php architecture you may need to define $cssPath as a global or you may be able to add it to an existing config variable. This is completely dependent on your framework.
I've been having this same problem recently. Here's what worked for me
Now on the index page, replace link rel="/app/app.css" href="stylesheet" type="text/css"
with
?php include 'style.php' ?
And on the style.php page insert the following tags:
style and /style
You can put the regular CSS between those two tags. See if that works. BTW for some reason I can't insert the greater or less than symbols without making the code disappear... Forgive me, I'm new here..
I have a question related to php include.
I have a folder called login and another folder files. I have a footer.php in files and its stylesheet lies also in same folder as style.css.
so , I want to include footer.php in login.php as <?php include('../files/footer.php');?> but its css is missing. how can I solve this problem?
You make your login.php extend some layout.php that has all the required CSS files attached.
When you write your html code, use the complete url (start with http://) to your css and js file in the <head>. This way you will not have problems about relative paths
In the head, you should use an absolute path for your css link:
<link rel="stylesheet" href="http://localhost/your-main-folder/files/footer.css" />
or you can use this:
<base href="http://localhost/your-main-folder/" />
<link rel="stylesheet" href="files/footer.css" />
<?php
// This is index.php
ob_start();
include 'tem/u.html';
ob_end_flush();
?>
<html>
<!-- This is u.html -->
<link rel="stylesheet" href="style.css" media="screen" />
<body>
<p> abc </p>
</body>
</html>
Now my problem is when i run h.html -> Ok with style.
But when i run index.php -> Ok without style (because now the index.php include style.css, not tem/style.css)
Need a fix
If possible, refer to a domain relative path to the style.css, for example
<link rel="stylesheet" href="/style.css" media="screen" />
If that is not possible, you need to keep track on the page base in some way, which I cannot tell because I do not know enough about your application. But anyway, like
<link rel="stylesheet" href="<?php echo $pageBase; ?>/style.css" media="screen" />
where $pageBase is a variable containing the url to the root of your application.
I'm assuming that the tem directory is supposed to be for some sort of template, and so you don't want it to be directly exposed to the user; rather, you want to be able to include the files so that they're accessible via index.php, possibly with the option of later changing what files are included.
You could create another PHP file called style.php (in the root directory) which would include tem/style.css. You could do this for any other files that your templates used as well — the idea being that each PHP file in the root directory would correspond to a "role" in the template, not a particular template file, so that the template could later be changed without everything needing to be rewritten.
This might get a bit cumbersome if you had a lot of files required by your template, so it might be better to have a single script that could be instructed which file to load (through a $_GET variable). But in that case, you need to be very careful not to allow the user to specify arbitrary files. I'd suggest avoiding this approach until you're more proficient in PHP.
EDIT: On second thought, I'd suggest using a <base> tag in your template HTML file, as suggested in my comment on #gnud's answer.
This has nothing to do with PHP or include. This has to do with your browser, and how URLs are interpreted.
When your browser is pointed at http://xyz.abc/tem/h.html and asked to load "style.css", it tries to load http://xyz.abc/tem/style.css - this is known as a relative url, relative to the current document location.
When your browser is at http://xyz.abc/index.php and is asked to load the stylesheet in the same way, it tries http://xyz.abc/style.css. Maybe you see the problem?
As for a solution, you might use a domain-relative path for the stylesheet ("/tem/style.css").
just always use absolute path to your css file
<link rel="stylesheet" href="/tem/style.css" media="screen" />
that's all