WordPress Development With NodeJS, Gulp, Composer & More
4.1 (31 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
301 students enrolled
Wishlisted Wishlist

Please confirm that you want to add WordPress Development With NodeJS, Gulp, Composer & More to your Wishlist.

Add to Wishlist

WordPress Development With NodeJS, Gulp, Composer & More

This course helps WordPress developers integrate modern Javascript technologies into their development environments.
4.1 (31 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
301 students enrolled
Created by Bruce Chamoff
Last updated 11/2016
English
Current price: $10 Original price: $25 Discount: 60% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 5 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Clean up your WordPress directory to make it more organized
  • Speed up WordPress development with modern utilities from NodeJS
  • Use NodeJS to build a local WordPress server for development.
  • Create quick clean CSS for your WordPress themes with SASS
  • Use Composer to build and distribute a library of WordPress plugins and themes for any installation
  • Streamline your WordPress theme and plugin development with GulpJS
View Curriculum
Requirements
  • Experience with PHP
  • Experience with WordPress development, either with themes and/or plugins
Description

You are an experienced WordPress developer with some themes or plugins under your belt. The more we develop in WordPress, the more we find that things get tedious, messy, and time consuming. That is just the way it is when developers get more into a software tool or content management system like WordPress. 

With this course, students will learn to speed up and streamline their WordPress development with the most modern Javascript technologies as they pertain to WordPress development including, but not limited to:

  • NodeJS - NodeJS has an incredible amount of utilities to speed up development
  • Build a local web server to make build one dedicated solely to WordPress development
  • GulpJS to speed up file maintenance, clean up our CSS (also with SASS, AutoPrefixer, Uglify, etc), display server side information in the command line
  • Composer to set up a plugin and/or theme distribution without the need to install and activate them with every new installation.
  • Clean up our WordPress directories and better organize them..
Who is the target audience?
  • Intermediate and advanced WordPress developers who have experience with theme and/or plugin development
  • Javascript and NodeJS developers with some basic knowledge of PHP
Compare to Other WordPress Courses
Curriculum For This Course
30 Lectures
03:57:51
+
Organizing Our WordPress File Directories
14 Lectures 01:10:19

In this introduction, I explain the benefits of this course and show you what we will be striving for in this section in cleaning up our WordPress directory. This 6 minute video focuses on an overview of the latest javascript technologies and how they relate specifically to WordPress.

Preview 06:28

Why do we need to clean up our WordPress direcotry? The reason is because when we start to develop with NodeJS, SASS, Composer, Grunt, Gulp, etc, we will be putting more of these files in our WordPress site's root directory. Having the core installation files in the root just makes our root directory convoluted. 

Follow me on this Powerpoint Presentation of the quick steps to move your WordPress core installation files to a subdirectory do that our root stays neat and organized.

We perform each step in a separate lecture to show how easy and quick this process is.

Preview 08:20

In this simple step, we create a blank MySQL database.

Step 1: Start with a new core installation and MySQL database
01:55

Here, we create a brand new directory in our file system, preferably under our MAMP, WAMP, XAMPP system or any FTP on a shared wen hosting platform.

Step 2: Creating Our WordPress Root Directory
02:50

In this step, we create our COMPOSER.JSON file, but I also provide you the full file in the Resources section. This file has what we need to download a fresh copy of WordPress and to install the core files in an alternative directory.

Step 3: Creating our Composer JSON file
04:05

Composer is the software that will help us quickly download WordPress without doing all the heavy lifting of installing WordPress. I show you where to download Composer and how to set it up in this video.

Step 4: Downloading Composer and Setting it Up.
04:17

Composer, like other Javascript-based technologies, runs on JSON. I show you how to write the JSON in this video that will drive Composer's operation.

Step 5: Installing Our Composer JSON
08:45

After we run Composer and it executes the JSON contained within it, WordPress will have a new structure, a much cleaner structure. Let's spend a couple of minutes inspecting our new structure and how much more organized it is.

Step 6: Inspecting our new WordPress File Structure
02:42

We need to add two lines to wp-config.php. See the instructions file in the Resources section for that code or watch the video to see exactly where to place those lines of code.

Step 7: Modifying our WP-CONFIG to Work With the new Directory Structure.
06:11

This is a quick video to show you where our WP-CONTENT directory should now be residing after we modify our WP-Config.php file.

Step 8: Relocating Our WP-CONTENT Directory
01:06

The index.php file needs to be located the in the root, but our process initially places it in the WP directory.

Step 9: Copying Our Index File to the New Location
01:09

Now, we perform an installation in WordPress.

Step 10: Installing WordPress
04:00

We need to make some changes to our MySQL database in order to tell WordPress where to get certain files and internal URLs.

Final Step 11: Modifying Our MySQL to Work with the New Directory Structure.
04:07

In this lecture, we perform all of the previous steps together, which is the way you would be performing once you get the hang of this process. You will notice that it takes less than 10 minutes on average.

Project: Performing All Of Our Steps At Once
14:24

Test your knowledge of the steps to organize your WP installations.

Cleaning Up Our WordPress Directory
5 questions
+
Setting Up Our Fast, Streamlined, & Efficient WordPress Development Environment
13 Lectures 02:22:46

In this section, we start streamlining our WordPress develop with some of the latest, more modern JS technologies. This introduction provides the overview of the process for the video lectures that will follow.

Introduction to Streamlined, Fast, and Efficient WordPress Development
07:16

I take about NodeJS and how it will benefit us during our WordPress development.

Introduction To NodeJS and Its Benefits To WordPress Developers
04:45

NPM is the Node Package Manager and Git is the most popular version control system for WordPress development. Here, we get up Git and explore the NPM system.

Setting Up Git Version Control and Our NPM JSON File
12:30

What is Gulp exactly? It is a task runner streamlining out development of CSS, Javascript, and more. I show you how to download it and install it and provide you a demo of how it works and how to start coding it. 

Also, please see the Resources section for two Gulp default files. Each one provides a different option of running Gulp as a default task and also how to call another task which in the video, I call "RUNNOW".

Setting Up Our Gulp Development Environment
16:45

We start using Gulp to minify our CSS development. "Minify" means to compress the characters of the file and remove certain symbols that are usually ignored by the compiler. This will also speed up the loading of your WordPress website.

Since WordPress has its CSS located in the theme, we set up our CSS in a separate development directory and then using Gulp, compile it into the correct location.

Streamlining our WordPress CSS Development with Gulp (Part 1)
16:14

Part 2 of the previous video.

Streamlining our WordPress CSS Development with Gulp (Part 2)
15:40

Gulp Watch is a very useful command that automatically runs tasks for us as we save PHP files so we do not need to constantly run tedious tasks manually. In this video, I set up Gulp Watch and configure it to run your tasks automatically.

Gulp Watch For Our WordPress Theme CSS and PHP Files Including Themes & Plugins
17:10

In this project, we add 3 Gulp tasks and I also show you how to run them with one command.

Project: Create 3 Gulp Tasks and Run Them All From The Default Task
03:31

Some developers prefer Gulp. Some prefer Grunt. I provide a quick comparison of them and which one is more useful for WordPress development.

Side Note: GulpJS vs GruntJS
03:40

In this project, we take the long CSS file that comes with the Twenty Fifteen theme and break it up into smaller chunks which also includes the responsive code including media queries.

PROJECT: Break & Concatenate Our TwentyFifteen Theme CSS Into Smaller Files
13:14

SASS is an amazing utility that allows us to streamline our CSS development by using math, variables, mixins, and other cool tools. In this video, we adopt it to suit our WordPress development.

WordPress Development with SASS and Gulp (Part 1)
16:32

Part 2 of the previous video.

WordPress Development with SASS and Gulp (Part 2)
12:31

Let's compress our CSS using SASS.

Compressing Our CSS in SASS
02:58
+
Using Composer to create a Plugin and Theme Distribution
2 Lectures 18:04
Introduction to WordPress Theme & Plugin Packages
04:03

Our composer.json file is the key to helping us become faster and more efficient WordPress web designers by specifiying which ones to download and install in one file. In this video, I give you the details on the following:

  • where to find the plugin and theme packages
  • how to code our composer.json to request specific themes and plugins
  • what commands to run to update our composer requirements.
Install Plugin and Themes Faster & More Efficiently Automatically with Builds
14:01
+
Conclusion
1 Lecture 06:42

Watch this video as I tell you the future of this course and what's to come.

Conclusion: We are not done yet! The Future of this Course and What's To Come
06:42
About the Instructor
Bruce Chamoff
4.2 Average rating
824 Reviews
22,650 Students
11 Courses
Web Developer of 20 Years and Songwriter of Over 40 Years

CEO of the Web Designer Mall, a one-stop shop for all web designers and web developers.

I have designed and developed over 1,000 websites in the past 20 years for companies of all sizes from small businesses to major Fortune 500 corporations. Being the owner of a prestigious online mall for web developers, I have programmed everything from WordPress to Drupal to Joomla to simple HTML5.

Involved in the WordPress Community. I am also a speaker at WordCamps in the United States. 

The Music, The Songwriting

I love writing, recording, and producing music, mainly my own originals. I play sax and piano and have over 150 songs. Yes, I should have gone for that record deal, but I still enjoy the process of making music!