Wordpress design with Underscores starter theme: how a wordpress theme works

 It's important to understand how a theme actually works before we start building one. You see, rather than provide a single template for each individual scenario, WordPress uses a distributed templating system, based on DRY development practices. To make sense of all this, let's first look at what happens when you enter an address to a WordPress post into a browser. 

In the browser, you would put in a human-readable URL, like this one: http://mor10.com/test-drive. But this is actually just a re-write of a database reference, so you can see on thebottom here, we have ?p, which means "post number", and then equals, and then a number, and that number is the actual ID for the item.

So what happens now is: that ID is sent to the database server. The database then says, in this case, "2726 is a post.", and that information is sent back to WordPress. WordPress now goes and grabs the correct template, which in this case would be the single.php, which is the template for regular posts, and single.php, in turn, has references to a bunch of new files. 

single.php

In underscores out of the box, single.php will call header.php, content-single.php, sidebar.php, and footer.php, and all the contents from each of these files are patched together using the content from the database and the template, and then stitched into one cohesive html file that's displayed in the browser.

This modularity means that we can use the same components on different pages, so here you see the single view, that just displays a single post, or we can also use the same components: header.php, sidebar.php, and footer.php, to display the framework for the index, which is the front page with all the posts, and then we use a separate loop file, in this case content.php, and we repeat it for all the different posts that will be displayed on the index page. Using this structure, we could also create highly customized experiences for specific types of content.

page.php

 which displays static pages, calls header-custom.php, which is a custom header just for those pages. It also calls content-page, which is the post content itself, and footer, where you'll notice here we have no sidebar. This is a DRY, or Don't Repeat Yourself development method. Rather than repeating the header and sidebar and footer code in all the different templates, and having to update them everywhere, you just call in the separate template files and use them when necessary.

That means you can change the header file, and then all the headers for all the different templates are changed. You can change the sidebar, and then all the sidebars on all the different templates are changed, and so on. As we progress through the course, you'll see how this makes creating and editing templates a lot easier. Having a clear understanding of the distributed nature of WordPress themes allows you to quickly identify and navigate between different sections of your theme. The main thing to remember here is that every major piece of content usually has its own template file.

Sidebars are found in sidebar.php. Headers in header.php, content in content.php, or something like that, footers in footer.php, and so on, and so on. As we move through the course, you'll learn how to identify these different components, and see how they fit together, how you can call them in, how you can remove them, and also how we can patch them together, to create custom experiences for individual views.

Wordpress design with Underscores starter theme: mobile first design

Web design and development is undergoing a drastic change thanks to the proliferation and abundance of mobile devices and how we use them. As a result, the old method of designing webpages in Photoshop and then trying to create pixel perfect versions with HTML and CSS is simply no longer valid. The current best practice for web design is modular mobile first design, and that's what we'll be doing in this course. What does that mean? Three things:

1. Design modules that together comprise a full view
First off, instead of designing an entire page with all its contents, we're going to design modules that fit together to form a full view. That way things can be moved around and connected in a more dynamic way.
2. Design and build for small screen first

Secondly, we'll design and build everything for small screens first, specifically a vertical smartphone, and then when everything looks good on that screen, we'll scale up the screen and apply responsive design principles to make the same content look good on other screens,
3. Make design decisions the browser
Thirdly, we'll do as much of the design as possible in the browser. After all, that's where the website will be displayed.

When working with responsive web design, I like to apply a simple principle. Start with the smallest screen. Make the viewport wider. When something looks weird or wrong, add a breakpoint through a media query.You'll see me do this throughout the course and the result is lots of media queries scattered throughout the style sheet. This may seem messy but in the end it produces simpler and more easily editable code. So how does this all work? Let me show you. Before starting the actual build on my theme, I made some quick drafts in Photoshop. You'll notice here that I've started with a couple of different art boards,some small and some large, and the focus of these design drafts is on individual modules. What does the header look like? What about the featured image and post header? What are the font sizes and relationships? Once this is done, I start translating each module into code on the webpage, and that's what we'll be doing through the majority of this course. One final thing, as we move forward, notice that I rarely refer to this Photoshop design and never use my designs to measure heights or font sizes or anything like that. All these designs are for is to get a general idea of the overall look of my theme. All decisions about sizes and precision, et cetera, should be done in code in the browser because that's where the real content will live.

Install wordpress Developer plugin

When you develop scenes or plugins it can be helpful to have WordPress tell you what is going on and when something is not working right. To make this possible, there are a handful of plugins that you can choose to install in your site for debugging purposes. All of these plugins have been bundled into one super plugin called Developer. Now, Developer is quite an unusual plugin. So, let me show you how it works. First, we go to the back-end of our WordPress site. Go to "Plugins" and "Add New". And, from here simply search for "Developer".And the first one you get, the one from Automatic, is the one you want to install.

When you activate the Developer plugin, you get this pop-up that asks you, what kind of development you are going to be doing? Are you developing a plugin? A theme for a self-hosted WordPress installation? Or, a theme for WordPress.com VIP? So, in our case we are building a theme for a self-hosted WordPress installation. Save changes. 

