How do I use an added jQuery script in Wordpress? - javascript

I want to use a read-more jQuery script on my wordpress website. The script I want to use can be found on https://github.com/jedfoster/Readmore.js. I've used several stackExchange topics and the following tutorial http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/. But I still don't have it working. What have I done?
Created a folder in the theme directory called "custom_js". In this folder I copied the script called "readmore.js".
Added the following piece of code on the top of the functions.php file located in the theme directory:
//this goes in functions.php near the top
function my_scripts_method() {
// register your script location, dependencies and version
wp_register_script('custom_script',
get_template_directory_uri() . '/custom_js/read_more.js',
array('jquery'),
'1.0' );
// enqueue the script
wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
The code in the readmore.js file is surrounded by this code:
;(function($) {
})(jQuery);
Did I implement the script the right way? If no, then what did I do wrong? And if I did implement the script the right way, how do I call the script so there will be a read-more button on my wordpresspage?

Everything looks fine apart from how you wrap the readmore.js code. You need to wrap it like this:
jQuery(function ($) {
/* You can safely use $ in this code block to reference jQuery */
// readmorejs contents here.
});
as opposed to
;(function($) {
})(jQuery);

As I can see from the plugin source it applies to article tag, so make sure your posts are wrapped in that tag.
Or you can change it from $('article').readmore(); to $('whatever article wrapper').readmore();, for example $('div.post').readmore();.
Also make sure that script is loaded and loaded after jQuery.

Related

Calling nested div class in Javascript. Revised code not working in WordPress

Need help.
I am creating a div inside body>div>div .
Reference: Creating div in a nested class using javascript
Here's a link to my jsfiddle https://jsfiddle.net/41w8gjec/6/
Here's a link to the site https://bastioul.com/index.php/category/portfolio/ so you can see how the div is nested
Here's the wordpress classes.
class="archive category category-portfolio category-3 custom-background custom-header-image layout-two-column-default no-max-width"
>
class="hfeed"
>
class="site-content"
Here's my actual javascript code
function bastioul() {
var dirty = document.querySelector('.category-portfolio>.hfeed>.site-content');
var grime = dirty.appendChild(document.createElement('div'));
grime.id = "portfolionav";
}
if (window.addEventListener) {
window.addEventListener('load', bastioul, false);
} else {
window.attachEvent('onload', bastioul);
}
No error messages in jsfiddle. I don't know enough about coding as far as php/javascript/jQuery is concerned to go through wordpress js files to see if something is negating my code. Not exactly sure of the root cause of my problem because it works in jsfiddle, and there is no console errors when i inspect page. I tried to research about the problem, but it is a pretty specific problem.
Not exactly sure what else to try.
Okay I solved the issue by editing the functions.php for the wordpress theme I was using.
This is my php code.
wp_register_script( 'portfolionav', get_template_directory_uri() . '/portfolionav.js', array(), true );
wp_enqueue_script('portfolionav');
wp_footer();
note
I had a issue with this code because it automatically selects a library.
I used browsers inspect console error to show me what library was being called, and it was /themes/primer.
I uploaded my javascript to this library.
And now my script is running correctly on my Wordpress site.
I was not aware I had to add script by calling it in my php file when using Wordpress.

Javascript File Not Functioning in Wordpress w/ Proper Enqueueing in Functions.php

My JS file is being properly called in my functions.php file because there is no error in the console when I inspect element. Why is this js code not running? Do I need to wrap the function? Everything I tired did not work. I am no js expert, but I think this code should work... It worked in my codepen.
Note: I am calling the script in the footer. Should I be calling it in my header since it is for my mobile header menu?
// Mobile Menu
$('.hamburger').on('click', function () {
$('.main-navigation').toggleClass('open');
});
It should work fine via the footer. You could try wrapping it in a
$( document ).ready(function() {
$('.hamburger').on('click', function () {
$('.main-navigation').toggleClass('open');
});
});
How are you calling the jQuery? Are you placing it in a shortcode to a function in your functions.php, or directly in a tag inside the footer?
Last question (sorry, i'm new - and thorough): Have you checked your console? Any other Java errors?
sorry this is a mess, I am trying to figure out the formatting for answers/comments

Why this simple jQuery 'addClass' is not working in this site?

I've tested the jQuery addClass : fiddle
That works fine.
The jQuery adds a class called lazy to the image.
Now I want to do the same in a wordpress site.
So I've added following code in my functions.php
function smart_magazine_scripts_styles() {
wp_enqueue_script('lazyloadscriot', get_template_directory_uri() . '/js/jquery.lazyload-any.min.js', array(), '1.0', true);
wp_enqueue_script('custom-by', get_template_directory_uri() . '/js/custom-by.js', array(), '1.0', true);
}
When I see the site source code I see both lazyload-any.min.js and custom-by.js are loaded fine.
custom-by.js has following line only :
jQuery('img').addClass('lazy');
But when I check the images there is no class called lazy is added to them.
Why is that?
Here is the site
Are you sure your document is ready? Try the following:
jQuery(document).ready(function() {
jQuery('img').addClass('lazy');
});
Have you tried this instead
$(function()
{
$('img').addClass('lazy');
});
If you are trying to target an element with the class img you need to use .img or if you are trying to target an element with the id img you need to use #img
To load jQuery from Google just put this line in your HTML file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
When your function is executed jQuery may no have not been loaded yet.
First, try to put your JavaScript inside a $(function() like this:
jQuery(function(){
jQuery('img').addClass('lazy');
});
Of course if you wait for the DOM to be ready and then add the class lazy to your images there is no point. The best would be to add the class in the static templates or with PHP.

Using a jQuery fullscreen image gallery in Wordpress

I have been trying to get malihu's Simple jQuery fullscreen image gallery ( http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery ) to work with my Wordpress theme, but for some reason I'm having trouble getting the script to run. I'm calling both the CSS and javascript normally as with other plugins in the functions.php file, but the javascript doesn't seem to be taking effect to make the gallery. I currently have the following code to call the CSS in the header and the javascript in the footer. Am I missing something?
function malihu_gallery() {
if (!is_admin()) {
// Enqueue Malihu Gallery JavaScript
wp_register_script('malihu-jquery-image-gallery', get_template_directory_uri(). '/js/malihu-jquery-image-gallery.js', array('jquery'), 1.0, true );
wp_enqueue_script('malihu-jquery-image-gallery');
// Enqueue Malihu Gallery Stylesheet
wp_register_style( 'malihu-style', get_template_directory_uri() . '/CSS/malihu_gallery.css', 'all' );
wp_enqueue_style('malihu-style' );
}
}
}
add_action('init', 'malihu_gallery');
I'm thinking that I may need to ready the script with something similar to the following, but not sure if I'm on the right track.
function gallery_settings () { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#container').malihu_gallery();
});
</script><?php
Any help greatly appreciated!
Thanks
If you want any event to work in jQuery you will want it inside document ready. This will load it after the DOM is loaded and before the page content is loaded.
$(document).ready(function() {
// your stuff inside of here
});
Not sure based on what you have shown above but try some basic debugging, see if you can call functions when you paste your code into the console. Or if you want to create a fiddle I will take a look.

Load javascript code after jquery.js has loaded in WordPress site

I have a custom jquery-based slider on homepage of a WordPress site. I'm loading jQuery (jquery.js) and the slider js (jquery.advanced-slider.js) using below code in my functions.php file of my theme.
function my_load_scripts() {
if (!is_admin()) {
wp_enqueue_script("jquery");
if (is_home()) {
wp_enqueue_script('theme-advanced-slider', get_template_directory_uri().'/js/jquery.advanced-slider.js', array('jquery'));
wp_enqueue_script('theme-innerfade', get_template_directory_uri().'/js/innerfade.js', array('jquery'));
}
}
}
add_action('wp_enqueue_scripts', 'my_load_scripts');
Now I put the below code in my header.php file BEFORE wp_head();
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
//Slider init JS
$j(".advanced-slider").advancedSlider({
width: 614,
height: 297,
delay: 1000,
pauseRollOver: true
});
});
</script>
It's obvious here that my jquery.js and jquery.advanced-slider.js load after the JavaScript code above and thus my slider doesn't work. If I put it after wp_head() call in <head> the slider works.
But if I put it after wp_head() wouldn't that be a hack? I want my code to be clean. As twentyeleven theme clearly says
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
I'm very confused here. I might be missing something very simple clue here. But help me out guys. What would be the best way to put the JavaScript before wp_head() and yet have it load after jquery.js and slider.js have loaded?
Add your script block to the bottom of the HTML page, just before the </body>.
Your slider init JS code won't get executed until the full DOM has been parsed in the browser anyway so there is no disadvantage to this.
In fact web performance experts like Steve Souders suggest that script blocks should be added at the end of your HTML page as script blocks block rendering and the page appears to load faster this way.
As per wordpress function reference:
The safe and recommended method of adding JavaScript to a WordPress generated page is by using wp_enqueue_script(). This function includes the script if it hasn't already been included, and safely handles dependencies.
If you want to keep your "code clean" you might rethink how your js is organised.
My approach with wordpress is to (usually) keep a scripts.js for all initialisation and small scripts and separate file(s) for plugins. But everything depends how big and how many files you have - you want to avoid too many http requests and files that are hard to manage.
As well, wp_enqueue_script lets you place the scripts in the footer.
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Wait for loading jQuery with window.onload function, once jQuery file and other js / content loaded then window.onload function will be fire.
<script type="text/javascript">
window.onload = function(){
var $j = jQuery.noConflict();
$j(".advanced-slider").advancedSlider({
width:614,
height:297,
delay:1000,
pauseRollOver:true
});
}
</script>
The code that you are adding to the bottom of the page should be externalized to it's own file and added with the wp_enqueue_script(); function like shown below.
Note the use of the 'true' directive at the end of each call to wp_enqueue_script. That tells WordPress that you want them included at the wp_footer(); hook (instead of the wp_head(); hook) which should appear directly before the closing </body> tag - as per the performance best practices that others have mentioned.
function my_load_scripts() {
if (is_home()) {
wp_enqueue_script('theme-advanced-slider', get_template_directory_uri().'/js/jquery.advanced-slider.js', array('jquery'), true);
wp_enqueue_script('theme-innerfade', get_template_directory_uri().'/js/innerfade.js', array('jquery'), true);
wp_enqueue_script('your-custom-script', get_template_directory_uri().'/js/yourcustomscript.js', array('jquery'), true);
}
}
}
add_action('wp_enqueue_scripts', 'my_load_scripts');
I've removed the jQuery enqueue line you had included because you shouldn't need to register the jQuery script as it's already registered by the WP core and since you have defined it as one of the dependencies it will be included for you.
Since you have wrapped it all in an is_home() conditional statement the all 3 of these files - plus jQuery - will be included in just the homepage.
An easier - but maybe not so nice - hack is to simply add a 1-millisecond timeout
setTimeout(function () {
jQuery('#text-6').insertBefore('#header');
}, 1);
get_template_directory_uri() does give you the theme directory, but this is not what you want if you are using a Child Theme.
get_stylesheet_directory_uri() will give your the directory of your "current theme", so in either case, it is safest to use.

Categories

Resources