WordPress Workflow: Getting Started

Introduction

If you’re new to WordPress template building, you have come to the right place. WordPress is a Content Management System (CMS) that was started back in 2003. It started as a blogging platform but is now used to create business websites by large companies like Dole, Toyota Brazil, Facebook Newsroom and more. It has grown substantially in the last 12 years. The right CMS is a customizable one, and WordPress offers a lot of ways to customize it. If you have questions while you’re developing there are a lot of resources out there like the WordPress Codex and the WordPress StackExchange.

Getting your WordPress Workflow Started

Depending on the framework you’re using:

You’ll need to follow their Getting Started guide, since trying to cover the varieties is out of the scope of this tutorial. Below we will talk about two options of places to set up a test environment. This will help you get started in your WordPress workflow.

Locally

After you have looked at your framework’s documentation, if you’re using one, you should Download the latest version of WordPress. Once you have downloaded WordPress unzip it and put it in your local testing directory. In order to use WordPress you will have to have a local server running like Bitnami’s WAMP Stack (for Windows) or MAMP (for Windows or Mac). Follow your local server’s instructions on how use phpMyAdmin. In order to use WordPress you will need to set up a table in the database. Once you have access to phpMyAdmin on the left panel of the home screen you’ll see the databases.

when you click the button above it will take you to a screen with all your databases, at the top it says “Create database” enter the name you want it to be, and leave the Collation as it is. It should look like this with your name replacing “new_wordpress_db”.

Great, clicking the “create” button will take you to a screen that informs you that there are no tables in the database, which is expected. You’ll find a tab across the top of phpMyAdmin that says “Privileges” you’ll want to click that, and then below the currently listed users you will want to click “add user.”

Next you’ll be taken to a screen with the heading of “Add User” or something similar. Under the login information pick a complex user name and password, you won’t need to remember this later so it can have a lot of entropy, or lack or predictability. My recommendation is either doing a google search for a password generator and generate a password that’s about 18-20 characters, and very random, or click the “generate” button to generate a password. For the username don’t use guest, root, test, or anything else extremely generic. Make it hard to guess. Make a note of your username and password for later, because you’ll need it when we move on to Step One.

Why go through so much trouble for a local server? Because it’s likely you’ll be using the same credentials on your hosting site. If you have a one-click WordPress install with your host, you may not need to follow any of this since they’ll likely choose it for you. Then all you have to do is upload your theme. However, this is a good practice to get into.

Okay, so after you have picked a strong username and password, change the host to localhost. Under “Database for user” you will want to click all those boxes, and click the “Check all” box under Global Priveledges. After that, scroll to the bottom and click “Go.”

Perfect. Now make sure you have made note of your user name and password. Then Skip to the WP-Config set up section.

On a VPS

For this section, I’m going to assume you’re using Ubuntu 14.04, however, the following should work with other Linux versions.

Log on to your server and make sure you have LAMP installed. Then log in to your MySQL root account by writing the following:

mysql -u root -p

You’ll then be prompted for your MySQL password. Next, what you’ll want to do is issue a command that creates a new database under WordPress control. Enter the following:

CREATE DATABASE wordpress;

I would recommend a more complex name than simply “wordpress.” However, it’s up to your discretion. Next we’re going to create a user, and grant all privileges to that user. Make sure to change useraccount to whatever your username will be, steering away from generic usernames like guest, test, user, etc. Don’t use root as your username. Next, is the password, change password to a very strong one that is not easily guessed. Google strong password generator or diceware, if you need help. The command we will issue to create the user is:

CREATE USER useraccount@localhost IDENTIFIED BY 'password';

Now you have a database and a new user. Next you need to associate that user with your database and grant privileges. In order to give this user access to your WordPress database we use this command:

GRANT ALL PRIVILEGES ON wordpress.* TO useraccount@localhost;

Making sure you change wordpress and useraccount to the proper values. Great, now your user has access to the database. Make note of the password and user name because we’re going to need it later. Next we need to flush privileges so that the current instance of MySQL is aware of the changes. Do that by issuing:

FLUSH PRIVILEGES;

Great, now you can exit. Simply type:

exit

Now you should be at your regular command prompt. We have one more item to take care of and that’s the actual installation of WordPress. In your command prompt we will download the latest version of WordPress:

cd ~
wget http://wordpress.org/latest.tar.gz

A tarball file is a very compressed file that you are able to unzip. So next, let’s unzip that file:

tar xzvf latest.tar.gz

If that was successful you should definitely see that it was successful. You should see a new directory called wordpress. Let’s cd into it:

cd ~/wordpress

By default WordPress includes a wp-config-sample.php for you to use. We want to copy that file and rename it to wp-config.php. We can do that with this command:

cp wp-config-sample.php wp-config.php

Now, with your MySQL database name, username and password at the ready, issue the following command to edit the wp-config.php file:

sudo nano wp-config.php

WP-Config Setup

Find the commented section that talks about MySQL settings. It will most likely look like this:


// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'database_name_here');

/** MySQL database username */
define('DB_USER', 'username_here');

/** MySQL database password */
define('DB_PASSWORD', 'password_here');

/** MySQL hostname */
define('DB_HOST', 'localhost');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

Now change the values of database_name_here, username_here, and password_here to the values you have on your scrap paper.

The next important thing to set up is your salts.


define('AUTH_KEY',         'put your unique phrase here');
define('SECURE_AUTH_KEY',  'put your unique phrase here');
define('LOGGED_IN_KEY',    'put your unique phrase here');
define('NONCE_KEY',        'put your unique phrase here');
define('AUTH_SALT',        'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT',   'put your unique phrase here');
define('NONCE_SALT',       'put your unique phrase here');

