WordPress-Course
================
Slides to accompany WordPress Course: WordPress as a CMS
Created originally for students enrolled in the Electronic Media Design Program at Langara College,
the goal of the class is to educate web developers on how WordPress can be used to create an online portfolio.
These slides are aimed at Teachers teaching WordPress to designers.
Released under a creative commons license, anyone can download them and do whatever they want with them.
Goals of the Course
====================
Once completed, students should know:
- How to install WordPress locally and on hosting provider
- How to make a child theme
- Understand the making of a WordPress and the function of each template
- How to create a WordPress site
Curriculum 30 hours
====================
Lesson 1: Introduction to WordPress
What is WordPress
WordPress.com vs .org
Advantages/disadvantages of WordPress
Installing WordPress
The WordPress dashboard
Lesson 2: Themes, Templates & Child Themes
WordPress developer theming options
Overview of WordPress themes
In Depth look at TwentyTwelve
Child Theme
Lesson 3: Custom Theme
What’s a theme?
What’s a template?
Choosing the right starting base for you theme
Templates needed
Step by step theming
Lesson 4: Advanced Theming Techniques
The body_class() function
Custom fields
Post thumbnails (feature images)
Data validation
Lesson 5: Template Customization
Page, category, custom templates
The loop
Actions and Filters
jQuery
Lesson 6: Custom Post Types & Taxonomies
What are CPTs
Adding CPTs
Using Plugins to create CPTs
Querying CPTs
What are taxonomies
adding taxonomies
querying posts by taxonomy term
Teachers Notes
===============
LESSON 1: INTRODUCTION TO WORDPRESS
Students may be already have Xamp or Mamp installed on their machine, or hosting set up.
If hosting is required, then a discussion about choosing domain names might also be needed.
Once installed, students should be given a walk through of the dashboard and all the various sections.
Students should also be given the time to write a few posts, pages, upload images, etc...
It’s important to walk them through:
- The wp-config file
- Post vs pages
- Wysiwyg/HTML editor
- Categories and tags
- Page parents
- Media library
- Uploading a gallery of images
- Cropping and editing images in WordPress
- Comments
- Themes
- Installing themes
- Theme customizer
- Theme editor
- Widgets
- Menus
- Plugins
- Users, user roles and the importance of a stong password
- Modifying user profile
- Tools – import (install the test data)
- Settings
You should also explain the difference between wp-admin, wp-includes and wp-content folders.
If time permits, you may want to introduce them to a few of your favourite plugins.
LESSON 2: THEMES, TEMPLATES & CHILD THEMES
The goal of this class is to look at our options when working with WordPress and comparing child themes,
commercial themes and custom built. Students will be required to build a child theme.
Child theming is a skill that is good to know, but most web developers spend more time custom theming
thus only one lesson is devoted to this. Depending on the needs of your class you may wish allocated
more time to child and commercial themes. You may also choose a different parent theme.
I've used both TwentyTen and Responsive during this class.
The child theme tutorial (using TwentyTen) can be found at:
http://www.wpyogi.com/2011/04/step-by-step-guide-to-making-a-twentyten-child-theme/
LESSON 3: CUSTOM THEMES
In this class, students will be introduced to the concept of building a custom theme based on a PSD
and a starter theme. What templates need to be included and what theme should they start with will be discussed.
A PSD of a simple website will be provided and converted into a WordPress site.
The PSD used is - Web_vs1.psd
I normally use my starter HTML5 theme: https://github.com/crondeau/BLM-Basic-Starter-WordPress-Theme-HTML5
but feel free to use whatever you want.
The speed at which a PSD can be converted into WordPress will depend on class size and level of CSS/HTML expertise.
Advanced students may be encouraged to move at their own pace and alter the design while others will need more hands on.
Converting the whole design into a working site will more than likely take two classes.
You may also want to introduce a few plugins if you feel that there would be useful.
The tutorial to accompany this class is here:
http://www.wpyogi.com/2011/04/build-a-simple-custom-theme/
The final theme can be viewed here:
http://simple.wpyogi.com/
LESSON 4: ADVANCED THEMING TECHNIQUES
In this class, students will continue building on the custom theme created in Lesson 3.
The PSD used is - Web_vs2.psd
Custom fields are not used as much as they once were, but are still worth looking at.
The drawbacks of using them for client work is worth mentioning as well as looking at some plugins
that utilize their features.
The tutorial to accompany this class is here:
http://www.wpyogi.com/2011/09/enhance-your-custom-theme/
The final theme can be viewed here:
http://enhanced.wpyogi.com/
LESSON 5: TEMPLATE CUSTOMIZATION
In this class, students will continue their custom theme enhancement by looking at creating custom templates.
The PSD used is - Web_vs3.psd
The different WordPress loops can be a bit complicated for students to grasp especially if they lack PHP knowledge.
The Digging into WordPress article “4 Ways to Loop With WordPress” is a must read for all students wanting to
learn more about the various loops.
It’s a good idea to introduce students to code snippets and get them to start their own snippet library.
The tutorial to accompany this class is here:
http://www.wpyogi.com/2011/10/make-your-custom-theme-fancy/
The final theme can be viewed here:
http://fancy.wpyogi.com/
LESSON 6: CUSTOM POST TYPES
In this class, students will continue their custom theme enhancement by looking at using Custom Post Types.
CPTs provide so many options, it’s hard to create themes to hand out.
Providing code snippets instead and breaking the code down in simpler steps make it easier to digest.
This content is also very advanced and may not be appropriate to all students.
Thank you
===============
These slides were created using Reveal.js by Hakimel - https://github.com/hakimel/reveal.js