You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Open a command prompt and go to the directory where you extracted VVV
Type vagrant plugin install vagrant-hostsupdater, this will install a vagrant plugin that saves us a little work.
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)
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
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.
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".
Visit Underscores' website http://underscores.me/ and find the text box named "Theme Name" next to a button named "Generate".
In the Theme Name box, type Awesomesauce, then click Generate. This will download your newly generated theme as a zip file.
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
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.
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.
single.php - Determined by WordPress to be the best match for the webpage being viewed.
header.php - Loaded by single.php with the get_header(); function.
template-parts/content-single.php - Loaded by single.php with the get_template_part( 'template-parts/content', 'single' ); function.
sidebar.php - Loaded by single.php with the get_sidebar(); function.
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.
In your file editor, open the header.php file in our theme.
Locate the line with the following code <?php wp_head(); ?>
Paste your code beneath that, on a new line.
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
Open header.php and locate the #content div at the bottom.
Add the class container-fluid to this div, and save the file.
index.php
Open index.php and locate the #primary div near the top.
Add a new class to the #primary div named col-sm-8.
Above that div, create a new div with the class row.
Locate the <?php get_sidebar(); ?> function at the bottom.
Beneath that line (above the get_footer(); line), close the .row div.
Your resulting code should look something like this:
Rather than embarking on an incredibly tedious quest of writing a lot of fake content for our development site, we're going to import some. The WordPress Theme Unit Test is a collection of content created to help test your theme: https://codex.wordpress.org/Theme_Unit_Test
Log into WordPress, and on your dashboard visit Tools >> Import.
Click "WordPress" at the bottom. Click Install Now.
After the plugin is installed click "Activate & Run Importer".
Upload and Import the test data file.
When the test data is completely imported, you should see an "All done!" message. Visit your site to find a whole lot of test content of every variety.
We're now done with the WordPress Importer plugin, so let's disable it.
Visit your Dashboard >> Plugins
Locate WordPress Importer and click the "Deactivate" link beneath it.
To best understand Bootstrap, we need to make sure we are on the same page with HTML and CSS.
HTML
HTML is easy, it is simply a document that is interpreted by your browser. The same way MS Word "interprets" your .doc files, your browser interprets .html files.
When you view a websites' source code, you are viewing the raw HTML document.
Elements & Attributes
Elements, sometimes called "tags", are the individual components that make up the HTML document.
Some common elements are:
<div>
<h1>
<p>
<strong>
<img>
Some elements are meant to be containers for content and must be closed, while others are not meant to contain content and do not. Sometimes the latter type of element is called a "self-closing" element or tag.
Container elements:
<div>...</div>
<h1>My Page Title</h1>
<span>Some content.</span>
Self-closing elements:
<img>
<hr>
<br>
Elements can have attributes. Attributes are written as key-value pairs within the element's opening tag. The value for an attribute should alway be wrapped in quotation marks.
<div id="page-wrapper"></div> - "id" is the attribute, and its value is "page-wrapper"
<img src="some.gif" alt="a cat falls down"> - "src" is an attribute with the value of "some.gif". "alt" is an attribute with the value of "a cat falls down".
The class attribute is a little special in that it is actually a collection of values, with each value separated by a space.
<div class="one two three"></div> - "class" is an attribute, and it has three values: "one", "two" and "three".
CSS
CSS is a way to add style to your HTML document. We use it for things like: changing fonts, background colors and element layout.
We can target specific HTML elements in a number of ways, but the following methods are the most common.
Assume:
<divid="page-wrapper" class="one two"></div>
By element itself: div { border: 1px solid blue; }
By element id attribute: #page-wrapper { background: red; }
By element class attribute values: .one {} .two{}
To target an element by id we prefix it with a pound (hash) symbol: #elementID {}.
To target an element by class we use a period in front of the class name .className {}.
Note: When you write CSS, you are applying the style to everything that matches your target statement. Meaning div { background: red } will cause every div element in the document to have a red background.
Bootstrap is a CSS Framework
Generally speaking, a framework is a set of common functionality shared by developers. Frameworks come in many shapes and sizes but serve a common purpose. They allow us to write less code and benefit from others' experience.
Some of the common functionality for websites that the Bootstrap framework provides are:
Responsive Grid
Responsive Navigation
Styled
Typography
Forms
Tables
Buttons
Images
etc.
And it is all cross-browser compatible.
Using Bootstrap
Starting with a very-simple HTML document, we're going to convert it into a Bootstrap styled page using only HTML.
The first thing we need to do is provide the HTML and Bootstrap classes that the grid system provides for responsive layout.
Using the container class, using define our top-level element.
Within the container, we create a row for each major horizontal areas.
<html><head><metaname="viewport" content="width=device-width, initial-scale=1"><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></head><body><!-- Container for rows --><divclass="container"><!-- Header --><header></header><!-- Image row --><divclass="row"></div><!-- Main --><divclass="row"></div><!-- Footer --><footer></footer></div></body></html>
Adding Columns
Bootstrap's grid system is based on a total number of 12 small columns. We can add multiple these 12 columns together to make a bigger column.
<html><head><metaname="viewport" content="width=device-width, initial-scale=1"><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></head><body><!-- Container for rows --><divclass="container"><!-- Header --><header></header><!-- Image row --><divclass="row"><divclass="col-md-4"></div><divclass="col-md-4"></div><divclass="col-md-4"></div></div><!-- Main --><divclass="row"><divclass="col-md-8"></div><divclass="col-md-4"></div></div><!-- Footer --><footer></footer></div></body></html>
What did we do there?
The col-md-* bootstrap class means, "this div should take up * columns on screensizes medium and up".
Okay, but what does That mean?
By default, Bootstrap has 4 responsive breakpoints. We can take advantage of those breakpoints by using the desired column classes.
Column classes:
col-xs-* - extra small
col-sm-* - small
col-md-* - medium
col-lg-* - large and up
The asterisk * is how many of Bootstrap's columns this element should take up.
Let's look at each row we created individually:
Both the header and the footer take up the entire width of the container, so we do not need to use any special Bootstrap classes.
But do notice that these elements are within the container div.
<!-- Header --><header></header>
...
<!-- Footer --><footer></footer>
The row of images is divided into three equal sections. Since Bootstrap works on a twelve column layout, our sections need to be 4 Bootstrap columns wide.
The main content area is divided into two sections. The sidebar section is 1/3rd of the container width, and the content section is 2/3rds of the container.
Sidebar: 12 * 1/3 = 4
Content: 12 * 2/3 = 8
<!-- Main --><divclass="row"><divclass="col-md-8"></div><divclass="col-md-4"></div></div>
In two previous sections rows and columns, we used the medium Bootstrap classes, like col-md-*. This means that any screen size equal to or wider than the medium breakpoint will see these sections as columns. While any screen smaller than the medium breakpoint will see only rows.
<html><head><metaname="viewport" content="width=device-width, initial-scale=1"><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></head><body><!-- Container for rows --><divclass="container"><!-- Header --><header><ahref="/">Awesome Website</a></header><!-- Image row --><divclass="row"><divclass="col-md-4"><imgsrc="awesome-1.jpeg"></div><divclass="col-md-4"><imgsrc="awesome-2.jpeg"></div><divclass="col-md-4"><imgsrc="awesome-3.jpeg"></div></div><!-- Main --><divclass="row"><divclass="col-md-8"><h1>This is my homepage. Marvel.</h1><p>Welcome to my webzone.</p></div><divclass="col-md-4"><h2>This is my sidebar</h2><p>Here is where I put useful links or something.</p></div></div><!-- Footer --><footer></footer></div></body></html>
We've just made our first Bootstrap page. It is completely responsive, and we only used HTML.
Bootstrap offers a great component for responsive websites called a "navbar". Navbars are basically your site's header. You can include dropdown-ready responsive menus, inline search forms, or anything you want.
By default Underscores provides a menu for this theme named "Primary Menu", as well as a default menu theme location named "Primary Menu". This is a little confusing, but don't let it worry you too much. Once we setup the menu to work correctly we'll never worry about it again.
Before we get to styling the header, we need to ensure that the primary menu is setup in WordPress.
To do this, let's login to the admin dashboard and go to Appearance >> Menus.
Make sure your primary menu is selected, then scroll to the bottom of the page and check the box that says Theme Location:[ ] Primary Menu. Save the menu.
This setting tells WordPress that this menu will appear in the "Primary Menu" theme location.
Note: While editing the Primary Menu, if you've installed the Theme Unit Test the "Home" link will be setup to go to an external website. Edit that link and change the url to /. This will make it into a real Home link for your own site.
Styling WordPress Menus
WordPress menus present a few challenges when trying to style them. By default, they come with their own set of CSS ids and classes. These CSS ids and classes created when the menu is rendered by what is called a "Nav Walker". Nav walkers are PHP classes that handle recursive output of a menu's HTML.
Basically, it can be really hard to give a menu the HTML you want. And since we're using Bootstrap, we need to have a significant amount of control over the HTML.
Adding a Bootstrap Nav Walker
Enter the Bootstrap Nav Walker class created by Edward McIntyre. This PHP class is a utility for making your WordPress menus render with Bootstrap HTML.
The first thing we need to do is to include this class in our theme.
Open the above link and in the right column click "Download Zip".
Extract that zip file to your desktop and locate the file named wp_bootstrap_navwalker.php.
Copy the wp_bootstrap_navwalker.php file to the inc folder within your theme.
Open the functions.php file in your theme, and find a line that starts with: wp_enqueue_script( 'awesomesauce-navigation' ... and delete that line of code completely.
Open the js folder in your theme and delete the file named navigation.js.
This javascript file is provided by Underscores to make your menus responsive, but since we are going to use Bootstrap for that functionality we no longer need it.
Scroll to the very bottom of the file and add the following code on a new line, then save the file.
/** * Load the menu nav walker for bootstrap by Edward McIntyre * https://github.com/twittem/wp-bootstrap-navwalker */requireget_template_directory() . '/inc/wp_bootstrap_navwalker.php';
The above code tells WordPress to always load our new Bootstrap Nav Walker PHP class. But loading the file won't do anything on its own, we have to use it.
Modifying header.php
Now we're going to do some significant edits to the header to make it into a navbar.
Locate the line that starts with <header id="masthead" ...
Delete that line, and everything in the file that follows it. (yes, everything)
Copy the following code, paste it at the bottom of the file (essentially replacing everything you just deleted), then save the file.
Visit your WordPress site, and you should have a new fancy responsive header with responsive dropdown menus. Huzzah!
The above code is fairly simple, but let's go through it.
Most of the HTML above was copied from the Bootstrap Navbar example in their documentation. There is no shame in doing so, that is why it is there.
For the site name (branding), we've used the WordPress home_url() and bloginfo() functions.
So that our menu items work dynamically (i.e not hard-coded HTML), we have used the wp_nav_menu() function and provided it some Bootstrap related arguments.
Note: Instead of the normal "Hamburger" style menu that the example provides, we've used the actual word "Menu" for the button. Research shows that using the word "Menu" provides a better user experience than using a vague symbol. At the end of the day this comes down to personal preference or design specifications.
wp_nav_walker() and Arguments
There is no need to memorize how this function works, or what arguments it takes, but let's explore its use some more so that we know what is going on.
Argument
Description
'menu' => 'primary',
Use the menu slug provided by Underscores. Its name is "Primary Menu", and it's slug is "primary".
'theme_location' => 'primary',
This menu belongs in the "Primary Menu" theme location.
'depth' => 2,
How many levels of the hierarchy are to be included where 0 means all.
'container' => 'div',
The HTML element that should wrap the list of menu items.
If the menu doesn't exist, the fallback function to use. This was suggested by the Bootstrap Nav Walker documentation.
'walker' => new wp_bootstrap_navwalker()
Our new Bootstrap Nav Walker! This is where we have implemented the new file that we added to our theme earlier. This is the line of code that tells the menu to render using the Bootstrap HTML.
Whew. That's a lot. Good thing we don't need to memorize it.
If you need to add a menu to your WordPress theme in the future, refer to the codex documentation on this function: wp_nav_menu()
