Thought Catalog on Building a Massive Open Contributor Network – Big Media & Enterprise Meetup NYC

James Ellis, Jameson Proctor and Matthew Spencer from Athletics  presented “Thought Catalog on VIP: Building a Massive Open Contributor Network” at the recent Big Media and Enterprise Meetup in New York City. Their presentation included their author permalink plugin that is now available on GitHub.

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group. We have upcoming developer and superuser training near you.

Want more information about WordPress services for media or enterprise sites? Get in touch.

VIP Training Days in San Francisco & New York in November

In November we’ll be hosting VIP Training Days, our intensive, one-day, in-person training courses led by a team of WordPress.com VIP instructors, in both San Francisco and New York City.

2014_Automattic_Wordpress-2371

In each location, we’ll be offering our existing Developer Fundamentals I and Superuser courses, and our newest developer course, Site Security & Debugging. VIP Training Days courses are limited to no more than 20 people with each team of VIP instructors which ensures lots of hands-on learning and interaction.

  • Developer Fundamentals I — for beginner PHP developers & advanced PHP developers new to WordPress. A great review of WordPress fundamentals and best practices and the codebase, with a focus on themes and plugins.
  • Superuser — for site administrators, editors, and trainers for large or multi-author sites. A deep dive into the entire publishing process as well as managing users, comments, social integrations, mobile, and more.
  • Developer Fundamentals: Site Security & Debugging — for experienced WordPress developers. Attendees will learn how to think like an attacker and exploit the vulnerabilities before fixing them with security best practices and various debugging techniques.

These courses are suitable for both self-hosted and WordPress.com VIP sites/superusers/developers – the large majority of the material will focus on core WordPress functionality/features. You can read on below for more information about the other courses, or go directly to the event registration pages where each course is also explained in detail.

For current VIP clients & partners, there is a client discount available if you register before October 10th – please get in touch for the discount code. If you’re planning on sending two or more participants to VIP Training Days, please get in touch as well as we’d like to offer you a special group discount.

Register for VIP Training Days in November!

Current VIP clients & partners can contact us to be invoiced directly if preferred.

A special thanks to WordPress.com VIP Service Partner Voce Platforms (@VocePlatforms) for offering their offices for the New York training.

Be a part of the Big Media & Enterprise WordPress community in San Francisco and New York!

Be sure to join the Big Media & Enterprise WordPress Meetup in San Francisco or the Big Media & Enterprise WordPress Meetup in New York City! Meetups happen regularly. The next meetup in San Francisco is November 4th, and the next one in New York City is December 9th!

More information about the VIP Training Days courses:

VIP Training Days: Developer Fundamentals I Training

Description

WordPress Fundamentals I is a day-long, intensive course meant to introduce PHP developers to programming for WordPress. Attendees should be familiar with WordPress as a tool, and have a working understanding of its general terminology. Proficiency with PHP is also a must, but no knowledge of the WordPress code itself is expected. This is a great course for developers looking to build sites which will scale to VIP levels, and write secure and scalable code.

Prerequisites

  • Proficiency with basic PHP development.
  • Awareness of WordPress as a platform, including common terminology such as a post, a page, widgets, and sidebars.
  • A local development environment running WordPress Trunk. We will provide a virtual machine ahead of time for participants who don’t have their own development environments, but they will be responsible for setting it up ahead of time.

Course Materials & Requirements

Each student will provide their own computer (laptop) for the course, with working wifi functionality. A lunch break and light lunch will be provided by WordPress.com VIP. Students should have a local working copy of WordPress trunk installed and tested prior to the training. To download trunk: http://wordpress.org/download/svn/

Curriculum Overview

  • Intro to WordPress core, SVN, and Trac, history and culture
  • Developer environment and debugging tools
  • WordPress Development Best Practices
  • Introduction to Plugins
  • Actions and filters
  • Introduction to Themes
  • The Loop & WP_Query
  • More on themes
  • …and more!

VIP Training Days: Developer Fundamentals Training: Site Security & Debugging

WordPress Fundamentals: Site Security & Debugging is a day-long, intensive course meant to improve WordPress developers’ understanding of advanced concepts. Attendees should be familiar with developing WordPress plugins and themes or should have attended our Developer Fundamentals I course.

We’ll cover the basics of writing secure code. Instead of just listing vulnerabilities, attendees will learn how to think like an attacker and exploit the vulnerabilities before fixing them. In the course of learning more about security, we will introduce various debugging techniques to help attendees find problems in the code faster.

Prerequisites

  • Proficiency with PHP development.

  • Awareness of WordPress as a platform, including common terminology such as a post, a page, widgets, and sidebars.

  • Proficiency with basic WordPress plugin and theme development – actions, filters, loading assets, main core APIs.

  • The latest version of VirtualBox: https://www.virtualbox.org/

Curriculum Overview

  • Security: common types of vulnerabilities

  • Security: exploiting and fixing open redirects

  • Security: exploiting and fixing XSS problems in HTML, JS, and CSS

  • Security: exploiting and fixing CSRF vulnerabilities

  • Security: exploiting and fixing SQL injection problems

  • Security: exploiting and fixing remote file inclusion attacks

  • Security: exploiting and fixing clickjacking attacks

VIP Training Days: Superuser Training

Description

In this course, you’ll learn how to manage and use the WordPress interface from a site owner’s point of view; as someone who will be managing multiple users, their permissions, and ultimately sharing knowledge with them about how to use WordPress to publish a great site with an active community and/or audience. We like to think of this course as our teachers teaching your teachers – those who will serve as the WordPress expert in an organization.

We’ll also do a deep dive into the publishing process so our superusers can teach their editors, authors, and contributors how to best use the WordPress interface. From creating and publishing posts to managing tags and categories, from mastering multimedia and images in articles, and bulk management of posts and pages, we’ll cover the entire publishing process from draft to done.

Prerequisites

Users should have a working (beyond basic) knowledge of the WordPress administration panel / backend. They should be managers, administrators, or editors of an existing or future WordPress site with multiple users.

Course Materials & Requirements

Each student will provide their own laptop computer (no tablets) for the course, with working wifi functionality. A lunch break and light lunch will be provided by WordPress.com VIP to all students. For the purposes of the course, students will be given access to a WordPress.com site. Users will be requested to create a WordPress.com username if they don’t have one, and this username will be submitted to the course instructor. To create a WordPress.com username: http://en.wordpress.com/signup/

Curriculum Overview

  • User Management: roles, permissions, and invitations
  • User Profiles: settings, preferences, and Gravatars
  • Comments: moderation, spam, and notifications
  • Creating & Publishing posts
  • Managing tags and categories
  • Mastering Media: images, galleries, and slideshows
  • Bulk management of Posts and Pages
  • …and more!

Register for VIP Training Days in November!

Current VIP clients & partners can contact us to be invoiced directly if preferred.

Have any questions? Get in touch.

The Dream Internship: Work at Automattic (Spring 2015)

Update: Applications are now closed.

Our company Automattic — which runs WordPress.com, Akismet, VaultPress, and many other services — is looking for a few stellar spring student interns, specifically to work with us on the WordPress.com VIP team.

WordPress.com VIP provides hosting and support for high-profile, high-traffic WordPress sites, including Time.com, FiveThirtyEight.com, qz.com, TechCrunch.com, Recode.net, NYPost.com, etc.

You’ll be working on a range of projects depending on your skills and passions, but here’s an overview:

Communications Intern: This internship is all about improving client communications. You’ll likely be writing case studies, interviews, launch posts and new feature posts for the VIP News site, in addition to helping organize our fall events.

