I installed wordpress on and I just want landing page to display, so I modified html templates and sliced them into index.php, header.php, footer.php and sidebar.php.
I put style.css in theme root, and there are some images in img and image directories, some additional css in css directory, and some javascript and jQuery in js directory.
My problem is that WordPress doesn't load any of those files. Only template, and when I click on one of them in source I got error 404.
I tried to change permissions, I tried several ways of including those files, I tried anything I could find on google, and today is my deadline, I got project yesterday, so any help would be much appreciated. Thanks.
You might not added <?php bloginfo('template_directory') ?> in template where you have added js and css.. you must add in URL to get it work..
e.g.
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/js/jquery.easing.1.3.js"></script>
<link rel="shortcut icon" href="<?php bloginfo('template_directory') ?>/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory') ?>/style.css">
Edit :
If above solution is not working please refer Link
Just took a look at your page. Seems like a simple mistake. Maybe your linked your files with src="js/myjsfile.js". The page redirects this to your root directory and searches there for the specific file.
Use:
src="<?php bloginfo('template_url'); ?>/js/myjsfile.js"
The function adds the current template url to the path.
Related
I am making a static site in Github, but when I try to load the site, the CSS page is not loading up. I looked up many solutions like these -
CSS not loading for GitHub pages
&
How to link my CSS to my HTML in a github hosted site
And found out that here CSS is not implicitly linked with HTML, rather CSS is stored in Github as HTML type copy, and to get CSS correct, we need to get CSS implemented correctly. That is why we can use {{site.github.url}}, or maybe give <link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">, things like that. But my question is how I can implement it and do my work done?
Here are my code and link to the Github site -
<head>
<meta charset="utf-8">
<title>To-do list app</title>
<link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-app-css/index.css">
</head>
link - https://github.com/iamdeb28/OpenClassRoom_Project_8
Github Static Site - https://iamdeb28.github.io/OpenClassRoom_Project_8/
Well, one thing that I want to mention is that when I loaded chrome dev tools and inspected the sources tab, I found index.css and base.css file totally empty, and when I inputted the code, it just works fine. But when I refresh, same thing happens. I am pretty new to JS and Git, if you can please help.
Can anyone please help???
Edit: Here is a screenshot that proves that internally, the CSS is empty and contains nothing.
As #Senatrius said, the main problem was the node_modules folder, and also the .gitignore file. Previously I was not looking at this .gitignore, but as name suggests, it is just ignoring the files, I want to show (it has the files names and paths with a '!' sign). Also, don't know why node_modules folder name is just not working out, so I copied my files to the root directory and everything seems okay. Thanks #Senatrius.
You have to link the stylesheets from the directory where your HTML file is. THis is your solution. Thanks.
<link rel="stylesheet" href="./node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="./node_modules/todomvc-app-css/index.css">
I've just moved to github pages, and I have an index.html, an index.js and a style.css all in the same folder(master I believe). I've tried the following way to link the js and the css to the html:
<link rel="stylesheet" type="text/css" href="master/style.css">
<script src="master/index.js" type="text/javascript"></script>
However, it just doesn't seem to work. In the middle, the CSS seemed to link once, but then after that when I tried to link the JS too, the whole thing stopped working again. How do I fix this?
If all your files are in the same folder, I'm not sure you need to type folder's name. Try to remove "master/" in your two lines of code.
When you link stuff to your html file, the path is relative to that file.
So if style.css and index.js are in the same folder, you just link them by providing file names only.
If those file were in the folder above, you would link them by "../style.css" and "../index.js"
If those file were in the subfolder (in relation to index.html), you would link them by "subfolder/style.css" and "subfolder/index.js"
Hey guys i have a really strange issue, and that is that when i go the route http://localhost:5000/posts/edit/<%=idofblog%> all the CSS styling and Js code is not loaded and i have a very ugly looking web page i have no idea what is going on, all the other routes are working just fine.
All the CSS and Js folders are inside the public folder
app.use(express.static(path.join(__dirname,'public')));
this is my entire file structure
enter image description here
Inside the _layout folder i have a header.ejs file which has all the links to css like this:- <link rel="stylesheet" type="text/css" href="../css/register.css">
every route is working perfectly but as soon as i go to this route http://localhost:5000/posts/edit/<%=idofblog%> every CSS and JS code is gone and the images as well.
Inside the posts.js route i have this
router.get('/edit/:id',(req,res)=>{
res.render('edit');
});
And the href link in the ejs file is this
Edit
The page is loaded and everything like the input fields, textarea are there but there is no styling, i don't know what im doing wrong.
I am not sure but what I see, your problem might be that you are using relative paths to load your styles and scripts. You should use absolute, so for example to load css you need to do it this way(make sure to use path according to your project structure):
<link rel="stylesheet" type="text/css" href="public/css/register.css">
I'll summarise. Please correct me wherever I was not able to phrase my question correctly.
I have a few PHP pages, all of them have the following format:
<?php
include "header.php";
?>
INSERT PAGE SPECIFIC MATERIAL HERE
<?php
include "footer.php" ?>
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Main CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<navmenu></navmenu>
footer.php
<footer></footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/main.js"></script>
</body>
</html>
I am new to PHP and not sure if this is the correct way to efficiently structure my PHP files because my concerns are:
Each PHP page now loads the same navigation menu and footer. This is intended and is ok. However, it also loads ALL CSS and JS together, even when there are lots of lines of CSS and JS where it is not actually useful in that specific page BUT used in other pages. Is this a need for concern and if yes what ways should we go about doing this?
Should I separate my main.js, style.css, header.php and footer.php so that each PHP page loads the minimum amount needed for the body functions?
What is the standard practice when dealing with this case?
Would appreciate it if you can give some advice!
Should I separate my main.js, style.css, header.php and footer.php so that each PHP page loads the minimum amount needed for the body functions?
You should create ONE css file and ONE js file for your entire web site. don't use php file act as css because:
If you have high visited web site, It's better to have ONE css and js file. Because It's a direct file. but when you are creating css or js by php file, php need to calculate. Maybe you think it's fast calculation, but if you need a good performance on high visited web site, it matters.
If you create css and js file by php, sometimes you need to import multiple js or css file. Who knows? maybe it makes you to use 10 js and 10 css inside your head tag! and It's bad for SEO.
Don't worry about one css or js file size. It's better with lower size but you can still create 100KB css or js file without SEO problem.
You can have one css file for all media. print included. Doesn't matter you are using multiple or single file, always use #media print{} inside the same file if you need it.
ONE css and js file can be globally cached. even if you don't need the css or js file, the global css and js file are already cached.
I'm not saying ONE css and js file is always great idea but it has the most benefit.
If you want to reduce the ammount of css/js on your page, then you can do something like this... Call your CSS with:
<link rel='stylesheet' type='text/css' href='css/style.php' />
Inside style.php it would look like something like this:
<?php
switch(basename($_SERVER['PHP_SELF'])){
case 'index.php':
echo 'CSS code for index.php gos here';
break;
case 'login.php':
echo 'CSS code for login.php gos here';
break;
}
?>
Unless you've got like lots of styling and javascript which is confirmed to be seriously increasing load time, then it's fine and I wouldn't do the above.
<?php
$filename = basename(__FILE__, '.php');
?>
<link rel="stylesheet" href="css/<?= $filename ?>.css" />
...
<script src="js/<?= $filename ?>.js"></script>
Drawbacks:
1. Naming each CSS and JS file as your PHP file.
2. Each PHP file should have its own CSS and JS files
P.S: Minimizing all your styles and scripts to only one file loads your pages faster.
Yes it is good approach to manage code. To include same header and footer you can easily add/update/remove menus and other functionality without edit every page file.
So I have a webpage, and I have all of the js scripts in the footer of the webpage, yet it is not letting me use the js functions of bootstrap, like using drop downs. The
Can anyone help?
I can't put the code here because of the character limit, but here is a paste bin:
http://pastebin.com/fzy6e5CZ
I find that linking to scripts makes your page relatively slow. I would try using a CDN, here is the code to include the min. versions of those scripts through the CloudFlare CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.3/holder.min.js"></script>
Use the following for Bootstrap CSS
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" type="text/css">
I think you should update your jQuery and bootstrap .js file and check your file adding path is right. Your file destination exactly there where you trigger it?