Unhappy with Your Grade?

I have two ways you can bump up your grade if it is sagging.

“Get Out of Zero, Free” Card

get out of zero, free card

I have an “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.

Redos

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.

Student Showcase

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:

10 Free Responsive WordPress Theme Frameworks

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:

Bones

Built around the HTML5 Boilerplate, Bones is a rock solid foundation to start any WordPress project. Keep what you need, remove what you don’t. Bones is bare and as minimalistic as possible. It’s meant to be used as a per-project template.

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 tutorial for Bones.

Exercise: Build the Template for a Single Post, Part 1

Last week, I asked you to design the layout for a category 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.

  1. Download the ZIP file for Bones.
  2. The unarchived folder will become your new theme folder for your final project site. Rename it to suit your site name/theme.
  3. Run an install of WordPress (unless you already have our earlier semi-empty install on your laptop.)
  4. Put the renamed Bones theme folder into /wp-content/themes/.
  5. From the WordPress dashboard, go to Appearance > Themes and activate the Bones theme.
  6. Take a look at the following template files in the Bones 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”?
    • header.php
    • single.php
    • sidebar.php
    • comments.php
    • footer.php
    • style.css

Anatomy of the Template Pieces

As you may have concluded, the template pieces fit into each other sort of like this:

WordPress single post anatomy

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.)

single.php

Click on the image below for a larger version.

Wordpress single.php template file
  1. At the top, the single.php file includes the header.php file, then begins the loop.
  2. Inside a <header> element, the article’s title, date, and author are generated from the database.
  3. Inside a <section> element, the main article content is generated.
  4. Inside a <footer> element, items that typically follow an article are generated, such as multi-page navigation and a tag listing.
  5. Beneath the article, the comments.php template is included.
  6. Inside a <nav> element, navigation to previous and next posts is generated.
  7. 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.

header.php

Click on the image below for a larger version.

Wordpress header.php template file
  1. 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
    • Links to stylesheet, xml for RSS feeds, a function which pings the search engines as soon as you publish a new post, jQuery, and a bit of JavaScript that goes with the H5 theme
    • The inclusion of a wp_head function which WordPress and some plugins may use to plunk scripts into
  2. 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.
  3. 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.

sidebar.php

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.

Click on the image below for a larger version.

Wordpress sidebar.php template file
  1. 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.
  2. 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.
  3. The next widget down is an archive listing, typically one link per month in which posts exist.
  4. 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.
  5. This widget provides an additional opportunity to list the static pages of the site.
  6. Here’s the meta data (such as login) that I typically delete.
  7. 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:

WordPress Codex: Customizing Your Sidebar

The page above even tells you how you can specify differnet sidebar files for different pages.

footer.php

Click on the image below for a larger version.

Wordpress footer.php template file
  1. 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.
  2. 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:

  1. Take a screenshot of your home page, and crop it to 300×225. Save it as a PNG file named screenshot.png into the theme folder (replace the existing image file.)
  2. 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
Wordpress stylesheet meta data
  1. 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.

Move WordPress Between Servers

Often you’ll find the need to transfer your WordPress site between servers, especially when moving between home and classroom in this course. Here is the recommended way:

  1. Save and backup your entire file structure, especially the wp-content folder.
  2. Download your .sql file from phpMyAdmin.
  3. In the new server environment, set up your database and WordPress installation as usual.
  4. Replace the default WordPress wp-content folder with your saved one.
  5. In phpMyAdmin, select your WordPress database.
  6. In the Structure tab, select all of the table checkmarks. Use the dropbox labeled “with selected” to drop all of the tables from the initial install.
  7. In the Import tab, browse for and import your .sql file.
  8. If your are switching between XAMPP and MAMP, you need to be aware that these use different local server names. You will have to go to the SQL tab and paste in the following code. Be sure to replace “http://www.old-domain.com” with the local server address at the previous server (e.g. http://localhost), and replace “http://www.new-domain.com” with the local server address at the current server (e.g. http://localhost:8888).
UPDATE wp_options SET option_value = replace(option_value, 'http://www.old-domain.com', 'http://www.new-domain.com') WHERE option_name = 'home' OR option_name = 'siteurl';

UPDATE wp_posts SET guid = replace(guid, 'http://www.old-domain.com', 'http://www.new-domain.com');

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.old-domain.com', 'http://www.new-domain.com');
  1. In the Dashboard, set Permalinks (Settings > Permalinks) to “Post Name”. If it already says that, you may need to reset it to Default, press Save Changes, and then reset to Post Name again and save. This affects the .htaccess file at the root level of your site.