Web Development Tools I Use – Developing WordPress Websites

When Developing WordPress Websites, there are several tools that I use to ensure I have a Streamlined Workflow. Since I’ve been creating custom sites for several years, I’ve learned the hard way how long it can take to have a website completed in a timeframe that won’t consume more time than needed while ensuring that the final product will validate with the most important testing tools online from Google PageSpeed Insights, PingDom Tools and more importantly, website visitors.

Web Design & Development, Tools of the Trade

I design and develop websites using the most widely used web stack that consists of:

• HTML – The Skeleton of a Website
• CSS – The skin of a site. What makes it look good, hopefully.
• JavaScript – This adds dynamic functionality to the front end of a site.
• PHP – is the dynamic server side programming used.
• MySQL – is the brains of the site. The database.
• WordPress – is the CMS of choice that powers over 30% of modern websites.

Besides the coding languages used to design and develop a website, there are several advanced but free tools that once learned, can significantly improve a web developer’s workflow. After using these tools for some time now, I don’t know how I was able to work without them.

Atom Text Editor

When coding a website, you need to have a quality text editor that provides the functionality you will need to ensure that you can code efficiently and maintain your code in the long run.

While there are definitely some Advanced IDE’s that you can use (I’ve used them all), I recommend and use, the Atom Text Editor. Atom is a Free and open Source Editor that’s Cross Platform Compatible.

It has the features you need such as:

• line numbers
• syntax highlighting
• advanced search and replace functionality
• tight integration with Git (more on this later)
• ability to extend it with packages and themes.
• fast and lightweight
• code completion
• and more

I plan on creating a video/blog about all the advanced features Atom has. You can get this amazing text editor on their official website. Atom Text Editor

Developers Browser

While you might think that a browser is just a browser, when it comes to coding and developing websites, there are only two browsers you should consider. Chrome and Firefox.

They both are great browsers with easy t use, search capabilities but it’s their development tools that are baked into them, that make them stand out from the crowd.

They make it easy to inspect various aspects of a website and can help you identify areas that need more attention or fine tuning. I definitely recommend using either of them or even both of them.

Local Web Server

In order to work with a dynamic coding language like PHP or a CMS like WordPress, you will need a local web server which will give you similar functionality to the web servers in datacenters. Albeit, not publicly visible.
There are three local web servers that I recommend using.

• MAMP – Mac and Windows MAMP
• WAMP – Windows only WAMP
• XAMPP – Linux, Mac and Windows XAMPP

Git – Version Control System

Here’s the gist of what Git is, straight from the official website.

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.

Git has a ton of advanced functionality that make it easy to code and keep track of changes. Just to name a few of the features that Git Provides are:

• Tracking – git is a version control system and tracking is one of it’s main features. It keeps track of your code, files and folders and makes it easy for you to view previous versions of your code and if needed, you can revert to an earlier version.
• Branching – this is a great feature. At it’s core, it makes it easy for you to work on your main project and if you have an idea that you want to try out, you can create a branch that implements the idea while not impacting your main code. You can merge a branch into your main project or as it’s better known, Master Branch.
• Cloning – You can easily clone an existing project and this is something you will find developers doing either from their private repositories or from a place like GitHub.

Here is how you get started with Git

In order to start tracking a folder where your project is, you will need to install Git which you can get from their website. Get Git They have great documentation that you can use to easily get started. Git Docs

Here are some basic commands.
This is what you would type in the linux or mac terminal aka command line or in git bash on windows. It creates an empty Git repository or reinitialize an existing one.

git init

This is what you would type in the terminal to clone a project either from another area on your computer, a private repository or a website like GitHub.

git clone // followed by the path to the project you want to clone

This is what you would type when you want to add files and folders to the index

git add // followed by the file or folder to add

This is what you would type to commit the files you just added and also provide a message/description of what the changes are so you can reference them later if needed.

git commit -m "your message goes in between quotation marks"

This is what you type when you want to find the status of your current project.

git status

If you want to view your logs of your previous commits, you would type in this command.

git log

Those are just a few of the commands you can use with Git. I plan on creating a more in depth video tutorial on all the advanced functionality that Git provides.
Make sure you subscribe to my channel so you can be notified when videos are released.

Gulp

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
It is used to automate some of the tasks that can consume a significant amount of your time like:

• minifying code
• concatenating files
• linting your JavaScript
• Compiling your CSS with Sass
• and more

If you want to use Gulp, you will need to download Node.js which comes NPM aka Node Package Manager. You can get Node from their official website NodeJS