And now the plugin will give you a long list of other plugins that it wants to install for you. And this is the whole purpose of the Developer plugin. Developer, is actually a plugin that prompts you to install a long list of other plugins so you don't have to source them out, one at a time.

These are all optional and you can choose to install them or not. And you can also choose to install them later on. I will not go into great detail about the different Developer plugins in this course, but they are worth installing and experimenting with as you progress through the course. And there are a couple that we're going to install right away. So, at the top here, we are going to install "Debug Bar". So, I will click install. Scrolling down, we are going to install "Monster Widget". Which, we are going to use later on in the course. We'll also use "Regenerate Thumbnails". And finally, "Theme Check".

Now, like I said, you can choose to install any of the other ones, if you want to, but for now let's leave it at these. Now I can click on "Get developing". And I'm just taken back to the plugin page. But, the Developer plugin has added a new feature to my site. So, if I go to "Tools", you will see you have a new option called Developer. And when you go to Developer you will see the same settings as before, only in a different display. So here at the top we can choose the project types. So,we are at "Theme for self-hosted WordPress installation". Then, you see all the plugins.

So here you see the Active ones and the Inactive ones. And at the bottom, you have some other information. Here, it says that " We recommend you set the following constants to true in your wp-config.php file." "WP_DEBUG" and "SAVEQUERIES". Then, under settings it recommends the following settings or configurations, which is "Pretty Permalinks", but this is now set by default in WordPress. So, you don't really have to do anything about it. And finally, you have a link to the Codex. And a link to the underscore starter theme. Which, we are going to be working with.

So, before we wrap up this movie, I'm going to do that one thing we haven't done yet. Which is set up these Constants, or in particular, this one "WP_DEBUG". You see right now WordPress is set to not debug itself. So will never get errors if there are any errors. To fix that we have to go into one of the configuration files in WordPress, in particular this one wp-config.php. To do all of this you need some form of code editor. I'm going to use Atom for this. This is the only time I will use Atom. But, it is currently my preferred simple code editor.

So, I will go to "File". Open the file. Then navigate to my Word Press installation and find "wp-config.php. " I'll open the file. And here you see this is the file that sets up WordPress to communicate with a database. So here I have database name, the username and password, and local host and of that other stuff. And if I scroll all the way to the bottom here, we find " define( 'WP_DEBUG', false) " And this is what I need to change. I'll change that to true. Save the file.

Go back and reload this Developer page. And now you see that WP_DEBUG is set. Now like I said, this is all we need for this course. So, you can also try to set SAVEQUERIES to true if you want to, if you want to see what's happening with the database queries. But, that is beyond the scope of this course. Now, what's actually happened when we installed all of these plugins within Developer, is we've gotten new features in WordPress. So if we run to the front end of the site, you will see up here in the tool bar we now have a Debug Bar that gives us information about what's going on in the site. We also have a direct link to Developer that takes us back to the Developer page.

And, as we move forward you'll see some of the other features we've installed. Having these Developer plugins installed can help you quickly identify and fix problems in your theme as you are developing it. My advice to you is to start with the key ones I pointed out during the install process. And then more later on if you want a more in depth analysis and more information.

How to import wordpress test data

When building a custom theme, it's important to test it against all the different types of content people can place on that WordPress site the theme we're running on. Now, depending on the type of site you're building, you will need to build custom content that mimics what will actually go on the site. But regardless of what you are building, you need to test for all the basics, such as content types, HTML tags, image alignments, and so on. Now, building all that test content can take a really long time, but fortunately you don't actually have to do it. You can simply download what's known as the Theme Unit Test data for WordPress.

This is a full set of content for a WordPress site that covers all the bases and provides all the weird scenarios you need to test for. The Theme Unit Test data can be found at the WordPress.org Codex. Here you see you have page that explains how to install it, and I'll walk you through the process. The first step is to download the actual Theme Unit Test data. It's found in an XML file that you can download straight from here.

So I'll just right-click on it, save link as, and just save it under my Downloads folder. Then, can go to your WordPress site, go to the back-end, go to "Tools," and "Import," and from here, select "WordPress." If you haven't used the WordPress Importer before, you'll have to install it.

It's an external plugin you can install inside WordPress and you go to that plugin installer automatically when you click on WordPress. So from here I'll click "Install Now." The plugin is downloaded, unpacked and installed, and now I can activate the plugin and run the importer at the same time. So I'll click on that, and you'll notice this will produce the same action as if I went to "Tools," "Import," and "WordPress." From here, I can now choose the file I just downloaded. So I'll select "Choose File," go to "Downloads," find "theme-unit-test-data," and click "Open," and then click "Upload file and import." Now the file is uploaded into my WordPress installation and WordPress has some more questions for me.

First, it wants to know if I want to import the existing authors that are contained within this imported file. So here you see we have one, two, three and four authors. You can choose to just import them the way they are, or you can create a new user and login name for each of these authors, or you can assign each of the author content to a specific user. But I'm just going to leave it the way it is. Next, and importantly, you get the Import Attachments option. You need to check this box to download and import the file attachments, otherwise you will have a bunch of empty boxes where images should be but aren't.

