Learn How to Use JavaScript and WordPress Together!

There are a number of possible pitfalls when using JavaScript and WordPress together, such as:

  • Conflicts with JavaScript files loaded by other plugins and the theme on a site
  • Security when passing data between JavaScript and the WordPress database
  • Site performance

This course will show you how to help avoid these pitfalls and introduce you to the new WP REST API available starting in WordPress 4.4!

Watch for Free

Course Outline

Module 1: Introduction

This short module introduces the core concepts we’ll cover in the later modules.

  • Introduction
  • Basic Concepts
  • Summary

Module 2: Using JavaScript in Plugins and Themes

This module goes in depth on how to add JavaScript to your site, add any dependencies in the correct order, ensure messages are translatable, and cleanly pass any data your scripts need from PHP to JavaScript.

  • Overview
  • When to call wp_enqueue_script
  • Localizing your script and passing data
  • Notes on using jQuery in WordPress
  • Demo: Prevent adding posts with no featured image
  • Demo: Using jQuery UI on the front end
  • Adding Within a Theme
  • Using PHP Classes
  • Registering multiple scripts
  • Summary

Module 3: Using AJAX to Send and Save Data

The basics of setting up an endpoint in WordPress to use in JavaScript to send and receive data, through the WP REST API.

  • Introduction
  • Adding an Endpoint
  • Using the Endpoint
  • Validation and Sanitization
  • Authentication
  • Calling our Endpoint
  • Demo: Cupcake Voting
  • More Complex Endpoints
  • Best Practices
  • Summary

Module 4: Minifying and Combining Your JavaScript with Grunt

How to use Grunt to reduce the size of your JavaScript files, along with the network requests made – both increasing site performance.

  • Introduction
  • Creating the Tasks in Gruntfile.js
  • Adding Development vs. Production Versions
  • Summary

Sample Project

javascript-wordpress-demo-site

We’ll use a cupcake site as the base site in the course, for adding our JavaScript and functionality to. Why? Because cupcakes are delicious.

Watch for Free

About the Author

Brian Hogg is a WordPress developer, trainer, WordCamp organizer, and creator of the Event Calendar Newsletter plugin.

Brian’s also a former instructor at McMaster University, along with volunteering to lead sessions on WordPress, jQuery and CSS for Ladies Learning Code.