Midterm

You will be using the _s (pronounced “Underscores”) theme framework as your parent theme and create a child theme for it. Usually, you wouldn’t use the _s theme framework as a parent theme. Normally, it is used as a foundation to build WordPress themes. For this midterm, go along with it.

Make sure you don’t miss something by reading each section.

Midterm Preparation

Download the _s theme here. I took care of downloading it for you. To see where this theme framework came from, you can visit the underscores website here.

After downloading the _s theme, read these instructions:

Fonts and Colors

Whenever you’re asked to change a color you MUST use a hex color. When you are asked to change a font, you MUST use a google font.

No Superfluous Code

If you are using the method of copy pasting from Firebug, you may only include the CSS that you are actually changing.

Best Practice for Doing This

Use your searching skills for this. If you come across something you don’t know how to do, 1. Consult the Midterm assignment page in the “Things to Help You Do This” section 2. Google the phrase “css [thing you want to do]” and nine times out of ten, you’ll get your answer first try.

Take a look at the mini help section:

Midterm Help Section

A Note on Clutter

As we’ve mentioned before, you’re child theme is only for changes. Everything in your stylesheet is there because it’s altering something. Copypasting code from Firebug is a useful way to figure out what you need to change, but you need to delete all the superfluous code. You will be penalized for superfluous code.

Things To Help You in This

Here’s some general tips. Please, please, please, seek help for this. Utilize office hours, work together, whatever. You’re not alone.

Did I Do This Right?

We get a lot of people asking if they’ve done this or that correctly, but the truth is you don’t typically need us to answer that. If the requirement is “Change the font of the site-title” then all you need to do is look at your site and ask yourself the question, “Is the site-title’s font different after I inserted that CSS?” If the answer is yes, then you did it right. You can check basically all your work in this manner. There is no ambiguity here.

The Coding

We highly recommend you revisit the Codecademy lesson “C is for Cascading“. It helps a lot in understanding how elements cascade into one another.

Here are some basic things to remember about CSS:

Syntax

selector {
property: value;
property: value;
}

In other words, you start with the thing you want to change and then say how you want to change it.

Selectors

How do you know what the right selector is? In other words, how do you know the name of the thing you want to style? Just look at the source code or use Firebug to identify the thing you want to change. Let’s say you want to know what to use for the selector to change the font of the site title of your site. You look at the code and see.


<h1 class="site-title">
<a rel="home" title="My Site" href="http://icanfafsa.com">
</h1>

There’s the thing to use right there. The heading that makes the site title has the class “site-title”. Imagine that. Now you know that you can use

<h1 class="site-title">

as your selector. Always remember: Use a “.” to select for classes and a “#” to select for id.

Cascading

The first C in CSS stands for “Cascading”. That means you are able to make changes in things nested inside other things. Take the example of site title up there. The site title isn’t just an <h1>. It’s also a link to your homepage. That means that there’s an <a> nested within it. You’ve probably noticed by now that if you tried to change the color of the site title, then just selecting “.site-title” won’t do it. You have to be more specific, but how? The <a> doesn’t have an id or class for us to select. That’s where the cascading nature of CSS comes in. You would write:


.site-title a {
color: pink;
}

That’s basically saying “I want to change the color of the <a> that is nested under .site-title”. This is critically important to understand, as it will allow you to do things a lot easier. It’s basically required when you wanna change things inside lists (like your nav menu). If you wanted to change the color of a link in your nav menu, you would have to start at the name of the list. If you didn’t have one, then you would have to start at the <div> in which the list resides. Let’s say that the nav menu was in a <div> with the class “navigation-main”. You would start with that and then work your way down to the links. It would look like:


#site-navigation ul li a {
color: Thistle;
}

Your basically saying, “I want to go to the main navigation, into the unordered list you find there, into the list items that make up that list, and finally into the links that are printed on the screen and change their color.”

The :hover Property

You don’t need to know that much about :hover. Just know that it’s a thing called a “pseudo class” and that it makes the rules you write take effect when you hover your mouse over them. You’ve used :hover in conjunction with a before.


