Week 6: Building a WordPress Theme, Part 1
Unhappy with Your Grade?
I have two ways you can bump up your grade if it is sagging.
"Get Out of Zero, Free" Card
I'm issuing a new amnesty program for single assignments which received a zero. Here are the rules:
- Resubmit an assignment to the correct basket in the eCompanion. It must meet the following requirements:
- An assignment which is already late is turned in by midnight of our Week 8 class.
- A future assignment which is late must be in no later than a week after the due date.
- Put the text "Get out of zero free" in the comment box, so I know to give you credit.
- You can use this virtual card once per course only, and only for a single assignment.
- This can be applied toward assignments/projects but not attendance.
- Absolutely NO work will be accepted after the final minute of the final class session.
Here's a reminder from the syllabus:
On-time projects may be redone with instructor approval.
Hardly anybody takes advantage of this, but it's a great deal. If you turned in work on time and reasonably complete—but received less than full credit—come talk to me to arrange a redo.
We will showcase your page layouts in class. Tell us a bit about your design choices. Then we will seek feedback from your classmates.
- home page
- single post page
- category listing page
Finding a Good Starting Point for a Theme
We don't need to build a WordPress theme entirely from scratch. But to build one that doesn't require reverse-engineering or stripping down a complex theme, it helps to find a very simple one. In searching for a plain-Jane theme to start from, I found this list:
You may eventually find another theme to start from in the future, but I think the best blank theme for our purposes in this course is:
H5 is based on the BLANK theme and looks much like the old "default" theme which used to be part of the WordPress install (but is no longer.) It's got all the template files we need but is very stripped down in terms of styling and functionality. It's also written in HTML5!
For those just learning how themes are put together, some of the more feature-rich starter themes are simply too overwhelming. I picked this one because it has just the right amount of structure, style, and functionality for getting just about any layout put together.
Check out the demo site for H5, and bounce around the various pages and category listings.
Exercise: Build the Template for a Single Post, Part 1
Last week, I asked you to design the layout for a categoy listing and for a single post. You've also laid out the home page. In working with WordPress template files for the first time, I think the easiest place to start would be with the single post page. We're going to run an install of WordPress, and rename and activate the H5 theme on it. Then we'll build the template pieces for a single post by integrating the HTML and CSS you've written with the HTML, CSS and PHP in the template files single.php, header.php, footer.php, comments.php, and sidebar.php.
- Download the ZIP file for H5.
- The unarchived folder will become your new theme folder for your final project site. Rename it to suit your site name/theme.
- Run an install of WordPress (unless you already have our earlier semi-empty install on your laptop.)
- Put the renamed H5 theme folder into /wp-content/themes/.
- From the WordPress dashboard, go to Appearance > Themes and activate the H5 theme.
- Take a look at the following template files in the H5 folder using Dreamweaver. Get a really good feel for how they each is assembled, and what parts do what. How do they fit into each other to create a single post page? Where is the all-important "Loop"?
Anatomy of the Template Pieces
As you may have concluded, the template pieces fit into each other sort of like this:
The single.php template runs the show for single posts. It first calls in the header.php at the top. Right after the loop, it also calls for the comments function in comments.php. At the bottom, it calls in the sidebar.php and footer.php.
Let's take a look at the gross anatomy of all but comments.php (that one is fairly complex and best left for another day.)
- At the top, the single.php file includes the header.php file, then begins the loop.
- Inside a <header> element, the article's title, date, and author are generated from the database.
- Inside a <section> element, the main article content is generated.
- Inside a <footer> element, items that typically follow an article are generated, such as multi-page navigation and a tag listing.
- Beneath the article, the comments.php template is included.
- Inside a <nav> element, navigation to previous and next posts is generated.
- At the bottom, a few things happen:
- The loop is ended.
- The sidebar.php file is included.
- The footer.php file is included.
At first it's best to leave much of this code alone, except to add ids to open tags so that you can hook some CSS into them.
- All of this stuff inside the head is best left alone for now. Here's a quick run-down of what is generated:
- Page title
- Meta data
- The inclusion of a wp_head function which WordPress and some plugins may use to plunk scripts into
- The <header> element contains site id stuff. This is where you can really go to town hard-coding your own site header. You don't even need to keep the bloginfo tags there.
- The <nav> element spits out a list of your static pages. You can leave it here or move it elsewhere like the sidebar or footer.
Make sure to add some id attributes to the open <header> and <nav> tags (and the <ul> inside the <nav>,) so you can hook your CSS into them.
The sidebar can have basically one of two things going on. Either it detects that you are using the dynamic sidebar function, which means you are positioning widgets into the sidebar using the admin dashboard (Appearance > Widgets,) or you can hard-code the template tags that pull the widgets into the sidebar. The file below will determine which one of those thinsg is happening.
- If the function dynamic_sidebar is being utilized (by moving widgets into place in the Dashboard,) then the rest of the code underneath is ignored.
- If that function is not being utilized, here's where you can edit the individual widgets that appear. The first one in the template is a Search box.
- The next widget down is an archive listing, typically one link per month in which posts exist.
- Next up is a dynamically-generated bit that looks at what page we're on and spits out something relevant, like feedback as to what you're currently viewing.
- This widget provides an additional opportunity to list the static pages of the site.
- Here's the meta data (such as login) that I typically delete.
- Here are a bunch of links to external sites, and you'll probably want to delete these too.
Here's a nice list of what else you might want to use to include content in your sidebar, should you want to skip using the dynamic widgets:
The page above even tells you how you can specify differnet sidebar files for different pages.
- Inside a <footer> element, you can hard-code a bunch of footer stuff, like copyright and social network buttons. You can even pull in auto-generated content using template tags just like in the sidebar.
- Right before the close body tag, the wp_footer() function is called. This provides a spot for WordPress and plugins to throw in some final scripts. Leave this in place.
Exercise: Build the Template for a Single Post, Part 2
Now that you have your footing with how the single post page is compiled, integrate your own markup and layout for a single post with it in the theme's folder.
Here are a couple of more things you ought to do:
- Take a screenshot of your home page, and crop it to 300x225. Save it as a PNG file named screenshot.png into the theme folder (replace the existing image file.)
- At the top of style.css, in the commented meta data, do the following:
- change the name of the theme
- delete the theme URI (this is only useful if other websites will be using this theme)
- change the description
- change the theme author to your name
- change the author URI to some other website address, preferably your own portfolio site
- delete the tags and the rest of the comments underneath in that comment block
- Now go to the Dashboard and then Appearance > Themes. The screenshot and theme name/description for the active theme should be changed to all your own info.
Upload the following by midnight in two weeks:
|6 and 7||Single Post Page Template||theme.zip|
Single Post Page Template
Complete the exercises to the left under the headings:
- Exercise: Build the Template for a Single Post, Part 1
- Exercise: Build the Template for a Single Post, Part 2
Do the best you can to make the single post page match your original layout, but you may have to make some adjustments until you get better at this.
ZIP up your theme folder and submit it.