WordPress plus jQuery - javascript

How do you add javascript/jQuery function to work with WordPress plugins.
For example, I want to call a jquery function on submit or button click. Or for client-side form validation.

Well, there are a lot of methods to do that:
Write your plugin, hooking wp_enqueue_scripts action, including external .js file with your jsvascript code
The same, but hooking wp_enqueue_scripts from whithin your theme
Include your external javascript file using < script> tag inside head.php (or other) of your theme
Include your code inline into < script> tag inside any of your theme's file.

I believe this page could help you : http://matthewruddy.com/using-jquery-with-wordpress/
Probably the most common mistake developers make is loading jQuery by
printing the “” tag into the header. Never do this! If you do,
any plugin/theme that requires jQuery will be broken as a result of
your mess. This is because jQuery will be loaded twice, which will
throw errors and break stuff. Instead, use the PHP code below.
add_action( 'wp_enqueue_script', 'load_jquery' );
function load_jquery() {
wp_enqueue_script( 'jquery' );
}

Related

Js and wordpress help...where does it go?

So ive been putting off using js for a while because everytime I try to figure it out I get more confused, but now I really need it for a site im working on...
I want to hide the page until everything loads (so you don't see elements moving/jumping into place.
I've found various bits on here and around the web, but everytime I go to place the code anywhere that I feel it should go, I get errors.
take this for example:
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
Ive tried going to the functions.php file and adding the js code i've found on the web but always get an error. So where do I copy the code for this, so it affects the CSS ive added?
In wordpress, you need to use a plugin to help you insert your javascript/jquery
Login to wordpress
Go to plugins>>add new
Search for Insert Headers and Footers plugin
Install and activate
Then launch the plugin and insert your javascript.
You will need to select the location of your javascript, either in the tag or just before the closing
When you add javascript to a wordpress website, you want to do it in one of two ways. You can either do it using a hook which is essentially a 'spot' in the code you wish to add to.
This can be done by placing the following in your functions.php
add_action('wp_head', 'wp_54885300_add_js_to_header');
function wp_54885300_add_js_to_header(){ ?>
<script>
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
</script>
<?php
}
Alternatively, if you find yourself needing to place lots of javascript into your website, you may wish to link to an external javascript file. This can be done with wp_enqueue_script().
Place the following in your functions.php file to enqueue an external stylesheet to your website.
add_action( 'wp_enqueue_scripts', 'wp_54885300_enqueue_script' );
function wp_54885300_enqueue_script(){
wp_enqueue_script('anyname', 'path-to-file.js', array(''), 'version', false );
}
As others have pointed out, what you are trying to do by hiding everything until the window has completely loaded may not be a good idea for a number or reasons.
But, atleast to the best of my knowledge, this ^^ is the proper way to include JS into a wordpress installation without depending on a plugin to get you started.

Need Help in Integrating Javascript with Wordpress

I have wordpress account for blogging. Recently I have opted for PopUpAds. I have the javascript code with me which I received from PopUpAds.
Can any one please tell me how to integrate this code into wordpress??
Any informative links will also be very helpful.
Thank You In advance.
It might be the safest ( but not the best ) way to install the plugin which allows you to add inline javascript code.
I.e. something like this - https://wordpress.org/plugins/tc-custom-javascript/
Also, if you can edit functions.php file within your active theme, the quickest way is to add a patch of code there:
<?php //add opening php tag only if there is closing tag at the end of functions.php file
function pop_up_ads_script() {
?>
<script type="text/javascript">
//your script from PopUpAds goes here
//check if PopUpAds code includes also script tags, then avoid adding duplicate tags
</script>
<?php
}
add_action( 'wp_footer', 'pop_up_ads_script' );
For this approach, be careful when editing and saving functions.php, since you might cause error due to bad syntax or typo, so first check if php tags. I
would suggest to do this via FTP access, rather than through built-in WordPress file editor.
Using a Wordpress plugin that lets you insert arbitrary HTML code as a shortcode is the best way to go IMO. That way the external code doesn't mess with the wysiwyg editor. I use this plugin: https://en-ca.wordpress.org/plugins/insert-html-snippet/
If the JavaScript code should be added to the head section of your page, there are plugins that do that as well.
Check out this useful blog post for adding external JS and CSS to Wordpress: http://blog.dynamicdrive.com/add-custom-javascript-css-wordpress/

jQuery issues in WordPress

I am using owl carousel and slicknav in my WordPress localhost site. I am calling the jquery from my theme folder. I tried using wp_enqueue_script('jquery'); in my functions.php but if I do, then the owl carousel and slicknav don't work. And using that function, I can see jquery loaded in my source code.
Now, I have installed a plugin 'Fancybox for WordPress' and the plugin is not working. If I use wp_enqueue_script('jquery'); function instead of my theme folder's jquery, the plugin works but owl carousel and slicknav doesn't work.
I think the problem is happening because of my jQuery calling. I need a proper way to call jQuery and also I would like to avoid any confliction. That means there must be a way where I can use owl carousel, slicknav and anything else and also I can use plugins that require jQuery. How do I do that?
I have used the plugin in twentyfourteen theme and it works there fine.
Are you sure that you have jQuery loaded before your code? If you get "jQuery is undefined" error in console (F12), probably you need to change the script loading order.
It will be working:
<script src="path-to-jquery/jquery.min.js"></script>
<script>
$('.foo').bar();
</script>
The code below won't be working:
<script>
$('.foo').bar();
</script>
<script src="path-to-jquery/jquery.min.js"></script>
If you want to enqueue file in functions.php, you can't use directly wp_enqueue_script('jquery').
You need to use the action wp_enqueue_scripts then use wp_enqueue_script('jquery') in the callback function.
add_action('wp_enqueue_scripts', 'enqueue_my_js');
function enqueue_my_js(){
wp_enqueue_script('jquery');
wp_enqueue_script( 'owl_caroussel', get_template_directory_uri().'owl_caroussel.js', false ); // adjust the file path & name
}
When you enqueue script that is dependent on jQuery, note that the jQuery in WordPress runs in noConflict mode, which means you cannot use the common $ alias. You must use the full jQuery instead. Alternately, place your code using the $ shortcut inside a noConflict wrapper.
jQuery( document ).ready( function( $ ) {
// $() will work as an alias for jQuery() inside of this function
[ your code goes here ]
} );
Don't forget to enqueue the style files too if need.
Hope it helps.

Wordpress- Add script directly to page

How can I add my script directly to my page instead of putting it in <head> or <footer>? For example,
<div>
My script here
My html
My html
</div>
Thanks!
What you are trying to achieve is not the WordPress way and is not advised but it can be done ... that's for sure.
The normal way how to do this (is to include/enqueue the js or css file, using wp_enqueue_style function to enqueue css files and wp_enqueue_script to enqueue js files. Proper documentation on how to use those functions can be found on the WordPress Coding reference guide if you search on the internet.
If you want to add your script just to one of your pages/posts, etc ... you can do the old way by inserting the script tag inside the post like this:
< script scr="script-src">< /script>
if the script is not external, is just some small functionality you want to add then you can simply use:
< script>alert('hello world');< /script>
These scripts cant be added on the backend side ... they need to be added on the theme's code ...
Remove all extra spaces i had to add here because of the script tags being filtered for security measures.
Hope i have helped you to achieve what you wanted.
Its the same, use
<script>
xxxxxxx
</script>

Wordpress enqueuing scripts in post

this is a noobish question but I really tried several options, none of them seemed to work. I have a plugin that is a slideshow with some posts, it works just fine on homepage (index). It uses jquery 1.4.2 and a javascript file. The idea is that when I go inside a post, the javascript file is not loaded, imported (inspecting the sources using chrome's webdev I can see the plugin's style.css but not the javascript file).
I tried several options, apparently the jquery used by wordpress is a bit too old and I need 1.4.2.
I tried registering the 1.4.2 jquery (I will refer as jq), and then enqueuing the script file depending on the new jq, in plugin's php file, also enqueuing the style.css. I also tried including the next code inside functions.php, still not working:
add_action('wp_footer', 'load_slideshow_scripts');
function load_slideshow_scripts() {
wp_register_script('slideshow-jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', array(), '1.4.2', false);
wp_enqueue_script('slideshow-js', plugins_url('contest-slideshow/script.js'), array('slideshow-jquery'), '1.0', false);
wp_enqueue_style('slideshow-css', plugins_url('contest-slideshow/styles.css'));
}
I also tried enqueuing the js files in a function that I hooked to init, still no success. I also tried simply enqueuing these files along with the other scripts loaded by default by the theme in functions.php.
The real problem is that the javascript file is not loaded and the slideshow is not working while in single post, otherwise it works
If it's really a jQuery related problem, you should deregister it first. Try out with this:
function modify_jquery() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', '//code.jquery.com/jquery-1.11.0.min.js', false, '1.11.0');
wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');
This piece of code has to be inside the functions.php of your theme. I used the last 1.x jQuery version but edit it if you need/prefer another one.
Good luck!

Categories

Resources