#wcbos: Advanced Theme Performance Techniques

Frederick Townes is the founder of W3 Edge, CTO at Mashable and author of W3 Total Cache. He’s presenting today on WordPress theme performance best practices.First, he recommends contributing back to the WordPress Codex because everyone in the room thinks it could be improved.

Pay lots of attention to the hierarchy with page templates.

Think about how many files you’re loading into memory, and the overall footprint they end up consuming. You can track this down using xdebug.

Fundamentals:

  • The larger the heap, the greater the execution time.
  • “Graduate” groups functions to plugins.
  • The fewer files the better.
  • Explore and use microformats for reviews, businesses & organizations, products, and people.
  • Use external services and fail gracefully.

W3 Total Cache has a debug mode that will show you what’s being cached on a request and what’s being missed.

Trick to debug on production:

define( 'WP_DEBUG', true );
// log to wp-content/debug.log, useful tests on production
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Two designs: Changing NYC and CUNY J-Camp

This is a quick visual overview of Changing NYC and CUNY J-Camp, two sites I designed, helped to produce, and launched at the CUNY J-School in the last couple of months.

Changing NYC

Published in May, Changing NYC showcases Census stories from Interactive II and Craft II J-School students. It was a joint project and includes audio, photo, video and live coverage.

One of the significant challenges with this site was that, despite the Census being the overall theme, there were few threads between the stories. Furthermore, all stories needed to receive generally the same weight; no stories could be more “important” than others. The solution was to create three broad buckets to place the content in, Between the Numbers, Moving In/Moving Out, and Neighborhood Anchors, and then randomize the display order of the stories. Fortunately, with the grid view for theme landing pages, I think it worked out alright.

From a design perspective, I wanted to make the site easy to navigate laterally and allow the reader to quickly focus on the content. I have three favorite features:

  • On the single article view, the active theme and place terms are highlighted to give you a peripheral sense of what you’re looking at.
  • On any view with a single piece of content, the site branding drops out of the header to the left column to allow the reader to make that content first and foremost on the page.
  • The single photo view has a ribbon of all photos associated with a post, so you can see where you’re at in the series and quickly jump to another image.

CUNY J-Camp

CUNY J-Camp is the J-School’s continuing education program. With the redesign of the site, the primary goal was to make it much easier to access and register for the variety of workshops offered. Secondary goals included educating new visitors on CUNY J-Camp, and making it much easier to stay in the loop about upcoming opportunities.

The WordPress themes for both Changing NYC and CUNY J-Camp are available on Github.

Improvements in Tech website v0.4: Search query highlighting, suggested topics, and improved topical landing pages

Improvements in Tech website v0.4: Search query highlighting, suggested topics, and improved topical landing pages. The latest round of changes to our Documentation Redux theme. My favorite improvement is the search query highlighting with suggested topics at the top. Try out “final cut” or “wordpress“.

Iterating towards the ideal documentation theme for WordPress

A month or so ago, Joe and I started working on a dedicated documentation theme for the J-School’s Tech website. We’re calling it Documentation Redux, and it’s currently at v0.3. Closer to v1.0, we’d like to generalize it and make it available for others to use. For now, I want to review where it’s at and articulate where we’re trying to go. Continue reading “Iterating towards the ideal documentation theme for WordPress”

NYCity News Service v1.1.1 deployed: More custom taxonomies and configurable homepage message

NYCity News Service v1.1.1 deployed: More custom taxonomies and configurable homepage message. Our custom taxonomies for the News Service now include topics, places, media, publications, and projects. Looking forward to fleshing out their usability further this summer. Horizontal navigation is much more flexible than vertical.

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. Continue reading “Workshop: Advanced WordPress with NYU’s Studio20, 5/8/11”

Workshop: Website hack session, 4/20/11

It’s the middle of spring break, so only one student showed up at my office hours/workshop this evening. We started around 4:40 pm and ended an hour later. Specifically, we:

  • Reviewed how to change directories in the terminal and update her theme from the main Git repository.
  • Increased the number of images appearing on the homepage of her website. This also involved the Git workflow of committing her changes and pushing them to the origin repository.
  • Hid a couple of elements using CSS. She has a good grasp of how to do basic CSS.
  • Enabled the “ShareThis” plugin on single posts with the Twitter and Facebook buttons.

The project site is functionally complete. She wants to update the photo content before promoting it.

Her next big project is to convert the portfolio website mockups she’s done into a WordPress theme. I told her to read through the WordPress.org documentation as much as she can, and try to outline all of the files she might need. Content first, then markup, then polishing it with CSS. I think I’ll put together a workshop next week on building or modifying WordPress themes and promote it heavily.