WordPress JS Tools & Dependencies

Introduction to JS Tools in WordPress

JavaScript Tools and WordPress: JavaScript plays a crucial role in enhancing the user experience in WordPress. Here’s how JavaScript tools and dependencies come into play within WordPress:

• Enqueuing Scripts and Styles: In WordPress, you can enqueue JavaScript files (and CSS stylesheets) using the wp_enqueue_script() function. This ensures that your scripts are loaded efficiently and in the correct order. For example, if you’re building a custom theme or plugin, you’ll want to enqueue your JavaScript files properly. You specify dependencies (if any) when enqueuing scripts. Dependencies ensure that scripts load in the correct order, preventing issues where one script relies on another.
• Using jQuery: WordPress includes jQuery by default. jQuery is a powerful JavaScript library that simplifies DOM manipulation, AJAX requests, and event handling. You can use it in your custom themes or plugins. To enqueue jQuery, you can use the handle 'jquery' when calling wp_enqueue_script().
• Custom JavaScript in Themes and Plugins: When developing custom themes or plugins, you’ll often write your own JavaScript code. You can include your scripts directly in your theme’s functions.php file or create a separate .js file and enqueue it. Remember to follow best practices, such as wrapping your code in a closure to avoid global namespace pollution.

Managing Dependencies in WordPress: WordPress itself relies on various JavaScript libraries and dependencies. For instance:

• TinyMCE (Visual Editor): The WordPress visual editor (TinyMCE) uses JavaScript extensively. It provides features like rich text formatting, media embedding, and link insertion.
• Media Library: When working with images, videos, or other media, WordPress uses JavaScript for handling uploads, galleries, and media library interactions.
• REST API: The WordPress REST API allows you to interact with your site programmatically using JavaScript. You can fetch posts, update content, and perform other actions via AJAX requests.

In summary, JavaScript tools and dependencies are essential for enhancing WordPress functionality, improving user interfaces, and extending the platform. Whether you’re building custom themes, plugins, or modifying existing functionality, understanding JavaScript in the context of WordPress is crucial!

Steps to use WordPress JS tools in a WordPress theme

1. Install Node.js:
   • Download and install Node.js from the official website (nodejs.org).
   • Verify that Node.js is installed correctly by opening the terminal in Visual Studio Code (use Ctrl + J) and running the command node --version.
2. Create package.json File:
   • Navigate to the root folder of your WordPress theme in your terminal.
   • Run the command npm init -y to create a package.json file with default settings.
   • This command will generate a package.json file in the root folder of your theme, which will serve as a manifest for your project’s dependencies and configuration.
3. Install Dependencies:
   • Install the necessary dependencies for WordPress JS development by running the following commands:
     • npm install --save @glidejs/glide: This package provides a dependency for implementing Glide.js, a dependency-free JavaScript ES6 slider and carousel.
     • npm install --save @wordpress/scripts: This package provides a set of tools and scripts for WordPress development, including webpack configuration, asset compilation, and more.
     • npm install --save webpack webpack-cli: Webpack is a module bundler used to bundle JavaScript files for usage in a browser. We use webpack to compile and bundle our JavaScript code.
     • npm install --save-dev @babel/core @babel/preset-env babel-loader: Babel is a JavaScript compiler that enables us to use modern JavaScript features that may not be supported by all browsers. These packages are necessary for transpiling our JavaScript code to a compatible format.
     • npm install --save-dev style-loader css-loader sass-loader node-sass: These packages are used for loading and processing CSS and Sass files in our project.
     • npm install --save-dev file-loader: The file-loader package is used to handle file loading and processing in webpack, such as loading images and fonts.
   • After installing these dependencies, your package.json file should list them under the dependencies or devDependencies sections, indicating that they are dependencies or development dependencies used during the development process.
4. Start WP Scripts:
   • After installing the dependencies, you can start the WordPress scripts by running the command npm run start in the terminal.
   • This command will start the development server and watch for changes in your JavaScript files, allowing you to continue working on your theme.
5. Work on Your Theme:
   • With the development server running, you can now work on your WordPress theme using the WordPress JavaScript tools.
   • Make changes to your JavaScript files and see the updates reflected in real-time.
6. Stop the Development Server:
   • When you’re done working on your theme, you can stop the development server by opening the terminal and pressing Ctrl + C.
   • You will be prompted to confirm whether you want to terminate the process. Type 'Y' (for Yes) and press Enter to stop the server.

By following these steps, you can use WordPress JS tools to develop and enhance your WordPress theme efficiently. After following and installing dependencies, you will find package.json file and inside the package.json file, you will find dependencies added like this:

  "dependencies": {
    "@glidejs/glide": "^3.4.1",
    "@wordpress/scripts": "*",
    "axios": "^0.21.1",
    "normalize.css": "^8.0.1"
  }

What is npm run start script?

The npm run start script sets up a development server for WordPress JavaScript development. Once dependencies are installed, this script continuously runs in the background, monitoring changes to the src/index.js file. When changes are saved, the script automatically rebundles the compiled JavaScript, facilitating seamless development. It’s important to ensure that your JavaScript files are located within a folder named src, with index.js as the entry point. Additionally, this script handles CSS processing, compiling SCSS files into CSS during development.

What is npm run build?

The npm run build script compiles and optimizes assets for production deployment. When executed, this script bundles the JavaScript and CSS files, optimizes them for performance, and generates production-ready assets. The resulting files are typically minified and concatenated to reduce file size and improve loading times. This script is essential for preparing your WordPress theme or plugin for deployment to a live environment, ensuring optimal performance and reliability.