404 error linking css file in php header - javascript

I'm building a Wordpress site and for some reason I'm getting a 404 error for the style.css, although I've referenced the file in the header.php.
I'm not sure what I've done wrong and I'm struggling to figure it out. Any explanation or suggestions would be appreciated.
Below is the console error
EDIT - This is a picture my style.css which is in the directory of the theme
And here is how I've referenced the css file in the header.php -
<?php
/**
* The template for displaying the header
*
* #subpackage the-bespoke-harvest
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<link rel="stylesheet" href="bespokeharvest/website/wp-content/themes/the-bespoke-harvest/patterns/public/css/style.css?ver=4.8.2" type="text/css">
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCo3e_2xea4jd7wMQ2c0IkQKRQ3NH3aZmY&libraries=geometry"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<section class="section-scroller">
<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
</section>
Note - The other linked files in the head such as the google maps script & pingback are working fine.

You have not specify a valid path for css.
Replace this line with this wp code structure.
<link rel="stylesheet" href="bespokeharvest/website/wp-content/themes/the-bespoke-harvest/patterns/public/css/style.css?ver=4.8.2" type="text/css">
to
<link href="<?php echo get_template_directory_uri();?>/patterns/public/css/style.css" rel="stylesheet" type="text/css" />

I would recommend enqueueing your scrips and styles. https://developer.wordpress.org/reference/functions/wp_enqueue_style/
This best illustrates how you would do it:
https://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402
You can still prioritise styles/scripts as well as version them.
(I’ll write the code once I get to a computer)

I've seen your problem and I suggest you go with this.
First, open that file in your browser.
Then check what path does this code return.
<?php
echo get_template_directory_uri();
?>
Then merge that together.
Suppose this code return.
localhost/wordpress
And your path style path is
C:/xampp/htdocs/wordpress/wp-content/theme/mytheme/something/style.css
Then remove c:/xampp/htdocs/wordpress
And create something like this
<?php
echo get_template_directory_uri();?>/wp-content/theme/mytheme/something/style.css
?>
This is the solution whenever you got some errors like this.
Thanks.

Related

How to get external .JS files to work in joomla

I am creating a new Joomla template and have run into a problem with linking to external .js files.
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/main.css">
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/FLpresentation.css">
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery-2.1.4.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/FLpresentation.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/FLajax.js"></script>
The Above code is included in the head tag and the CSS is working fine when I install my template into joomla. Everything looks how it should but all of my Jquery and Javascript code doesn't function. The only code that does is within tags on the index.php file.
Can anyone tell me what I am doing wrong? I have defined the files and folders in the templateDetails.xml and everything other than js is working fine despite me using the exact same method to link the CSS. Help me, I'm confused.
100% JS conflicts. Just check the console! You include the Jquery libary, but Joomla already comes with Jquery. Check the console for errors, check if you have Jquery in output HTML more than 1 time and migrate your code.
Also wrap your code like this:
(function($) {
$(document).ready(function(){
// START HERE FOR ON_DOCUMENT_READY
alert(1);
});
})(jQuery);
This reserve the $ for your Jquery code.
Use the JHtml::script method like in the example below:
$url = Juri::base();// pick the url for my joomla website
JHtml::script($url . 'components/com_revista/prefixfree.min.js');//here i'm using one file in my server, but you could put the url for your script like
"JHtml::script('http://urlforscriptsource/script.js');"
The code below add JQuery framework on your joomla extension:
JHtml::_('jquery.framework');
JHtml::_('jquery.ui');
JHtml::_('jquery.ui', array('sortable'))
;
Ps: Is better use JQuery() instead of $() in yours JQuery codes, this will avoid conflicts!

Javascript not loaded when loading php file which need other javascript file

I develop a chat widget using php (chat.php) and want to add it into another php page (blank.php). chat.php requires script that I put in Javascript files outside.
So in blank.php, I included js files that chat.php needed.
<!DOCTYPE html>
<html lang="en">
<head>
<!--code-->
</head>
<body>
<div id='includedContent'></div>
<!--dependency for chat.php-->
<link type="text/css" href="http://localhost/chatbox/gplus/chat.css" rel="stylesheet" />
<link type="text/css" href="http://localhost/chatbox/gplus/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://localhost/chatbox/gplus/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/chat.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/moment.min.js"></script>
<!--end-->
<!--include chat.php-->
<script>
$("#includedContent").load("http://localhost/chatbox/gplus/chat.php");
</script>
<!--end-->
</body>
</html>
chat.php is loaded but the Javascript does not load for chat.php.
I also tried to use this and it works
<!--include chat.php-->
<?php
$chat = file_get_contents('http://localhost/chatbox/gplus/chat.php');
echo $chat;
//or by using - include './chat.php';
?>
<!--end-->
But I wonder if there is a solution using javascript so I can include chat.php into blank.php, and chat.php can execute the js script included in blank.php. I put the script in blank.php to avoid script conflict between widget and hosting page.
Thank you.
I think what you need to use is include statement in PHP. See this LINK.
Basic example on how to use:
For vars.php:
<?php
$color = 'green';
$fruit = 'apple';
?>
Included in test.php:
<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>

Add WordPress jQuery to cutom page template

I have a plugin and it has a below custom page template. This template requires jQuery. I've a variable $link_to_js liked to google library but I want it to link it to the WordPress internal jQuery library?
<?php
/*
Template Name: Checkout Template
*/
// Need to replace below with WordPress library???
//$link_to_js = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
?>
<!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=iso-8859-1" />
<link href="<?php echo $link_to_css; ?>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo $link_to_js; ?>"></script>
</head>
<body>
<div id="authnet_container"><!--CONTAINER START-->
</div><!--FOOTER END-->
</body>
</html>
I've added below code in main plugin file but it does not add?
function my_init() {
if (!is_admin()) {
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');
Please advice the best way to add jQuery library to the custom plugin page template? Thanks
You should include <?php wp_head(); ?> and <?php wp_footer(); ?> immediately before </head> and </body> respectively.
These functions are what, among other things, include scripts and styles that have been queued.
References:
http://codex.wordpress.org/Function_Reference/wp_head
http://codex.wordpress.org/Function_Reference/wp_footer
At the very least add <?php do_action("wp_enqueue_scripts"); ?> as that will output all the queued scripts.

Chosen plugin doesn't work

I'm tearing my hair out to find why Chosen plugin (http://harvesthq.github.io/chosen/) doesn't want to work. I have tried different things, such as calling the chosen plugin directly in jQuery, rather than in JavaScript as below, but none of it works. I believe I have called the libraries correct, and the stylesheets, yet none of the functionalities of the plugin are applied to the select boxes. It's probably a simple mistake that I've made somewhere.
This is my markup, it first calls the stylesheets. echo $page_htmlhead calls javascript libraries such as latest jQuery from Google API.
<head>
<!--[if lt IE 9]>
<script src="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/html5shiv.js"></script>
<![endif]-->
<title>flyeuro.com</title>
<meta http-equiv="X-UA-Compatible" content="IE=7"></meta>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Europe's favourite virtual airline!">
<link rel="shortcut icon" type="image/x-icon" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/img/favicon.ico">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/css/style.css" />
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/main/chosen/chosen.css" />
<?php
/* This is required, so phpVMS can output the necessary libraries it needs */
echo $page_htmlhead;
?>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/main/chosen/chosen.jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$(".chosen-select").chosen()
});
</script>
// ...rest of <head> code
</head>
Inside $page_htmlhead...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
I finally then display the options for the user on a form...
<select class="chosen-select" name="depicao" data-placeholder="Departure Airport">
<option value="">All</option>
<?php
foreach ($airports as $airport)
{
echo '<option value="'.$airport->icao.'">'.$airport->icao.' - '.$airport->name.'</option>';
}
?>
</select>