a:hover {
color: lemonchiffon;
}

Finding the <div>’s in the Template Files

Just search the document for the id or classes you’re looking for. No need to over think it.

Part 1

We need a new WordPress instance. Using the 5 minute install method, install a new WordPress instance at yourdomain/wpmidterm.

After you have it installed:

  • delete the sample page under Pages
  • delete the Hello World! post under Posts
  • install the _s theme you downloaded in the Midterm Preparation section

Next, create a new page:

  • Title it Home.
  • For the body text, use the html provided in this text file Make sure the WordPress page editor is in text mode when copying and pasting this html.

Next, create a new page:

  • Title it Blog.
  • Leave the body text blank.

Next, create a post:

  • Title it Midterm Post.
  • For the body text, answer the following questions in your own words:
  • What is the purpose of creating a child theme?
  • What is the purpose of functions.php when creating a child theme?
  • How does WordPress serve up HTML to a web browser without having any HTML files in a theme?

Create a custom menu. Add both pages to the custom menu.

Under Appearance, go to Customize and set the Home page as the Front page and set the Blog page as the Posts page.

Part 2

Make a child theme for the _s theme (the parent theme). Give the child theme folder the name, underscores-child.

Part 3

All CSS changes will be put inside your child theme stylesheet.

You are responsible for making the following changes to the following things:

Specific Changes

Basic elements

h1-h6

  • Start big and then evenly decrease both the size and top/bottom margins of each successive heading. To clarify: You are giving each heading a new size and top/bottom margin
  • change font and color of each

p

  • change font for all paragraphs

Specifics

site-title and site-description

  • Set the margins between them so that there is a total of exactly 63 pixels of space betweet them

entry-title

  • Change text-decoration or remove it
  • Reduce the top and bottom margins
  • Make the navigation menu visible through color or borders or however you feel
  • Add spacing between the menu items
  • Give the menu items colored backgrounds and/or borders
  • Change menu item font and color

Part 4

Modifying Templates

Since we’re making a child theme, you need to copy the following template files from the parent theme to your child theme to edit them.

  • header.php
  • index.php
  • content.php
  • single.php
  • sidebar.php
  • footer.php

This part of the midterm will have you go through various template files and add identifying notes to show that you are able to navigate through a theme.

Identify Where Major Divs Start and End

Search through the required template files and find where the major page containers are created and where they end. What are the major page containers? They’re very similar to the ones that you revealed back in HW 2 with one difference. What was “content” in twentytwelve is “entry-content” in our theme. They are as follows:

  • body
  • page
  • masthead
  • site-navigation
  • main
  • primary
  • entry-content
  • post
  • secondary
  • colophon

Do What With Them?

Each one of these is the id or class of a one of the major divs that make up any given page on your website. You are going to add a code note (like in HW 3) in two places:

  1. Below the opening tag, put “start of [div name]
  2. Below the closing tag, put “End of [div name]

Code Note CSS Class

You will need to create a special class for your notes so that they are unobtrusive but still legible. We are benevolent teachers and will give you the class to use.

.code-note {
  color:black;
  font-family: Monaco, monospace;
  font-size: 8px;
  margin: 0px;
}

Where To Add Code Notes

You must add an explanatory note in the code directly below where major containers (i.e.

s like “page”.) are produced in the template files.

Example:

<div class=”page”>
  <h6 class=”code-note”>This is the page div</h6>
Screenshot

This is a professional theme, make it look like it. We don’t want some blank rectangle showing up in the theme manager. Just take any rectangular image and title it “screenshot.png” and put it in your child theme folder.

Submission

Email wordpress@labs.everettprogram.org the following:

  • The email subject line in the following format: Midterm Firstname Lastname.
  • The web address of your WordPress instance yourdomain/wpmidterm.
  • Download a copy of your child theme, put it in a zip file, and attach it to the email. Inside the zip file, it should have all of your PHP template files and your child theme stylesheet.