I am trying to load scripts in Wordpress functions.php and they are not loading.
functions.php
<!--====== Jquery js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/vendor/modernizr-3.6.0.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/assets/js/vendor/jquery-1.12.4.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/assets/js/popper.min.js"></script>
<!--====== Slick js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/slick.min.js"></script>
<!--====== Magnific Popup js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Isotope js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/isotope.pkgd.min.js"></script>
<!--====== Imagesloaded js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/imagesloaded.pkgd.min.js"></script>
<!--====== nice-select js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.nice-select.min.js"></script>
<!--====== select number ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.nice-number.min.js"></script>
<!--====== jquery-ui js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery-ui.min.js"></script>
<!--====== Syotimer js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.syotimer.min.js"></script>
<!--====== Main js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/main.js"></script>
add_action('wp_enqueue_scripts', 'add_scripts');
They aren't loading and I need to get this working.
Thanks in advance!
The code you wrote will not work, you should use the wp_enqueue_script function for this.
and instead of using bloginfo('template_directory') use get_stylesheet_directory_uri() as mentioned here
you can use the below example to load the scripts in your website.
function load_my_script_files(){
wp_enqueue_script('modrenizer', get_stylesheet_directory_uri() . "/assets/js/vendor/modernizr-3.6.0.min.js", array(), "3.6.0");
// Add lines like the one above to add other scripts, if one script is dependent on the other put its name inside the array()
}
add_action( 'wp_enqueue_scripts', 'load_my_script_files' );
If you want to know more about how this works I reccomend reading the developer documentation here
Related
I tried to add JQuery Chosen plugin to my website, but i can't make it work on a <select> , there are 2 classes in it that are from bootstrap, i tried to chosen-select on it, didn't work.
Heres the code, also, this page is being built in PHP.
PHP-Dropbox
<select class="form-control bfh-countries chosen-select" data-country="PT">
<option value="PT">Portugal</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">
(...)
and so on.
I added the plugin at the end of the file
Import JS libray and plugin
<script src="<?php echo site_url('https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');?>" type="text/javascript"></script>
<script src="<?php echo site_url('recursos/chosen/chosen.jquery.js'); ?>" type="text/javascript" > </script>
<link rel="stylesheet" href="<?php echo base_url();?>recursos/chosen/chosen.css" />
<script type="text/javascript">
$(window).load(function(){
$(".chosen-select").chosen()
});
</script>
Why I can't load the plugin to the selector?
You are adding your site's url infront of the google api's url , which is wrong and the jquery is not working for you at all. What site_url or base_url from codeigniter (which is your framework) does is , generate an url which is specified inside config.php file. if you put a path of any file inside these functions , it will become sort of :
yoursite.com/your/another/path/file.js
Change your code from this :
<script src="<?php echo site_url('https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');?>" type="text/javascript"></script>
<script src="<?php echo site_url('recursos/chosen/chosen.jquery.js'); ?>" type="text/javascript" > </script>
<link rel="stylesheet" href="<?php echo base_url();?>recursos/chosen/chosen.css" />
<script type="text/javascript">
$(window).load(function(){
$(".chosen-select").chosen()
});
</script>
to this Updated:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo site_url('recursos/chosen/chosen.jquery.js'); ?>" type="text/javascript" > </script>
<script type="text/javascript">
$(document).ready(function(){
$(".chosen-select").chosen();
});
</script>
and add this line to your <head> tag not in footer :
<link rel="stylesheet" href="<?php echo base_url();?>recursos/chosen/chosen.css" />
By looking at the comment you have posted. Your path to the chosen plugin files are wrong. Please make sure you are targeting the right path.
I have tried to integrate jQuery star rating plugin called jQuery master in to my PHP application, but its not working. Can anyone help me? Below is my code:
{literal}
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRatingmaster/jquery/jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert('hi');
// get the clicked rate !
$(".basic").jRating({
onClick : function(element,rate) {
alert(rate);
}
});
});
</script>
{/literal}
<div class="exemple">
<div class="basic" data-average="8" data-id="2"></div>
</div>
Firstly, run your page in Mozilla FireFox, and check if any javascript/CSS file is not getting included.
In the Net tab, it shows a 404 with red color.
In the code, <?php echo CONST_SITE_ADDRESS;?> will not work in Smarty as it is being seen from your code.
From your PHP file, assign this to some variable display it in template.
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
So, the corrected code:
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jRating.jquery.js"></script>
As per the documentation specified, there is no onclick handler in jrating plugin.
Your code should be like,
<script type="text/javascript">
$(document).ready(function(){
$(".basic").jRating();
});
</script>
I am using code igniter, and I want to add a datetime picker using datetimepicker. The script can be found here
I have 2 sections on my webpage - the header and the content. On the controller, I load them both. Here is my javascript head
<script href="<?php echo base_url(); ?>js/datetimepicker.js" type="text/javascript"></script>
and here is my textbox code
<input id="tanggal" type="text" class="textbox" disabled="disabled"> <img src="<?php base_url(); ?>img/cal.gif">
when I refresh the page, I can hover the cal.gif, but when I click em, cal.gif is not responding. What went wrong in my code?
This is not the correct way of including javascript files:
<script href="<?php echo base_url(); ?>js/datetimepicker.js" type="text/javascript"></script>
It should be:
<script src="<?php echo base_url(); ?>js/datetimepicker.js" type="text/javascript"></script>
Just to keep in mind, base_url allows to do this:
<script src="<?php echo base_url('js/datetimepicker.js')?>" type="text/javascript"></script>
so i am declaring a variable inside of a .php file
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jscript_pages.js">
var templatePath = "<?php bloginfo('template_directory'); ?>";
</script>
But i want to use the variable templatePath inside of jscript_pages.js but when i do it like this my console says: Uncaught ReferenceError...
I hope someone can help :)
Thanks
The content of a script element is alternative content to use if the browser doesn't support src, it isn't a script to run before running the external script.
Use two script elements.
<script>
var templatePath = "<?php bloginfo('template_directory'); ?>";
</script>
<script src="<?php bloginfo('template_directory'); ?>/script/jscript_pages.js"></script>
Set the variable before you reference it in script.
<script>
var templatePath = "<?php bloginfo('template_directory'); ?>";
</script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jscript_pages.js">
</script>
As #Quentin said, it's either/or in a single tag.
In concept, you can do what you're looking for by having two script tags
<script type='text/javascript'>
var templatePath = "<?php bloginfo('template_directory'); ?>";
</script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jscript_pages.js"></script>
But, in practice what's usually better (for testing, portability, etc) is for your script file to just define functions and then have your on-page scripts (if you have them) call those functions and apply the variables.
In this setup, your function bloginfo('template_directory'); should return a $GLOBALS variable.
ok Here is my issue: I am using Joomla 1.6,
I have a Ajax JS to display the slide how on my site located: www.dhwnj.com The Jquery script i am using when enabled stops my slide show from working so I tried using the No conflict script but I do not know if I am using it correctly :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this‐>baseurl ?>/templates/<?php echo $this->template ?>/js/jquery.metadata.min.js"></script>
<script type="text/javascript" src="<?php echo $this‐>baseurl ?>/templates/<?php echo $this->template ?>/js/jquery.maphilight.js"></script>
<script type="text/javascript" src="<?php echo $this‐>baseurl ?>/templates/<?php echo $this->template?>/js/fancybox/jquery.fancybox.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("jquery.maphilight.js").hide();
});
// Use Prototype with $(...), etc.
$('_class.noobSlide.packed.js').hide();
</script>
<script type="text/javascript" src="<?php echo this->baseurl; ?>/templates/
<?php echo $this->template ?>/js/_class.noobSlide.packed.js" >
</script>
Any Ideas?
Prototype can't work together with Mootools and Mootools is loaded on your page (probably directly by Joomla)
Maybe here's the reason behind your problem...
You should use jQuery after mootools. You can ensure mootools is looaded first by this code (use it in the module or in the view of a component)
JHTML::_('behavior.mootools');
$doc = &JFactory::getDocument();
....
$doc->addScript( "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" );
$doc->addScriptDeclaration('jQuery.noConflict();');
$doc->addScriptDeclaration("
jQuery(document).ready(function(){
alert('jo');
});"
);
This is code for joomla 1.5, don't know if the functions are the same in 1.6.