Who wants to start building new sites quicker? Whether for yourself, for friends, or for clients, you have probably set up more than a few WordPress sites by now. There are probably quite a few things that you do on a regular basis for those sites, right? Hereโ€™s a few things that I do:

  • Pull and verify WP Core
  • Pull Latest version of Akismet, Jetpack and Duplicator from repo and activate
  • Pull latest version of BackupBuddy, Security and Sync from iThemes, Gravity Forms and Advanced Custom Fields Pro and ACF Repeater Field (I don’t know how many of these things can be done since they are premium) and activate
  • Do setup of Sync/Security/BackupBuddy as necessary
  • Pull latest version of Genesis & latest of genesis-project-base (I’ll put that on BitBucket soon)
  • Remove sample page, post and comment
  • Set ACF Pro and Gravity Forms Licenses
  • Set Gravity Forms to output HTML5 (default is off, I want it on)
  • Extended CPTS and Extended Taxonomies
  • Create admin account (OBM) with random password, emailing to support@orangeblossommedia.com
  • Set Site Title based on project Title
  • Set time zone to “New York”, since that’s the case for most builds I do
  • Set permalink structure to /%postname%/
  • Create private BitBucket git repo for site
  • Add user/pass to LastPass
  • Create Trello board for site
  • Create Sublime Text Project
  • Open Browser to site
  • Open Sublime Text
  • IFTTT?

I do those steps for almost every site that I make. Doing so by hand would take an hour of clicking around from screen to screen, waiting for pages to load, modifying settings, and refreshing pages.

Each of these steps have something in common: since they are done via a computer, they can be defined in terms that a computer can understand. This is where we can begin to automate our process.

Vagrant is a container solution, similar to Docker, which allows you to create containerized sites. VVV is a Vagrant box, which is basically a set of instructions on how to build a server. I’m going to update my post on setting these up, as there are some useful changes coming to version 2 of VVV, but for now I’ll refer you to this post from last year on setup.

The other thing that we’re going to use is WP-CLI, and we’re going to pair it with VASSH, a tool to make it easy to SSH into a VVV box. All this means is that we’re going to use some command line tools made to do things with WordPress, like add new themes and plugins, and change the posts.

Start with the slide deck below on why you may want to give this a try, then move on to the next post which gives some notes on the specific bash script written to do the automation, as well as some of the drawbacks of it as a solution. This post will be updated with version 2 of VVV.

Edit: the poster of the slide deck removed it from the web.

I’ve been using Vagrant with VirtualBox for local development for over a year now, after introduction to the tools on top of Varying Vagrant Vagrants at a WordCamp. It’s become my default standard for starting new WordPress sites, and it’s more highly accessible than I realized at the time that I first tried it, though it can also be a bit of a black box from the outside.

Throughout the post I’m going to cover a quick install guide (though by no means exhaustive), and borrow heavily from a guide that I put together and am keeping updated on my Github page. I also discussed this at a developer meetup for WordPress Orlando last month, which you can check out if you want to give ServerPress or MAMP a try too.

Note, I’m coming at this from a Mac, which used to drive me bananas in guides, so apologies if you’re on Windows.

Installing Virtual Box, Vagrant, VVV, and VV

First, let’s talk about what we’re setting up here. The outcome of this post should give you a local development environment for WordPress sites that you can start and expand upon rapidly, making it easier to build new sites for yourself or your clients. We’re going to start by downloading and installing VirtualBox, which is by far the largest part of this project. I use Virtual Box because it is free and accessible for a wide variety of platforms, but VVV supports Parallels, Hyper-V, VMWare Fusion, and VMWare Workstation as well.

After you’ve downloaded and installed VirtualBox, you’ll want to ensure that you have Vagrant installed. This can be installed a wide variety of ways, but the most straightforward is going to the official download page and installing the version that matches your computer. After Vagrant is installed you should be able to open Terminal and type the command vagrant and see a list of flags that you can use.

