How do I add a simple jQuery script to WordPress

Question

I read the Codex and a few blog posts about using jQuery in WordPress  and its very frustrating  I ve got as far as loading jQuery in functions php file  but all of the guides out there are crappy because they assume you already have a ton of WordPress experience  For instance  they say that now that I m loading jQuery through the functions php file  now all I have to do is load my jQuery   How exactly do I do this  What files  specifically  do I add code to  How exactly do I add it for a single WordPress page

User · Answer

Beside putting the script in through functions you can "just" include a link ( a link rel tag that is) in the header, the footer, in any template, where ever.

No. You should never just add a link to an external script like this in WordPress. Enqueuing them through the functions.php file ensures that scripts are loaded in the correct order.

Failure to enqueue them may result in your script not working, although it is written correctly.

User · Answer

The solutions I ve seen are from the perspective of adding javascript features to a theme  However  the OP asked  specifically   How exactly do I add it for a single WordPress page   This sounds like it might be how I use javascript in my Wordpress blog  where individual posts may have different javascript-powered  widgets   For instance  a post might let the user change variables  sliders  checkboxes  text input fields   and plots or lists the results   Starting from the JavaScript perspective    Write your JavaScript functions in a separate     js    file   Don   t even think about including significant JavaScript in your post   s html   create a JavaScript file  or files  with your code    Interface your JavaScript with your post s html   If your JavaScript widget interacts with html controls and fields  you   ll need to understand how to query and set those elements from JavaScript  and also how to let UI elements call your JavaScript functions  Here are a couple of examples  first  from JavaScript   var val   document getElementById    AM Freq A 3     value    And from html    lt input type  range  id  AM Freq A 3  class  freqSlider  min  0  max  1000  value  0  oninput  sliderChanged AM widget this     gt     Use jQuery to call your JavaScript widget   s initialization function   Add this to your  js file  using the name of your function that configures and draws your JavaScript widget when the page is ready for it   jQuery document  ready function            your init function           In your post   s html code  load the scripts needed for your post   In the Wordpress code editor  I typically specify the scripts at the end of the post  For instance  I have a scripts folder in my main directory  Inside I have a utilities directory with common JavaScript that some of my posts may share   in this case some of my own math utility function and the flotr2 plotting library  I find it more convenient to group the post-specific JavaScript in another directory  with subdirectories based on date instead of using the media manager  for instance    lt script type  text javascript  src   scripts utils flotr2 min js  gt  lt  script gt   lt script type  text javascript  src   scripts utils math min js  gt  lt  script gt   lt script type  text javascript  src   scripts widgets 20161207 FreqRes js  gt  lt  script gt     Enqueue jQuery   Wordpress registers jQuery  but it isn   t available unless you tell Wordpress you need it  by enqueuing it  If you don   t  the jQuery command will fail  Many sources tell you how to add this command to your functions php  but assume you know some other important details   First  it   s a bad idea to edit a theme   any future update of the theme will wipe out your changes  Make a child theme  Here   s how   https   developer wordpress org themes advanced-topics child-themes   The child   s functions php file does not override the parent theme   s file of the same name  it adds to it  The child-themes tutorial suggest how to enqueue the parent and child style css file  We can simply add another line to that function to also enqueue jQuery  Here s my entire functions php file for the child theme    lt  php add action   wp enqueue scripts    earlevel scripts enqueue     function earlevel scripts enqueue            styles      parent style    parent-style       wp enqueue style   parent style  get template directory uri       style css         wp enqueue style   child-style           get stylesheet directory uri       style css           array   parent style            wp get theme  - gt get  Version                  posts with js widgets need jquery     wp enqueue script  jquery

User · Answer

You can add jQuery or javascript in theme s function php file  The code is as below    add action   wp enqueue scripts    add my script      function add my script     wp enqueue script       your script name      your script unique name      get template directory uri     js your-script js     script file location     array  jquery     lists the scripts upon which your script depends        For more detail visit this tutorial   http   www codecanal com add-simple-jquery-script-wordpress