Development Intern: This internship is all about making things. You’ll likely be working on WordPress plugins for large media companies, or working on core WordPress.com features and development.
Update: The Development Internship position is now filled. We will be accepting applications for our summer internship starting February.

Where will you be working you may ask? Anywhere! We are a distributed company and are happy if you work from wherever you are — as long as you have a good broadband connection. This paid internship runs 12 weeks between March 9th and May 29th, 2015, but we are flexible on the dates.

Interested? Complete your application by filling in the form below. In the space provided, introduce yourself and why you’d like to be an intern with our team. Be clear about what you’ve done and what you’d like to work on — for example, a killer plugin or integration, a feature improvement, a case study, etc. Students enrolled in a full-time or part-time undergraduate or graduate program with 6+ months left before graduation are encouraged to apply.

Send in your internship application by November 1st for consideration in the program. If you have any questions, please leave a comment and we’ll get back to you!

Applications are now closed.

Josh Betz is a former VIP intern who now works as a code wrangler. During his internship he worked on a VIP user management plugin and WordPress.com Enterprise.

WordPress.com VIP at ONA and WordCamp Europe

This weekend members of the WordPress.com VIP and extended Automattic family will be present at two events: the Online News Association (ONA) 2014 Conference in Chicago, and WordCamp Europe in Sofia, Bulgaria!

At the Online News Association conference, members of the WordPress.com VIP team will be there along with a few of our colleagues from Automattic. We’ll be sponsoring a refreshment booth featuring coffee from Chicago’s Bow Truss Coffee Roasters, a sister company of our Featured Partner agency, Doejo. Be sure to stop by! Find out more about ONA.

logo11At WordCamp Europe, members of the WordPress.com VIP team will be there, as well as colleagues from Automattic. We’ll be at the WordPress.com VIP & Automattic sponsor booth as well as I am going to be presenting “7 Habits of Highly Effective Enterprise WordPress Sites” on Sunday. Several other Automatticians will be presenting that weekend as well —see the whole WordCamp Europe schedule.

If you’ll be at either event, drop us a note in the comments! We’d love to say hello. 

For WordCamp Europe, we ended up having two extra event tickets we’d like to donate back to the community. To get one, just leave a comment below and we’ll forward your information on to the WCEU organizing committee. Airfare, transportation, and all other expenses are not being provided and are at the expense of the commenter. 

GlobalNews.ca Makes Embedding Media Easy with the Media Explorer

At the Toronto Big Media & Enterprise Meetup earlier this year, Keith Robinson and Imran Nathani from GlobalNews.ca presented their customization of the Media Explorer plugin. The goal: To make inserting and embedding media as efficient as possible for their editors.

The Media Explorer plugin was a joint project between WordPress.com VIP and Code for the People, which allows editors to quickly and easily insert tweets and YouTube videos straight from the WordPress dashboard “Edit Post” page. The plugin is easily extendable, and allows for you to include alternate media sources.

Twitter search

Media Explorer

The GlobalNews.ca team decided to customize and extend the plugin to include other video and photo sources that their editors commonly use. In doing so, they allowed their editors to centralize their workflow within the WordPress dashboard. Watch their 10-minute “Flash Talk” below to see their customizations in action, and then check out our recent Q&A with Keith Robinson, manager of digital products, and Imran Nathani, web development architect.

What was the thinking behind extending the media explorer?
Keith: We have dozens of active producers, and making it really easy for them to curate content into story posts is a big part of what we do. Anything we can do to make their job even incrementally easier has terrific benefits.

With WordPress, we want to get our producers comfortable with one user interface, rather than telling them to learn a new system or look in a different place for each new feature. There’s a lot to be said for simplicity and getting people to do almost everything they need in a post, and then press a button and move on.

It’s organized and simple. That’s exactly what we look for in a CMS.

When we first saw the Media Explorer plugin in the fall, we saw how easy it was to curate Twitter and YouTube content straight from within the post. It’s organized and simple. That’s exactly what we look for in a CMS. Imran pointed out that it was easily extendable and can be adapted for our own media. We’re trying to get as much rich content as possible into every story post, to hold readers a little longer, and Imran said, why not use the Media Explorer to do that?

By extending the Media Explorer plugin, editors can now easily search the NewsCred photo library without leaving the dashboard.

By extending the Media Explorer plugin, editors can now easily search the NewsCred photo library without leaving the dashboard.

The custom tool also allows editors to quickly crop images before inserting them into the post.

The custom tool also allows editors to quickly crop images before inserting them into the post.

What was the previous workflow like?
Imran: We’re a very video rich site because we’re a broadcaster, and with the way the video management was first integrated into WordPress, it was a separate screen. You had to go in and search in a separate interface, and then grab a short code and then bring that over into the story editor and cut and paste it in there somewhere. That may not sound like the most onerous workflow in the world, but it’s all about making things that much easier.

Embedding videos used to be a tedious process requiring multiple browser tabs. Now editors can quickly search and embed videos right from the WordPress admin.

Embedding videos used to be a tedious process requiring multiple browser tabs. Now editors can quickly search and embed videos right from the WordPress admin.

The custom tool that the GlobalNews.ca team built also lets editors create video players and carousels on the fly.

The custom tool that the GlobalNews.ca team built also lets editors create video players and carousels on the fly.

How has your tool evolved?
Imran: Our video producers are really localized, so we’ve given the producers an option to search video based on a specific region. For the first round of development, the user would just select a video and insert it. For the second round of development, we started thinking about groups of videos. This was mostly triggered by Rob Ford being on Jimmy Kimmel Live — we wanted to be able to show all the clips together. So, we created the option of a video gallery.

As for the NewsCred integration, sometimes the images that come through are really large, and our editors need to crop the photo to something that suits our site’s dimensions. So, we made it possible for editors to choose the photo and crop it, lower the quality for web, and then add it to the media library for use.

What’s the feedback from the producers been like?
Keith: Our video producers really like it a lot, and — the difference in the process before and after is pretty extreme. They’ve expressed that they really do find it a lot easier.

Since we’ve added this, there’s been more video going into posts, a lot more embedding of tweets right into the post. And I like that because it gets people away from using other outside tools to curate social media, and this allows you to do all the curation right within your post and house all of your own content.

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group. 

Big Media & Enterprise Flashtalks with Captions on WordPress.tv

I’d like to introduce Andrea Zoellner, a WordPress.com VIP Communications intern who has been working diligently over the past two months to do some great things with WordPress.com VIP’s communication! Among other projects, she’s spearheaded transcribing and getting the Big Media & Enterprise Meetup videos and transcripts available to the public as soon as possible. We hope you’ll give her a big welcome, and we can’t wait to share what else she’s been working on! —Sara Rosso. 

We’ve been posting videos of presentations from the Big Media & Enterprise meetups over the past few months, and we believe those presentations are one of the biggest resources for the WordPress community at large with regards to understanding how WordPress is being used for innovative and highly-scaled projects.

With the goal of helping the community in mind, we submitted the videos to WordPress.tv so the entire global community could discover and share them as needed. We also painstakingly added English subtitles and a full transcript to these videos to make it easier to follow along, increase accessibility, and make them translation-ready.

These videos are an opportunity to hear about interesting features and stories from some of the most sophisticated WordPress installs on the web. By recording the meetup presentations and making them available to the wider WordPress community, we hope more people will benefit from the content.

Check out some of our recent presentations which we transcribed and published on this site:

