foundation javascript for a wordpress theme - javascript

I am trying to create a theme from scratch using the foundation framework which it works great out of the box, but when I need to include the foundation JavaScript scripts, it shows as if they've been loaded, but nothing working, first the top bar doesn't work, I have tried to unregister the jquery which comes pre-loaded with WordPress and use the one from Google cdn as I have read that's a sure way for the top-bar and other scripts to work, but nothing so far works
here is my code in the functions.php
// Enqueue scripts essential for foundation framework to act responsive
function responsive_scripts_basic()
{
//register scripts for our theme
wp_deregister_script('jquery');
wp_register_script('foundation-mod', get_template_directory_uri() . '/javascripts/vendor/custom.modernizer.js',
true );
wp_register_script('foundation-topbar', get_template_directory_uri() . '/javascripts/foundation/foundation.topbar.js',
true );
wp_register_script('foundation-main', get_template_directory_uri() . '/javascripts/foundation/foundation.js',
true );
wp_register_script('zepto', get_template_directory_uri() . '/javascripts/vendor/zepto.js',
true );
wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
true );
//enqueue scripts for our theme
wp_enqueue_script( 'foundation-mod' );
wp_enqueue_script( 'foundation-topbar' );
wp_enqueue_script( 'foundation-main' );
wp_enqueue_script( 'zepto');
wp_enqueue_script( 'jquery');
}
add_action( 'wp_enqueue_scripts', 'responsive_scripts_basic' );
I have used the same method for the stylesheets, and no problem at all, any experience on this? I thought it was going to be easy to build a theme with this framework, but it's getting rather complicated to be fair.

Well the order in which the js files are "enqueued" is very important.
First you do "enqueue" the modernizer, then jQuery/zepto, then Foundation.min.js and then the topbar extension:
//enqueue scripts for our theme
wp_enqueue_script( 'foundation-mod' );
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'foundation-main' );
wp_enqueue_script( 'foundation-topbar' );
Please see the zurb Foundation Installation docs, with the order of the scripts in mind.
Also to get the foundation thing started, you need a script element most likely at the very end of your PHP produced HTML:
<script type="text/javascript">
$(document).foundation();
</script>
As wordpress is (as I know) pushing jQuery into noConflict mode, you may have to write this like
<script type="text/javascript">
jQuery(document).foundation();
</script>
EDIT: Zepto has no noConflict function, leaving $ being jQuery or whatever it was set. To keep it simple, choose jQuery and use the fully qualified jQuery(document).foundation() syntax!

Related

Wordpress script not loading

I am having a wordpress website and some custom javascript. However my goal is to load this javascript file the right away as wordpress is suggesting it. Somehow this is not working or I am doing something wrong.
The file is called FormScript.js and is located here:
/httpdocs/wp-content/themes/Avada/FormScript.js
In the same directory is my function.php, in which I want to load the script.
This is how I am doing it:
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
// Register and Enqueue a Script
// get_stylesheet_directory_uri will look up child theme location
wp_register_script( 'FormScript', get_stylesheet_directory_uri() . 'FormScript.js');
wp_enqueue_script( 'FormScript' );
}
But why is this not working? Thanks for help...
You are missing a / after get_stylesheet_directory_uri() inside wp_register_script.
It should be:
wp_register_script( 'FormScript', get_stylesheet_directory_uri() . '/FormScript.js');
Edit:
From the documentation:
Note: Does not contain a trailing slash.
why don't you open the header.php file and use a simple script tag to load the FormScript.js file?
/httpdocs/wp-content/themes/Avada/FormScript.js
/httpdocs/js/FormScript.js
http://www.domain.com/js/FormScript.js
make sure your js file is world accessible
<script type="text/javascript" src="http://www.domain.com/js/FormScript.js"></script>

CDN links not working

