Workshop: Advanced WordPress with NYU’s Studio20, 5/8/11

On Sunday, Zach Seward invited me to cover advanced WordPress topics with students in Jay Rosen’s Studio20 class. For the past year I believe, they’ve had on-going, optional Sunday afternoon workshops on a variety of topics, including building web apps with Ruby and Sinatra. The workshops are intended to be a 4 hour introduction to a concept or tool, and started after students complained they weren’t being exposed to as many tools given the format of Studio20’s program. I’ll review what we did, what I took away from it, and add our notes to the bottom.

Understandably, given the weather and the fact that the students had 6 pm project deadlines, only 4 students showed up. This ended up to our advantage, as I was able to spend much more time talking them through their individual websites. 3 students already had self-hosted WordPress websites, although one had technical difficulties. The last student had a WordPress.com website.

For planning, I spent around 45 minutes outlining about 6 hours of teaching material. I knew the workshop would be largely free-form, and I wanted to give students the flexibility to set their priorities. This worked well in my opinion. They all were working on personal websites, and wanted to spend the majority of their time on improving their themes.

We spent 1:10 on an introduction to how WordPress works as an application (including foundational concepts like programming languages vs. markup languages, and what a database is), theming paradigm, and how to make non-destructive CSS changes with Firebug and WordPress.com custom CSS. I focused on non-destructive CSS changes first, because I think a majority of the changes they want can be made this way and it will save them significant hassle in the long term.

We then spent the last two hours on modifying PHP files, why you should use a development environment, and the importance of using child themes when you’re making improvements to someone else’s theme. This was more tell than do, which means we covered more material but I don’t know that it’s going to stick as well. We hit a point where students said thought they knew it, but wouldn’t be able to know until they applied it. Need more opportunities to apply intermediate tests in class.

Learning slowed after three hours into the workshop. In an education future, being able to see when students are hitting the wall of too much information would be useful. Also, proactively planning class length based on said wall.

According to Zach, because so many students are using WordPress (including for their Explainer.net project), it would’ve been useful to fit it in earlier in their educational schedule. What worked:

• Firebug was practical knowledge.
• Using one of the sites as the example for topics we covered.

What needs improvement next time:

• Version control explanation because students couldn’t easily apply the knowledge. Wikipedia and the Custom CSS plugin were good examples but not that memorable for some reason. Probably because version control isn’t really visible in the real world; time always goes in one direction.
• Proactively identify class requirements beforehand. One student couldn’t easily access his webhost and thus couldn’t follow along with his own website.
• Review basics of what plugins do and why. Missed this entirely.
• Continue thinking about how note taking can be more of a generative exercise. They added notes, but mostly at the bottom out of context and they weren’t that expressive or complete.

Forgot to do the post-workshop survey… next time.

Introduction (~20 minutes)

Who I am:

• Daniel Bachhuber, digital media manager at the CUNY Graduate School of Journalism
• @danielbachhuber on Twitter, and danielbachhuber.com
• It’s a beautiful day outside – yes it is

What projects are you guys working on and/or what do you want to learn how to do?

• A few personal websites

Topics we could cover today

• Introduction (~20 minutes)
• Neat things you can do with WordPress (~1 hour)
• Plugins and plugin architecture (~1 hour)
• Themes and theme architecture (~2 hours)
• Daniel’s toolkit and workflow (~30 minutes)

Neat things you can do with WordPress (~1 hour)

Custom taxonomies

Sort your content in ways other than categories and tags

Example: NY City News Service

Two parts: registering your new taxonomy, and showing the tags on the page template

Custom post types

Create content types other than a “post” or “page”, and capture structured data around that

Examples: CUNY J-School events and database of databases

Idea: database of startup companies on Betabeat. What data might you want to capture?

Plugins and plugin architecture (~1 hour)

What are WordPress plugins?

Definition:

Plugins you might consider:

• WordPress.com Custom CSS – Use your own CSS to tweak your website without modifying your theme’s files. Includes a revision history so you can always backtrack to prior versions. This is a feature WordPress.com charges $14.97/year for and has saved the J-School significant pain.
• Co-Authors Plus – Assign multiple bylines to an article. You’ll need to edit your theme templates too for the multiple bylines to appear.
• After the Deadline – Spelling, style, and grammar checker powered by artificial intelligence. Catches misused words, passive voice, and cliches.
• Edit Flow – Move your editorial workflow into WordPress with custom post statuses, editorial comments, and calendar and story budget views.
• JSON API – For the programmatically-inclined, access all of your content through a JSON API. Useful for pulling content into your website with jQuery.
• Subscribe to Comments – Allow commenters to subscribe to email notifications on threads they’ve commented on. Increase repeat visitors and engagement.
• Emphasis – Paragraph- and sentence-level linking and highlighting. Originally developed for nytimes.com, Michael Donohoe open-sourced the code and Ben Balter made it into a WordPress plugin. Every website should have emphasis.

Themes and theme architecture (~2 hours)

What are WordPress themes?

Definition: Abstraction of presentation from the content/data
Charactistics:

• Installable
• Customizable (sometimes custom designs are really cool, aka cooler than what you can get for free)
• Work in different ways. Some themes have widgets in the sidebar
• Designed for different purposes: portfolios, blogs, news sites

Review file structure:

All of WordPress.org’s documentations on themes

Install WordPress on your computer: http://codex.wordpress.org/Installing_WordPress#Easy_5_Minute_WordPress_Installation_on_Windows

Best practices for making theme changes

Use Firebug to preview the CSS changes on your live site before committing them

• Upgrade to Firefox 4.0 and install Firebug
• Demo of how Firebug works

Install WordPress.com Custom CSS plugin to non-destructively add CSS to your website without modifying the theme files

• If you modify your theme files, it’s more difficult to go back after you’ve screwed up or upgrade when there’s a new version of the theme
• Make sure you test it in multiple browsers. There are tools to help you do this

Child themes: If you need to create/modify the PHP in the template files, you should first consider a child theme

• Child themes allow you to create a separate theme that only has the files you need to modify
• http://codex.wordpress.org/Child_Themes
• Do your work in a sandbox, not on your live site

Version control keeps your changes sane

• Metaphor: Wikipedia history page
• Debugging WordPress: http://andrewnacin.com/2010/04/23/5-ways-to-debug-wordpress/
• Two options are generally Subversion and Git

http://bitbucketlabs.net/flashbake/

Debug feature – turn off for production site
– in wp-config.php:
– wp-debug, true: define(‘WP_DEBUG’, ‘’);
– after WP
– shows you error

Daniel’s toolkit and workflow (~30 minutes)

Software I use, January 2011 edition

Project management tools:

• Pivotal Tracker
• Basecamp
• Remember The Milk

Bug-tracking tools:

• GitHub issues
• Redmine (Example: CUNY Academic Commons)

Google Docs for writing down everything

Erin’s Notes
Template tags: http://codex.wordpress.org/Template_Tags

get_header: getting the data and info within the header.php file

When you want to figure out why something is happening the way it is, consult: http://codex.wordpress.org/Template_Hierarchy

How to edit theme files without damaging the theme

dom: document object model

download firebug

plugin: wordpress.com customcss
use this when changing theme templates, see above bold note.

making changes in firebug, when you decided you want it, you can save it with the custom css plugin. copy and paste it in there.

wp-config: for self-hosting. instructions on how wordpress should be run.

version control; super history: can go back to previous versions. saves a log of changes. as you’re making CSS changes, use this.

brush up on CSS http://csszengarden.com/

draw out what you want. wireframes and color palette.
identify functional elements. do you want a gallery? or slider?
wordpress.org directory
woo themes. some for free.
graph paper press
studio press
pick a theme (functional and design) might be new fonts, color scheme. sidebars with background? make a list of the things you want for the theme.
see how much you can do with CSS

editing themes: don’t edit themes with your live site.

github: social network for coding. logs your changes to your projects. follow other projects

child theme: inherits the qualities of the parent theme except for the new qualities you want.
create a new directory within the theme. wp-content themes
child theme needs to have one thing. style.css file has to have a reference to the original theme.

template directive will tell you that it’s a child theme. check wordpress.org for these directives.

development environment or sandbox.

google: mamp wordpress

site: wordpress.org “keywords to search”

wordpress.org/extend/plugins

Setting up WP multisite: http://codex.wordpress.org/Create_A_Network