Want to make more WordPress.tv videos accessible? You can help the WordPress.tv community bring meetup talks to an even broader audience by contributing subtitles to other videos. Find out more.

One Theme, One Multisite, 30+ Unique Websites – Now With Full Transcript

Simon Dickson and Simon WheatleyCode for the People, presented “One Theme, One Multisite, 30+ Unique Websites” at the recent Big Media & Enterprise Meetup in New York City. We’ve shared this post previously, but we’re publishing it again now with full transcript below.

 

Okay, so I’m Simon Wheatley, my partner Simon Dickson is just over there and we’re from a company called Code For The People.

We’re one of the VIP partners and I want to talk to you today about a client who came to us, similar I guess to the Oomph guys,the Interactive One guys, just been talking about one thing, but dealing with many websites initially 30.

This is for a magazine publisher in the UK, so they wanted to move 30 of their titles initially on to this platform but they wanted one standardized theme, one standardized set of functionalities that they could use.

So our solution for them is based in a couple things that I’m going to talk about tonight one is the WordPress theme customizer and one is the way we’re handling layouts using widgets and widget areas so these solutions are things you can apply in other organization. You can have your WordPress themed cake made by my partner’s wife and you can eat it at the same time.

So you get in this way, using this customization but based on the standardized theme, you get to reduce maintenance and at the same time keep the editorial teams happy.

So I’m going to talk through three of the areas where we allow editorial control so obviously there’s colours, I’m going to talk about typography and I’m going to talk about layout.

So the first element, colour, we started off with the idea that we would have the user pick half a dozen colours and we would then do colour calculations based around on let’s find some complimentary colours let’s find some lights and dark equivalents and then we’ll be able to work out how of those six colours, we can deal with the header and the footer and the body post but that actually gradually became unwieldy.

So you get in this way, using this customization but based on the standardized theme, you get to reduce maintenance and at the same time keep the editorial teams happy.

We found ourselves adding more and more colour options to avoid a clash of dark colours appearing on dark colours or red appearing on green, that kind of thing and the solution that we arrived at eventually was that we split it into two colour palettes, so there are two colour palettes which we call palette A and palette B and then we split the page into three areas. We’ve got the header area which can have one palette assigned the body of the page which can have another palette separately applied to it and then obviously the footer which can have a completely different palette.

So there are three palettes there, with about 12 different areas and we’re just using the standard WordPress theme customizer to allow you to pick the colour for that we’re still doing a little bit of colour calculation, lightening and darkening and so on but essentially it’s the two palettes applied to different areas of the page. We don’t take the standard approach that some themes take of just injecting a whole bunch of CSS into the head. Instead, we’re using LESS with CSS Preprocessor.

Probably now looking at the fact that core have adopted SASS, we could be using SASS but at the end of the day it’s all CSS Preprocessing. It all really does the same thing, it’s taking variables from the customizer and injecting them into CSS and using that to build the final styles for the website.

It’s simpler and cleaner than shoving a load of overrides in your head. So that’s colours, let’s talk about typography. Obviously there’s a number of font services out there and we’re going to want to give 30 editorial teams a good choice of fonts for their websites.

So we’re using the Google Fonts API, there’s a wide wide variety of fonts there and we’ve built a custom control for the customizer so can pick say the open sans fonts and because we’re dealing with the API. We know that there are these variants and weights associated with that and then we can be applying a text transform so that you’ve got fully uppercased for the navigation, but you’re just capitalizing for the headers or whatever.

That’s the one customizer control, which has got three sub-controls within it we looked around and found a couple of those on the internet in the .org repository but they all seemed to be making a bit of a meal of it and we ended up making something that turned out simpler but works quite nicely.

It’s simpler and cleaner than shoving a load of overrides in your head.

What you’ll see we haven’t got there is a font size for each individual element. We’re not setting a font size for the heading and then font-size for the subheading. Instead, we’re setting a base font size and then we’re using multipliers up from that. So maybe 16 pixels or something and then the heading is 1.5x that and the meta is 1x that or whatever.

So let’s talk about layout. We started out with layout with some very grandiose ideas that you might recognize from other themes and options that you’ve got out there. We were going to allow the user to draw areas on the screen and we we’re going to then use those as widget areas and drop stuff into those and then we we’re going to magically work out how we calculated the break points so that you could you know have tablet portrait, tablet landscape.

Eventually we took a step back from that and realized we could accomplish pretty much the same thing but in a much much simpler way.

Eventually we took a step back from that and realized we could accomplish pretty much the same thing but in a much much simpler way. So if we look at the primary content area on the left there, we’ve got a grid of widget areas so we’ve got a widget area at the top spanning then we’ve got the two-column side by side and then we repeat the same again. But of course with the widget area in WordPress you don’t need to put widgets in it.

So if you wanted to have just a single column of news in the primary content area then you just put widgets in the double span that comes second in there. Or, if you want a two-column layout, then you can just use the top two. Every so often in the year, when you’ve got a promotional item, you can be putting that in your double span above those to columns, so it gives it a lot of flexibility.

Because it’s a known quantity, it means that we can scale down to the various breakpoints and we know exactly what we’re doing and we’ve got a really nice responsive website and that comes out really really well when you start actually putting content in it this website, the fields, they started building that yesterday at 11 o’clock in the morning and by 3 o’clock in the afternoon, they had a site, fully migrated, fully customized with all the old content in it from the old custom content management system and up and running, so it comes up through the breakpoints.

Nice shotgun advert there for the shooting season coming up.

And then the desktop, full desktop width…so let’s, just taking a look at this page, we’ve got one widget that’s controlling a lot of this stuff. So if you look at the news sequence of posts and the food and drink sequence of posts, they’re using the same widget, and that’s something that we call the post query widget which is essentially a wp query builder for those you who know what I mean by that.

It’s putting together a series of parameters by which you’re going to reach into the database, grab the post that you want and get to display them on the page so you can choose the post type that you want to display in the particular widget that you’re editing at the moment. You can filter it down by the taxonomies and then you can go to actually start displaying that.

We do that by breaking the sequence of posts up into sections, so section one here has just got one post in it, it’s a list with a large image. Section two, you’ve got two posts, smaller images, and we’ll show the author and we’ll show the date there. Then section three is just a text bulleted list without any additional detail in there.

What that comes up as is something like that so it gives you really quite a flexible display of how you’re going to pull the posts in and then how you’re going to actually show them on the screen and you could have all large images or all bullet points, pretty much anything you want

We don’t limit the number of sections there so another thing I wanted to mention was category archives so again, we’ve got a customizer control in there so select your category and then choose similar again to the way that we’re dealing with the query widget so similar, we look at the style that you want that in, maybe this category you’ve got some really nice images, maybe the review images you’ve got are great and you want to highlight that

So you’ve got the ability to customize the display on the category there, so I’ve whistle stopped through this we talked a little bit about colours, so we’re using the colour API a little bit of calculation, we’re using LESS in CSS Preprocessing there talked about typography, so we’ve used the Google Fonts API to allow you to choose a font we know from the Google Fonts API, what the variants are, so we can pick that and we can give you a transform, we’ve got the base font size we talked about layout, we talked about the post query widget and about the custom layouts for categories so has anybody got any questions?

Q: Are you guys supporting live previewing in addition to the standard customizer stuff?

A: Yeah, absolutely, so all of this stuff, I mean if you’re not familiar with the customizer, one of the great things about it is nothing is live until you click the save and publish so all of this customization is happening just for you personally so even with the LESS Preprocessing, that’s being piped off into a separate stylesheet which is only being served to the editor that’s actually doing the customization at the moment

