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.
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.
In this simple step, we create a blank MySQL database.
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.
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.
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.
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.
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.
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.
The index.php file needs to be located the in the root, but our process initially places it in the WP directory.
Now, we perform an installation in WordPress.
We need to make some changes to our MySQL database in order to tell WordPress where to get certain files and internal URLs.
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.
Test your knowledge of the steps to organize your WP installations.
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.
I take about NodeJS and how it will benefit us during our WordPress development.
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.
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".
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.
Part 2 of the previous video.
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.
In this project, we add 3 Gulp tasks and I also show you how to run them with one command.
Some developers prefer Gulp. Some prefer Grunt. I provide a quick comparison of them and which one is more useful for WordPress development.
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.
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.
Part 2 of the previous video.
Let's compress our CSS using SASS.
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:
Watch this video as I tell you the future of this course and what's to come.
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!