You can visit the website to generate new salts on page load and then just copy them into your salts section. You can even generate the salts, and past them in, then do another generation and append your existing salts with the newly generated ones. Just for a little extra piece of mind. You don’t need to remember your salts so you can make them as complex and random as you like. If you want you can file away your database information for later or use the wp-config.php as your copy, it’s up to you.

The last measure of security will be your $table_prefix value. Here’s what that section looks like:


/**
 * WordPress Database Table prefix.
 *
 * You can have multiple installations in one database if you give each
 * a unique prefix. Only numbers, letters, and underscores please!
 */
$table_prefix = 'wp_';

My recommendation is changing it from wp_ to something less guessable. For Example: 09_18_wo_prod_ essentially it’s $date_wo_$env_ or any other combination of things, just don’t use special characters to be safe.

Next you can change define('WP_DEBUG', false); to define('WP_DEBUG', true);, in order to have some feedback if things break.

If you’re here from the VPS section, make sure to ctrl+O to write out your changes, then ctrl+X to exit.

Moving on

Once you have downloaded and unzipped the file into your test environment, whether that be locally or on as server, edited your wp-config.php file, and saved it. Now that this portion of your WordPress Workflow is complete, we’re ready to move on!

Step One

First step is hit the url where your WordPress instance is running. If everything went well, it will take you to this screen:

Select your language and click continue.

This username and password you will need to remember, so make sure to take note of it. Also enter an email address that you can recover your information from. Click Install WordPress and you’ll see one more screen click “login” and enter your information, and you’ll be presented with the WordPress dashboard.

Step Two

At this point in the WordPress workflow, there are a few things you can do to improve security, and now would be the time to do them. Next comes the fun part, we need to start setting up our theme, this is an important step in the WordPress workflow. So navigate to the WordPress themes folder wp-content/themes/ and create a new folder that will contain your theme files. You can name it whatever you want, but now your directory tree should look like this: wp-content/themes/yournewthemefolder

Step Three

Next we need files in our theme. We will start with two important ones: the css file and the screenshot. In the root of yournewthemefolder create a css file, or if you’re using sass/less create a directory structure for where you want to store those files and create your .less or .scss file and put this comment at the top:


/*
Theme Name: My First Theme
Theme URI: http://www.yourdomain.com/
Description: My first theme I created in WordPress.
Author: Kevin Dench
Author URI: http://www.yourdomain.com/
Version: 1.0
Tags: responsive, WordPress, And, Other, Tags

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This theme uses the  framework licensed under . 
*/

So what this buys us is when WordPress is parsing the themes directory to see if there are new editions, it will read the CSS file in the root of your theme to get the information like the Theme Name, the link, the description, who made it and the tags. All this information will be available when you go to Appearance > Themes on the dashboard. However, if you’re using a css pre-processor, make sure to compile your css file into the root and compile it with the name of style.css it should be called by that name for WordPress to Recognize it.

Next you need a screenshot of your mock-up or anything you want really. Rename that as screenshot.png making sure it is a png, and put it in the root of your theme. Now you’re ready to activate your theme.

Step Four

Activate your theme, go to your WordPress dashboard and go to Appearance > Themes and if everything went well you’ll see your theme and screenshot there. Of course this is an empty shell, but that’s okay.

Next you want to go to the Pages > Add New and name the page “Home” publish it, and go to Settings > Reading and under “Font Page Displays as” change it to a “Static Page” and next to the “Front Page” label you’ll select your new Home page from the drop down. There isn’t anything available yet to test, so let’s make something.

Step Five

You will need to create 7 new files, I will describe their roles in the template hierarchy briefly:

The Index File: index.php: WordPress will serve this page if there are no other pages to serve
The Page File: page.php: WordPress will first check for a custom template file like a page template assigned to the page, then it checks for page-{slug}.php if the slug is products it would be page-products.php. Then it checks for the page-{ID}.php, and if it doesn’t find that it looks for page.php. If WordPress can’t find that, it looks for singular.php and finally the index.php page.
The Single File: single.php: WordPress will look for single-{post_type}.php, then single.php, if it can’t find that it looks for singlular.php and finally index.php.
The Front Page: front-page.php: WordPress looks for front-page.php first, then home.php, page.php and finally index.php.
The Functions File: functions.php: This file behaves like a WordPress plugin that adds features to your site, in this file you call WordPress functions or define your own. It’s only active when that theme is active. This file requires no special header text, is stored in the theme root, applies only to that theme and can have lots of code used for many purposes. More on that here.
The Header File: header.php: Simply put this is the header that will be served up on every page.
The Footer File: footer.php: The footer file is the same kind of thing as the header file.

In index.php we are going to put the WordPress loop, the life-blood of WordPress. Structure your html however you want, but you will copy this snippet from the index.php to the page.php and to the front-page.php file:


<?php get_header(); ?>

    <main class="container col-8">
        <h1>Title of your Index Page</h1>

        <article class="main-content">

        <?php if( have_posts() ) : 
            while( have_posts() ) : the_post();
                the_content();
            endwhile;
        else :
            _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
        endif; ?>

        </article>

        <aside class="col-4">
            <?php get_sidebar(); ?>
        </aside>
    </main>

<?php get_footer(); ?>

Conclusion

That should be enough to get you started. In the next post we will talk about the process of taking your static mark-up and turning it into loops. Your front-page.php file will become the file that will be served when you hit your domain. Previous to us changing the front-page to home, we would have had to type http://www.yourdomain.com/home in order to see the home page. After the change WordPress re-writes the home slug to your domain name.

Now that you have begun your WordPress Workflow and have something more concrete to practice, let me know what you think. Was this tutorial helpful? Are you a novice and have something to add? I’d love to hear your comments!