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.