WordPress and JavaScript
WordPress can include JavaScript. JavaScript is implemented within WordPress Themes.
Contents
wp_enqueue_script()
WordPress has a function named wp_enqueue_script() which allows you to "enqueue" a script.
That is, the script is placed in a queue of activities which WordPress will perform as it generates the website.
From the WordPress Codex:
The safe and recommended method of adding JavaScript to a WordPress generated page, and WordPress Theme or Plugin, is by using wp_enqueue_script().
This function includes the script if it hasn't already been included, and safely handles dependencies.
You can use wp_enqueue_script() in two places:
- In
functions.php - In a WordPress plugin
Source: https://codex.wordpress.org/Function_Reference/wp_enqueue_script
Using wp_enqueue_script() in functions.php
The optional functions.php contains custom PHP for a WordPress theme.
How to use wp_enqueue_script() in functions.php:
function wpse87681_enqueue_custom_stylesheets() {
if ( ! is_admin() ) {
wp_enqueue_style( 'mytheme-custom', get_template_directory_uri() . '/more-styles.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse87681_enqueue_custom_stylesheets', 11 );
The name "wpse87681_enqueue_custom_stylesheets" is arbitrary.
You might name yours "mystyles_enqueue_custom_stylesheets" or whatever.
Enqueuing JavaScript
External JavaScript files can be enqueued in a similar manner.
function karljones_enqueue_custom_stylesheets() {
if ( ! is_admin() ) {
wp_enqueue_style( 'myjs-custom', get_template_directory_uri() . '/js/example.js' );
}
}
add_action( 'wp_enqueue_scripts', 'karljones_enqueue_custom_stylesheets', 11 );
</pre>
Loading JavaScript directly into WordPress
wp_enqueue_script() is the preferred technique for loading JavaScript.
However, you can load JavaScript directly into WordPress templates, without using wp_enqueue_script().
To use JavaScript repeatedly within your site, you can either set the call for the JavaScript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using JavaScript in any HTML page.
To "load" the JavaScript file into your site, in the head, add something like this:
<script type="text/javascript" src="/scripts/emailpage.js"></script>
If your custom JavaScript isn't working after including the previous line of code in your header.php template file (TO DO: investigate "isn't working" -- what's going on?), use the following line of code:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/pathto/yourscript.js"></script>
Include the leading forward slash "/", even if your file is located in the root of your theme.
Be sure that you define the type correctly, as your site will not validate without it.
Using JavaScript in a WordPress theme
In the spot where you wish to use the JavaScript, set the call for the JavaScript.
For example, you are using a JavaScript that sets a link for users to "email this page" to a friend, and you want it to be under the post title. It might look like this:
<h3 class="storytitle"> <a href="<?php the_permalink() ?>" rel="bookmark"> <?php the_title(); ?></a> </h3> <div class="emailpage"> <script type="text/javascript"><!--//--><![CDATA[//><!-- emailpage(); //--><!]]></script> </div>
Source: https://codex.wordpress.org/Using_Javascript
