In Class 10 of Introduction to WordPress, we covered:
- Design elements considered the “most hated” in web design.
- What design elements make you trust a website.
- CSS in WordPress revisited: How to find your CSS styles in WordPress.
- The WordPress
body_class()template tag. - The WordPress Theme Template File Hierarchy.
- WordPress Conditional Tags.
NOTE: On Thursday, August 2, we will be doing video and audio. Bring your digital cameras and recording devices and be willing to share if you have extras.
Homework
Read the following:
- Prove It: What Makes You Trust a Website?
- Finding Your CSS Styles « WordPress Codex
- CSS: Studying Your CSS Styles
- Template Hierarchy « WordPress Codex
- Conditional Tags « WordPress Codex
- Function Reference/body class « WordPress Codex
- WordPress Theme – The Anatomy, an Infographic – Yoast
- How to Install WordPress on Your Computer or USB
Create a Child Theme on your portable WordPress install and change one design element to change the look of the Parent Theme.
Write and publish an article with screenshots to show how you used the Child Theme to change that design element.
Get your blog’s updated per the list below. Remember, your class site represents a large part of your final grade.
Child Theme
The homework assignment calls for you to create a Child Theme on your portable WordPress install and customize one element to change the look of the Parent Theme.
To create a Child Theme:
- From Instant WordPress (or the equivalent), click WordPress Themes. This opens the WordPress Theme directory under wp-content/themes/ in your virtual server.
- Under wp-content/themes, create a new directory/folder. If you need a name, call it
my-theme. - Copy the text file saved as
styles.cssto that directory. - On the WordPress Administration Panels, go to Appearance > Themes.
- Look for the name of your Child Theme and activate it.
- It should now appear in the top as the activated and active Theme.
- Look at your test site to see the changes.
To edit the stylesheet:
- Use the built-in editor – Appearance > Editor. Make sure you are editing the correct file in the correct Theme/Child Theme.
- Edit the stylesheet/template files in your text editor and copy them into the appropriate Theme directory on the portable drive.
The header of the Child Theme must contain the following code. Edit it all except the parent template file name.
/*
Theme Name: Twenty Eleven Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Eleven theme
Author: Your name here
Author URI: http://example.com/about/
Template: twentyeleven
Version: 0.1.0
*/
@import url("../twentyeleven/style.css");
Add the styles you wish to change below.
YOU DO NOT have to copy the entire parent Theme styles. Just copy the styles you wish to change.
Under the Hood
The following are advanced tutorials and guides on customizing WordPress Themes and working with template tags and conditional tags.
- How to Create Dynamic Body Classes
- WordPress 2.8 and the body_class() Function
- Query Posts Function
- Theme Review: Digging Into Twenty Eleven
- Advanced Guide to WordPress Queries
Your Blog So Far
See Your Blog So Far on Moodle for a complete and accurate list of what should be on your blog so far. The following is a reference.
Your Blog So Far
The following must be on your blog by now.
- About Page
- Contact Page
- Policies Page
- Copyright
- Comments Policy
- Blog Posts (NOTE: Homework assignments MUST be in "assignments" or "class assignments" category. They may also be in other categories.)
- Multimedia
- Post with three images with text wrapped around them.
- Post with one video and text.
- 2 posts featuring multimedia, your choice.
- A post featuring a gallery of images.
- A List Post.
- The Post Sandbox Text in a post for testing Themes.
- A post describing your ideal WordPress Themes with a screen shot of a drawing or graphic representation of one you like.
- Three different Post Format posts (Aside, Status, Link, Photo, etc.) NOTE: Not all Themes recognize Post Formats.
- 2 posts with blockquotes and citations.
- A WordPress tip article with screenshots or examples of code.
- Two posts with content linking to two other student’s blog posts to create a trackback on their site. [NOTE: If you get a trackback to a post you have written, follow it back and comment on that post to say thank you.]
- Core categories visible with 5 blog posts under each one which can be filled through above post content. (You should have no more than 5-7 categories.)
- Article with screenshots of the changes made to a WordPress Child Theme.
- Multimedia
- Comments
- Comments from fellow students on your blog.
- One to two comments from fellow students thanking you for writing about their blog posts on your site (on the two posts minimum you wrote about other students’ blog posts).
- Trackbacks/Pingbacks from fellow students publishing posts linking to your blog posts.
- Widgets
- Link List of fellow students
- Search Widget
- Pages Widget
- Categories Widget
- Tag Cloud
- Recent Posts Widget
- Subscribe by Email Widget
- Subscribe by Follow Widget/option
- Feed Links Widget
- Social Media Widgets for Twitter, Facebook, etc.
- WordPress Administration Panels
- Profile completed and Gravatar set.
- One or more users (fellow students) set at various user permission levels (not administrator).
- Instant WordPress/Portable WordPress
- Child Theme