How to put all css files in one file and all javascript files in one file [duplicate]

This question already has answers here:
How to include all css kept in a directory?
(9 answers)
How do I include a JavaScript file in another JavaScript file?
(70 answers)
Closed 4 years ago.
When I want to include any new CSS file or any new JS file, I put it in the header as this
css file
<link rel="stylesheet" href="<?php echo URL; ?>public/css/header.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/index.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/footer.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/signup.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/contactUs.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/option.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/question.css" />
<link rel="stylesheet" href="<?php echo URL; ?>public/css/profile.css" />
js file
<script src=<?php echo URL . "public/Js/profile.js" ?>></script>
<script src=<?php echo URL . "public/Js/cell.js" ?>></script>
<script src=<?php echo URL . "public/Js/place.js" ?>></script>
<script src=<?php echo URL . "public/Js/ontology.js" ?>></script>
<script src=<?php echo URL . "public/Js/informativeObject.js" ?>></script>
<script src=<?php echo URL . "public/Js/question.js" ?>></script>
I want something like
<header>
include all css
include all js
</header>
Minify is a PHP library that will combine all your CSS / JS files into one. Does that help at all?
For CSS, you could use #import:
HTML with CSS:
<style type="text/css">
#import url('index.css');
#import url('footer.css');
</style>
Standalone CSS:
#import url('index.css');
#import url('footer.css');
Browsers include JavaScript as a #include AFAIK so there's no better way than including them all through <script> tags or by using Wintermute's example of a JS minifier.
Edit: JSMin by Crockford is a CLI utility that you can use if you want to work with it offline.
Assuming you've got an array of files (using the local filesystem path)
print "<style type='text/css'>\n";
showall($css);
print "</style>";
function showall($filelist)
{
foreach ($filelist as $fname) {
print file_get_contents($fname) . "\n";
}
}

Categories