Thoughts on Wordmove and Workflow

WordMove is like Capistrano for WordPress. If you are coding a simple static site, you just need to FTP your HTML, CSS to your server. But WordPress isn’t a static site and it has a database filled with tables.

Moving your WordPress site from place to place has always been a pain. So much of a pain, that it is for people to make all their changes on the live server. This is known as [cowboy coding]( and is a bad practice. Don’t do it.

Why is Cowboy Coding so bad?

If your luck is anything like mine, something will break and you nor your client will be very happy. There has to be a better way and the great news is, there is.

Introducing environments

You’ll hear a lot about different environments when you enter the world of a developer. You have front end developer and back end developers and these days their worlds have collided so much so that it is hard to tell the difference.

So the three environments I’ll mention today are local, staging and production. Developers names these environments differently. If you’re working on your own project, name stuff how you want. If you are on a team, have a meeting and determine your naming conventions and how you’ll use git and github for your version control.


This file is super important for your team. Come up with what you want to watch and what you want to ignore. Huge for teams.

Naming Conventions

Huge. Come up with a team coding style guide. Makes life so much easier. Tabs or spaces?

Local Development Server

This is on your machine. So my workflow is to have VirtualBox installed with Vagrant and VVV. VVV came from the WordPress community and this helps set up our virtual box with an environment for WordPress. Virtual Machine and Vagrant came around to make improvements from WordPress developers working with MAMP. There is tons of material out there for you to sink your teeth in to learn all about VirtualBox, Vagrant and VVV so I’ll leave that as an exercise for you to do.


If you want to quickly create WordPress sites, use VV.

VVV Dashboard

VVV Dashboard gives you a nice view to see stuff like phpMyAdmin and all your local sites.

To Debug or Not to Debug

Turning debugging on in wp-config.php in staging and local environments.

Search Engines

Make sure you are not visible to search engines in staging and local but are visible in production.

Update Permalinks

If your links are acting strange, make sure to update permalinks.

Staging Server

So you spend all week working on the coolest WordPress custom theme ever. You test it and it works on your machine. But you need to show it to your client. That is the purpose of the staging server. Your client can’t see your computer unless you bring it to them. Why not make life easier for both you and your client and set up a staging server. That way anyone connected to the internet can see your WordPress stuff.

I usually set the staging server up on my client’s shared host. They have a cpanel that I can use to do the following:

Enable SSH

FTP is so old. Been there, done that. It is not secure. They have SFTP but imho, SSH is the way to go. Chances are your client is using a shared host so just keep in mind that many shared hosts will require that you email/call them before they enable SSH.

Generating SSH keys

Once you have that set up you need to create your private and public keys. Private is on your computer and you save the public onto your shared host. That’s how the remote server knows you are who you say you are (and not a hacker).

Then if all goes well you will be able to SSH into your remote server Using something like:

$ ssh

Then you’ll see your box.

The next thing I do is set up [WP-CLI]( on my remote host so that I can quickly and easily install WordPress on my remote server.

Create A Database

So on your shared host, log in to the cpanel and create a database. I like to name my databases with no spaces and underscores instead of hypens. Example database name: my_sample_database. I make sure my password doesn’t have any crazy characters as they tend to break WordMove.

I write down all this information a safe place. If you don’t and you forget the info, you’ll hate yourself for forgetting.

  • DB Name
  • DB User
  • DB Password
  • DB Host

When you create a MySQL database you need to name it properly (you’re host will tell you how it should be named), you need to create a user and associate that user with the database and give that user all permissions.

I also write down my WordPress admin login information (username and password) that I created using WP-CLI


Production is your live site. Right down the Database information for production in a safe place. (it will be inside your wp-config.php file). Someone should provide you the WordPress admin login info if you did not create the site. If you are creating it, write it down in a safe place.

WordMove time

So now you navigate to your VVV site. I create this using VV create and pass the information I need to create my local site. It usually will take approximately five minutes to get your new WordPress site created. Good time to go for a walk and grab some coffee.

I then browser to my WordPress project root and create my Movefile file with

$ wordmove init

That will create a Movefile. This file is in YAML format which means spacing is very important. Things will break if the spacing is off. If you think all the info is correct but it isn’t working. Delete the file and recreate it with meticulous detail and attention to the spacing. That has saved my neck a bunch of times.

All that Staging and Production connection info you saved to a safe location is now front and center. Get it and plugin it into your WordMove file into the different environments. Add the SSH and database info for Production and Staging. If all goes well you can begin using WordMove.

I usually start by grabbing the entire production site and pulling it locally

$ wordmove pull -e production --all

Your Machine or your Virtual Box?

This is a very tricky part and I’ll tell you how I navigate this very dangerous waterway.

I don’t install WordMove on my local machine. I install it on my VirtualBox machine. This will prevent lots of problems with path. That way when you accidentilly try to run wordmove from your local machine, you will get command not found.

To get into your Vagrant virtual machine you use vagrant ssh. After about three minutes, you’ll be SSH‘d into your virtual box. Then you need to navigate to your project.

Where are your sites in vvv?

Usually in the www folder

Don’t forget htdocs


I create zsh (and oh-my-zsh) for my virtual box and give different themes for my remote site and local site so I can visually know where I am. I also add aliases so I can easily move around.

Once I pull my whole site locally, I update all the plugins. I remove all plugins not being used. I remove all themes not being used. I usually keep the most updated WordPress theme in case I ever need to switch to it to troubleshoot.

I then push site to staging server and tell the client to check out my changes. When they give me the green light I pull down the latest and greatest database and includes from production (so I don’t overrite any blog entries or images) and then I push to staging and test. If all is good, I push to production and test and make sure I update permalinks and set the production SEO search engines to on. (it updates the robots.txt file).


That’s all for now. Let me know what you think in the comments below.

WordPress 500 internal error

Yes, it’s not a great error to see. The good news is it can be fixed rather quickly. The bad news is you have to try to wrap your head around file/folder permissions. This post is to help speed up that process and get your WordPress site up and out to the masses.

If you log into your shared hosting cpanel you can go to the File Manager and you will see a column named ‘Perms’

file permissions

Sometimes you may get a 500 error page when you try to load your WordPress site in the browser. Many times this has to do with Permission problems on the file.

In the cpanel you can open the server error log and you might see something like:

permission error

You see that the error is ‘is writable by group’

I know it’s a pretty lame error but it just means you have to change the file permissions on those files. Click on the files in the file manager and click the ‘Change Permissions’ button. Uncheck the checkbox under Write group and it will change the file from 0664 to 0644.

Now if you do that for each file in the error log, you should see your WordPress page load up.

A Faster Solution

A fast way would be SSH into your remote box and recursively change the folder and file permissions using this magical line of code

chmod -R u+rwX,go+rX,go-w .

Why does this happen?

It happens every time I add WordPress using WP-CLI.

WordPress and Bootstrap Navbar – Making it work Quick and Painless

More NavWalker Tutorials

Alter your header.php

  • to include the Bootstrap nav
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <link rel="icon" href="<?php bloginfo('template_directory'); ?>/img/favicon.ico">

    <title><?php wp_title( '|', true, 'right' ); ?></title>

    <?php wp_head(); ?>

  <body <?php body_class(); ?>>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          <!-- <a class="navbar-brand" href="#"><img src="img/logo.jpg" alt="logo"></a> -->
          <a class="navbar-brand hidden-xs" href="<?php bloginfo( 'url' ); ?>"><img class="navlogo" src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a>

        <div id="navbar" class="navbar-collapse collapse">
            $args = array(
             'menu' => 'top_menu',
              'depth' => 2,
              'container' => false,
              'menu_class' => 'nav navbar-nav',
              //Process nav menu using our custom nav walker
              'walker' => new wp_bootstrap_navwalker()

            wp_nav_menu( $args );
        </div><!--/.navbar-collapse -->

Grab the navwalker class

Download Edward McIntyre’s wp-bootstrap-navwalker class from [GitHub](

place the wp_bootstrap_navwalker.php in the root of your custom theme.

Require the navwalker class

  • Add this to the top of functions.php



// required files
// Register custom navigation walker


Enqueue CSS and JS

Make sure you have bootstrap css and js enqueued

  • I’m just showing the bootstrap necessary code to include
  • Remember that WordPress comes with jQuery so you don’t need to enqueue it
=            CSS            =

function theme_styles() {
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/node_modules/bootstrap/dist/css/bootstrap.min.css' );
add_action( 'wp_enqueue_scripts', 'theme_styles' );

=            JavaScript            =

function theme_js() {
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/node_modules/bootstrap/dist/js/bootstrap.min.js', array('jquery'), '', true );
add_action( 'wp_enqueue_scripts', 'theme_js' );

Add Menu to functions.php

=            Menus            =

add_theme_support( 'menus' );
/* add featured image */
add_theme_support( 'post-thumbnails' );

function register_theme_menus() {
        'header-menu' => __( 'Header Menu' ),
        'primary', __( 'Primary navigation', 'kl' )
add_action( 'init', 'register_theme_menus' );

Add the Menu to the Dashboard

  • Create a new menu and name it ‘Primary’.
  • Make sure to assign the Theme location to primary

Should look like this:

Primary Menu

Review Important code

  • The following code is what wires the Twitter Bootstrap menu to work:
<div id="navbar" class="navbar-collapse collapse">
            $args = array(
             'menu' => 'top_menu',
              'depth' => 2,
              'container' => false,
              'menu_class' => 'nav navbar-nav',
              //Process nav menu using our custom nav walker
              'walker' => new wp_bootstrap_navwalker()

            wp_nav_menu( $args );
        </div><!--/.navbar-collapse -->

View in Browser

Should look similar to this (and be responsive too!)

Bootstrap functional Navbar