Q: ( […] )

A: Yeah, we’re working with posts, obviously the built in post type which they’re using for articles, we’ve got a custom post type for events and for reviews as well so the post query widget that I showed you, you can say I want to see just reviews here or just events here and it will allow you to display those

Q: ([…])

A: Some of the titles that we’re dealing with are relatively low staffed So I don’t think that kind of title would be necessarily looking at clicks we have got an evolution of the post query widget which looks at Google Analytics and uses the Google Analytics API to evaluate what’s popular in a particular category so you can use that as the sort mechanism, but that’s not something that’s live on the site at the moment

Q: ([…])

A: Yeah, so the widget areas that are there for the, where are we, let’s skip back through yeah the widget areas that are here are exactly the same widget areas, they’re just, they cascade through with the different break points and we move them around so this is the full desktop width but if you can quickly scan you can see that the same widget areas are just linearizing basically as you move down through the sizes so it’s exactly the same stuff ([…]) absolutely yeah responsive break points any more for any more

Q: ([…])

A: At the moment, pre-3.9 the disadvantage is anything you do to a widget is live on the site immediately, post 3.9 widgets move into the customizer so we’re able then to choose the widget layout and mess around in the same way exactly the same was as I said for the rest of the customizer, you can change your colours, change your fonts it’s not live until you click save and publish so 3.9 is going to herald a grand new dawn in terms of that being able to get right before it’s live

Q: ([…])

A: The brief for the widgets was that it wasn’t so much of a manual curation process, so if we needed to manually curate this particular post into position in this particular area of the homepage

I guess you could get around that by hacking with tags, but it wasn’t a core part of the brief that we were able to do that, so using something like zoninator where you can precisely choose which post to go and in which order they appear in wasn’t a requirement we could develop a different widget that did something like that I think we would probably still stick with widgets we’re also looking at doing some work to customize

so you can take the homepage layout and then for a particular purpose maybe for a sponsorship section have all of the sidebars completely custom for that but hidden from normal view so It’s only when you’re editing that page that you go in and those side bars are only live when you’re editing that page, that set of sidebars so you don’t end up with this situation wherein the WordPress admin area, the widget section you’re looking at all the sidebars and there’s like 300 sidebars which one am I adding the widgets in and which one am I not we’re able to actually filter which sidebars are being shown for a particular purpose

Q: ([…])

A: Yeah exactly that principle yeah.

Q: ([…])

A: Yeah, so like I say, some of these are fairly low staffed publications so the key for them is probably that they’ll set something up and then they won’t touch it for a little while we’re using a plugin which is available on the .org repository called the customizer settings revisions which allows you to save what you’ve created so you might go like “okay, this is the Christmas layout” with all the pretty snowflakes and the lovely snowy red design and then you can pop back to that when Christmas comes around again or when Easter comes around or whatever you want to do thematically so we’re using that plugin for that purpose

Q: ([…])

A: So the ads are outside of the widget areas, they’re placed at various points in the page that we know how to deal with for again, for the responsive break points are we concerned about the responsive kind of nature of it and so on, yeah so we have, we haven’t got the ability to do the thing that really you only do to show your boss that the site’s responsive which is you know, move the site edges in and out and change the width of the page, the adverts won’t change at that point because they only change on page load, it will look at the width and then ascertain what ads you need and then load them at that point does that answer the question?

Cool. Thank you.

 

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group. 

Want more information about WordPress services for media or enterprise sites? Get in touch.

Building Quartz – Now With Full Transcript

Josh Kadis is the web applications technologist at Quartz. At our August Big Media Meetup, he gave a short “flash talk” on building qz.com on WordPress, which we’ve shared here and republished now with the full transcript below. Quartz just celebrated its one-year anniversary, and you can learn more about it by reading our case study here.

See Josh’s slides here.

 

My name is Josh Kadis, I work for Quartz, which is a business and economics site from Atlantic Media, which is the publisher of The Atlantic. We launched in September last year, and our most recent numbers for July were about 5 million uniques (views). My role at Quartz is I do the bulk of the WordPress work and then I’ve also been heavily involved in building the Backbone application that runs the front-end of the site.

If you haven’t seen Quartz, it looks like this. It’s a responsive web app, WordPress backend, publishes on JSON API, that gets picked up by the backbone front-end and the bar across the top under the word Quartz – that expands and that’s how you navigate between different sections and within a section you can navigate by scrolling up and down in the column on the left which we call the queue, or in the “item well”, which is the main content area on the right.

So the basic architecture is that Automattic and the VIP team host our WordPress installation, the Backbone files and our CSS and some other Javascript kind of stuff are hosted on the same CDN that’s used by the rest of Atlantic Media, which is like theatlantic.com, theatlanticwire.com and other non-WordPress sites.

WordPress publishes the JSON API, and we get all the backend post authoring and media and we have some custom backend stuff, like a post type that allows us to publish the newsletter through the MailChimp API from within WordPress.

We have a self-hosted system for reader accounts, which is what you would use for the commenting feature that we recently rolled out which is more for annotating individual paragraphs within a post, and then managing your subscription to the newsletter The Daily Brief and that kind of stuff, so that’s also WordPress.

We’ve actually found that the comments that come back are less awful because people get to the specifics of what they want to say about this specific paragraph instead of a general “you suck”. That’s kind of nice.

We have this division of labour between WordPress and backbone where WordPress handles what you would expect: generating the basic HTML markup which kind of gives the page the basic structure and is useful for search engines. WordPress publishes the JSON API, and we get all the backend post authoring and media and we have some custom backend stuff, like a post type that allows us to publish the newsletter through the MailChimp API from within WordPress.

The order of the posts you see on the homepage is not initially chronological, it’s manually ordered by the editorial staff, that’s the ‘Top’ post. So there’s a plugin that allows them to do that with a drag and drop interface from among the recent posts. Backbone also handles what you’d expect on the client side: fetching data from the API, deciding where and when to render it on the page, reflowing based on the device and on the screen size. We’re doing some offline reading with local storage and all of the annotation’s functionality is contained within the Backbone app and the entire thing can be turned on and off without even touching WordPress.

The URL and getting Backbone and WordPress to interpret the URL in the same way is really where the two things come together. The whole site relies on that or else the front-end and back-end are out of sync.

So we have these two things and where do they really intersect? It’s here: The URL and getting Backbone and WordPress to interpret the URL in the same way is really where the two things come together. The whole site relies on that or else the front-end and back-end are out of sync. So just to kind of quickly walk through it, if you haven’t written a Backbone app before, the router is the foundation of it, it essentially determines how the URL is parsed and then triggers a series of events that come one after another and ultimately result in stuff showing up on the page.

Good URL design is really a key to what we’re doing.

To work, the router reads the permalinks, and Backbone has some kind of build in syntax for how you read a permalink and decide what’s a variable within that and what’s a key. The permalinks come back to WordPress to run off the rewrite rules, and the rewrite rules run Quartz.

Good URL design is really a key to what we’re doing. So something like this: http://qz.com/107970 is the URL of the most viewed post of the history of Atlantic Media, it’s about bees. This is something that doesn’t have to run through a URL shortener, doesn’t get redirected, both Backbone and WordPress will understand this URL and parse out that single ID in the exact same way. Here is a little bit of code from the router, grossly over simplified.

Basically the router initializes, you give it this regex, it looks for these core sections: ‘Top’ – which is, I explained, is the manually ordered, “here’s what’s important right now” segment of posts. ‘Most recent’ is the latest one, ‘Popular’ we kind of calculated near real time using Chartbeat, ‘About’ is some static pages.

