Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
With the template hierarchy fresh in mind, let's take a look at the structure of the Underscores theme as it comes out of the box. I've installed my version of Underscores, that I called My Simone, inside my WordPress install, and here I have it open inside NetBeans so I can inspect the code. For a WordPress theme to work, it needs three main components. It needs a style.css file, which defines the name of the theme and other information about the theme, and lets WordPress know that this is a theme.
It needs the functions.php file, which contains all the function and activates all the links between the theme and WordPress itself. And it needs an index.php template file. And this is the default or main template for WordPress, so any time another template file is not defined, you'll see index.php. But in most cases, you'll only see index.php when you're visiting either the front page or the main blog page of the site, because all other instances are covered by more specialized templates.
Underscores has a basic template structure, that targets most of the situations you'll encounter when you visit a WordPress site. We have single.php which handles single pulse, and single.php works and locks that with another loop file called Content Single, that you find here. And it's actually content single that displays the real content from the post. Single.php is responsible for overall structure, by showing the header and then the side bar and the footer.
As with single posts, we also have a custom template for pages, called page.php which looks pretty much the same as single.php, except this template calls for content-page, instead. So when you open to see content.page, you'll see here again, we display all the content from a page, while page.ph displays the overall structure. For archive indexes, we have Archive.php, and this template actually manages all the different indexed archived pages you could land on.
It handles categories and tags, author indexes, day, month and year index, taxonomies, and so on and so on. So this archive.php is the fall back for almost all the index pages, except for the front page. Underscores also has a specialized 404 template that is activated whenever somebody is visiting a broken URL, and a specialized search template, that shows search results or shows error messages if no searches are found. Now those error messages are actually handled by this loop file called Content None, which has all the different error messages for different types of errors.
So, here you have a situation where there are no posts on the site, or when no search is found, or other situations. In addition to the main template files, you also have the standard components. Here we have header.php which manages the header. Sidebar.php which manages the sidebar. And footer.php which manages the footer. And, to control the layout, Underscores also comes with a folder that contains two different layout options. You have content sidebar, and you have sidebar content. So this is either content left sidebar right, or sidebar right left content right.
From here on out, we'll be working with these existing files. We'll add some files, we'll remove some files, and we'll make changes to most of them. Underscores is a starter theme in the truest sense of the term, and what we do with it and where we take it is entirely up to us. So, let's get cracking.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.