I am reading on Google that CDN links are better to use because of speed and an extra layer of security. I am new to WordPress Dev. I placed the CDN links in a JS file and enqueued. However, it's not taking effect on my site.
custom-js.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
functions.php
<?php
function load_css_js() {
wp_register_style( 'child-css', get_stylesheet_directory_uri() . '/style.css', false, NULL, 'all' );
wp_enqueue_style( 'child-css' );
wp_register_script( 'child-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array( 'jquery' ), NULL, false );
wp_enqueue_script( 'child-js' );
}
add_action( 'wp_enqueue_scripts', 'load_css_js' );
?>
1) Before anything else. Are you attempting to build a Child theme on top of a Parent theme that does not all ready use Bootstrap?
2) Have your set up your Child themes style.css (see Child Themes link below)?
Loading Scripts/Stylesheets:
You should have something similar to these functions inside your functions.php file.
Generally speaking you shouldn't need to load jQuery though, it's all ready there by default (see Codex: Default Scripts Included and Registered by WordPress) so check a page with DEV Tools to see if it's loading (unless you want to use another CDNs Library, then you need to disable the default one so you don't have jQuery loading twice.
Codex: Function Reference/wp enqueue script
Codex: Child Themes
Codex: Function Reference/wp enqueue style
Enqueue JS
function my_scripts() {
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js', '2.1.3', true );
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '3.3.5', true );
}
add_action('wp_enqueue_scripts', 'my_scripts');
Enqueue CSS
function my_styles() {
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_styles');

Javascript in Wordpress widget works only on Home page

I would like to use my widget in every pages, but that works only on home page.
I'm still in local for the moment. I'm writing my script in footer.php before the end of body like that :
<script type="text/javascript" src="wp-content/themes/twentyfourteen/js/formlist.js"></script>
I've seen that when I'm not on home page, when I inspect with developper tools, my script .js is red and not well imported. How can I make that ?
You have to correctly enqueue your Javascript in your theme, i.e. something like this:
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
There are other methods, depending on if your script uses the main jQuery library and other considerations. See Function Reference/wp enqueue script « WordPress Codex for information on all the ways to use wp_enqueue_style.
And use your Dev Tools to check for errors and correct loading.
Try calling your script like this:
<script src="<?php echo get_template_directory_uri();?>/js/formlist.js"></script>
If you are on your home page, wp-content/themes/twentyfourteen... may work just fine. But say you're on yoursite.com/about then it thinks the URL for the javascript file is yoursite.com/about/wp-content/themes/twentyfourteen...
Make sense?

how to add jquery to wordpress plugin

This could be a very easy question to wordpress expert. I am a newbie in wordpress and I am having problem using jquery on it. The jquery library is already included because you can see it firebug
I dont know what I am missing here.
This is my code..
add_action( 'wp_enqueue_scripts', array( $this, 'jsscript' ) );
function jsscript() {
?>
<script type="text/javascript">
$(document).ready(function(){
alert('here!');
});
</script>
<?php
}
The jsscript is already on the firebug but it doesn't work. I am getting this error message in firebug.
ReferenceError: $ is not defined
$(document).ready(function(){
I read somewhere that it is not a good idea to include another jquery library and it make sense not to load it again.
I hope somebody can help me.
Thanks in advance.
Instead of just randomly outputting your script you should add it in an external file in your plugin directory, and then include that file with jQuery as a dependency
wp_enqueue_script(
'jsscript',
plugin_dir_path( __FILE__ ) . '/jsscript.js',
array( 'jquery' )
);
The issue you're having now, is that there's no guarantee that the script is outputted after jQuery, in fact there's now guarantee that the script tag you're outputting between the PHP tags is inserted where it's supposed to go at all.
To avoid conflict between other js libraries global $ is not present in wordpress instead use jQuery
Read this for more info
for eg:
jQuery(document).ready(function () {
alert('here!');
});
Put this code your functions.php file
function yourfunction_name() {
global $wp_scripts;
wp_register_script('jqury_lib', "//code.jquery.com/jquery-1.11.2.min.js", array(), null);
}
add_action( 'wp_enqueue_scripts', 'yourfunction_name' );
For theme:
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
For plugin:
wp_enqueue_script(
'newscript',
plugins_url( '/js/newscript.js' , __FILE__ ),
array( 'scriptaculous' )
);

jQuery not defined in Wordpress Theme even though defined in wp_register_script dependency array

I'm having troubles including gridstack.js into my theme.
This is how my code is:
function custom_scripts() {
wp_register_script( 'gridstack.min', get_template_directory_uri() . '/js/gridstack.min.js', array( 'jquery', 'underscore', 'jquery-ui-core' ), '201412028' );
wp_enqueue_script( 'gridstack.min' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
And the output is:
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/underscore.min.js?ver=1.6.0'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/jquery/ui/core.min.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-content/themes/manfredinator/js/gridstack.min.js?ver=201412028'></script>
But Firebug still gives me "TypeError: $ is undefined".
I have a solution for this but i don't like it:
function custom_scripts() {
wp_register_script( 'jQuery.min', get_template_directory_uri() . '/js/jquery-1.10.2.min.js', array(), '1.10.2' );
wp_enqueue_script( 'jQuery.min' );
wp_register_script( 'gridstack.min', get_template_directory_uri() . '/js/gridstack.min.js', array( 'underscore', 'jquery-ui-core' ), '201412028' );
wp_enqueue_script( 'gridstack.min' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
So my question is: why does the jQuery library included in WP not work for plugins (I have also tried another plugin that uses jQuery.min and I had the same problem) and what is the best way of solving this problem.
This is because the version of jQuery included with WordPress is in noConflict mode. This means the $ shortcut is not available, but jQuery still is.
If it is in your code, you can simple wrapp all of you code in an Immediately-Invoked Function Expression (IIFE) like below:
(function($) {
//Your code here.
})(jQuery);
Or, if you are wrapping everything in a document ready handler, use this.
jQuery(function($) {
//Your code here.
});
If it's a problem with a jQuery plugin you are trying to use, you will need to patch the plugin code. Also, consider contacting the plugin author to fix their code. Plugins should not depend on the $ shortcut being defined.

Categories