When the router recognizes one of these keywords from the regex and the URL, it triggers the core function which passes the particular one to this event which then gets triggered and a whole bunch of other stuff happens that results in a bunch of posts as you scroll through.

When you look at the WordPress theme, if you see rewrite rules, you would kind of recognize the regular expression: Top, Latest, Popular, About, and for both the front-end query, which is this first set of rewrite rules and then the API they both resolve to pass these two parameters, these two query variables to WordPress. API = true or false and then request = one of these things in this array.

For handling those two variables, we add_rewrite_tag request, we hook into query_vars and add API and then WordPress knows to look for those two things so that when the parse_request action comes around, we are able to, and in my oversimplification, I left out an if statement here, then we can fire up this qz API class and kind of pre-empt the main WordPress loops and that’s how we get JSON back without really needing to run through anything else that WordPress would do.

So this kind of enables us to go from a regular URL with a parameter like JSON tacked onto the end which is how in a lot of situations if you were building a JSON API on top of WordPress, you might do something like this and get back basically the same data structure that’s in the WordPress post object.

For us, we haven’t done that for a couple of reasons. We’ve gone with a custom API for clarity’s sake, being able to put all our endpoints inside API and then on the server side, we want to do all our processing of the meta data before we return it through JSON or else all that work needs to be done and that slows things down.

So for example, we’re able to return the URL to multiple sizes of the same image which we’ll ultimately be able to serve differently using this new SRC set attribute for different screen resolutions, stuff like that that is not necessarily apparent if you’re just reading the meta data straight out of the database.

So the Backbone side touches WordPress in a couple of other places. One is we need a way to keep track of version numbers, because they really are so separate. When we load the current Backbone version, it’s a different actual number than the WordPress version, so WordPress needs to know what’s what and keep one step ahead of the VIP team, really, because we put in a deploy to them, and we’re not sure when it’s going to come back so we want to know that as soon as it does, we’re ready and we’ll load the correct version of the application.

We’re also sort of separate from WordPress but still in Automattic, we’re using an Akismet API for kind of like profanity and spam filtering when annotations come in.

So in a second I’ll show you a quick shot of a plugin that enables us to do that. We’re also sort of separate from WordPress but still in Automattic, we’re using an Akismet API for kind of like profanity and spam filtering when annotations come in. Previews get pretty complicated in fact, with the Backbone app because it doesn’t know if the person is logged in to WordPress or not, it doesn’t know what permissions they have, so we need to sort of render some special Javascript in the markup that comes back initially from WordPress in order for Backbone to pick up that preview.

And then finally, there’s something that we’re working on that David in the third row in the red shirt is going to be working on soon, which is kind of figuring out how to keep the WordPress post templates and the underscore templates that Backbone uses, keep those in sync. It’s kind of hard right now, and ultimately doing a better job of that will allow us to load more of the application initially from WordPress, instead of having to process it within the browser in the Backbone app and then put it on the page.

So, this is a quick look at the plugin that manages the version number, essentially it allows you to stay on this auto-pilot mode that kicks whichever version is higher between the constant that’s set in the theme that can get committed to VIP or a setting that’s saved in the options table that you can set here so if for example you have a new version in the Javascript application that’s not making any adjustments to WordPress, we can just update the setting here in the plugin as soon as we put it on the CDN and we’re ready to push it.

But if we have stuff that’s sort of related to some changes in the WordPress theme and some stuff in the Backbone app, we put the Backbone app up first change the constant in the WordPress theme to sort of point to that new version of the Backbone application and as long as we’re sort of incrementing the number, the plug in will kick the higher number as soon as the new code with the constant is live on VIP.

This is just a quick look at annotations. You should all check it out, it’s really really nice. The responsive aspects of it are really cool and it’s just an interesting way of diving into the content. We’ve actually found that the comments that come back are less awful because people get to the specifics of what they want to say about this specific paragraph instead of a general “you suck”. That’s kind of nice.

TechCrunch and Non-Blocking WordPress – Now With Full Transcript

Alex Khadiwala and Nico Vincent from TechCrunch presented on “Non-Blocking WordPress” at the recent Big Media & Enterprise Meetup in San Francisco, California. We’ve shared this presentation before, but now we’re publishing it again now with full transcript below.Download the slides here.

Nico: Today, we’re going to talk about non-blocking WordPress. By non-blocking, we’re meaning asynchronous tasks. First of all, who is a developer in the audience here? Okay, so more than half, awesome. So we’re going to start by talking about non-technical stuff and then we’re going to go a little deeper, under the hood.

Basically the team right now is me and David Lake, as a software engineer and a project manager. Alex here was former development lead for more than a year. I want to give props also to 10up which is here tonight and John Bloch and Eric Mann who were really helpful in the redesign we did in the past year.

So the whole point of this presentation is to talk about having a fast website. Basically when you have a fast website, the user engagement is much better. I’ve heard that under 3 second websites, 40 percent of the people drop and only 40 percent of them will come back on your site.

The more they stay, the more pages they see, which is good for ad revenue and on a business point. Also, like Google and other search engines, like Google or Hummingbird penalizes when the website takes longer to load.

Also it’s good for the bounce rate and I know we’re hosting on WordPress VIP but it’s better for your hardware, when you have a really performant website.

I’m going to let Alex talk about our old TechCrunch to our new TechCrunch.

Alex: Yes, so our old site was really slow, it was about 17.4 seconds for a single page load. We’re part of the AOL network and from all the sites from AOL, we were the second slowest, pretty embarrassing against the peers.

Also, like Google and other search engines, like Google or Hummingbird penalizes when the website takes longer to load.

If you guys recall the old site, for the new site, after we finished the redesign, this is hearsay, but what we were told is that we were one of the fastest sites on VIP. I think Matt Mullenweg was kind of excited about that too which makes us excited.

Blocking is: a process that is blocked is waiting for some event such as a resource becoming available or the completion of an operation.

This little graph at the bottom, you can see, first page load of DOM complete, when you can start interacting with the page is about 2.9 seconds and after the first load, and second load about 1.9 seconds and fully loaded it’s 4.2 on the first load and about 2.3 seconds on the repeat, on the second load.

Basically when everything gets cached and such, definitely very exciting, pretty fast. So it’s good that there’s all these non-technical presentations so we can balance it out with a little more technical presentation.

We’re going to talk about blocking, basically, this is kind of a general definition of what blocking is: a process that is blocked is waiting for some event such as a resource becoming available or the completion of an operation.

The general idea is that you have a page request and it has to do a bunch of things before it can render the HTML and send it back to the user’s browser. So by architecting the page – one of the big things was to make our site extremely performant for all the reasons that Nico had listed off a moment ago. One of the big things that we did was try to identify anything that was blocking and push it off to an asynchronous task.

Some of the ways that you generally do it with other non-WordPress stacks are message queues, using something like Rabbit MQ or Amazon SQS to kind of send a list of tasks and then using workers, or in past I’ve used Gearman as a worker for processing things in a queue. Sidekick and Resque are big popular ones with rails apps.

Unfortunately these options are unavailable on WordPress but with a lot of help from 10up, we built out something that is referred to as a wp-Async-Task. What this is is an abstract class that we extend for different tasks that we wanted to make asynchronous.

So the nice thing is essentially it’s kind of starting a whole new thread to kind of do this work that you need done asynchronously.

So basically, it performs. When you make a request for something, if we kick off a second request back to the same site, which is a non-blocking HP request and it basically sends some information to the server and says do this task.

