I would like to reference JavaScript files from my root folder in a WordPress PHP file, however when I load the page, the JavaScript is being ignored. Is there a WordPress restriction on referencing .js files? Am I not correctly referencing JavaScript for PHP?
This is what I wrote (which does not work):
<?php wp_footer(); ?>
<script src="/files/js/jquery.js" type="text/javascript"></script>
<script src="/files/js/jquery.cycle.js" type="text/javascript"></script>
</body>
</html>
For jQuery I use this technique Loading The Latest Version of jQuery in WordPress
Basically you use wp_enqueue_script function in functions.php.
For scripts where I want to simply add them in the template files and don't want to bother with wp_enqueue_script, I put them in scripts folder that was created in the theme folder. I add All custom added .js scripts there.
Then in the template file I use the code like this:
<script type="text/javascript" src="<?=get_template_directory_uri();?>/scripts/markers.js"></script>
Wordpress has its own method to add js or css files.
<?php
function my_scripts_loader() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_loader' );
?>
Put your files folder to your wordpress theme which you are curently useing after that just need to
include the path on header.php file like
<script src="<?php bloginfo('template_directory'); ?>/files/js/jquery-min.js" type="text/javascript"></script>
hope this will help you ....
WordPress got a various number of ways to include file, I myself have worked with WordPress in the early days, back then I had to call the path with a WordPress function.
Example: <script src="<?php echo bloginfo('template_directory'); ?>/files/js/jquery.js" type="text/javascript"></script> //add echo
You might want to var_dump the bloginfo('template_directory') and work your way from there.
Related
I want to include some JS to my theme.
I created a folder called "js" in my twentyfifteen-child theme folder.
When I want to call the file I write the whole text:
<script type='text/javascript' src='http://54.149.xx.xx/wp-content/themes/twentyfifteen-child/js/scroll.js'></script>
Is there a function that does that in a more simple way instead of typing the whole directory myself?
It's useful when moving the website to a new server ect'.
What is your solution for this situation ?
In wordpress:
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/scroll.js'></script>
get_template_directory_uri() function return directory path of current active theme.
EDIT:
Try the follwoing function to get child theme directory.
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri(); ?>/js/scroll.js'></script>
First of all Hatul, you have better chances of getting an answer by asking this question on the WordPress Development site of stack exchange.
http://wordpress.stackexchange.com/
Second you should use the following code in your plugin file or functions.php file.
wp_enqueue_script('your_js_handle', plugins_url('your_js_folder/your_js_file.js',__FILE__) ,array('any_dependency_the_js_file_might_require',false);
For your_js_handle you can put any name but do not include spaces.
your_js_handle is the id of the file that will be available in the HTML DOM.
Plugins_url is the function you should use if you are working with a plugin.Else
you should use get_template_directory_uri('your_js_folder/your_js_file.js').
__FILE__is written with 2 underscores before and after the word so that is not an error and what __FILE__ will do is that it will retrieve the relative path of the file you are working with.
array('any_dependency_the_js_file_might_require',false) should be used if the javascript file requires any library in order to work. like if your plugin require the jQuery library then you have to use it by stating array('jquery').
if your plugin requires the jQuery library make sure you are enqueuing it before using it. Wordpress normally comes with a preinstalled jQuery library which is the latest version. To use it just state
wp_enqueue_script('jquery');
Finally false means either you render the file in the footer or the header of your site. In which case you should make sure you are using wp_head() or wp_footer() as required. If you set it to true, the script is placed before the end tag.
Hope that helps you to code with best practice.
Yours.
MMK
I'm having trouble with the path when a file calls a css or a js file.
I'm using Codeigniter also Smarty template engine. My base URL is> http://local.project
My css and js files are located in> project/site/assets/css and project/site/assets/js
The thing is that when I call the resources from the view the path is a mess and not found error appears.
I have tried many ways but still can't make it. I begin to think that this can be a path problem from Codeigniter. I mean.. maybe I'm missing something that I can't figure what is.
When I do an inspection with the browser I can see that this is set by default>
http://local.project/
and then from the view I call it like>
<script type="text/javascript" src="{site_url()}assets/js/jquery.flot/jquery.flot.js"></script>
but the path that is built is>
http://local.project/%7Bsite_url()%7Dassets/js/jquery.flot/jquery.flot.js 400 (Bad Request)
I'm driving crazy here, any help would be very appreciated!
try:
<script type="text/javascript" src="/assets/js/jquery.flot/jquery.flot.js"></script>
or
<script type="text/javascript" src="/js/jquery.flot/jquery.flot.js"></script>
can you provide your ip,to view the page?
Try using base_url() instead of site_url().
try:
<?php
echo "<script type='text/javascript' src='" . base_url() . "assets/js/jquery.flot/jquery.flot.js'></script>" ;
?>
To use the base_url() you need to call in your controller the URL helper:
$this->load->helper('url');
Then in your view:
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.flot/jquery.flot.js"></script>
First of all load the url helper
$this->load->helper('url');
secondly get base address using this
echo base_url();
and finally your base address is "http://local.project", no slash at the end, so try this
<script type="text/javascript" src="<?php echo base_url();?>/assets/js/jquery.flot/jquery.flot.js"></script>
and make sure your base address do not have any extra characters, like space or enter
I could make it. Just opened my Smarty.php file and changed this line view/admin just to views
$this->setTemplateDir(APPPATH.'views');
After that the url I could use from the view is
<script type="text/javascript" src="assets/js/jquery.flot/jquery.flot.js"></script>
I wish to create a wordpress plugin to add below script in all pages. So I need to add that script in theme footer. How can I add it in footer.php using plugin?
eg script =
script type="text/javascript" src="sample.js">
also I wish to add it in before body closing tag..
Thank you..
Use wp_enqueue_script to load the script in your themes functions.php file. Else, directly embed the script in your themes footer.php file.
for a javascript script you can just open the footer.php file and add the reference in there before the closing body tag, or use an include if it's a php script;
...
<script type="text/JavaScript" src="yourscript.js" />
<?php
include("yourscript.php");
?>
</body>
...
PS: make sure that your .js file is in the same directory as your footer.php
my problem is quite annoying and weird. I have created a custom Wordpress theme and in the header.php I was loading jquery like this (can't remember why right now):
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1"); </script>
Last night I replaced the code above with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and then my site collapsed. I changed it immediately back again, but the problem persisted. I placed some Jquery in the HTML and it works just fine. Then I disabled my plugins by commenting out code in my functions.php file as below:
<?php
if (!is_admin()) {
wp_register_script('custom', get_stylesheet_directory_uri().'/js/custom.js');
wp_enqueue_script('custom');
wp_register_script('blockui',get_stylesheet_directory_uri().'/js/jquery.blockUI.js');
wp_enqueue_script('blockui');
wp_register_script('fancy',get_stylesheet_directory_uri().'/js/jquery.fancybox.js');
wp_enqueue_script('fancy');
wp_register_script('jeasing',get_stylesheet_directory_uri().'/js/jquery.easing.js');
wp_enqueue_script('jeasing');
wp_register_script('friendchooser',get_stylesheet_directory_uri().'/js/jquery.friendChooser.js');
wp_enqueue_script('friendchooser');
wp_register_script('zclip', get_stylesheet_directory_uri().'/js/jquery.zclip.min.js');
wp_enqueue_script('zclip');
}
?>
Still the problem occurs. Any ideas?
There is syntax error in custom.js file in line 30. Just remove } from there.
And learn some about firebug, it's very helpful :)
I want use a jQuery plugin in category.tpl. Put files in javascript/jquery directory. Now, how can use this plugin?
/* one can load JS like that: */
if(file_exists('catalog/view/javascript/'.$this->config->get('config_template').'/script.js')) {
$this->document->addScript('catalog/view/javascript/'.$this->config->get('config_template').'/script.js');
}
It is rather "the proper way" to use existing functions, than to add scripts manually into header.tpl.
As a hint, based upon the answer below - one could loop an array of filenames, in order to keep control over the loading order, which is often relevant while they might depend on each other.
I've never used OpenCart, but a quick google session tells me that you should include the plugin scripts (just like any other js) in a file called header.tpl.
Here is a part of an sample header.tpl-file I found:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
Just add a the following line below the jQuery include so it looks like this:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/[PLUGIN FILE NAME].js"></script>
and you should be good to go.
First paste your jquery files, css files and images in catalog/view/javascript/yourplugin folder.
Then call the jquery plug in files in catalog/view/theme/yourtheme(default)/template/product/category.tpl file.
For ex,
YOur php code;..
...
....
<script src="catalog/view/javascript/jquery/jquery-ui-min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="catalog/view/theme/default/stylesheet/anythingslider.css">
<script>
// DOM Ready
$(function(){
$('#slider').anythingSlider();
$('#slider1').anythingSlider();
$('#slider2').anythingSlider();
});
</script>
its for slider.. you can do your action in php (above the script).
You'll need to include JS and CSS sources in Header View (/catalog/view/theme/[your theme]/template/common/header.tpl)
in config.php
define('DIR_JAVASCRIPT', 'D:\wamp\www\opencart/view/javascript/your_dir/');
in header.tpl
<?php
if (is_dir(DIR_JAVASCRIPT)):
if ($handle = opendir(DIR_JAVASCRIPT)):
while (false !== ($file = readdir($handle))):
if (preg_match('#\.js$#', $file)):
?>
<script type="text/javascript" src="<?php echo 'view/javascript/your_dir/'.$file; ?>"></script>
<?php
endif;
endwhile;
closedir($handle);
endif;
endif;
?>