Add Javascript To Specific WordPress Pages Using Functions.php
Вставка
- Опубліковано 2 січ 2018
- Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: wplearninglab.com/17-point-wp...
Add Javascript To Specific WordPress Pages • Add Javascript To Spec...
Link to blog post with code: wplearninglab.com/add-javascr...
Link to Conditional Tags in WordPress codex: codex.wordpress.org/Condition...
If you want to add JavaScript to a specific page in WordPress this is how you do it without using a plugin. You do have edit the functions.php file, so do that carefully. Backup your existing functions file if you need to. Then just use the code from the blog post to add JavaScript to any page on your WordPress site.
Stop brute force attacks before they happen with this workshop: wplearninglab.com/brute-force...
Grab your free 17-Point WordPress Pre-Launch PDF Checklist: vid.io/xqRL
Download your exclusive 10-Point WP Security Checklist: bit.ly/10point-wordpress-harde...
I hope this information helps you! If you have any questions leave a comment below or ping me @WPLearningLab on Twitter.
--------------
If you want more excellent WordPress information check out our website where we post WordPress tutorials daily.
wplearninglab.com/
Connect with us:
WP Learning Lab Channel: ua-cam.com/users/subscription_c...
Facebook: / wplearninglab
Twitter: / wplearninglab
Google Plus: google.com/+Wplearninglab
Pinterest: / wplearninglab
spent 3 hours looking for a decent explanation. Thank you.
THANK YOU SO MUCH!!! I've spent so much time trying to get Javascript to work in WordPress. This is so simple! Liking and Subbing.
This was so helpful. Thank you!
Congratulations! I solved my problem with your tip! Thanks a lot!
Thank you for being awesome! and posting this.
Awe shucks. Glad we could help.
That was amazing. Thank you sooooo much!
This video is AMAZING! It worked! I tried so many things and this one was the magic one. Thank you a TON. Subbed for sure :)
I'm happy it worked! Thanks for the sub Santiago, I appreciate it :)
@@wplearninglab hello sir , what if i want to add this js code on the entire website
Great tutorial! Thanks!
You're welcome Tosh, thanks for watching!
You are a great presenter!
Thank you very much for the video. It works for me
Thanks so much for the detailed explanation, quick question: Can you add multiple scripts to the same header, e.g. AdSense and Google analytics? and how do you separate them to be sure they are well laid out for google?
You can add multiple scripts to the header. If you want to load them both as external files, the code below should work.
function load_js_assets() {
wp_enqueue_script('adsense-js', 'PATH TO ADSENSE JS FILE', array('jquery'), '', false);
wp_enqueue_script('analytics-js', 'PATH TO ANALYTICS JS FILE', array('jquery'), '', false);
}
add_action('wp_enqueue_scripts', 'load_js_assets');
I hope that helps :) Let me know if you have any further questions. Thanks for watching!
It sure helps, thanks!
You're welcome, let me know if you run into any issues.
Great video! Was exactly what I was looking for :). How you add in a code snippet in a certain page php, to change it's original functionality that came with the Theme. Example: Original functionality of a "Job Listing" page that came with the Theme is a list view. I do have the code for changing the view into the user option to switch between list to grid view. Are you copying the code from it's original page theme and modifying it in the new ID page php created in order to override it? As I wouldn't want to mess any other pages. I'm assuming a Custom Template wouldn't work as the "Job Listing" page mentioned has the theme functionality integrated. I appreciate any advice you might have.
conquering england at day n making useful tutos at night
good one i would be hapy if you explained rest two parameters of enque script function
thank you so much
Thanks for this, it works! I had change the false to true and had to find a code to add multiple page ids to one specific javascript, but the base code/method that you showed works.
Sorry for the delay in responding. Our third child arrived 12 days ago and it's been a bit of a gong show around here 👶
I'm happy it worked for your James. Thanks for watching!
@@wplearninglab congratulations 👶
Great Post
Thank you very helpful. It working for WordPress version 5.8.1.
Great effort, good work . Keep it up brother, as my kind of noobs need this type of tutorial to get pro version of my self. Once again thanks alot :)
You’re welcome Muhammad, thanks for watching!
Thank you.
thanks so much!!!!!
תודה רבה סרטון מעולה
אתם מוזמנים, תודה על צפייה! (מ- Google Translate)
Great Bjorn thanks 4 sharing!!! How do you remove the wp javascript type attributes via functions.php / code snippets? Thanks again!
awesome thanks!!
You're welcome, thanks for watching! Let me know if you have any questions :)
Thank you so much
You’re welcome, thanks for watching!
thank you!
You’re welcome Duali, thanks for watching!
I have followed your tutorial and so far working great. I have three js files that need activating on a page. How do I add the extra js files in to the functions.php file so they work please?
Thank u
Thank you
You’re welcome Danny, thanks for watching!
Totally awesome 😍😍😍
Thanks Shahi and thanks for watching!
Can i do the same with snippets plugin? i want to embed script tag for everwebinar sticky bar on elementor papgr
I want to add a .js snippet just before the closing head tag. How do I do that?
Thank you! After 40 years of coding, I'm now finding my way around js as my WP ecommerce sales site needs some tweaking to get it to do what I need for more multiple upsell sales.
Hey Selwyn,
Doing it yourself is awesome, great work! WooCommerce lacks a lot of things that would be nice to have by default.
You should check out my recent video on Checkout X: ua-cam.com/video/4KrDwKzjxkA/v-deo.html
It’s awesome for upsells.
There will soon be an update to the platform’s pricing to make it much more attractive.
I hope that helps, let me know if you have any further questions. Thanks for watching!
Pls how can I see my PhP codes for using an elementor template so that I can add a code?
Thanks!!!!!
You're welcome Mateus, thanks for watching! Let me know if you have any questions :)
New subscriber here!
Im trying to use m3u8 file/s in my website but doesnt load on the player can you help please.
I love You!
Thanks! And thanks for watching!
I bought a plug in that is jquery, I am not a coder but I want to use this plug in with elementor page buidler. It is a slide show plug in. How can I do this?
Good question Elizabeth. I haven't tried that yet, but you may be able to use the HTML widget in Elementor to include the jQuery and the HTML for the slider. Just put the jQuery below the html. And the CSS can go in the CSS field in the advanced tab. You'll need Elementor Pro for that.
I hope that helps. Let me know how it goes!
Hi there. I have been looking to do something like this for the past couple of days. Totally new to Wordpress and all that jazz. I see in this video you have a child theme created. I have looked through your video list and see quite a few videos on child themes. Which one would you recommend for a beginner getting in to building the child theme to lead on to doing the instructions in this video?
Hi Tony, Child themes are 'subsets' of the original theme that you are recommended to create, so that if something breaks, you can always go beck to the original.
What background music is that please?
I got my test to work, as in your tutorial. I can't make my custom functions work though even though they work perfectly on a static html site. Are there any nuances I should look out for?
Hi Gabriel,
There are a couple things:
If your script is too high on the page, then it may be executing before the page is ready. Or it could be executing before dependent libraries like jQuery are loaded.
You could also check the console to see if there are JS problems the browser is reporting. How you get there depends on the browser you're using.
If you find the console, keep it open and refresh the page. Issues will appear in the console log.
You can also insert console.log through your code to see if any of your JS is being executed. And if it is, you can see where it's getting stuck.
I hope that helps, let me know if you have any further questions. Thanks for watching!
@@wplearninglab I tried in the child theme folder and at the root level, but still no luck.
I'll keep pokimg around and look to see if there are any errors in the console s you've suggested.
Thank you!
@@wplearninglab I also have the same problem as Gabriel, It seems the JS script is too high on the page and is executing before the page is ready. What is the solution to that?
how can we add a script at spcific location in a wordpress page.plzz reply
You mentioned, for that the method you are using, inserts the JavaScript or jQuery script into the header of the page.
I would suggest not to do that, because many themes are overburdened with scripts that are wanting to load first in the header and page speed really suffers as a result.
(As of 2018, Page speed is now crucial for successful placement in Google search results. )
Instead, use this function placed into the "functions.php" file of the Child theme (always best to have a child theme), where it inserts the JavaScript or jQuery script into the footer.
hi there, great it's working on desktop, but not working on mobile version. kindly need your adivice, thanks
Hi, for some reason this did not work for me! pleasee help. I put in my js file and did everything as you showed us but it didn't work :(
How to load in an async.js file?
Does it matter if my path has an HTTPS? I cannot get the alert to show up on the page and I know I am targeting the correct page - help!
May i ask something: can i use this method to put the GTM code in the header of all pages,but without using a child theme?
And how to make the code to work in the header of every page?
Thank you
Awesome ;)
Thanks and thanks for watching! Let me know if you have any questions!
@@wplearninglab Ok sir, we appreciate your help
No problem, that's what I'm here for :)
Hi, thanks a lot for the video. Just a question: is it possible to add an 'async' ? Example:
thx and bye, rainer
Great video! However I tried doing this on my site and it doesn't seem to be running the script on the page. i have tried this countless times with different approaches but with no luck. the js works on the original html based page and offline but can't get it going through wordpress
//Script code for Copy to ClipBoard
function copyDivToClipboard() {
var range = document.getSelection().getRangeAt(0);
range.selectNode(document.getElementById("a"));
window.getSelection().addRange(range);
document.execCommand("copy")
}
add_action( 'wp_enqueue_scripts', 'copyDivToClipboard' );
It is showing me "syntax error, unexpected T_VAR"
It should also tell you on which line the T_VAR error is. Can you share the line?
I want to add html code to a specific post but I think the 'load_js_assets' action won't work with html code... what can I do?
Hi Franbert,
I image you want to add the HTML code somewhere in the body of the page so your site visitors can see it. Off the top of my head you can use the code in this tutorial to include a jQuery script on a specific page. In the jQuery script you can choose specific classes or ID's as the target for the HTML code.
Does that make sense? If so, do you think that is a possible solution to your specific problem?
This is exactly what I want to do. Run a javascript on one specific page. I did as instructed. To test I first only created one java file with the alert command you showed. The alert does not show up but I can see in the source that the java file is loaded. I am running Wordpress. Is there any other setting I should change to enable the execution of the java file? (The alert should show up here: science-network.tv/signs-test-mcnemars-test/ and the java file is currently pairwise_test.js)
Hi Ronny,
I checked out that page using the Chrome Inspector and found that there is a Javascript error. Oftenm if there are any JS errors on a page, other JS on the page won't run. The error related to www.statcounter.com/counter/counter.js.
I think if you clear up that error the alert should work.
Let me know how it goes!
Hi your videos are awesome. Can i add data.json,bodymovin,index.html,new.js to wordpress
Hi Svenska,
I don't know if that's a legitimate javascript file. You can add any legit JS file to WordPress.
I hope that helps :) Let me know if you have any further questions. Thanks for watching!
How can we know it's a legitimate javascript file
I followed this tutorial exactly and nothing but the javascript code shows above the header of the page.
in 'path to js file' why did u put ur site address? I did also and i get this error Failed to load resource: net::ERR_NAME_NOT_RESOLVED
how do i call multiple .js?
How to make website. Load faster ????
Good question. The first thing you should do is go to gtmetrix.com and scan your site. That will hopefully tell you what's slowing down your site. Then fix the things it shows as slowing you down.
I hope that helps and thanks for watching!
Great video! :) Did this and now I can't access the website anymore XD
can I add the js custom files to certain multiple pages let's say i want to add it on the page id 10, 29, 180 and such. I would appreciate if you respond. Thanks!
Hi Rosalie,
That's no problem. You can do it by adding an OR operator to the if statement.
Here is how you would change the if statement in the code from the blog:
if( is_page(10) || is_page(29) || is_page(180) ) {
All the rest of the code will stay as you have it. The above will check to see if page ID 10 OR 29 OR 180 is loaded and it will then run the code.
Here's a Stack Overflow page that I think will help make sense of this: stackoverflow.com/questions/2363840/how-to-use-or-condition-in-a-javascript-if-statement
And here's a Javascript documentation page for different operators: www.w3schools.com/js/js_operators.asp
I hope that helps :) Let me know if you have any further questions. Thanks for watching!
@@wplearninglab Thank you for responding, haha why didn't I think of the or operator pft. But yes I will look at the other documentation as well. I'm new to js hihi. Thank you, again
You're welcome Rosalie! Good luck with JS, it's a powerful tool to be able to use.
@@wplearninglab Hi! Sorry for asking too many questions it's just there are a lot of questions I've been thinking about while I was working on it. First, what if my custom js file only contains a DOM manipulation that means I don't have to state the array('jQuery') dependency right? Second, should I replace the "array('jQuery')" with just ' ' for an empty string just like the version number that you left as an empty string before the boolean false or just directly copy everything except the jQuery part? Thank you, so much! Will definitely subscribe to your channel after this.
This video made me realize how dumb I am
Lol, or maybe how smart you are, now that you can do what the video shows :)
Well said!
Why didn't you just code the function directly on the required page instead of putting the code in functions.php ?
You can do it either way, but having in the functions file is more flexible because you could easily add the same to function to another page or all pages or a subset of pages. If you add more scripts to your functions file, it's also nice have them all in one place.
I hope that helps :) Let me know if you have any further questions. Thanks for watching!
for some reason this is not working with Elementor. i followed all these steps and the alert box appears, but when i try to add some hover effects using Jquery it only shows up in the elementor preview window, not the actual site.
$(document).ready(function() {
$("p").mouseover(function() {
$("body").css("background-color", "lightgreen");});
$("p").mouseout(function() {
$("body").css("background-color", "yellow");});
});
Can you try replacing all the $ with the word jQuery? Some WP sites don't parse the $ properly unless they are explicitly set to.
Let me know how it goes!
@@wplearninglab ok, i tried that, but it's still not recognizing that code. do I need a '.' after Jquery? this is the new code:
Jquery(document).ready(function() {
Jquery("p").mouseover(function() {
Jquery("body").css("background-color", "lightgreen");});
Jquery("p").mouseout(function() {
Jquery("body").css("background-color", "yellow");});
});
The page isnt loading with the code I would of used it
Hi Adam, my bad. The page was still set to draft :(
It should work now. I hope that code helps you!
need to add: get_theme_file_uri('/js/my-js.js') that works:)
is there a way i can apply it to my whole site? - without breaking anything
just use the wp_enqueue_script() line without the conditional ( if ) statement. Hope that helps.
@@MattBoehm87 and how to apply just for entire wordpress post without pages? thank you
if something has changed in wordpress and this no longer works can you please make a new tutorial or take this down?
Didn't work for me. No javascript loads.
Help get link code zingmp3 wordpress
the same way for jquery too?????
Hi Marsha,
Yes, the same way for jQuery. jQuery is JavaScript. As long as the jQuery library is enqueued on your site, which it should be by default, then it'll work.
I hope that helps and thanks for watching!
@@wplearninglab thanks alot
No problem :)
@@wplearninglab hiii.....im back again...do you have any ide how to make ""Your Download begin shortly"" in wordpress.....realy need your help right now....i got the js script but dont know how to use it...
I did everything you said. the script doesn't even appear in the source code! -_-
Hi Vianney,
I would double check that you have the correct page/post IDs and that you’re on those pages/posts when checking the source code. Because it’s conditional, the code will only appear in the source on the pages it’s set to be on.
I hope that helps, let me know if you have any further questions. Thanks for watching!
@@wplearninglab it didn't work because I had nothing to call the javascript in my index.php. I added the then I used wp_register_script in the function.php and now it works fine. It's just weird that no videos talk about that in how to introduce js to wordpress. But thanks anyway.
I think in 2022 it is not working
Sorry, I have redone my comment :) Thank you for your help, and I have got it all working well. But, i have an issue with wordpress removing my code after changing screens to the visual. I used your method in the video for the specific page, but any ideas how to stop making wordpress change my code when flicking to the visual? here is the JS i used instead of I am here alert: www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard
hi Bjorn, thanks for the video...I coded this: code.sololearn.com/WTy88e9XfMHM/#html (is public) this code has html, css and javascript as you can see, but how can i do to include it in wordpress? just with this tutorial or what change should I do?. Thank you very much from Perú
Too fast
Thanks Youtik and thanks for watching!
so much sub, thumbs up begging, just down voted because of it
Thank you.
Can I add several functions in the functions.php files ?
Yes, you can add as many as you want. If you add too many you will notice your site slow down because the functions file needs to be constantly accessed. But 'too many' is A LOT. Much more than most people would have in their functions file, but I just wanted to make you aware of it.
@@wplearninglab Thank you for the video and for the answer. I have add 5 functions, hope is not gonna be too much 🤞🏾