So the nice thing is essentially it’s kind of starting a whole new thread to kind of do this work that you need done asynchronously. A couple of examples of what we did on our site that you can see are CrunchBase.

We have, on most of our articles we have CrunchBase cards and you can kind of see – here Facebook and Snapchat as an example.This information all comes from the CrunchBase API. So imagine that one circumstance you’re loading the page, you have to get this information from CrunchBase.

Imagine that we have to go to CrunchBase, wait like a second or even half a second to get that information, for each of those different companies and then pull the information back and basically have it available then to render the page. It would be painful for the end user.

So what we do actually is we kick off an, if the information is not available, we kick off an async task, it goes and gets the information, caches it in our site, we basically store it in a taxonomy – a custom taxonomy for CrunchBase.

One of the big things that we did was try to identify anything that was blocking and push it off to an asynchronous task.

Then the next time that particular CrunchBase information is requested, it will be available to the page.So we then load nothing for the first request if it’s not available, then the next time the request comes through, it’ll be available for that page.

Another example is for recirculation. On the left rail of our site, we have some for example, we have tags and categories basically for that particular post and we pull in articles that are related just for recirculation purposes. Pretty much the same exact thing as a CrunchBase.

One nice thing that we do here as well is that when the page finishes, if the information is not available it does not render on the page. Instead it sets up, it just kind of writes a Javascript callback so that when that page finishes loading, that it’ll call back and try to get the information.

Basically, as far as images, we were just putting a 1×1 image on a CEN in the SRC attribute and then once the DOM was done loading, we were just using another attribute that we call data-srce and we were replacing the image source so that was super fast, seamless.

Again, it waits ’til the page is completely done loading, before it makes that call back, just for the best user experience. That’s it for my part, I’m going to pass it back to Nico to talk about some other things.

Nico: Alright, I’m going to talk about something we call the Lazy Loader. Basically on our front page and many of our different pages. We’re loading more than 100 assets, and it was a big part of us having a 17 second loading time.

We have different blocking API’s and the social buttons. Let’s say for a blog when you’re displaying 30 articles, you have to load a like button, a linkedIn button, a Twitter Button 30 times and these API’s are really slow and sometimes it’s a real hassle to finish the DOM to load with that.

Basically, as far as images, we were just putting a 1×1 image on a CEN in the SRC attribute and then once the DOM was done loading, we were just using another attribute that we call data-srce and we were replacing the image source so that was super fast, seamless.

And then like Alex was talking about, the tag accordion – basically all the accordion was closed so we were just loading the content as the page was finishing loading.

So once again, no one could see it and it was much better in terms of page load.

Also, our social buttons, they’re just like little images and as soon as you hover it, that would just trigger the loading, so these are examples that really really cut down our page load down from like more than 10 or 15 seconds.

Another example is caching, so here, basically what we’re doing, we’re having a refresh key that’s usually like 10 minutes and then when the refresh key is still okay and the data is still good we just returning the data and serving it. If it’s not the case, we only have one person that can trigger the refresh and then that will set the transient.

Another example, it’s a plugin actually, so you guys can check it out if you’re interested. It’s from another 10up person that used to work with us.It’s called the Live Cache.

So where you see the two arrows, it’s a little module on the homepage, when the stream is on and we wanted to be able to change the information there so the person wouldn’t have to refresh the page.

We tricked a little bit with a URL and a timestamp, so basically the browser will trigger a call to our backend every ten seconds based on a different timestamp and we will just get the information back if someone in the backend had refreshed it before.

I will let Alex here conclude on this.

Alex: So yeah basically, the point of our presentation was just to – it’s something you kind of have to do from the beginning and especially if you’re doing a redesign.

Just general idea, is you want to architect your site to asynchronously handle any heavy task to maximize your task performance.

Yeah,using a pattern like wp Async Task or things like the Live Cache plugin or just Javascript Lazy Loading or the 1×1 pixel source when you’re loading the page will definitely help improve the page performance.

One other note we’re told to tell you if we’re hiring, so we are hiring and if you are looking or know somebody that is looking in the Bay area, would love if you guys could email them now at dev@techcrunch as I’m no longer there.

Thank you guys so much and thank you so much to Automattic for having us present here.

Questions:

Q: How do you factor speed with features, it’s a balance, so how do you deal with those decisions? Is it just the feature set wins and you just figure out how to do it?

A: Pretty much. So a lot of our features are driven by editorial, and editorial typically is very opinionated and had a lot of pull. I’m sure everyone has dealt with that for any media site.

So I think most of the time, if it’s not them coming to us, it’s them going to the higher ups and talking them into basically adding a certain feature and then us kind of figuring out how to architect it.

It gives some interesting challenges, but it’s been great, it’s been fun. I mean, I think Live Cache was a good example with that.

Like one of the big things was working against batcache, because we’re on VIP and having batcache, we have to kind of come up with a way that we can make page requests back and get up to date information.

But without taxing VIP too heavily and getting passcode review on VIP.

Q: Just a follow up, it seems like you’ve built tools to help you quickly integrate speed into everything you build, rather than having to tackle it individually for each piece, is that correct?

A: For sure, just kind of abstracting as much as we can, to make it reusable and I will give props to 10up again for a lot of that.

Nico and I, like I started about a year and a half ago, Nico’s been almost 2 years now and we both came from non-WordPress backgrounds.

We started probably a few months into our tenure at TechCrunch doing the redesign, so it was a lot of stuff we had to learn. It’s kind of a different world doing WordPress development.

Participant:Can you go back on a slide? Two slides, one more.
Alex: The one on Live Cache?
Participant: Yeah, thanks
Alex: Cool.

Q: Yeah, just curious what your best practices are around caching, and content like that, what’s your TTLs and whether you’ve found any optimizations around caching that you’d like to share?

A: That’s a good question. So that’s a good question because we had issues with that plugin. It didn’t work for like two live events because first of all.

We were logged in and VIP has a different behaviour as far as refresh and cache for logged in users. When you’re just someone who’s chilling on the website, we we’re getting the headers from that cache.

Sometimes, so I don’t remember if it’s like too much or not enough, but sometimes we were having the right data from the back end, and then ten seconds later, the old data because of issues with cache timestamps.

Alex: Do you mind if I?
Nico: You want to chime in?
Alex: Yeah I’ll chime in for this one.

Alex: We were having an issue with Live Cache, you might be speaking of other assets…

Q: Yeah, I’d just like to hear general, just caching in general, what best practices you have for that like new content versus page speed.

A: Yeah, everything is basically, we said no headers from our side. Everything is kind of managed from VIP, all of our information, all of our content is through their CDN and through their hosting.

They kind of take care of that for all our static assets and such as far as the issue that Nico was just talking about.

One of the big issues with Live Cache is that basically you have to make the request back to the server with the right timestamp to make sure you’re getting the right text.

So for example basically we have these presentations that disrupt and they’re like 10 minutes long, which we’ve gone over a little bit but we’ll be quick.

When they switch presentations, somebody goes into the backend, in the widget and switches out the text. But, you have to synchronize the clock with the end user to make sure that they’re using the right, the same clock as you.

So our solution was to make that first request live_cache_check/1/. Fortunately the header on the batcache, the response is coming from batcache. It does have the proper timestamp so we use that to synchronize the clock and then accordingly all subsequent requests, which are every ten seconds will be based on that, based on the synchronization.

Q: So assuming no one messes with the clock between the first request and after that?

A: I guess, it’s valid, I mean just to speculate, I guess it’s OS specific. So it’s kind of relying on the timer within the browser and within the OS to kind of, as to the interval that’s been set.

