The Lazy Smart Programmer’s way to set up a WordPress Site

Last Updated June 23, 2016

When you get ready to set up a WordPress site, typically your process looks something like this:

  1. Download the latest version of WordPress from wordpress.org
  2. Unzip it.
  3. Copy and paste the files into a local directory (you are developing locally, right?)
  4. Create a MySQL database.
  5. Run the 5 minute WordPress install.
  6. Download your starter theme.
  7. Unzip it.
  8. Copy and paste the theme file into WordPress’s theme directory.
  9. Find your base plugins that you know you’ll need. Download each of them individually.
  10. Copy and paste the plugin files into WordPress’s plugin directory.
  11. Start your custom work.

That’s 11 steps…at least! I know, if you do it enough times you could probably get that down to a 15 minute setup, and that’s probably only if you have local versions of your boilerplate theme and plugins that you can quickly copy and paste into the respective directories.

But, why? Why would you even want to waste your time doing such mindless work every time you start a project when you could be spending that time designing and developing something beautiful and original?

What if I were to tell you that you could cut down that down to two minutes…on a bad day? Interested?

If you can hang with me for the length of this post, we can get you set up and you can start being more efficient.


Remember in English class, how they told us to (1) say what you’re going to say, (2) say it, and then (3) say what you said. I always remember thinking, “That sounds redundant.” Well, I’m going to take a lesson from Mrs. Noble. I’ll tell you a little bit about the tools we’re going to put in our tool chest, then I’ll show you practically how to use them. It may get a little technical from time to time, but try to stick with it, it will be worth it.


Node.js

A lot of services are built on Node.js. If you visit the Node.js site it says it’s built on Chrome’s JavaScript runtime. Just know, that means f-a-s-t.

If we’re going to use it, we have to install it. Fortunately for us, this is easy. There’s a big green “install” button on their site. Click it.

Node JS

Once the package is downloaded, unzip, and double click on the package to install it. Hooray!

Node Js Install

NOTE:

Grunt and Gulp also run on Node. (Blog post for the future.) Just know, for now, we’re set up for success!

Yeoman

Yeoman is a project generator. It can do quite a bit, setting up sites and scaffolding (and not just for WordPress). We’re going to take the easy way out and use a generator Wesley Todd has already created specifically for starting a WordPress project: YeoPress.

NOTE:

To run YeoPress, Node is the only thing that is required (which we just installed), however, Wesley encourages you to have git and SASS installed, too. If you don’t, no worries, it’s pretty straightforward too:

git

You can go to the git website, download the file, unzip, and double click on the package to install it. Done and done.

SASS

SASS is a Ruby gem. If you’re working on a Mac, it comes with Ruby already installed. All you have to do is open up your Terminal (GASP I know, it will be OK.) and run the command:

gem install sass

If you get an error, chances are you need to run the sudo command:

sudo gem install sass

Sudo forces your computer to run the command as a super user. It will ask you to enter your computer’s password.

If you want to check to make sure everything was installed correctly, you can run:

sass -v

You should see it return Sass 3.4.9 (Selective Steve).

Now, for installing Yeoman (yo) and YeoPress (at the same time). Within the Terminal run:

npm install -g yo generator-wordpress

npm just means that it’s a node command.

Easy.

Now, within the Terminal, we just have to navigate to the folder we want to install WordPress inside of.

NOTE:

If I lost you at, “within the Terminal,” it’s OK.

For the longest time, I was uncomfortable inside the Terminal, too. But, I promise, the more you use it the more comfortable you’ll become. As soon as you see the benefits that the Terminal provides your workflow, it will eventually become something you can’t / won’t want to ignore.

You can get started with the Terminal here.

Now, run:

yo wordpress

You’ll see the WordPress logo appear and it will start to ask you a series of questions about how you want to set up your WordPress install:

WordPress URL

If you’re doing local development (as you should), enter that URL in.

yo wordpress prompt


Table Prefix

This is the table prefix for your WordPress database. By default it’s wp_. Stay with that. It makes it easy when you’re looking at your database to be able to tell which tables are related to your WordPress install.

yo wordpress prompt


Database Host, Name, User, Password

yo wordpress prompt

I use a free app on my Mac, called Sequel Pro to manage my databases. But, if you’re using MAMP, you can do everything through PHPMyAdmin.

MAMP will also list all the credentials you need (host, user, and password) on the WebStart page.

MAMP's Webstart Page

yo wordpress prompt


Use Git?

More on this later, too, but for now, take my word and just say “Yes”…err, rather “Y”.


Would you like to install WordPress as a submodule?

There are people that sit on both sides of the fence on this one, people for and against.

My personal take?

First, let me explain what a submodule is. Submodules are a “git thing”. It’s essentially an external git repo that your repo references. Think of it as a nested repo that you can update it independently.

When you think of it in those terms, it makes sense to implement WordPress as a submodule. I don’t manage the WordPress core, so why not make it separate and reference the actual WordPress repo itself?

If you implement WordPress as a submodule, you’ll be using the following commands to update WordPress later:

cd wp
git fetch && git fetch --tags
git checkout 4.5.2
cd ..
git add wp
git commit -m “Updated to WP 4.5.2”
git push

Not too shabby.

NOTE:

If you get an error, when you try to update WordPress, like: Your local changes to the following files would be overwritten by checkout. Try forcing the checkout:

git checkout -f another-branch

So… “Yes” install WordPress as a submodule.


yo wordpress prompt

WordPress install directory

My personal preference is “wp.”

This means when I log in to the admin panel, the address will be: http://SITENAME.dev/wp/wp-admin

WordPress content directory

I go with “wp-content.”

yo wordpress prompt


Install a custom theme?

Yes.

NOTE:

At this point, you could say “no”. The prompt jumps to asking you to confirm everything. But, since we’re trying to streamline our process…

Destination Directory

This is the folder name for your theme. I’ll usually give it the same name as my project.

Theme source type?

git

GitHub Username

I have my starter theme stored in a public GitHub repository. I have two different repositories depending on what framework I’m going to use on the project. If I’m using Zurb’s Foundation I use ahha-foundation. If I’m using Susy, then I have ahha-susy. Both of these are variations of Todd Motto’s HTML 5 Blank Starter Theme.

The repository simply holds the theme folder, nothing more.

— and like I said, these are public repositories, so you’re more than welcome to use them.

Since it’s my repository, the username is:

ahaywood

GitHub repository name

ahha-susy

Repository Branch

master

Does this all look correct?

It’s always comforting that it asks you to double check. “Yes.”

yo wordpress prompt

Boom! It will download WordPress for you and set up your config file. Granted, the set up may sound a little verbose, but we just condensed that 11 step process into a few lines of code.


For future reference:

If you clone your repo and the wp directory is blank (WordPress is a submodule, remember), run:

git submodule init && git submodule update

Also, if you need to update YeoPress, it’s as simple as running the following line:

npm update -g yo generator-wordpress

The Conversation

  • Pmizzle.

    Great write up! I messed up. How do I delete the module and start over? lol

    • Amy Dutton

      I usually just delete the directory and run YeoPress again. Since, YeoPress is doing all the heavy lifting, it’s easier to run the script again than trying to run lines in the Terminal to fix it.

      • Pmizzle.

        Ah yes ok. ty! now to find where I installed the module. smh