WPSmith | Blogging about WordPress, the Genesis Framework and Various Plugins

Sep 07 2015

Your Own WordPress Code Sandbox

When I was learning WordPress, the one file that I created that was the most helpful was my test.php file. This file proved extremely valuable. Even now, everyone once in a while, I want to write a vanilla function for a particular filter or action and see what the parameters contain. It was a way that I could load the WordPress environment (and optionally the admin environment) and test various default functions, filters, and actions. However, I don't want to navigate to a specific page or anything. I want something quick, easy and fast. So, I have this file that I keep in my development environment called test.php.

NEVER use this file in a production environment.

This file contains the following:

Loads the WordPress Environment
Contains debugging functions wps_printr() and wps_die()
Optionally Loads the Admin Environment
Optionally loads user functions
Optionally loads the Plugins API

To use this file, create a file called test.php at the root of your local site (this is the same place where your wp-config.php [unless you have moved this file] and wp-load.php files are located. The file should be located and reachable by http://domain.dev/test.php.

Debugging Functions

The debugging functions allow you to pretty print variable values to the screen.

	// Debugging //
	if ( ! function_exists( 'wps_printr' ) ) {
	/**
	* Pretty prints variable (array) value.
	* @author Travis Smith <[email protected]>
	*
	* @param $args Variable to be outputted.
	* @param string $name Title to output before the variable output.
	*/
	function wps_printr( $args, $name = '' ) {
	if ( apply_filters( 'wps_debug_off', false ) ) {
	return;
	}
	if ( '' !== $name && false !== $name ) {
	printf( '<strong>%s</strong><br/>', $name );
	}
	if ( is_array( $args ) ) {
	printf( '<pre>%s</pre>', htmlspecialchars( print_r( $args, true ) ) );
	} else {
	var_dump( $args );
	}
	}
	}
	if ( function_exists( 'wps_printr' ) && ! function_exists( 'wps_die' ) ) {
	/**
	* Pretty prints variable (array) value & dies.
	* @author Travis Smith <[email protected]>
	*
	* @param $args Variable to be outputted.
	* @param string $name Title to output before the variable output.
	*/
	function wps_die( $args, $name = '' ) {
	if ( apply_filters( 'wps_debug_off', false ) ) {
	return;
	}
	wp_die( wps_printr( $args, $name ) );
	}
	}

Optionally Load the Admin Environment

All you need to do is uncomment the line with wps_load_admin().

	// Admin //

	/**
	* Pluggable function, prevent redirect to admin pages
	* @author Travis Smith <[email protected]>
	*/
	function auth_redirect() {
	$loginusername = 'admin';
	$user = get_user_by( 'login', $loginusername );
	wp_set_current_user( $user->ID, $loginusername );
	wp_set_auth_cookie( $user->ID );
	}

	/**
	* Load the WordPress Admin Environment
	* @author Travis Smith <[email protected]>
	*/
	function wps_load_admin() {
	// Select either Network or User Admin
	// define( 'WP_NETWORK_ADMIN', TRUE ); // Used in is_network_admin()
	define( 'WP_USER_ADMIN', TRUE ); // Used in is_user_admin()
	define( 'WP_BLOG_ADMIN', TRUE ); // Used in is_blog_admin()
	define( 'WP_ADMIN', TRUE ); // Used in is_admin()

	// Required for admin.php & prevent errors
	global $wp_db_version, $_wp_submenu_nopriv;
	require( './wp-admin/admin.php' );
	echo '<h1>Admin Loaded</h1>';
	}

	// Load Admin
	//wps_load_admin();

Optionally Load the User Functions

	// User functions
	//require( './wp-admin/includes/user.php' );

All you need to do is uncomment the line with require( './wp-admin/includes/user.php' );.

Optionally Load the Plugins API

	// WordPress Plugins API
	//require( './wp-admin/includes/plugin_install.php' );

	// Endpoints
	//https://api.wordpress.org/plugins/info/1.0/{slug}
	//https://api.wordpress.org/plugins/info/1.0/{slug}.json
	//https://api.wordpress.org/plugins/update-check/1.0/
	//https://api.wordpress.org/plugins/update-check/1.1/

	// Importers
	//https://api.wordpress.org/core/importers/1.0/ (serialized)
	//https://api.wordpress.org/core/importers/1.1/ (JSON)

	//Checksum
	//https://api.wordpress.org/core/checksums/1.0/?version={wp-version}&locale=en_US (JSON)

All you need to do is uncomment the line with require( './wp-admin/includes/plugin_install.php' );.

Full Code

	<?php
	// Set date, just in case
	date_default_timezone_set( 'America/New_York' );

	// Load the WordPress Environment
	define( 'WP_DEBUG', TRUE ); // Set to FALSE to remove DEBUG MODE
	require( './wp-load.php' );

	// User functions
	//require( './wp-admin/includes/user.php' );

	// Admin //

	/**
	* Pluggable function, prevent redirect to admin pages
	* @author Travis Smith <[email protected]>
	*/
	function auth_redirect() {
	$loginusername = 'admin';
	$user = get_user_by( 'login', $loginusername );
	wp_set_current_user( $user->ID, $loginusername );
	wp_set_auth_cookie( $user->ID );
	}

	/**
	* Load the WordPress Admin Environment
	* @author Travis Smith <[email protected]>
	*/
	function wps_load_admin() {
	// Select either Network or User Admin
	// define( 'WP_NETWORK_ADMIN', TRUE ); // Used in is_network_admin()
	define( 'WP_USER_ADMIN', TRUE ); // Used in is_user_admin()
	define( 'WP_BLOG_ADMIN', TRUE ); // Used in is_blog_admin()
	define( 'WP_ADMIN', TRUE ); // Used in is_admin()

	// Required for admin.php & prevent errors
	global $wp_db_version, $_wp_submenu_nopriv;
	require( './wp-admin/admin.php' );
	echo '<h1>Admin Loaded</h1>';
	}

	// Load Admin
	//wps_load_admin();

	// WordPress Plugins API
	//require( './wp-admin/includes/plugin_install.php' );

	// Endpoints
	//https://api.wordpress.org/plugins/info/1.0/{slug}
	//https://api.wordpress.org/plugins/info/1.0/{slug}.json
	//https://api.wordpress.org/plugins/update-check/1.0/
	//https://api.wordpress.org/plugins/update-check/1.1/

	// Importers
	//https://api.wordpress.org/core/importers/1.0/ (serialized)
	//https://api.wordpress.org/core/importers/1.1/ (JSON)

	//Checksum
	//https://api.wordpress.org/core/checksums/1.0/?version={wp-version}&locale=en_US (JSON)


	// Debugging //
	if ( ! function_exists( 'wps_printr' ) ) {
	/**
	* Pretty prints variable (array) value.
	* @author Travis Smith <[email protected]>
	*
	* @param $args Variable to be outputted.
	* @param string $name Title to output before the variable output.
	*/
	function wps_printr( $args, $name = '' ) {
	if ( apply_filters( 'wps_debug_off', false ) ) {
	return;
	}
	if ( '' !== $name && false !== $name ) {
	printf( '<strong>%s</strong><br/>', $name );
	}
	if ( is_array( $args ) ) {
	printf( '<pre>%s</pre>', htmlspecialchars( print_r( $args, true ) ) );
	} else {
	var_dump( $args );
	}
	}
	}
	if ( function_exists( 'wps_printr' ) && ! function_exists( 'wps_die' ) ) {
	/**
	* Pretty prints variable (array) value & dies.
	* @author Travis Smith <[email protected]>
	*
	* @param $args Variable to be outputted.
	* @param string $name Title to output before the variable output.
	*/
	function wps_die( $args, $name = '' ) {
	if ( apply_filters( 'wps_debug_off', false ) ) {
	return;
	}
	wp_die( wps_printr( $args, $name ) );
	}
	}

	/**
	* Plugins API Remote Post Example
	*
	* @author Travis Smith <[email protected]>
	*/
	function wps_plugins_api_remote_post() {
	$args = (object) array( 'slug' => 'custom-favicon' );

	$request = array( 'action' => 'plugin_information', 'timeout' => 15, 'request' => serialize( $args ) );

	$url = 'http://api.wordpress.org/plugins/info/1.0/';

	$response = wp_remote_post( $url, array( 'body' => $request ) );

	$plugin_info = unserialize( $response['body'] );

	wps_printr( $plugin_info, 'plugin_info' );
	}

	/**
	* Helper function to output plugins_api()
	*
	* @author Travis Smith <[email protected]>
	* @param $result array Array of plugins_api() result.
	*/
	function wps_output_result( $result ) {
	/** Check for Errors & Display the results */
	if ( is_wp_error( $result ) ) {

	wps_printr( $result->get_error_message() );

	} else {

	wps_printr( $result );

	}
	}

	/**
	* Plugins API using plugins_api(): Get specific plugin information
	*
	* @author Travis Smith <[email protected]>
	*/
	function wps_plugins_api_plugin_information() {
	$call_api = plugins_api( 'plugin_information', array( 'slug' => 'custom-favicon' ) );
	wps_output_result( $call_api );

	}

	/**
	* Plugins API using plugins_api(): Get plugins with tag
	*
	* @author Travis Smith <[email protected]>
	*/
	function wps_plugins_api_hot_tags() {
	/** Prepare our query */
	$call_api = plugins_api( 'hot_tags',
	array(
	'number' => '50',
	)
	);
	wps_output_result( $call_api );
	}

	/**
	* Plugins API using plugins_api(): Search plugins
	*
	* @author Travis Smith <[email protected]>
	*/
	function wps_plugins_api_query_plugins() {
	$call_api = plugins_api( 'query_plugins',
	array(
	'browse' => 'top-rated',
	'page' => '1',
	'per_page' => '5',
	'fields' => array(
	'downloaded' => false,
	'rating' => false,
	'description' => false,
	'short_description' => false,
	'donate_link' => false,
	'tags' => false,
	'sections' => false,
	'homepage' => false,
	'added' => false,
	'last_updated' => false,
	'compatibility' => false,
	'tested' => false,
	'requires' => false,
	'downloadlink' => true,
	)
	)
	);
	wps_output_result( $call_api );
	}

	// Execute plugins_api() functions
	//wps_plugins_api_remote_post();
	//wps_plugins_api_hot_tags();
	//wps_plugins_api_query_plugins();

view raw test.php hosted with ❤ by GitHub

Sep 04 2015

My Development Workflow

Someone recently asked me what my workflow looked like on a daily basis. Instead of responding with a long comment, I wanted to write it up.

Here is what my development workflow (AKA DevOps) looks like on a site. And this would look different based on what host I am using. For example, in my opinion there are different workflows and DevOps based on the host. Here are the various types of different workflows:

WP Engine
Pantheon
Azure Websites
VPS/Dedicated Hosting
Shared Hosting

Each of these require different DevOps because each has a different implementation. For example, with WP Engine you have two (2) remote branches (production & staging) to push. With Pantheon (and MultiDev enabled), you have your own branch, Dev, Test, and Live. With Azure Websites, you have unlimited deployment slots which integrate fantastically with Bitbucket and Github. With VPS or Dedicated Server hosting, you could have root access where you can create a development user and use SSH/WP-CLI and Git for development. With Shared Hosting, you usually have jailed access, which causes some consternation. However, there are some workarounds. With the later two, I typically will use DeployHQ or something similar to deploy my Git changes.

If you are a WordPress development company, I highly recommend WP Engine first. Otherwise, if you are a web development company, whether you use Drupal, WordPress, or Joomla, I recommend Pantheon as an agency. Both of these companies take great care into DevOps. Now, if you have someone who insists on the Microsoft stack, I do recommend Azure or Rackspace. However, Azure PaaS has phenomenal DevOps, second to none really.

The Setup

Since all these are different and I have been writing about how I created my site, I am going to share how I use Version Control with WP Engine. Assuming that the person has either their own WP Engine account (and I do not recommend using your own account for a variety of reasons), the fun starts! In the WordPress dashboard, go ahead and create the staging site. This will ensure that you have both a staging and production sites.

Next, in my Vagrant installation, I provision a local WP installation using VV via Git Bash (Git for Windows). I have made some changes to my VV (which I need to update my Github to demonstrate) which allows for setting defaults via one's SSH profile. Since I am a Genesis developer, my basic site has my Genesis Child Theme skeleton (called Arche), Genesis, and these plugins: Akismet (already installed for you), Gravity Forms, BackupBuddy, Soliloquy, DB Sync, Genesis Shortcodes, Jetpack, WordPress SEO (AKA Yoast SEO), and my development framework as a Must Use (wp-content/mu-plugins). I will be writing more about my development framework in the weeks to come. For anyone that does not use Vagrant there are a variety of options to use like Desktop Server.

While the local vagrant site is provisioning, I create a repository with Bitbucket.

The reason I use Bitbucket is that it allows a free private account up to 5 members on a team. If you need, create new accounts for each client and add yourself as the primary team member and administrator.

Generally, then I have my environment setup. As a way of summary, here are the steps we have already taken:

Create WP Engine account.
Create WP Engine staging site from WordPress dashboard
Create local development site
Create Bitbucket repository

Next, I complete the setup of my local site.

Initialize Git repository.
Add Bitbucket remote repository (called origin)
Add WP Engine staging remote repository (called staging)
Add WP Engine production remote repository (called production)
Check my Git profile to ensure that my email and key are autoloading
Add my .gitignore. I always include my .gitignore that versions WordPress (here's a .gitignore that does not).
Make my initial commit
Setup PHPStorm & my GruntFile/GulpFile.

(Please note that in my vagrant auto site creation, I have automated the above. The name of the site [e.g., {SiteName}] also sets the Bitbucket repository (https://bitbucket.org/{YourUserName}/{SiteName}) and automatically adds all the remotes [WP Engine Remote ([email protected]:production/{WPE-SiteSlug}.git)].)

Now, I am ready to write code.

The Workflow

Now that everything is set up, I get to work. I am going to speak very generally here because I have a post coming next week that explains this in more detail. (When I am developing alone, I tend to take some shortcuts unless I am developing on a high traffic site. So I am going to assume the high traffic site.)

At first, I will develop directly on the staging branch until I get to my first milestone or place where I allow the client to begin looking and reviewing the site. Once at that place, I begin feature development. I checkout a new branch, develop until the feature is complete, then merge that branch into my staging branch for review by the client. For example, let's assume that I have the site's home page, blog page, and basic inner pages complete. Now I need to add some sort of e-commerce, CRM integration, etc. Whatever feature I am working on, I create a new branch to create that feature.

As I develop, I commit on "minor" changes commenting on everything (though Nathan Rice and Gary Jones have often gotten on me for creating commits that are too large). So for example, in functions.php:

	add_theme_support( 'genesis-menus', array(
	'primary' => __( 'Primary Navigation', CHILD_DOMAIN ),
	'footer' => __( 'Footer Navigation', CHILD_DOMAIN ),
	) );

view raw functions.php hosted with ❤ by GitHub

I commit with a message like: "Add Genesis menus theme support". And so on. I keep my messages quite short so as not to slow down. Now, I will often make several local commits before pushing to origin and/or staging remotes.

When there are more than one people committing, there are extra steps of fetching and pulling to keep in sync with everyone. So then it looks more like this:

Fetch
Pull
Merge locally
Push origin
Commit...commit...commit...
Push origin
Push staging

When doing feature development, it looks more like this:

Fetch & Pull
Merge locally
Push origin
Checkout new branch (e.g. feature-branch)
Commit...commit...commit...
Push origin
Checkout staging
Fetch & Pull
Push origin
Merge feature-branch into local staging branch
Push origin
Push staging

That seems like a lot of steps, but when compared to the alternative of using backups and FTP, I prefer it! You also can create .bashprofile aliases where some of these steps are combined into one step. And if you want, you can drop the origin (Bitbucket) part that I have when using WP Engine or Pantheon. I include this for my benefit and the client's benefit, which I explained in my last post, My Genesis Site: Using Version Control.

And finally, I am always asking others what they do, how they develop, and what their workflow and DevOps looks like. What does yours look like? What do you do that is different? How would you improve my workflow?

Sep 03 2015

Using Version Control

Recently, I have had multiple discussions with developers who only use FTP for development. One agency told me that they even use FTP for development with multiple developers. This completely shocked me!

I use version control on every site, theme, or plugin I develop. You may believe it is overkill but I cannot express how many times this has saved me and even my clients.

So why do I use version control? There are six basic reasons why I use version control.

Mistakes. I make mistakes. Everyone makes mistakes. It is human nature. Not planning for those mistakes is planning for failure or lost information, lost time and lost money.
Offsite Backup. With each site, theme, or plugin I develop, I push my versions offsite to either Github, Bitbucket, TFS, VisualStudio Online, a private Git server, etc. This alone has proven invaluable numerous times whether it was my machine that stopped working from dying of old age or hit by a car or drop kicked or some other catastrophic event, or Act of God. All I have to do is clone or checkout the code and keep on going.

Multiple Development & Collaboration. Using version control is the only way to do collaborative and team development. I have no idea how this used to be done and how many people have suffered the fate of their work being completely over-written with no recourse. Version control allows for multiple people to work on the same file and not cause each other's code to be completely erased. It does not guarantee that the code won't be in conflict and cause some merging work, but I definitely prefer that over completely re-doing everything because Bob over-wrote my file.
File Maintenance. Remember the days where the files were named functions1.php, functions2.php, functions-old.php, or functions-bob.php as a way of version control. This is not what I mean at all. Instead true version control allows for me to always have functions.php with a variety of comments and messages about each version.

Client-Focused. Using version control considers the clients needs before your own. It helps the client be able to switch developers easily. While this may cause you some irritation, the simple thought and even courage to use version control lets your client know that you value them. Also recently, one of my very first clients lost everything because they forgot to renew their domain and host. Since I was able to retrieve the site from my version control and quickly spin up an older version, I locked a client for life and made some extra free monies.
Future-Oriented. Ever wrote a file, plugin or theme thinking that you will remember what you did and then a month later come back asking yourself, "Who wrote this!? This is aweful." Hopefully the code has comments to help you navigate what is happening without thinking. But if there isn't and if the code is under version control, you could optionally read the commit/change log and get an idea of what is happening.

If you are not convinced and want to tell me not to use Git, maybe Matthew McCullough would agree?

And for those who believe using version control is akin to reading the matrix, here is a quick video about version control for designers:

Sep 01 2015

My Genesis Site: My Preferred Text Editor/IDE

Over the past 3 years I have tried a variety of editors and IDEs (Integrated Development Environment), including, but not limited to:

Sublime Text 2 & Sublime Text 3 (Free-ish, paid registration highly encouraged)
Notepad++ (Free)
Atom
Visual Studio
Visual Studio Code (cross platform lightweight IDE from Microsoft)
Eclipse
Netbeans
WebStorm & PHPStorm
Dreamweaver
Brackets
Light Table
Vim
Emacs

*Please note that I have a Windows machine, so Mac IDes (e.g., Coda, etc.) were not part of my evaluation though I have used Coda Lite on my iPad.

I have enjoyed each one for its particular nuances, and each IDE has its strengths and weaknesses. Each one comes with its preset shortcuts and some have the ability to change their shortcuts on a per user basis. Personally, I believe anyone can compare these editors and as many editors there are there could be winners, and there is always that one person who will go and create another editor because the "others just won't do what I need."

If you can afford it, I encourage you to do what I did and spend time whether it's a week, two weeks or an entire month (probably best) to determine which editor is the best fit for you. If you currently use an editor and you have gotten along fairly well, then there may not be a need to switch (unless it is vanilla Notepad).

However, if any of you do any PHP development, almost hands-down across personal, professional, and enterprises, PHPStorm is the recognized international leader for development and integrations. It really does make life simpler.

For me, I finally tried PHPStorm and when I did, I was blown away. After doing Grunt, Gulp, and Phing to automate my workflow struggling with it from a "purist" point-of-view, when I did these things on PHPStorm, I was up and running in no time at all asking myself, "Why didn't I try this sooner!?" So let me outline the benefits of PHPStorm at a high level and highlight a couple of those benefits in more detail. Please note this will only scratch the surface of the benefits of using PHPStorm.

Benefits of PHPStorm

As a WordPress developer, I only care about the benefits of an IDE as it pertains to helping me develop inside of WordPress. So what does PHPStorm offer? It offers a great deal actually.

PHPDoc support
Coding style support, built-in PSR1/PSR2, Symfony2, Zend, and Drupal compliant code formatting
Code Analysis: Coverage, Mess Detection, Copy-Paste, Reformatting according to WordPress Coding Standards
PHP refactorings and code (re)arranger
Visual debugger for PHP applications with debugger configuration validation, PHPUnit with code coverage, and Profiler integration
Cutting-edge web development technologies are supported including HTML5, CSS, Sass, SCSS, Less, CoffeeScript, TypeScript, Dart, ECMAScript Harmony, Jade templates, Zen Coding, Emmet, AngularJS, and of course JavaScript.
Includes all the functionality of WebStorm (HTML/CSS Editor, JavaScript Editor) and adds full-fledged support for PHP and Databases/SQL.
Supports PHP 5.3, 5.4, 5.5, 5.6 & 7.0 (partial), including and all the syntax improvements
Vagrant integration, Composer support, Built-in REST Client & SSH Console with remote tools, Command Line Tools, Google App Engine for PHP support, Remote PHP interpreters, Behat
Version Control Systems integration with unified UI
Integration with issue trackers

That's great, so what does all that mean?

PHPDoc Support

So if I have a function:

	function wps_is_debug() {
	return ( ( defined( 'WP_DEBUG' ) && WP_DEBUG ) \|\| ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) );
	}

view raw functions1.php hosted with ❤ by GitHub

As soon as I type /** and press ENTER, PHPStorm gives me:

	/**
	* @return bool
	*/

view raw header1.php hosted with ❤ by GitHub

If I were to type /* and press ENTER, PHPStorm gives me:

	/*
	*
	*/

view raw header2.php hosted with ❤ by GitHub

Now all I need to do is to enter the description and more details.

Besides the return, PHPStorm auto-populates the parameters. So if I have a function:

	}

	if ( !function_exists( 'plugins_api' ) ) {

view raw functions2.php hosted with ❤ by GitHub

As soon as I type /** and press ENTER, PHPStorm gives me:

	/**
	* @param $plugin
	*
	* @return object
	*/

view raw header3.php hosted with ❤ by GitHub

WordPress Coding Standards

Reformatting

Let's say you inherited someone's functions file that had something like this:

	function wps_get_plugin_info($plugin) {
	static $plugins=array();

	if ($plugin!='myplugin')
	return false;

	if (isset($plugins[$plugin]))
	return $plugins[$plugin];

	if ( !function_exists( 'plugins_api' ) )
	require_once(ABSPATH.'/wp-admin/includes/plugin-install.php');


	$info=plugins_api('plugin_information',array('slug'=>$plugin));
	$plugins[$plugin]=$info;

	return $info;
	}

view raw functions3.php hosted with ❤ by GitHub

In PHPStorm, if you go to Code > Format Code, it will reformat the code to this:

	function wps_get_plugin_info( $plugin ) {
	static $plugins = array();

	if ( $plugin != 'myplugin' ) {
	return false;
	}

	if ( isset( $plugins[ $plugin ] ) ) {
	return $plugins[ $plugin ];
	}

	if ( ! function_exists( 'plugins_api' ) ) {
	require_once( ABSPATH . '/wp-admin/includes/plugin-install.php' );
	}


	$info = plugins_api( 'plugin_information', array( 'slug' => $plugin ) );
	$plugins[ $plugin ] = $info;

	return $info;
	}

view raw functions3-formatted.php hosted with ❤ by GitHub

Notice that PHPStorm automatically added {braces} to all if-statements. It aligned all the equal signs (=). And it added all the necessary whitespace whether that's 2 spaces per tab, 4 spaces per tab, or just tabs.

Deprecated Functions

PHPStorm is intelligent enough when you are editing the project (someone else's project right?), functions that have been deprecated will have a strike-through the function name.

Git Integration

I simply love the Git integration of PHPStorm. After the setup, the Git integration is fairly seemless. Whenever I create a new file, it asks me whether I want to add it to the project's version control. I can use shortcuts like Ctrl+K to commit and Ctrl+Shift+K to push. Whenever I commit, PHPStorm can do code analysis requesting that I fix issues before I commit the changes. All these small things add up to a lot of time over the period of a week.

Deployment Options

Besides integration into Git and implicit any Git Deployments, PHPStorm has a built-in SSH/sFTP engine to deploy code to any server. As soon as the file changes and is saved, it can automatically deploy to whatever your preferred server is. And you can setup multiple deployments.

Conclusion

Do you use PHPStorm? What did you like and not like? What is your most favorite feature of PHPStorm? If you don't use PHPStorm, why not?

Aug 31 2015

How I Created My Genesis Site

Today I want to introduce a series where I am going to walk through how I created my site. Over this series, I am going to walk through my setup, my development processes, my theme code modifications and enhancements, and my plugins I created or used to make my Genesis website.

Setup & Technologies Utilized

In the development of my site, I used the following technologies and processes:

Preferred IDE: PHPStorm
Version Control: Git (Git for Windows)
DevOps/Automation: Node, Bower & Grunt (though I could have easily used Gulp)
DevOps/Automation: SASS (CSS pre-processing)
DevOps/Automation: MySQL Workbench & DB Syncing
Local Development Environment: Varying Vagrant Vagrants
Hosting: WP Engine for Staging & Production via Git Deploy

Do not let this list overwhelm or intimidate you! For Node, Grunt, Bower, SASS, and MySQL Workbench, these are things all developers can learn if they want, and I am going to give you an easy way to get up and running fairly quickly.

Theme

My site is built on the Genesis Framework. Typically I start with my own vanilla child theme to create a website so to make sure I have no unnecessary overhead and bloat. This time, I started with Altitude Child Theme but did some work under the hood to extend its features. These customizations include:

Unlimited Front Page Sections: By default, Altitude only allows for seven (7) sections. At one point, I wanted to do nine (9) or ten (10), so I extended this to be able to change my mind easily and often.
Filterable Background Image Sections: By default, Altitude allows you to customize this via a filter (altitude_images), which is awesome! Being lazy, I wanted a single line of code to change this. So I switched the functionality to use add_theme_support.
Icon Fonts: I love icon fonts like Font Awesome, so I added it to my child theme.
Different Primary Menus: For user experience, I wanted the home page menu to use single page navigation via anchors, but on other pages I wanted to go to the actual page or post instead of back to the home page. So on the home page, I display one menu and on other pages I display a different menu.
Optimized Script/Style Output: By default, most Genesis child themes output non-minified CSS delegating this functionality for plugins and cache. Since I already minimize my CSS, there is a simple code snippet to use for production sites to output the minified CSS file. The great thing about this is that it removes the information about the theme, which improves privacy.
Custom Responsive Menu: Call me vain, but I love great mobile menus. Genesis Child Themes have great mobile menus! But I found one that I simply love, so I wanted to incorporate it into my theme. I will walk through what I did and how I added it to my child theme for anyone else who wishes to do the same.