Participant: makes sense, cool.

Q: Is the wp Async plugin, is that available right now?

A: Unfortunately not, we have it, we were looking, we were talking about like open sourcing that and I guess we just have to get it cleared by a few different people but I think it would be useful. We think it would be something useful to open source.

Participant: Sounds like it.

Alex: Yeah yeah, for sure. Cool, thank you guys so much.

Nico: Thanks.

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group. 

Andrew Nacin on How WordPress Evolves Without Breaking Everything – Now With Full Transcript

Andrew Nacin is one of the lead developers of WordPress. At the August 2013 Big Media & Enterprise Meetup, he gave a talk on how WordPress evolves while maintaining backwards compatibility — which we shared previously and we’re publishing it again now with the full transcript below. 

My name is Andrew Nacin, I’m a lead developer at WordPress. I live in Washington DC. I’m talking about, really quickly, how WordPress evolves without breaking absolutely everything. I’m going to give two case studies.

First, some general considerations and what I’m talking about for this is three in particular:

  • One, we don’t really rush to fix what isn’t broken. There are a lot of other platforms out there that might rewrite a lot of their API’s pretty much every version, every three years. Just to name a few, like Drupal. We’re not trying to do that; we are trying to evolve at maybe a slower pace. Our slower pace might still be over 3 years; it’s just over six or seven releases.
  • We’re also trying to really make it worth it. If we are going to rewrite something, we’re going to go all out. And that’s actually one of the case studies here.
  • And then the third one is backwards compatibility. As you probably know, we’re presently backwards compatible, or 99% backwards compatible from version to version. Great for users, great for the ecosystem, it’s actually not that great for us, but that’s okay, we accept that.No “breaking changes” means that users don’t really need to worry about this when they update it. At the same time, we have to absorb extra technical debt. So if you look at the new WordPress, you’ll find some things that you’re like “wow, that’s still there”? Yes because the plugin that worked five years ago that was perfect then, should still work now.  We don’t try and just deliberately break your code.

We’re also trying to really make it worth it. If we are going to rewrite something, we’re going to go all out.

First case study: WordPress 3.4 – Themes API

So the first case that I’m going to talk about is WP theme, which came in WordPress 3.4 so this is actually a bit of a comparison from 3.3 to 3.4. There were some really big problems with the existing software wp_get_themes(). It was actually terrible. It’s a function that was not an API, it was that bad. It had a huge memory footprint; we’re talking 10s of megabytes, every time you called it. Very slow, weak error handling, pretty much nothing was good about it. It couldn’t fit into a single cache bucket, that’s how big the data was. So if you tried saving it in the cache, and WordPress.com tried doing this, they had to chunk it into individual keys, and put it together when it was done. It really didn’t make any sense. You’re probably doing it wrong if you ever have to do this with your data. Getting page templates for one theme required loading everything.

WordPress.com, which had at the time, 170-something default themes and on top of that something like 600 VIP themes, which by the way aren’t used on almost all sites, they were loading 700 pieces of data looking up every single page template for whatever Duster’s page templates are. This really didn’t make any sense at all, was really slow, and that’s why they had to cache it into multiple cache buckets. It was also really painful, because it’s one giant multi-dimensional associative array. If you try adding a feature to this, all you’re doing is making it worse.

We also needed this for an absolute ton of things, some of these on here I didn’t even know existed. You can dig into this a little bit, like multiple theme roots, cross-root parent themes, things like that. You can actually nest themes inside directories, which is what WordPress.com does for some stuff. Really weird – we had to support all these things. And you can’t break anything. You have to be 100% backwards compatible.

So how do we do it? First is that we scrap the entire array, this giant mess of crap and try to do one object with WP_Theme. So you have a method like get: $theme ->get(‘Name’) or get (‘Description’), or get (‘Author’). And also getting a header for display, so we have a display method, which automatically translates it, which is a new feature in case you’re doing that kind of stuff and also dealing with HTML markup – that could each go into some of these pieces. And then a number of helpers that can mimic a lot of the regular functions that you’re already seeing so you’re very used to all the different pieces here. Dealing with page templates: “hey look now we can only fetch one theme’s page templates”.

So we were looking through this and the pages’ page, the list table, was 5-6 times slower to load than a post table just because we were loading the list of page templates for one theme, for quick edit, that you don’t even open unless you really need to. Really stupid, but that’s kind of sad right? And things like template files, which we were only really loading for the theme editor, which on WordPress.com is disabled, but they still had to on WordPress.com load this for every single theme. That’s 40% of all of its memory.

It’s not easy to build code that just works from version to version, and many of you might not even need to deal with this. At WordPress, we do. It makes your lives easier, so you can buy me a beer later.

Let’s use WordPress.com as an example, even though I don’t work there, because they’re obviously working on a pretty incredible scale, especially the number of themes they have.

So the next step that we did, step two, is a lot of magic. We have this problem where we have $theme passed into functions, passed into hooks. How are all of the old, all the existing plugins working with this going to be able to accept this data? So in PHP there’s a class called  ArrayObject, that implements a few interfaces, one of them is called ArrayAccess. What it enabled us to do is things like this, where $theme[‘Name’] we’re able to treat that like a function call and then we can wrap it in this case, with the get map: #theme->get(‘Name’). Sometimes, this array, for whatever reason, one of the functions, WordPress decided to convert to an object, so we had to handle that as well. Well, there are some magic methods in php including __get() and __isset().

So now, we’re able to take this giant, stupid array and convert it to actually, a really smart object. We’re doing this in WordPress as well with some other things, we’re also doing dumb objects like a standard class and converting those more specifically to proper objects like wp_post if you’ve been looking around. A lot of this is just for sanity reasons, not even for future reasons. So, function __get($property), we’re able to map exactly where we need to go. Caching is non-persistent by default, but it does exist, which is pretty cool. So, the problem is that if you had caching on persistent and you would maybe doing a deploy, if you’re not actually clearing that cache, well there’s a problem. You need to be able to do that. APC is buggy enough as it is when it comes to upcode caching, you don’t need to mess with it here as well. So it does support persistent caching if you know what you’re doing. So WordPress.com for example has this enabled. They wanted to be able to store in cache bucket, so they do. So if for some reason, you ever wanted to enable it, there is a filter:

add_filter(

‘wp_cache_themes_persistently’,

‘_return_true’ );

Overall, the class itself is somewhere around 2,000 lines long. The patch that landed, that had the bulk of this was somewhere around 14,000 lines long and we wrote it in about six days and it worked.

And you can turn it on and it will work. So if you’re dealing with a lot of themes, maybe not just one on a giant multi-site installed, this might be something for you. So you have this new API that deals with array( ‘allowed’ => true ) and array( ‘errors’ => true ) and all these these different pieces. array( ‘allowed’ => true ) being for multi-site which is again, something else that we were able to speed up quite a bit.

And then we also had to make sure it worked. So, on top of a lot of functional testing, this is a few years ago this stat (29 tests, 684 assertions), there are even more tests now. Existing tests had to demonstrate of course backwards compatibility, so those existing tests did not break when we did all of this. New tests ensured the WP_Theme returned what we expected and then we practiced TDD (test-driven development) specifically when we were dealing with any bugs that came in.

Overall, the class itself is somewhere around 2,000 lines long. The patch that landed, that had the bulk of this was somewhere around 14,000 lines long and we wrote it in about six days and it worked. Also doing profiling, you’re going to find bottlenecks in some cases where you had no idea you had them. So maybe we saw some pages that were slow and we didn’t really understand why, sometimes a post request is actually slow, you might not notice this because you might think “oh yeah, Chrome is just resolving the DNS, that always takes forever”.