You’ll also need Git for some of this, so if you don’t have it, download here and install it.

Vagrant installed on Terminal

Next, you’re going to install vagrant-hostupdater with the command vagrant plugin install vagrant-hostsupdater, then install vagrant-triggers by typing vagrant plugin install vagrant-triggers into Terminal too. These tools will allow Vagrant to automatically set hosts for you, which are a pain in the butt on your own, and allow triggers to run, which lets other programs (say VV?) attach their own events to Vagrant.

Up next, install Varying Vagrant Vagrants, which is thankfully shortened to VVV. You can do this in Terminal too, using the command git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git vagrant-local. You’re going to move into that directory by typing cd vagrant-local, since vagrant-local is the name of the folder that you made and put it into when you cloned it to your computer.

The next portion of this is really long. Like, don’t do this at a coffeeshop or via a mobile data plan long. Probably should give fair warning that setting up VVV is a long process on slow internet. Let’s assume that you are on fast internet or have plenty of time to kill. Thankfully you can run this in the background and go along your day, provided heavy YouTube viewing is not part of your downtime. Run the command vagrant up, which is a command that you’ll be getting used to over time. The first time that you run the command it will have to download a whole box for Virtual Box, basically meaning you’re downloading and installing a new operating system that will run alongside your existing one.

When VVV is installed, you should be able to visit vvv.dev in your browser and see it in all of it’s glory!

Default VVV page
In the next post, we’ll make this page show useful information and look pretty.

Look, at this point you probably need a coffee or something. Relax, you’re doing great, and treat yourself to that caffeinated goodness.

Site Creation with VV

To make site creation even easier, we’re going to use Brad Parbs‘ cool tool Variable VVV, or VV for short. There are a few methods to install this, and while I use HomeBrew which makes it rather easy, in the event that you don’t, check out his install instructions here: https://github.com/bradp/vv/#installation.

With VV installed you can use the command vv --create to install new WordPress sites to a single VVV install with ease. I’m going to save the discussion on how to do that for the next post, since it can cover quite a bit.

Next Time on the Show!

I’m going to go through some enhancements in my next post on this topic, like using a custom VVV dashboard, how to get value out of VV, how I make VVV a bit easier to use, and some of the testing that I’ve done around squeezing performance out of VVV and making it load faster.

I hope that if you’ve stuck around for the journey you were able to successfully get going, or at least will give it a shot. If you’re having any trouble, please leave a comment and I’ll try to help you out here so others can troubleshoot too.

Next up on my run-through of things that have improved my workflow is development tasks. This is one area where I know that I need a lot of improvement, as there are so many tools out there.

Starting Projects

I typically begin each WordPress based project via Vagrant and a VVV box on my local machine. We did a meetup on this and other local development environments last month, and some notes and links can be found on our recap post.

I started using Brad Parbs’ excellent addon Variable VVV, or just VV. It’s made creating new development sites even easier, and adding blueprints on top of that have made it even even easier. For instance, this basic blueprint installs the Genesis framework, installs a Genesis child theme that I made that is in need of update, activates that child theme, installs Gravity Forms, activates and licenses it, installs and activates Jetpack, and loads some test content from wptest.io so I can see how the site that I’m creating looks with various content. Not bad for what becomes a one line command!

{
  "genesis": {
    "themes": [
      {
        "location": "An up to date Genesis Zip",
        "activate": false
      },
      {
        "location": "davidwolfpaw/obm-genesis-child",
        "activate": true
      }
    ],
    "plugins": [
      {
        "location": "An up to date Gravity Forms Zip",
        "version": null,
        "force": false,
        "activate": true,
        "activate_network": false
      },
      {
        "location": "jetpack",
        "version": null,
        "force": false,
        "activate": true,
        "activate_network": false
      }
    ],
    "options": [
      "current_theme::obm-genesis-child"
    ],
    "demo_content": [
      "link::https://raw.githubusercontent.com/manovotny/wptest/master/wptest.xml"
    ],
    "defines": [
      "WP_CACHE::false",
      "GF_LICENSE_KEY:: My Gravity Forms License Key"
    ]
  },
}