User · Answer

You can add custom javascript or jquery using this plugin  https   wordpress org plugins custom-javascript-editor   When you use jQuery don t forget use jquery noconflict mode

User · Answer

Answer from here  https   premium wpmudev org blog adding-jquery-scripts-wordpress   Despite the fact WordPress has been around for a while  and the method of adding scripts to themes and plugins has been the same for years  there is still some confusion around how exactly you   re supposed to add scripts  So let   s clear it up  Since jQuery is still the most commonly used Javascript framework  let   s take a look at how you can add a simple script to your theme or plugin  jQuery   s Compatibility Mode Before we start attaching scripts to WordPress  let   s look at jQuery   s compatibility mode  WordPress comes pre-packaged with a copy of jQuery  which you should use with your code  When WordPress    jQuery is loaded  it uses compatibility mode  which is a mechanism for avoiding conflicts with other language libraries  What this boils down to is that you can   t use the dollar sign directly as you would in other projects  When writing jQuery for WordPress you need to use jQuery instead  Take a look at the code below to see what I mean

User · Answer

function xyz scripts         wp enqueue script  jquery      add action  wp enqueue scripts    xyz scripts

User · Answer

We have Google  cit  For properly use script inside wordpress just add hosted libraries  Like Google  After selected library that you need link it before your custom script  exmpl   lt script src  https   ajax googleapis com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt    and after your own script   lt script type  text javascript  gt        document  ready function                  text container   addClass  hidden             lt  script gt

User · Answer

I know what you mean about the tutorials  Here s how I do it   First you need to write your script  In your theme folder create a folder called something like  js   Create a file in that folder for your javascript  E g  your-script js  Add your jQuery script to that file  you don t need  lt script gt  tags in a  js file    Here is an example of how your jQuery script  in wp-content themes your-theme js your-scrript js  might look   jQuery document  ready function            nav a   last   addClass  last         Notice that I use jQuery and not   at the start of the function   Ok  now open your theme s functions php file  You ll want to use the wp enqueue script   function so that you can add your script whilst also telling WordPress that it relies on jQuery  Here s how to do that   add action   wp enqueue scripts    add my script     function add my script         wp enqueue script           your-script      name your script so that you can attach other scripts and de-register  etc          get template directory uri       js your-script js      this is the location of your script file         array  jquery      this array lists the scripts upon which your script depends            Assuming that your theme has wp head and wp footer in the right places  this should work  Let me know if you need any more help   WordPress questions can be asked over at WordPress Answers

User · Answer

If you use wordpress child theme for add scripts to your theme  you should change the get template directory uri function to get stylesheet directory uri  for example    Parent Theme    add action   wp enqueue scripts    add my script     function add my script         wp register script           parent-theme-script            get template directory uri       js your-script js            array  jquery                wp enqueue script  parent-theme-script        Child Theme    add action   wp enqueue scripts    add my script     function add my script         wp register script          child-theme-script           get stylesheet directory uri       js your-script js           array  jquery                wp enqueue script  child-theme-script        get template directory uri    your-site wp-content themes parent-theme  get stylesheet directory uri    your-site wp-content themes child-theme

User · Answer

Method 1   Try to put your jquery code in a separate js file   Now register that script in functions php file   function add my script         wp enqueue script         custom-script   get template directory uri       js your-script-name js            array  jquery             add action   wp enqueue scripts    add my script       Now you are done   Registering script in functions has it benefits as it comes in  lt head gt  section when page loads thus it is a part of header php always   So you don t have to repeat your code each time you write a new html content    Method 2  put the script code inside the page body under  lt script gt  tag  Then you don t have to register it in functions

User · Answer

