Add Javascript To Specific WordPress Pages Using Functions.php

Подписаться 155 тыс.

Просмотров 103 тыс.

50% 1

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: wplearninglab....
Add Javascript To Specific WordPress Pages • Add Javascript To Spec...
Link to blog post with code: wplearninglab....
Link to Conditional Tags in WordPress codex: codex.wordpres...
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....
Grab your free 17-Point WordPress Pre-Launch PDF Checklist: vid.io/xqRL
Download your exclusive 10-Point WP Security Checklist: bit.ly/10point-...
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....
Connect with us:
WP Learning Lab Channel: www.youtube.com...
Facebook: / wplearninglab
Twitter: / wplearninglab
Google Plus: google.com/+Wpl...
Pinterest: / wplearninglab

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 137

@selwynnz8417 3 года назад

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.

@wplearninglab 3 года назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4KrDwKzjxkA.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!

@EasyTechs 5 лет назад

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?

@wplearninglab 5 лет назад

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!

@EasyTechs 5 лет назад

It sure helps, thanks!

@wplearninglab 5 лет назад

You're welcome, let me know if you run into any issues.

@brianhansen7425 2 года назад

Great video! :) Did this and now I can't access the website anymore XD

@kamalkhan-nd7vl 4 года назад

Thank u

@TheDweeb002 5 лет назад

This video made me realize how dumb I am

@wplearninglab 5 лет назад

Lol, or maybe how smart you are, now that you can do what the video shows :)

@wplearninglab 3 года назад

Well said!

@franbertpenaperalta9153 6 лет назад

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?

@wplearninglab 6 лет назад

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?

@bikerflyer563 4 года назад

if something has changed in wordpress and this no longer works can you please make a new tutorial or take this down?

@TheSeeker2013 5 лет назад

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.

@rainersteiger1529 2 года назад

Hi, thanks a lot for the video. Just a question: is it possible to add an 'async' ? Example: thx and bye, rainer

@georgivasilev3867 2 года назад

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

@ankitsheoran1788 5 лет назад

how can we add a script at spcific location in a wordpress page.plzz reply

@mulletman1705 4 года назад

Why didn't you just code the function directly on the required page instead of putting the code in functions.php ?

@wplearninglab 4 года назад

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!

@elfpi55-bigB0O85 3 года назад

Didn't work for me. No javascript loads.

@fwef7445 2 года назад

so much sub, thumbs up begging, just down voted because of it

@elpretentio 4 года назад

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");}); });

@wplearninglab 4 года назад

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!

@elpretentio 4 года назад

@@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");}); });

@adamaltamirano2555 6 лет назад

Thank you for being awesome! and posting this.

@wplearninglab 6 лет назад

Awe shucks. Glad we could help.

@uimonk 6 лет назад

good one i would be hapy if you explained rest two parameters of enque script function

@vioucocotte 3 года назад

I did everything you said. the script doesn't even appear in the source code! -_-

@wplearninglab 3 года назад

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!

@vioucocotte 3 года назад

@@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.

@nhacskybolero4961 4 года назад

Help get link code zingmp3 wordpress

@isloo_boy 3 года назад

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 :)

@wplearninglab 3 года назад

You’re welcome Muhammad, thanks for watching!

@miguelalexandermacedozegar2462 5 лет назад

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ú

@youterisim6173 3 года назад

Thank you so much

@wplearninglab 3 года назад

You’re welcome, thanks for watching!

@thekingsofheart 4 года назад

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?

@wplearninglab 4 года назад

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!

@thekingsofheart 4 года назад

@@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!

@Gift1706 3 года назад

@@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?

@ronny-gunnarsson 6 лет назад

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)

@wplearninglab 6 лет назад

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!

@matthewverdini274 2 года назад

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

@StudyGyaan 6 лет назад

//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"

@wplearninglab 6 лет назад

It should also tell you on which line the T_VAR error is. Can you share the line?

@dimitrijejovanovic6779 5 лет назад

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

@mattj5245 2 года назад

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.

@dualipyah2221 3 года назад

thank you!

@wplearninglab 3 года назад

You’re welcome Duali, thanks for watching!

@nabilaqmar4829 2 года назад

how do i call multiple .js?

@adrian-rainbow 5 лет назад

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

@svenskanyheter6683 5 лет назад

Hi your videos are awesome. Can i add data.json,bodymovin,index.html,new.js to wordpress

@wplearninglab 5 лет назад

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!

@svenskanyheter6683 5 лет назад

How can we know it's a legitimate javascript file

@ahmadluqmanhaqem4270 2 года назад

Thank you very helpful. It working for WordPress version 5.8.1.

@case_tips 2 года назад

I think in 2022 it is not working

@NOALNOM 3 года назад

Great Bjorn thanks 4 sharing!!! How do you remove the wp javascript type attributes via functions.php / code snippets? Thanks again!

@byrdmang44 4 года назад

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!

@tonyprice228 3 года назад

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?

@pentasia4172 4 года назад

hi there, great it's working on desktop, but not working on mobile version. kindly need your adivice, thanks

@bikerflyer563 4 года назад

I followed this tutorial exactly and nothing but the javascript code shows above the header of the page.