The most important thing for me is that I have things to start with. VVV and a starter theme or plugin do more for me than just save time. They also save mental energy and keep me away from that dreaded blank page that makes even simple projects more daunting. With a starter I feel like I’m half done when I get started, because in essence I am. Every project doesn’t need a complete rewrite, and the time and energy saved can be better put to the specifics of this one project.

Maintaining Projects

I’ve been getting better at committing code to a version control system for every project. I’m still working on most things solo, but when someone else needs to jump in or review, it’s been a big help, at least in making me look more professional. For clients we use Bitbucket, but in general I’m going to start posting more things up on Github. I’m at least going to put up a gist library of common code snippets that I use and reuse with lots of projects, as that cuts down the amount of work and places where mistakes could crop up if I am constantly redoing it.

I keep copious notes, often in Drive in a client folder, that I can review for later, as well as the tasks in Trello that I mentioned yesterday. Even if I’ve got a feature or change that I know is not coming up now whether through time or budget constraints, I prefer to keep it in mind so that it doesn’t surprise me later. Plus, there are often easy wins, like being able to reuse member registrations for one portion of a project for another, that can allow me to offer extra value to clients with little additional work. Writing something right the first time is a lot easier than writing it one way then having to shoehorn a feature in later.

Conclusion

I specifically didn’t go too in depth, because when it comes to tools, I mainly feel that what works for you works. I use Sublime Text as my editor, but there are a lot of great ones out there. I personally don’t really like using an IDE for general web development, and like the versatility and breadth of plugins that Sublime offers. I also think the process that works is the one that you stick with. Despite the things that I know that I need to get better about (setting up projects in Sublime, utilizing Grunt as a task manager, etc), I can still be productive and slowly add new knowledge over time.

Do you have any specific tools or processes that have saved you lots of time or that you expect to save time in the long term? I’m always looking for ways to level up, so let me know!

If y’all weren’t aware, I’m a big fan of my site host, WP Engine. One of the coolest features that their service has (in addition to built in security, caching, CDN and backups), is the ability to make a staging version of your site with a single click, and copy the staging version to your live site just as easy.

This is where an issue has arisen however. Yesterday morning before my last post, I made a snapshot of my site for staging, so that I could make a few tweaks and test some code. When someone tried to comment on the post, and when I tried to respond, they were redirected to the staging site.

Thanks to the help of a quick WP Engine employee, it was determined that Jetpack (which was managing my comments) was authorized on the staging site when I made my snapshot, and for whatever reason that was chosen to be the default. Simply de-authorizing it on the staging site fixed the issue.

Even though that was an annoying hiccup that I didn’t catch myself, my host quickly did and rectified it. Hopefully I can save a few people out there some time with this ๐Ÿ™‚

While the following post is geared more toward beginners, and not the standard fare for this blog, I’m working up a more basic talk for non-developers to give a jumping off point for what we actually do to someone that wants to make sense of a basic WordPress site theme. There is no way that this could be all-encompassing, but it should be enough to help someone get into trouble while looking at a website’s code.

Even advanced web developers will run across acronyms and terminology that baffle them on a regular basis, as well as programming languages that they’ve never even seen before, let alone mastered. It wasn’t so long ago that any developer out there couldn’t differentiate between the types of code that went in to running their sites and with new changes being made constantly, no one will ever know them all.

I’m going to briefly discuss what the differences are between PHP, HTML and CSS, which are the most common types of code that are used to make WordPress websites. I’ll also touch a bit on Javascript, as most websites are running several scripts minimum to help with tasks for each page.

Continue reading “What is the Difference Between PHP, HTML and CSS Anyway?”