Create an account

Very important

  • To access the important data of the forums, you must be active in each forum and especially in the leaks and database leaks section, send data and after sending the data and activity, data and important content will be opened and visible for you.
  • You will only see chat messages from people who are at or below your level.
  • More than 500,000 database leaks and millions of account leaks are waiting for you, so access and view with more activity.
  • Many important data are inactive and inaccessible for you, so open them with activity. (This will be done automatically)


Thread Rating:
  • 465 Vote(s) - 3.44 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How do I add a simple jQuery script to WordPress?

#1
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?
Reply

#2
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').

Reply

#3
After much searching, I **finally** found something that works with the latest WordPress. Here are the steps to follow:

1. Find your theme's directory, create a folder in the directory for your custom js (**custom_js in this example**).
2. Put your custom jQuery in a .js file in this directory (**jquery_test.js in this example**).
3. Make sure your custom jQuery .js looks like this:

(function($) {
$(document).ready(function() {
$('.your-class').addClass('do-my-bidding');
})
})(jQuery);

4. Go to the theme's directory, open up **functions.php**
5. 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');
6. Check out your site to make sure it works!
Reply

#4
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).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

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.

<script type="javascript"><?php include('your-file.js');?></script>
Reply

#5
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][1] which helps you to understand that how easily you can implement jQuery and CSS in WordPress plugin.

[1]:

[To see links please register here]

Reply

#6
**#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 `<head>` 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 `<script>` tag. Then you don't have to register it in functions.
Reply

#7
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 `<script>` 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][1].


[1]:

[To see links please register here]

Reply

#8
If you use wordpress [child theme][1] 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**



[1]:

[To see links please register here]

Reply

#9
You can add custom javascript or jquery using this plugin.<br/>

[To see links please register here]


When you use jQuery don't forget use jquery noconflict mode
Reply

#10
>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.
Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

©0Day  2016 - 2023 | All Rights Reserved.  Made with    for the community. Connected through