Beside putting the script in through functions you can  just  include a link   a link rel tag that is  in the header  the footer  in any template  where ever   You just need to make sure the path is correct   I suggest using something like this  assuming you are in your theme s directory     lt script type  javascript  href   lt  php echo get template directory uri     gt  your-file js  gt  lt  script gt    A good practice is to include this right before the closing body tag or at least just prior to your footer   You can also use php includes  or several other methods of pulling this file in    lt script type  javascript  gt  lt  php include  your-file js     gt  lt  script gt

User · Answer

There are many tutorials and answers here how to add your script to be included in the page   But what I couldn t find is how to structure that code so it will work properly   This is due the   being not used in this form of JQuery   So here is my code and you can use that as a template   jQuery document  ready function             btnCalculate   click function              var val1       visits   val            var val2       collection   val            var val3       percent   val            var val4       expired   val            var val5       payer   val            var val6       deductible   val             var result   val1    val3   100    10   0 25          var result2   val1   val2    val4   100    0 2          var result3   val1   val2    val5   100    0 2          var result4   val1   val2    val6   100    0 1          var val7       pverify   val            var result5   result   result2   result3   result4 - val7          var result6   result5   12              result   val       result               result2   val       result2               result3   val       result3               result4   val       result4               result5   val       result5               result6   val       result6

User · Answer

You can use WordPress predefined function to add script file to WordPress plugin   wp enqueue script   script   plugins url  js demo script js     FILE     array  jquery       Look at the post which helps you to understand that how easily you can implement jQuery and CSS in WordPress plugin

User · Answer

In WordPress  the correct way to include the scripts in your website is by using the following functions   wp register script   handle   src   wp enqueue script   handle   src     These functions are called inside the hook wp enqueue script   For more details and examples  you can check Adding JS files in Wordpress using wp register script  amp  wp enqueue script    Example   function webolute theme scripts         wp register script   script-name   get template directory uri       js example js   array  jquery     1 0 0   true        wp enqueue script   script-name       add action   wp enqueue scripts    webolute theme scripts

User · Answer

As you mentioned  the simple way inside functions php without using enqueue is this one  add action  wp footer    customJsScript    function customJsScript       echo      lt script gt    jQuery function        console log  quot test quot             lt  script gt          As you see  you use the wp footer action to inject the code  But you may prefer to put directly the code inside header php or footer php if is a code that will be inserted all-over WordPress

User · Answer

After much searching  I finally found something that works with the latest WordPress  Here are the steps to follow    Find your theme s directory  create a folder in the directory for your custom js  custom js in this example   Put your custom jQuery in a  js file in this directory  jquery test js in this example   Make sure your custom jQuery  js looks like this    function        document  ready function         your-class   addClass  do-my-bidding          jQuery    Go to the theme s directory  open up functions php Add some code near the top that looks like this     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 jquery test js      array  jquery        1 0         enqueue the script   wp enqueue script  custom script        add action  wp enqueue scripts    my scripts method     Check out your site to make sure it works

User · Answer

you can write your script in another file And enqueue your file like this suppose your script name is image-ticker js   wp enqueue script   image-ticker-1   plugins url   js image-ticker js     FILE     array  jquery    image-ticker     1 0 0   true       in the place of  js image-ticker js you should put your js file path

User · Answer

Do you only need to load jquery   1  Like the other guides say  register your script in your functions php file like so      register scripts if   is admin             here is an example of loading a custom script in a  scripts  folder in your theme      wp register script  sandbox common   get bloginfo  template url     scripts common js   array  jquery     1 0   true          enqueue these scripts everywhere     wp enqueue script  jquery        wp enqueue script  sandbox common        2  Notice that we don t need to register jQuery because it s already in the core  Make sure wp footer   is called in your footer php and wp head   is called in your header php  this is where it will output the script tag   and jQuery will load on every page  When you enqueue jQuery with WordPress it will be in  no conflict  mode  so you have to use jQuery instead of    You can deregister jQuery if you want and re-register your own by doing wp deregister script  jquery

[jquery] How do I add a simple jQuery script to WordPress?

Examples related to jquery

Examples related to wordpress