When you look at a webpage, you see it as one page, with various elements (masthead, footer, content area, sidebar, etc.), and in straight html, you code it as one page, with the DOCTYPE declaration at the top, opening and closing tags for various parts of the page. With themes, though, these parts are divvied up and each one becomes their own page, functioning under a model similar to the Model View Controller (in which the index.php acts as the “traffic cop” to marshall elements–other php pages–on the page displayed).
A theme is basically an assembly of content container elements (header, footer, sidebar, and main content, the “Loop”).
Each one of these content containers have their own template page in php that controls how that piece displays, while the index.php tells them where to display and what content to display. Because content is dynamic and is continually changing–for instance, it will on this blog as soon as I publish this post–thanks to The Loop.
What’s the Loop?
You may well ask (I did). The loop is essentially a php while loop that has a very simple purpose, to get posts where posts exist and plunk them into home page of a WordPress site (IF that site has the posts on the home page–if the site has a static page for the landing/home page, then the loop will populate whatever page is designated through the Dashboard to display posts), which is usually index.php.
For the very simplest index page, the code goes something like this:
<?php
get_header();
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
get_sidebar();
get_footer();
?>
Header
In the simple example above, the “Header” block with the menu navigation would comprise a file header.php, which would be fetched by the function get_header() in the code above. Header.php would contain the DOCTYPE as well as the entire <head> section, along with opening <body> and <html> tags, as well as the masthead image (if using one) and the navigation (in this example–I’m sure you could probably have a separate file for just navigation and reference that by function on the index.php page).
The Loop
The area with the dotted line (labeled “The Loop” in brown) is the dynamic container populated by whatever posts (shown in abbreviated form in the example–the_excerpt()) by the if (have_posts()) function followed by the while loop until it reaches the end (endwhile) –essentially, “If there are posts, display them here (content area) while there are still posts until you get to the end.” So every time you write a new post (as I’m doing now), that post becomes the last–well, actually first, as WordPress usually displays newest content first–which gets pulled by that while loop to populate the content container set up for displaying posts. (All loops have to be ended in php [otherwise they become endless loops!], so the while loop is nested in the if loop, and so while gets closed first, and then if, just as with html.)
Sidebar
These follow the Loop in getting pulled into page by index.php (get_sidebar() function) and are pretty self-explanatory. The Sidebar (sidebar.php) can have some additional navigation hard-coded in, while the Archives update dynamically, and often “Recent Posts” will be referenced there by links as well. A Search field can appear in the header, too, but in the theme I’m currently using, it is in the Sidebar, so I went by that when creating the illustration above.
You can have multiple Sidebars, with multiple stylings. They would need to be differentiated in the name of the file and in the php. (Showing how to do this is beyond my current skill, but I found a tutorial for it here.)
Footer
The Footer (footer.php), of course, contains whatever Footer information the user wishes to have, as well as the closing <body> and <html> tags. Navigation could easily be here as well as in the header.php. So far we’ve looked at the standard “home” page. Let’s look at some other pages, for there are two types of pages in WordPress: Posts and Pages. First I’ll look at “Post.”
Posts
Styling of posts is done by the template file single.php. As above, it will have the same header, footer, and sidebar (in this example), and the content for just that post in the content area. (It would probably NOT have a Menu navigation button that had its name on it–I just put that in the graphic to remind myself of what graphic I was working on, lol! In fact, going to a different post may not have an “active” or focused state of any menu navigation–only static pages, or the home page/index.php have menu buttons).
Now, you can have different categories of posts, and different stylings set for these categories, so that they can be easily distinguished from one another. WordPress has a Template Tag Hierarchy, and uses that to figure out which styling to apply to what.
- category-slug.php
- category-ID.php
- category.php
- archive.php
- index.php
As you see, index.php is last, and category-slug (ie “category-news.php”) is first. So index.php is the LAST choice for styling, but will serve, to show how to display individual post pages. You will ALWAYS have an index.php page, after all, for your theme to be a theme. If there is not template set up for the archive.php, for instance, archive posts will also use the index.php styling.
Page
With a page, you can do something a bit different. You can design it so that there is no Sidebar (but giving up some of that functionality). You have the freedom to make it a “blank slate” with the other elements the same, because this will be a static page on your site, not referenced in the Loop.
You can even, if you like, design a variety of templates for how a page will display, incase you DID want to include the Sidebar, but also giving the user the option to have more control over how their pages will look, even providing some choice between different iterations of possible functionality, or positioning the sidebar on a different side than it appears in posts, or formatting in multiple columns, etc.
(Yes, I know the text is the same as what is in the graphic–I actually wrote it while designing the illustration, and this text is searchable, whereas the text the graphic is not 😉
Okay, if that’s how it works–how do you get it to look nice?
While WordPress works with PHP & SQL (in the functions) to communicate with the MySQL database with all the information, content, links, etc. stored in its tables, the presentation is actually all handled like any normal webpage, with HTML and CSS. So, if you know html and css (and hopefully html5 and css3), you’re mostly there–you just need to plug in some php for a very basic site. This post has gotten way too long to include that here, but I would encourage you, if you’d like to get your feet wet, to try this very awesome tutorial on how to create a basic WordPress Theme, which gives you the php code you need for each piece, sans any html or css, which you can add yourself.
Let’s Talk Mobile
Mobile is where it’s at, and more and more WordPress themes are being developed that will work on both desktop and mobile devices. The graphics I’ve put in so far are for a standard static desktop website, but just for fun, I came up with some mobile design equivalents for my graphics above.
As you can see, The Loop is in this example as well, but instead of a sidebar.php or header menu navigation, I’ve envisioned a “burger bar” to have a slide-out panel with navigation (I know this can be done with jquery, possibly with css as well (using the display property on the burger button link’s states, with a:hover: visible, say).
Mobile design is most often done through media queries in the css code, to sense what size the viewport is, and set “break point” for changing the design depending on how large or small the browser window/viewport is. You’re basically setting up a different set of styles (being cognizant of inheritance of styles, of course) for each break point.
For WordPress, there are even some cool Plugins (plugins add functionality, remember) to make one’s site responsive.
I think I’ll leave it at that for the moment, but in another post, I’d like to talk about theme design in regards to usability. Until then, thanks for reading!
Resources:
http://codex.wordpress.org/Template_Tags
http://codex.wordpress.org/The_Loop
http://codex.wordpress.org/Using_Themes
http://codex.wordpress.org/Theme_Development
http://yoast.com/wordpress-theme-anatomy/ (this is a really great one!)
http://codex.wordpress.org/Theme_Development_Checklist
http://codex.wordpress.org/Theme_Unit_Test
http://webdesignpeeps.com/3-best-wordpress-plugins-to-make-your-site-responsive/
http://wpengine.com/2013/09/04/does-your-wordpress-site-need-to-be-responsive/
http://wp.tutsplus.com/tutorials/theme-development/developing-wordpress-themes-using-responsive-frameworks/?search_index=2