Profiling is really important for these things. So, for example, this is a KCachegrind right here, we were able to take 28% in theme.php to 0.76% of the page load. Total time cost was reduced by a factor of almost 6 and then we’re also able to look at weird things like this.

For sanitize_titles_with_dashes, one particular thing, we were searching for a theme on the backend and for some reason it was taking 42% of the page load. We we’re like “what the heck is going on here?”. Turns out it was being run 3529 times and here’s the best thing: the function call shouldn’t have even been there. So we removed it and the entire page sped up like you wouldn’t believe. It actually went from 44% to basically nothing. So we were able to speed things up – we would never have found this because it’s just like “oh Chrome is being stupid, it’s not loading”. No, it was actually a really slow request.

 

Second case study: Taxonomy Meta and Post Relationships

You might have heard of these, you might be using them, you might be using post-to-post taxonomy meta plugins. Working on this, this is a roadmap that was posted to make.wordpress.org/core a few weeks ago, during WordCamp San Francisco actually, explaining all the different things that we’re working on to make this happen. Now, the problem if you’ve worked in depth with terms is that shared terms was just a bad idea, we shouldn’t have done it. It came in actually, and this is a really funny history, originally in 2.2, was removed and went into 2.3 with a new schema, based in part on Drupal’s schema at the time. So the one time we did copy them, we realized we made a bad mistake.

Term_id as you might be familiar with – let’s say the term_id is ‘apple’ and then that ‘apple’ term might be in multiple taxonomies. So you might have the ‘apple’ in the tag taxonomy, and ‘apple’, in the company taxonomy. The problem is when you, let’s say, rename the ‘apple’ to ‘applecomputer’, suddenly things begin to go wrong very quickly. Unfortunately shared terms have very limited practical benefit. It would be much better if they were separate. So we have these two tables: wp_term_taxonomy and wp_terms and these fields in them, and you can kind of see how these come together with term_tax_id being the primary key for one, and term_id being the primary key in the other table, things get related and we have a third table of relationships. The joins are a mess, slow things down, and are not really fun.

So we’re going to add a new table, like this and if you see, it’s the exact same fields as the term_tax_id table, except we’re going to add all the fields that were in the term_id table. So we’re going to drop one of these tables and move all of the fields into the other table. We’re going to reduce everything to one table. Now if you’ve ever written a direct query for this stuff, if you’ve ever dealt with this, “Oh crap, things are going to break” right? “I’m sorry, it was Nacin’s fault, blame him”, or whatever you want to do. We can actually fix this. In fact, we didn’t come up with just one way to fix this we came up with two.

The first one is that we’re just going to redefine what a table means in WordPress. So if you try and reference $wpdb->terms, it will simply think, “oh, you must mean the $wpdb->term_taxonomy table”. So we’re actually self-joining. So if you’re doing interjoined terms on “terms_t” on term taxonomy and you’re do all these different fields, it’s just going to join itself. And because these fields are a superset, it will work. You also can do something like this with a view. You can create a view in MySQL as of MySQL 5, which is the current version for WordPress. You’re able to do something as simple as this: we’re able to re-create our old table in place. So after we do all these crazy upgrades and everything else, we can make this kind of work. We tested this with WordPress, we dropped the table, we merged all of them, took a 20-line patch, without changing anything, all the direct queries and everything worked. So plugins that are trying to do anything special with terms, we can do this to the point where we’re really not going to break anything. Pretty cool.

We’re also doing this over the course quite a number of releases. So, we’re able to combine these term tables, let us have on ID, finally we have one real ID that represents what a term actually is that we can pass around. Term meta is finally within reach, maybe post-relationships isn’t far behind, because that might depend on term relationships and that becomes a whole other story. So we have this long-term road map, unfortunately this actually requires we integrate a half dozen different changes, each of which is dependant on the previous one, over at least 3, 4 or maybe 5 releases.

So, we’re not rushing this, we can’t rush this. We need to do it step by step, to make sure that we don’t break absolutely everything. Maybe we slow it down, speed it up depending on how things go. Ultimately backwards compatibility prevents a lot of challenges. It’s not easy to build code that just works from version to version, and many of you might not even need to deal with this. At WordPress, we do. Iit makes your lives easier, so you can buy me a beer later. And we continue to evolve at rapid speed, WordPress 3.7, if you don’t know about the plans, is being released in October, 3.8 which will be a little bit of a different release in December. And if you’d like to join us helping out, I would go to make.wordpress.org/core and check those things out. (For the latest WordPress version, go to www.wordpress.org)

 

Q&A

Q: For the major version changes, now that we’re speeding up the timeframe for releases, typically in the past it’s been every 6 months for a major release and it’s been documented that you go back and support the last major release version. How is that going to change now that we’re speeding up the major versions?

A: Don’t know yet. In this case we’ve always aimed for 4 months, and normally end up at 5 and it slips to 6 or 7 on occasion. Sometimes we’ve actually been really on target with those. So what we’re trying to do now is 3.7 is acting as a bit of a reset, I can talk a little about 3.7.

3.7 is a platform-focused release, we’re doing it in 2 months. It’s focused on a few different things, Scott was talking earlier about some of our developer tools stuff. We’re trying to improve a lot of our own processes, so whether it’s trying to make it easier to contribute, trying to make it so tickets don’t rot for a long period of time, or people aren’t getting feedback or whatever it is – that’s important. And then a lot of our developer tools as well.

So this is really cool: you might have seen this new develop repository on WordPress.org which replaces the old core.svn repository. This is pretty interesting because it pulls in all of our tests, all of our tools, our bill process now, everything is in one place and finally we’re trying to modernize here. We’ve been around for 10 years, we can start to do it at this point. And then we’re rebuilding a lot of our developer documentation. So if you go to developer.wordpress.org right now, you’ll get a “Coming Soon” message, but we’re working right now on fully automated code reference that is very smart and deals with documenting every hook, every function, all from inline documentation to what else it can need from code. (This feature is now live, check it out)

The actual focus of the release in part is security, stability, updates and fixing a lot of bugs. We’ve already closed around 300 tickets in the last 2-3 weeks and I expect that number to continue to drop successfully with each week. This won’t affect most of you, because you will be doing manual deployments anyway, but in 3.7, security minor release updates will happen automatically. They shouldn’t be nearly as painful as they are and we want to try and ship this to you – like 5 people just went “oh God, what are you doing?” – don’t worry, relax, you can turn it off and in most cases, this won’t affect you. If you have things like automatic updates turned off on your dashboard, then this obviously will not occur. Which you should, and if you don’t, and you’re trying to do deployment anyway, how one of your editors isn’t screwing it up by pushing a button, I’m really interested.

Any further questions on 3.7? We don’t know how yet we’ll work on that, but that said, because we’re going to start doing automatic updates for security releases, we’ll probably support security backup a few more versions as well. If only because we can be much more confidant shipping those and because our security vulnerabilities we’re dealing with now are really esoteric.

We’re talking about like safe HTTP requests and XML injection and things along those lines, we’re not really dealing with the run of the mill like XSS that we might have been dealing with 5-6 years ago. So, supporting further back, yes, that said, I don’t think we’ll always be doing too much with these cycles, I would like to settle between 3 and 4, but we really don’t know yet. 2,3,4, not sure. 3 releases a year would be great, 4 maybe, I don’t know.