Once you have Node installed, you can get Gulp from the command line. Open your terminal or git bash and install Gulp Globally with the following command.

This installs gulp globally.

npm install --global gulp-cli

Type this in the folder you want Gulp to work in.

npm install --save-dev gulp

Create a gulpfile.js file in the root of the project folder/directory you’ll be working in.

var gulp = require('gulp');
gulp.task('default', function() {
  // place code for your default task here
});

Then in the command line (make sure you’re in the right directory) test if Gulp is working.

gulp

Here is an example of one of my gulpfile.js files.

var themename = 'devwp';

var gulp = require('gulp'),
	// Prepare and optimize code etc
	autoprefixer = require('autoprefixer'),
	browserSync = require('browser-sync').create(),
	postcss = require('gulp-postcss'),
	sass = require('gulp-sass'),
	sourcemaps = require('gulp-sourcemaps'),
	jshint = require('gulp-jshint');
 	concat = require('gulp-concat'),
  uglify   = require('gulp-uglify'),

	// Only work with new or updated files
	newer = require('gulp-newer'),

	// Name of working theme folder
	root = '../' + themename + '/',
	scss = root + 'sass/',
	js = root + 'js/',
  srcjs = root + 'srcjs/',
	languages = root + 'languages/';


// CSS via Sass and Autoprefixer
gulp.task('css', function() {
	return gulp.src(scss + '{style.scss,rtl.scss}')
	.pipe(sourcemaps.init())
	.pipe(sass({
		outputStyle: 'expanded',
		indentType: 'tab',
		indentWidth: '1'
	}).on('error', sass.logError))
	.pipe(postcss([
		autoprefixer('last 2 versions', '> 1%')
	]))
	.pipe(sourcemaps.write(scss + 'maps'))
	.pipe(gulp.dest(root));
});

// JavaScript
gulp.task('javascript', function() {
	return gulp.src([srcjs + '*.js'])
	.pipe(jshint())
	.pipe(jshint.reporter('fail'))
	.pipe(concat('theme.js'))
	.pipe(uglify())
	.pipe(gulp.dest(js));
});

// Watch everything
gulp.task('watch', function() {
	browserSync.init({
		open: 'external',
		proxy: 'http://localhost:8888/newwp/',
		port: 8080
	});
	gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
	gulp.watch(srcjs + '**/*.js', ['javascript']);
    gulp.watch(root + '**/*').on('change', browserSync.reload);
});


// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);

This is an example of my package.json file.

{
  "name": "devwp",
  "version": "0.0.1",
  "description": "Accessible WordPress theme utilizing flex layouts and modern development practices.",
  "main": "index.php",
  "author": "Joel Rivera",
  "license": "GPL-3.0",
  "devDependencies": {
    "autoprefixer": "^6.5.2",
    "browser-sync": "^2.17.6",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-jshint": "^2.0.4",
    "gulp-newer": "^1.3.0",
    "gulp-postcss": "^6.2.0",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^2.2.0",
    "gulp-uglify": "^3.0.0",
    "jshint": "^2.9.4"
  }
}

Watch the video at the top of this article to see this in action.

WordPress

Since I create websites using WordPress, it’s a major part of my toolset. While I can code a website from scratch using just HTML, CSS, JavaScript, PHP and MySQL, using WordPress makes it more cost effective and easier to hand off to clients. It also decreases the ongoing maintenance costs of owning a website.

To work with WordPress locally, you would just get it from Download WordPress and then you would place the extracted zip folder in your htdocs folder of your local webserver.

You would then need to start your local server and create a database for it. Then you would go to your browser and file path in the url bar and follow the prompts for setting it up. You can see how this is done in the video above.

WordPress Starter Theme

The team at Automattic has created a barebones starter theme called Underscores which you can get from Get Underscores. I have another video that walks you through this starter theme.

In the video above, I take you on a tour of the Underscores Starter theme and how it can speed up your WordPress Theme Development. All you need to do is style it out and add your html/css. You can also extend it by adding more advanced functionality which is what I’ve done with EVO Pro – Premium WordPress Theme

Final Thoughts

Being a Web Developer & Designer who focuses on WordPress Development is a fulltime job. Especially staying on top of all the tools of the trade. Fortunately, these same tools can make you significantly more productive.

Hopefully you found this article helpful and if you want to see how I use these advanced web development tools, then watch the video and you will see how they all work together.

Feel free to share your thoughts, subscribe and share. Thanks for taking the time to read this post and watch the video. In the next few weeks I will upload a video on how to handle the frontend style and layouts for our starter theme, so make sure you subscribe.

Share This On: