Modern WordPress Theme Development

WordPress-Developer-Environment-Setup.md

Development Software

• VirtualBox - Virtualization software for running local operating systems within your computer. This allows us have a full version of linux within our computers that better match how a live webserver works.
• Vagrant - A tool for provisioning (creating) virtual machines.
• VVV - A pre-built, community-supported Vagrant configuration for WordPress development.
• Git - Version control system for managing code during development. Easily allows for tracking changes, and merging new code into an existing project.
• SourceTree - A GUI available on Windows and Mac for managing Git projects. This makes Git much easier to use, as we won't have to learn the command line interface.
• Github.com - A website that provides free Git repositories for both open source and private projects.
• SASS - (SCSS) A CSS preprocessing implementation that allows us to write much less CSS for a project. This basically makes CSS into a simple programming language.

WordPress Theme Build

• _s - (Underscores) is a very simple WordPress starter-theme. Perfect for creating a brand new theme from scratch as it is completely unopinionated in its structure, and adheres to WordPress best practices out of the box.
• Bootstrap - A CSS framework for easily making great responsive websites.

Install Required Software

1. Download and install VirtualBox https://www.virtualbox.org/wiki/Downloads (I think we're safe to use the 5.x version)
2. Download and install Vagrant http://www.vagrantup.com/downloads.html
3. Download VVV 1.2.0 and unzip it to the folder where it will live. Rename the folder VVV (instead of VVV-1.2.0). https://github.com/Varying-Vagrant-Vagrants/VVV/tree/1.2.0
4. Download and install SourceTree https://www.sourcetreeapp.com/ This is a Git GUI that I like a lot.

Install the VM and test

1. Open a command prompt and go to the directory where you extracted VVV
2. Type vagrant plugin install vagrant-hostsupdater, this will install a vagrant plugin that saves us a little work.
3. Then type vagrant up, and go get some coffee, or have dinner or something... it can take 30 mins or so to install the virtual machine. (could be faster, so you could watch it work if you want)
4. Once it is done, you should be able to open a browser and go to http://local.wordpress.dev to see your new local development version of WordPress
5. You can login at: http://local.wordpress.dev/wp-login.php with admin and password

About Vagrant

Vagrant is a tool that helps provision (create/launch/make) development environments in a standardized manner. Using this, we can all easily have the exact same setup with very little effort.

Common/Useful Commands:

• vagrant up - Start the virtual machine
• vagrant halt - Stop the virtual machine
• vagrant reload - Reboot the virtual machine
• vagrant destroy - Delete the virtual machine

General usage reasons:

• vagrant up - You are ready to start working on a project. In your command prompt (Terminal on Macs), browse to the directory where you extracted VVV and run vagrant up.
• vagrant halt - You are done working for the day, or need to restart your computer for some reason. In your command prompt, browse to the directory where you extracted VVV and run vagrant halt.
• vagrant reload - Something is acting strange in your development environment, or you can't access your local sites. In your command prompt, browse to the directory where you extracted VVV and run vagrant reload.
• vagrant destroy - We'll probably never use this. If you need to completely start over with your development environment because something has gone terribly wrong.

WordPress-Underscores-And-Bootstrap.md

Adding Bootstrap to Awesomesauce

Adding Bootstrap to any given web site project is simple, while implementing it completely may take more substantial effort. Before we get started, let's look at the Underscores theme a bit more.

WordPress Theme Structure At A Glance

Fundamental files

• style.css - This file serves double duty in a WordPress theme, and is automatically loaded for any activated theme.
  • At the top of the file, meta data about the theme is placed within a CSS Comment.
  • Beneath the theme meta data is the CSS styles for the theme.
• index.php - The default template file used when no more appropriate template is found.
• page.php - The template file for an individual Page.
• single.php - The template file for an individual Post.

Additional files

• header.php - The top-most HTML for a template file.
• sidebar.php - The default template for sidebars.
• footer.php - The bottom-most HTML for a template file.

How Templates Work

WordPress decides what template to use by the context of the webpage a user is viewing. For example when viewing a Page, WordPress will first look for a very specifically named template for the Page being viewed, then it will fallback to less specific template name until it finds the best match.

This can be a bit daunting at first, but luckily there is a lot of great information out there about this. The process of WordPress deciding what template to use is called the Template Hierarchy. For future reference, bookmark or download this file: https://developer.wordpress.org/files/2014/10/template-hierarchy.png

Examples Of Templates

Let's see how our Awesomesauce theme files work.

If we were to view an individual Post on the website, the theme files would load in the following order.

1. single.php - Determined by WordPress to be the best match for the webpage being viewed.
2. header.php - Loaded by single.php with the get_header(); function.
3. template-parts/content-single.php - Loaded by single.php with the get_template_part( 'template-parts/content', 'single' ); function.
4. sidebar.php - Loaded by single.php with the get_sidebar(); function.
5. footer.php - Loaded by single.php with the get_footer(); function.

Adding Bootstrap

Though this is not the most-preferred way of adding CSS to your project, it is probably the easiest. For the sake of this example, we're going to use a CDN to provide Bootstrap, and we'll include the CSS file directly in the header.php template.

1. In your file editor, open header.php
2. Visit the Bootstrap Getting Started page and locate the Bootstrap CDN section near the top. http://getbootstrap.com/getting-started/#download
3. Copy the top two link tags to your clipboard, so that you have something that looks like this:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

1. In your file editor, open the header.php file in our theme.
2. Locate the line with the following code <?php wp_head(); ?>
3. Paste your code beneath that, on a new line.
4. Save the file.

Refresh the page in your browser, and you might notice a slight change in font and shades of blue. Now that we have Bootstrap, let's use it in the theme.

Using Bootstrap's Grid System

Next, we'll use Bootstrap classes to make our sidebar work correctly.

header.php

1. Open header.php and locate the #content div at the bottom.
2. Add the class container-fluid to this div, and save the file.

index.php

1. Open index.php and locate the #primary div near the top.
2. Add a new class to the #primary div named col-sm-8.
3. Above that div, create a new div with the class row.
4. Locate the <?php get_sidebar(); ?> function at the bottom.
5. Beneath that line (above the get_footer(); line), close the .row div.

Your resulting code should look something like this:

<div class="row">
	<div id="primary" class="content-area col-sm-8">
...
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- closing .row -->
<?php get_footer(); ?>

sidebar.php

1. Open sidebar.php and locate the #secondary div.
2. Add the class col-sm-4 to this div and save the file.

Visit http://local.wordpress.dev to see your new responsive Bootstrap sidebar. Party down.

Cleanup

We made a great sidebar to the site's homepage in the previous section, but we have a few more template files to apply changes to before we're done.

To make your sidebar work through your whole site, repeat the index.php section above for each of the following template files:

• archive.php - Template for Lists of post types, categories and tags.
• page.php - Template for and individual Page.
• search.php - Template loaded when showing search results.
• single.php - Template for an individual Post.

WordPress-Underscores-Bootstrap-Theme-Setup.md

Creating Themes with Underscores

To start, let's make a very simple Underscores theme that does not use SASS. This will allow us to gain a better understanding of a WordPress themes in general before getting involved with the other tools.

My First Underscores Theme

For this example, we're going to create a theme named "Awesomesauce".

1. Visit Underscores' website http://underscores.me/ and find the text box named "Theme Name" next to a button named "Generate".
2. In the Theme Name box, type Awesomesauce, then click Generate. This will download your newly generated theme as a zip file.
3. Extract the zip file to your desktop for now.

We have created a new theme! Next, let's take a step back and explore the VVV WordPress files a bit, so we know where to put our new theme.

Exploring VVV

• Using your computer's file manager (Explorer / Finder), browse to where you extracted VVV.
• In the VVV folder, you'll see about a dozen files and folders. The only one we'll ever worry about is www. Open the www folder.
• Now in VVV\www we have another few folders. For this series the only one we're going to work with is wordpress-default. Open the wordpress-default folder.
• This is the folder we're going to work in: VVV\www\wordpress-default.

Next, let's take a quick look at the WordPress file structure.

Exploring WordPress

• In the root of the WordPress folder there are 3 main directories, and about a dozen files.
• The only file we'll ever worry about here is wp-config.php. But, since VVV set this up for us, we can ignore it all for now.
• The only folder we'll concern ourselves with is the wp-content folder. This folder is where WordPress keeps plugins, themes, and file uploads. Go into the wp-content folder.
• Go into the themes folder.
• Now you should be at: VVV\www\wordpress-default\wp-content\themes. This is where we will put our newly generated theme.

Installing Your New Theme

• Copy your newly extracted theme named awesomesauce into this folder, so that the index.php file for your theme can be found at this path: VVV\www\wordpress-default\wp-content\themes\awesomesauce\index.php
• Login to WordPress at http://local.wordpress.dev/wp-login.php with the credentials admin and password.
• In the dashboard visit Appearance, and you should see the Awesomesauce theme. Activate it.

You now have a working WordPress theme! No one said it was going to be pretty. In fact, quite the opposite. This is a completely blank theme, so it should have no style at all.

Spend some time exploring the theme files a little bit. Specifically, open style.css and look at the comments at the very top. These comments control the information about the theme itself.

/*
Theme Name: Awesomesauce
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description

If you change the Theme Name or Description here, it will change the name in the WordPress Appearance section.