Class on Tuesday 4.9.13

Today we went over how to add multiple menus and multiple widget areas (sidebars) to a page.

For these I will do the following. Files we completed in class are going to be posted in the Class Files section of our site and I will post up some tutorials on how to do those things. The tutorials will be written form and will be up in the next week.

Class on Thursday 4.4.13

Today we are going to talk briefly about Assignment 4 (everyone who turned one in should have a score and feedback) and we are going to introduce some new pages that are relatively straightforward.

New Pages

Review page.php

This is the page that shows a static page on the site. It’s like index.php but you don’t need the if(have_posts()), just the while(have_posts()) part.

To give us some flexibility we’ll pair that with content-page.php. This is like the way we paired

  • single.php
  • content-single.php

You will need to make sure you call

<?php get_template_part('content', 'page'); ?> 

inside of page.php. And then create content-page.php, which for simple purposes can be like content-single.php (pages can have comments too).


To do the search you need two things
1. The search form
2. The search results page

The Search Form

Showing the search form is pretty easy. There is a template tag for that.

<?php get_search_form(); ?> 

Put that were you want the search form to appear. If you want it on every page you’ll have to put it in header.php or sidebar.php or footer.php or else make sure it’s in all of the content pages ( which is more locations to remember).

The Search Results

This page shows the search results. Basically it’s a page that has the search results in it. You can copy page.php and rename it as search.php. Then you change the header of the page so it tells people they will see search results:

<header class="page-header"> 
    <h1 class ="page-title"> Search Results </ h1 > 
        You searched for < br / > 
        <span> <?php the_search_query(); ?> </span> 

This is sligly different from the book which just has what I put in the h2 inside of the h1

404 page

When someone requests a web page that doesn’t exist on the server it sends back a 404 result (for a normal page it sends back 200 to say the page is there). In WordPress you can have it show a custom page you design instead of some plain text in the browser.

It’s not difficult to do. Because the 404 page can be the same every time you can just put out some static content that says “This page is not found” or whatever you want. Add in the get_header(), get_sidebar(), get_footer() and you have a page. Many people also add in a link to search here so people can search the site for what they were looking for.

<?php get_header(); ?> 
<h1>404 Page Not Found</h1> 
<p>Sorry, we couldn't find the page you were looking for. Perhaps try searching &hellip; </p> 
<?php get_search_form() ?> 
<?php get_sidebar(); ?> 
<?php get_footer(); ?> 

Due Date Changed for Assignment #4

The due date is now Friday, March 22.

This is to give you a bit more time to complete it, but still finish it before break.

On Thursday we will move on to spend time talking about your first major project which is to create a custom WP theme. I want you thinking about this project over break and not assignment #4.

A reminder that Spring break means we won’t meet next week or the Tuesday after that. So we meet Thursday this week, 3/19 and then don’t meet again until Thursday 4/4.

See you on Thursday.

Class on Thursday 3.14.13

For the first half of the class you will work on your Assignment 4 files. Focus on the index.php and content.php files.

In the second half of the class we will see how we can convert these files to show a single post. The basic difference with the single post is that it shows comments at the bottom of the post.

  • index.php —-> single.php (remove the if( have_posts() ) and the else)
  • content.php —–> content-single.php (add in the code for comments.php)
  • And we will create comments.php

Class on Tuesday 3.12.13

Today we are going to spend some time talking about and then working on Assignment #4. I want to give you some time today to work on your own to help you gauge what you understand and don’t understand. On Thursday we will look at where you are having problems.


Assignment #4 WordPress Theme

This assignment is to create a WordPress Theme from the given static, HTML and CSS files.


Begin with these HTML and CSS files:

Theme Requirements

Create a Theme with the following:

  • style.css – the default stylesheet, Make sure Your Name is in the Theme Name
  • index.php – the default page template. Should use content.php in the loop
  • content.php – To show a post in the WP Loop
  • header.php – doctype, head element, opening body element and navigation
  • footer.php – close tags left open in header.php, footer
  • sidebar.php – widgetized sidebar area.
  • functions.php – need this to register the sidebar. Sidebar will need custom (before_widget, after_widget, before_title, after_title).
  • single.php – the template for showing a single Post
  • content-single.php – To show a single Post in the WP Loop
  • comments.php – this is the template that shows comments. You will need to come up with the HTML and CSS and try to keep it consistent with the rest of the design.
  • Keep links to reset.css, font-face.css and the Oswald Google Web Font working
  • The menu at the top and the menu at the bottom should be WordPress menus and not static HTML.

Due Date and Turning it in

The assignment is due Friday, March 22

Turn it in by ziping your theme folder, Your Name and the assignment 4 should be part of the folder name, and uploading that zip file to Blackboard for Assignment 4.

Class on Thursday 3.7.13

Today we are going to continue where we left off on Tuesday with creating a theme from scratch. If you weren’t here on Tuesday or don’t have your files then head over to the Class Files page and download the files.

When you do download those files, or in your own files, there is an error I introduced at the end of last class you need to correct. Open header.php and comment out the <div class=”mainContent”>. we moved this into content.php.

I made a new resource: Theme Template Tag Cheat Sheet which is not complete but will hopefully help with finding and remembering all of the tags you need.