So if you check this box, WordPress will go out on the web, grab all this content, and pull it into your site so you get all the images and other media elements. Once you've checked this box, click on "Submit." Now WordPress will run through the entire XML file and import all the content including pulling down content from the web. This will take a little while, and while the process is running you'll just see this white screen. The only thing you have to remember here is don't click the back button, because if you click the back button you stop the process.So just let this process run.

And when it's done, you get this message. "Import WordPress "All done. Have fun!" So check out what happened now. If I go to the front-end of my site again, I now have a ton of content. You can see here at the top I have a gigantic menu with lots of dropdowns, here I have a bunch of posts with lots of different types of content in it, and if I go to the back-end and go to "Posts," you'll see we have a long list of actual posts. We have a scheduled post, a draft post, a markup post that shows all the different HTML tags and formatting you can add to a post.

We have an image alignment post, a text alignment post, a title with special characters post, and so on and so on. And this is the point of the Theme Unit Test data. It provides you with all the types of posts and pages you can create, and within those posts and pages you will haveall the different types of content you can create. So, we have a post that shows all the different types of image alignment you can do. Here we have a center aligned image, a left aligned image, a very large image, a right aligned image, a center aligned image with a caption, and so on.

You also have other types of posts like a password protected post, and a comments disabled post, and a template with comments. This one in particular, if you go and view it, you'll see it has 19 comments. In these comments, you again have all the different types of HTML the users can insert into your comments. So using the Theme Unit Test data in your site allows you to see what types of content may end up on the site, and ensure that you are styling and formatting everything properly. As we progress through the course, I encourage you to go check out all the different types of content you've downloaded with the Theme Unit Test data, find out what each of the posts and pages and menus contain and make sure you understand it so that as we progress through the course you'll be able to compare what you're doing to actual content and make sure that every piece of content works the way it's intended to.

How to create a Theme from Underscores starter wordpress theme

Once WordPress is up and running on your computer, you need to get a copy of the underscores theme. Underscores is a starter themebuilt specifically to be used as the starting point for new custom themes. It's in constant development, and you'll often see changes to the code base on a daily basis. This means, by using underscores, you'll always be working with the latest and greatest WordPress has to offer,what's often referred to as the 1000-hour headstart. However, it also means, that as the theme changes, you may have to adjust your process accordingly. You know that saying from the philosopher Heraclitus, that "No man ever steps in the same river twice," well, it applies here in a very big way.

Underscores is a river, and every time you step into it, or download it, you are experiencing a new underscores. The version you downloadwill always be number 1.0.0, and once downloaded it ceases being underscores, and becomes instead, your personal custom theme. I think that's enough philosophy for now. Underscores is available from the official site at underscores.me, and you can also get it directly from the github repository, at github.com/automatic/_s.

But for everyday use, you'll always get underscores from underscores.me. Following this course, you now have two options. Use the version of underscores provided in the exercise files to match my code exactly. You can pull those exercise files directly down from the github repository for this course. Or, get a fresh copy of underscores directly from underscores.me. If you choose the latter option, you may have to adjust your code slightly for it to work the same way mine does. The functionality will be the same, but small parts of the actual code may be slightly different.

However, using a fresh copy of underscores, directly from underscores.me, gives you the real experience of building a new theme from scratch using underscores. And after finishing this course, that's what you'll be doing every time you build a new theme. If this is the first time you're building a new theme, you may want to use the bundled version. If you already have some experience with themes, or you want the added challenge, go ahead and get a fresh copy. To start the process of building a new WordPress theme using underscores, I always start at underscores.me.

From here, we can setup a base theme that's pulled directly from the github repository, and we can fill in some basic information. Here you can see you can put in a name, so you can put in any name you want, I'm going to put in popperscores as my name. Then you can option advanced options, and fill in more information. The first one is theme slug, so that is what the machine-name of the theme is. Here it's a good idea to create a theme slug that matches the theme name. However, there's one important thing here. If you put in a theme slug that matches an existing theme, let's say 2016, you'll notice that once installed, WordPress will want to update your theme, and if you run that update, you'll actually get the 2016 theme, not your custom theme.

So, make sure that you create a new theme slug that is unique and is not already available in the WordPress theme directory. So I'm going to call this one popperscores. Then I'll put in my author name, an author URI, and a short description. If you like using Sass for your CSS, you can also choose to sassify the underscore starter theme, but we're not going to do that in this course. Once all the information is filled out, I click generate. This grabs the code from github, inserts all this new information, and then creates a new zipped folder for me that I can open, that contains a folder, with the themes like I just created.

Now that I have the theme on my computer, I can simply open my WordPress install, wherever it is on my computer, then go to the wp-content folder, the themes folder, and drag and drop the popperscores folder into the themes folder. Once that's done I can go back into my browser, log into my local WordPress site, go to appearance and themes, and here you see popperscores is now an option. Right now, the thumbnail for my new theme is blank, because the theme has no appearence yet, and if I activate it and go to the front end of my site, you'll see the site looks quite terrible.

It's just basic text and nothing else. Now this may be a bit jarring the first time you see it, but this is exactly where you want to start. Now you have free reign to do whatever you want with your own custom theme.