@rahimemelikebatu164 4 года назад

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 :(

@elizabethbucher1252 5 лет назад

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?

@wplearninglab 5 лет назад

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!

@sidsoares73 5 лет назад

Im trying to use m3u8 file/s in my website but doesnt load on the player can you help please.

@YourWeddingPhotographer 2 года назад

spent 3 hours looking for a decent explanation. Thank you.

@kavirajmanampadi939 3 года назад

Thank you.

@Makia_deux_fois 4 года назад

Can I add several functions in the functions.php files ?

@wplearninglab 4 года назад

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.

@Makia_deux_fois 4 года назад

@@wplearninglab Thank you for the video and for the answer. I have add 5 functions, hope is not gonna be too much 🤞🏾

@marcuscosta6102 4 года назад

Congratulations! I solved my problem with your tip! Thanks a lot!

@rosalierazonable2629 4 года назад

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!

@wplearninglab 4 года назад

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!

@rosalierazonable2629 4 года назад

@@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

@wplearninglab 4 года назад

You're welcome Rosalie! Good luck with JS, it's a powerful tool to be able to use.

@rosalierazonable2629 4 года назад

@@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.

@santiagozuluagagaviria1571 5 лет назад

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 :)

@wplearninglab 5 лет назад

I'm happy it worked! Thanks for the sub Santiago, I appreciate it :)

@utkarshtiwari2362 Год назад

@@wplearninglab hello sir , what if i want to add this js code on the entire website

@rockrecon 5 лет назад

I want to add a .js snippet just before the closing head tag. How do I do that?

@enochyoung1283 6 лет назад

Pls how can I see my PhP codes for using an elementor template so that I can add a code?

@miharyrakotoniarivo6661 4 года назад

Thank you very much for the video. It works for me

@tonyprice228 3 года назад

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?

@selwynnz8417 3 года назад

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.

@nunmulsilo 4 года назад

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.

@brahimiahmedfarouk4224 4 года назад

conquering england at day n making useful tutos at night

@Techdoct 4 года назад

Great Post

@SaintMTE 5 лет назад

What background music is that please?

@richardcoopmans992 4 года назад

How to load in an async.js file?

@shahipapon833 3 года назад

Totally awesome 😍😍😍

@wplearninglab 3 года назад

Thanks Shahi and thanks for watching!

@trickybats7339 5 лет назад

awesome thanks!!

@wplearninglab 5 лет назад

You're welcome, thanks for watching! Let me know if you have any questions :)

@mateusmazzei384 4 года назад

Thanks!!!!!

@wplearninglab 4 года назад

You're welcome Mateus, thanks for watching! Let me know if you have any questions :)

@stylbandeira6529 4 года назад

That was amazing. Thank you sooooo much!

@DoomCatcher 6 лет назад

The page isnt loading with the code I would of used it

@wplearninglab 6 лет назад

Hi Adam, my bad. The page was still set to draft :( It should work now. I hope that code helps you!

@iyakfishing2917 6 лет назад

need to add: get_theme_file_uri('/js/my-js.js') that works:)

@rocklinfineart5786 4 года назад

thanks so much!!!!!

@brady.essman 3 года назад

You are a great presenter!

@Youtick 2 года назад

Too fast

@wplearninglab 2 года назад

Thanks Youtik and thanks for watching!

@anjelicadixon7719 6 лет назад

I love You!

@wplearninglab 6 лет назад

Thanks! And thanks for watching!

@toshwilcox5955 5 лет назад

Great tutorial! Thanks!

@wplearninglab 5 лет назад

You're welcome Tosh, thanks for watching!

@spencerbce9231 3 года назад

New subscriber here!

@jamessummers5936 6 лет назад

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.

@wplearninglab 6 лет назад

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!

@bhanugill375 5 лет назад

@@wplearninglab congratulations 👶

@davidweeks1997 4 года назад

Thank you.

@modernizemysite 4 года назад

This was so helpful. Thank you!

@lahannahlou 5 лет назад

is there a way i can apply it to my whole site? - without breaking anything

@MattBoehm87 5 лет назад

just use the wp_enqueue_script() line without the conditional ( if ) statement. Hope that helps.

@rizalaziznugraha 5 лет назад

@@MattBoehm87 and how to apply just for entire wordpress post without pages? thank you

@lavignesbloodstainjun20 5 лет назад

Awesome ;)

@wplearninglab 5 лет назад

Thanks and thanks for watching! Let me know if you have any questions!

@lavignesbloodstainjun20 5 лет назад

@@wplearninglab Ok sir, we appreciate your help

@wplearninglab 5 лет назад

No problem, that's what I'm here for :)

@Mobicartweb 6 лет назад

How to make website. Load faster ????

@wplearninglab 6 лет назад

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!

@ינוןאלבז-כ1ז 6 лет назад

תודה רבה סרטון מעולה

@wplearninglab 6 лет назад

אתם מוזמנים, תודה על צפייה! (מ- Google Translate)

@marshabrightly1307 5 лет назад

the same way for jquery too?????

@wplearninglab 5 лет назад

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!

@marshabrightly1307 5 лет назад

@@wplearninglab thanks alot

@wplearninglab 5 лет назад

No problem :)

@marshabrightly1307 5 лет назад

@@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...