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.

Harvard Business Review and WordPress – Now With Full Transcript

Kevin Newman from Harvard Business Publishing, presented “Adapting WordPress’ role within a larger content strategy” at the recent Big Media & Enterprise Meetup in Boston. We’ve shared his presentation previously, and we’re publishing it again now with full transcript below. 

View the presentation slides here:

 

I can tell a story about where, what blogging means to HBR and what role WordPress plays. A little bit of history first. HBR is a storied print publication. It’s been around for 90+ years, one of the cornerstone publications in management science and practice.

It’s a great product and I love it but right around 2007, 2006, there was a desire to push the boundaries a little bit and get out of the ivory tower, see where our new audiences could be.

This is slightly before my time, I came on board around 2008, so as I started to experiment with different content forms, namely blogging. I ended up going with Moveable Type. Moveable Type, at the time, had a feature that easily allowed for multiple authors, static publishing of an asset which was attractive.

WordPress and Moveable Type way back when, were kind of neck and neck and it was really a coin toss whether or not we were going to go either way. We ended up going with Moveable Type and that’s where myself and a couple of other people were hired to help grow the business a little bit, to help it along.

Moveable Type was not literally, but just about on somebody’s desktop computer under their desk being posted in kind of a hacky way and they wanted to make it a more sustainable business.

We’re also seeing that readers are coming to the site and some readers are getting just as much value out of a blog post or what’s now a blog post, as they are in the print article.

The point of the digital business at the time was to develop the markets in advertising and subscription and e-commerce. At the time, they were seeing some success in e-commerce.

So at the time, Harvard Business Publishing was a catalogue site, but they felt like, the board felt and a number of people felt like we can serve readers as well. So we’re looking to create that new audience, meet that new audience without sacrificing the quality and carry it forward, or so the intention was.

We went to Moveable Type, everything was going great but then we started to hit up against a couple of constraints. Long story short, editorial really wanted to go with WordPress and it ended up working out really well in the technical sense as well.

The editors love it, the ad sales folks love it, it does a great job making sure that the tags that the editors are putting in make it all the way out there.

So we ended up transitioning to WordPress last year off of Moveable Type, working with Automattic VIP to get all of this, all of our, what would it be, 4-5 years of blogging, all the meta data, all the operatives, all the work that went into getting onto WordPress.

It went very very well all the expectations, actually exceeded all the expectations. The good news is that everybody absolutely loves it, absolutely loves it. The editors love it, the ad sales folks love it, it does a great job making sure that the tags that the editors are putting in make it all the way out there. There’s nothing in between.We want to make sure everything is accurate.

The other good news is that there’s a deep community there. There’s a lot of people that use it if we go to some sort of conference, either technical or editorial, odds are if we talk to someone about the process, they’re also using WordPress.

More good news is that there’s tons of developers, tons of plugins, if you don’t know how to get it done, or you’re just lazy, you can probably do a quick search and you’ll find a plugin that will get you a good way there. So it’s been a great decision across the board, now we’re heading in a new direction.

HBR.org is in the midst of a pretty big redesign. A lot of it’s visual, there’s some underlying plumbing that’s getting changed as well and we wanted to keep WordPress.

So one of the key strategic changes that I wanted to mention is that we’re moving towards, we’re coming from a model that works very well, where there’s pretty hard lines between print content and online content, stuff that is not in the magazine.

What we’re going to do is even that balance out a little bit, where an article, is really an article. Certainly there’s a difference between a print article and an online article but we’re also seeing that readers are coming to the site and some readers are getting just as much value out of a blog post or what’s now a blog post, as they are in the print article.

With this redesign, we’re going to kind of even the playing field a little bit and everything’s going to be presented to the user as helping them solve their problem.

Less of a division between what’s in the issue versus what can you find online exclusively. So it’s just going to be content: “how can we help you solve your management problems?” “How can we make you a better manager?”.

It doesn’t matter if it’s a blog, doesn’t matter, well it matters if it’s in the print magazine of course, subscription, it matters. But readers don’t see the difference that we do, we need to make sure that we’re solving their problems.

So we look across the site…Barack Obama organizing for America 2.0. That could be almost anything, it’s not necessarily related to an issue. WordPress is a big part of that.

As we move forward, we’re taking all the entire archive of HBR and the entire archive now of all the blog posts and we’re putting them all in WordPress. We’re going to have every single piece of readable content and actually multimedia as well, in WordPress and part of that is because of technical flexibility.

It’s under the theory of let’s let the best tool do their job, in other words, we feel like we’ve found a great tool and everybody’s happy.

My job, my team’s job is to make sure we’re never painted in a corner. We can do whatever we want next year if we want to change directions. WordPress is a fantastic tool for that.

The other reason we’re doing this is because editors love it. They absolutely love going to this tool, they use it all the time. I don’t have to deal with it. I don’t have to, we built so many tools for them, and you know some of them were great, some of them weren’t, we don’t have to worry about that now. It’s under the theory of let’s let the best tool do their job, in other words, we feel like we’ve found a great tool and everybody’s happy.

So next, is a quick snapshot of our architecture. This is our current architecture, so very quickly you can see HBR.org there and that site, the core of the site is an application, a Java-based application, Jvos specific application server, and it integrates below the line.

Those are deep integrations, those are behind the scenes. In our core integrations we have databases, e-commerce, search, user services and platform Web services that we share with other units in our business.

Then we have above our application server layers, advertising discussions and recommendations. Those are page-level integrations, some of them we serve, we make sure they have whatever information. They need to be relevant, but largely, it’s that one line of javascript on a page over here, way off on the left, is blogs at HBR.org currently on VIP.

We can do whatever we want next year if we want to change directions. WordPress is a fantastic tool for that.

The integration there is Javascript, so the users credentials representation gets passed back and forth, so as you’re navigating around, it’s a seamless experience.nIt’s in fact, completely different, but to the user it doesn’t matter. So that was a step towards making sure that even though there’s a blog post versus print – that the user doesn’t care, shouldn’t care.

The big change with the redesign is that it’s gonna move WordPress into our fold. What we’re going to do is because we have the entire archive posted on the WordPress instances. We’re going to integrate with it on the application level, rather than have WordPress serve up these pages.

So now within the same mix of the database is the search, the user services, all the other integration services that we use like e-commerce etc. The whole point is that the application is matching the content with the user, we’ve been able to chip away at this for years and now I feel like we’ve got it.

So WordPress is the content and all these other services are the user. Like what is the user doing? What is the user buying? What apps are they seeing? What can we do to better serve them?

And that’s the way we’re going, so that’s it in a nutshell, how’d I do? (You have 2 minutes left) I have two minutes left? I was suppose to be here with Matt Wagner, he’s sick.

He’s the one that really owns these two slides, so I probably didn’t do the amount of work justice, but it’s incredibly important, especially on the tech side.

We’ve been able accommodate the business with this kind of strategy over the last few years, making sure that we would serve the editorial side and serve the user side and so far so good. WordPress is a big part of that.

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.

How Parade.com Uses the WordPress Theme Customizer API – Now With Full Transcript

Taylor Buley of Parade.com presented at the Big Media WordPress Meetup in New York City on how his team uses the theme customizer to make editorial changes on the fly. We’ve shared previously, and we’re publishing it again now with full transcript below.

Parade.com/customizer, It’s a Google app, nothing special. What I’m going to try to do is, I’ve done a webinar on this before, so I can talk your ear off on a customize API.

So what I’m going to do is try to be demo focused so I’m going to tell you what I’m going to talk about and show you what exactly is Parade and get into the developer side of it.

By the end, I hope that I’ve convinced the developers to be on the side of the editorial people and that side is the same one we heard earlier, which is I think the quote was “what I would really like from WordPress is an interface for editing the page while I’m looking at it”. And so that’s what I’m going to talk about today, there is such an interface, it was released in WordPress 3.4 and it’s really awesome.

What I’m going to do is first talk about what the WordPress customizer is, that’s the API I’m talking about and then we’ll show you how it works. It does exactly what we described earlier, which is you look at the page and you actually edit.

So who are we at Parade, we are a website, I like to think first, but we are a print publication, we’ve been doing the model that Newscred has been doing since 1941. We have a network of 700 newspaper partners, they carry this thing, it falls out of the newspaper for some people. Some people look through all the advertisements specifically to find it.

We have two such magazines, one was called Dash and the other was Parade. We’ve been around forever but this year we did a redesign and a rebranding and we went from all caps to uppercased. We also redid the entire website and CMS architecture along with it so if you don’t want to read this, I’m sure you don’t, just go ahead and pass it around. I just want some people to be familiar if you haven’t ever seen the print publication. I did not grow up with it, my Grandma did. I did not.

This is us, this is our website. It’s designed by Athletics, an amazing design firm. James Ellis is here today from Athletics, if you’re looking for an amazing designer, pitch his work all day. We have this thing it’s called Promo block, we have this thing called a grid screen, we are a lot like every other media website on the planet, right?

We have an article template, we have channels, we have a homepage, we have special types of articles that people who write these special types of articles would love to think that they’re different than everything else, but in WordPress this is all just a post.

So we are very uninteresting in how Parade.com uses WordPress in general. I’ll tell you, we use all of it. Except for search, we use Google custom search, we never queried MySQL live, ever, it’s a terrible idea, if anyone has thought about it.

Besides from that, we use everything, so what we’re looking for is when we have such a system that had a windows-like interface, an old CMS called open-CMS and it was a great idea to bring on, it’s open-source, well supported and all that.

Except, the developers who previous to our team let it rot and when you let a CMS rot, you get a piece of shit, right? And so what we had to come into is, this year we came into January and we had to start over. We didn’t figured out how to nicely wrap WordPress as a content engine underneath the MySQL and Mongo database that pushes stuff out via Real Time’s indication API.

Instead, we just threw everything away and the way we threw everything away was first we developed a mobile website, a proof of concept, make sure it works, advertisers liked it, we developed the rest of the website around it, had the mobile website up in January, my first month at the company, and had the rest of the website up in April.

The reason why we were able to do this was discussed by the NY Times developer, WordPress is nimble, WordPress does all of this stuff and if you’re trying to figure out a way to reinvent a UI that looks at the page while you’re editing it you just look deeper into core, it’s there and so I would encourage you all to.

It’s great it’s fun as a developer to develop elegant systems that run on multiple different types of instances and communicate across rest API’s and XML RTC and this and that, that’s all great, but WordPress is great too. What I’m going to show you today is something I think is really really cool inside of WordPress that people haven’t talked about and it’s the Customizer API.

So this is TwentyThirteen, you’ve seen it before. Has anyone not seen this interface specifically? So what I’m talking about it is not the theme, you’ve seen the theme before, it’s TwentyThirteen, this, has anyone not seen this before, has anyone not explored the theme, so you guys have seen this?

You know what it is – interface, website, this is basically an iFrame the way that this works is this is WordPress admin, basically we’ve got wp-admin, Customize.php up here.

What it does is takes the get parameter url = and then injects that guy into the iFrame and you’ve got post message communication across these guys and what you’re able to do is get live previewing and that’s what I’m going to demo today is a way to live preview so a little bit more on what it is in general.

So this is WordPress.com, you may have seen this too, it’s also the customizer API, it’s fancier, it looks better than what I’m going to show you today and all they did was just style this in CSS. You can take the core principles that I’m presenting here today, the very cool things that I hope you like that we’re doing and you can make it look as fancy as you want.

It seems like a very simple statement, matter-of-fact, everyone will agree here. Things on the web are best produced while you’re looking at them, right?

You can make it flat and take away the shadings and all that, but it’s still WordPress. So that’s kind of the message I’m trying to say today is “why is this so good?”

So this is our interface and what we’ve got is anything you can see on our website is editable. Why is that? That’s because I’m a journalist, I worked at Forbes as a reporter, I’ve worked at the Wall Street Journal, worked at various places then I got into development and worked out of the Silicon Valley bureau we had POS CMS at Forbes.

Through mutiny internally, WordPress became the CMS, it was awesome. But then we became the team in charge of the WordPress CMS site, eventually we got some of our pages stripped away from us. We went from having article pages, general pages, all that to just providing the editorial engine to someone like [...] and now they’re selling this thing on the marketplace and you can actually license it which is awesome for them.

But we come from this legacy of being journalists, we’re editorial people, my boss Steve McNally is an editorial person, he’s a private person. What he doesn’t want is somebody in the backend, editing the front end of the page.

It seems like a very simple statement, matter-of-fact, everyone will agree here. Things on the web are best produced while you’re looking at them, right?

That seems very matter-of-fact, I don’t think anyone would disagree with this and yet every CMS we see on the planet is designed to run a back-end and a front-end and there’s a back-end and there may be a preview button but that takes you to the front-end. Or you could try to do a preview in an iFrame and that’s special because that one’s on the back-end. But it’s still just the front-end loading the back-end.

All of these are just fancy ways of doing the same thing Customizer API does it elegant and simply back-end wrapped in an iFrame with a front-end in it and what we get with this is you are looking at the actual page.

So you can do the fancy responsive thing where you show your boss like “oh cool I can scale by 30% which means when I go in and go out and it shrinks and all that, you can see exactly what you’re getting and it works on mobile and on everything else – why?

Because it’s WordPress, I didn’t invent anything here. I didn’t do anything here, this is me implementing a vanilla javascript API, or a vanilla PHP javascript API.

These are all the different things that the Customizer tool offers so it’s got check boxes, it’s got input fields, it’s got an HTML 5 drag and drop image picker tool, it’s got color pickers, it’s got radio buttons and you know drop downs.

It’s essentially any form you’ve ever created is already supported, any field you would like to invent, is extendible via the API, we’ve done it once but not very frequently because we don’t need to – the input button, the radio button, it does everything we need.

I’ll show you what that looks like – I’m going to pull up our development environment. I’m going to hope it works, it’s a private development environment. Make sure your wifi’s sniffing, I’m sure this is a public access point, it’s not protected, so go ahead, I’ll reset my password by the end of this.

We’ve got a stamp protector plugin so when it detects a bad id it tries to slow down the spammer, so it looks like it’s flagged me also.

I don’t know what I just clicked into, but it looks like it’s going to be a channel, so what you’re looking at is the exact same tools we ask our editors to use. What we do is we say “editors, you have this thing called a promo block, this thing called a page view, a tag bar”.We’ve got share buttons just like everyone else.

You know there’s really nothing too special here about the design itself. What is special is that it works across tablet, phone, wide desktop and desktop. So if you look at this on your mobile device, and I encourage you right now to do that so we can get some extra visits to the website.

You’ll see that it’s a lot of the same design interfaces it’s just what we did is tablet is a two grid across, a phone is a one grid across. It very much makes sense, I appreciate the design thought put into this, but when I was given it, it was static flat files in CSS so I did not have to do front end development of CSS, I did not have to do front end development of the mark-up. But we were tasked to take this site and bring it to life.

So what you might do is create a theme options plugin or something like that you know we have some of those or you could do what we did and take our thing. Okay, so what did I just do there? Nothing special. This is just a type, this is post meta, this is going to be stories posted. We’ll be looking at different options, so site options, we’ll be looking at posts and sorting posts meta. Your member tools, it’s going to be sorted as user meta.

There is zero custom tables in our WordPress install. That is on purpose, zero custom tables alright, so all of this is default WordPress and there’s nothing special going on here. So what we’re doing is live previewing – if I had a sponsor label, that would override this.

So all this is is the same stuff you’ve done on the server side, the templating, your wp theme thing, we’re now doing on the client side as well. Where we’ve gotten away with this a little bit better is we’re using front-end. We’re using handlebars for our templating system so we’re able to use php, the same templating system that we use on the front-end, which is a little bit of a cheat.

Another big benefit of this is we can prepare advertising campaigns for free, live them up, screenshot them they’re done without ever actually pushing any code, making any changes.

The one of the big challenges with this is that you have to account for all the different states, so if I remove the sponsor text. Either it’s going to show a bug or goes to live preview cause you have to think about all the different possible UI states you’re in and implementing them in multiple places.

This doesn’t come for free, but you’re able to do some other cool things, so I guess I’ll show a couple more. Davis did you save some images to this machine for me?

- Yeah, on the desktop.

Excellent – I’m going to use this very cool image picker tool, alright and now what I’m going to do is update the promo block. What I’m going to do is just I picked a file, using the file picker, it’s chugging along and probably uploading it right now, and I’m able to see what it looks like now, right?

So this is called a promo block image and what that means is it comes with aspect ratio. So this is inspiration from the “Don’t kill the kitten” if you’re a developer you’ll get that joke.

I’m able to see what the image looks like so we’ve got a photo editor who tries stuff out. She figures we’ve got these boxes that are blocking some of the action so we don’t want to get heads cropped off or things done and they’re able to just go in and test it.

Another big benefit of this is we can prepare advertising campaigns for free, live them up, screenshot them they’re done without ever actually pushing any code, making any changes.

A couple of really cool things going on: we do, this is more than what you’ll find in TwentyTwelve, right? So what you’ll find in TwentyTwelve is a wallpaper tool, and that’s how we found this, we were like “okay, this is really cool”, advertising wanted a wallpaper.

I was like “dude, WordPress has got this covered no problem” pulled out all the customize tools, we had one tool in here it was the wallpaper. Designers come back and say it has to be responsive. That means we can’t use one image we have to use three. So we had to look into how do we customize this thing.

Turned out it was a breeze, we were able to do this in a weekend. It’s just that the site becomes a lot more alive and as you’re promoting, as you’re curating, as you’re calling stuff out, you’re able to actually see what it is.

So now I have the journalists and the editorial people paying attention because they don’t use tools like these at most places, right?

You end up in preview hell where you’ve got the preview button to go back tweak, the headline didn’t fit, didn’t break right, go back, tweak the headline, didn’t fit, you publish it, you find out you go in the most popular box, it doesn’t fit in the most popular box, you have to edit your headline again to make sure that it fits in individual places.

It’s just that the site becomes a lot more alive and as you’re promoting, as you’re curating, as you’re calling stuff out, you’re able to actually see what it is.

What we use is these tools to allow us to customize the headline for any given spot, so when I save this promo block headline, it becomes post meta, and only on that promo block.

I can do it down to the channel, we can have these support in post meta food promo block title, entertainment promo block title, anything you can think of can be customized on this thing and it’s mostly happening through these tools.

Pull open another tool really, I’m trying to get through this as soon as possible. I know that I’m the one in front of you guys to drink and that’s not cool, trying to get through.

Allowing these are article tools and so this is going to be the heart of what this article level data is the [...] to journalists and allowing…oh awesome, allowing, thank you, what did I put there?

If you’re going to create tools start, oh great, so we have a sheet right here.

It’s an ad, it’s taking over the iFrame, it’s trying to inject it into the parent, terrible coder has ruined this for us. Not going to be able, whatever, I can go through this, it’s making me do it, and again did I say, visit parade.com?

Anyway, so I’m just going to show you the tools since we, and our advertisers [...]If you can see this, what we’ve got, It’s just so much cooler to see live previewing but what we’ve got is this thing over here communicating the iFrame post mentions over here and then it’s just terrible.

Everytime you talk of one of these options something happens on this side so…trust me, it works. We have things like drop caps, which is like cool for designers but make no sense if you write a lead with just one sentence in it, it makes no sense.

So the designer, no offense, wanted us to put these things on everything and i’m like no, because it just doesn’t work so we always create an escape and our tools are our escape.

There’s nothing that doesn’t flow through WordPress in our system. But you want to be able to give humans the ability to interweave human touch inside of that algorithm content.

So we apply our default behaviour to everything and that allows the tools to override. So featured image is always shown by default but you can disable it because it doesn’t make sense sometimes to have an image followed by and image followed by an image drop cap. Mark, it’s this little print thingy at the back of the article and sidebar will make it look all fancy on the side.

You can pick which channels this indicates to. I don’t like to have content management in the tools themselves but we do this because our editors are pressing us to have one spot where they can edit everything.

What you can do is set the primary channel and that carries that colour that you saw around the thing, you can choose which promo blocks to send it out to.So I’m at the article level, I want this to appear in the home page on the first slide. I go ahead and save and publish it, it will appear there. Go through the rest of the tools – pins and spikes that’s a really cool concept

I’d love you guys to adopt pins and spikes are just “I would love this to be at the top of the stream”. What we want to do as developers is provide algorithm content. Every piece of our streams flows through wp […].

There’s nothing that doesn’t flow through WordPress in our system. But you want to be able to give humans the ability to interweave human touch inside of that algorithm content.

The way we do that, the way that we chose to do that is something called pins and spikes, where pins will force something to the top of the stream, spikes will prevent it from displaying the stream.

Add units, we have apps and they need to manage things I don’t want to give them editor rights because then they can delete content so what we do is give them edit ability to look at the page.

Edit the add units on the page and make those changes in here and then we don’t have to give them full on wp admin access, we just do a little bit of fancy stuff capability and we give it to certain users.

There’s that drop cap I was so angry about which you can imagine (it looks lovely) it looks lovely says the designer of the drop cap. You know, it’s a website, there’s nothing special…

Parade is very special, we are an amazing company, we are a unique butterfly, but we are just like every other, we’ve got categories and tags there’s really nothing too special.

And you guys, I would encourage you to slay the beast, you know. I don’t mean to pick on the Washington Post who by the way is one of our best partners and carries our stuff on Sunday thank you very much. Like just kill the old CMS, it hurts, it hurts really bad, but it hurts a lot less than having to maintain two systems, having to get these guys to talk together.

And if you need something like tools, don’t let WordPress get in the way. WordPress has a tool available for you, so I’m just going to call it there. Basically there’s a whole bunch of port function that you guys can hook into your devs.

If you try to invent a new interface that will supersede it, surpass it, be better, you’re wrong, you’re wrong.

Like I have this example code, this GitHub repo you can clone like copy these ideas, that little disk is that demo so if you guys want I could experiment with some of these content, the only key is that there’s this parameter called URL loophole and you have to figure out how to translate your URL back into your WordPress post.

So if you guys were here for the last WordPress meetup, I would espouse the Quartz model of URL. I don’t know if you guys remember that talk, but they had the unique identifier in the URL, it’s awesome, we also have the author slug, the user name in the URL itself. ‘Cause then you can do translation back to the author itself with that data, it’s good for analytics, it’s good for all this.

The only trick is that you have this get parameter and you have to decide what tools you want to display based on the get parameter. So if you have really crazy URLs you’re not going to be able to easily translate that back into “oh these are tags, this is a tag page, you need to show me a my tag page, this is a member page so I need to show my member page tool”, you’ll see in the code that’s there’s like full on examples for everything.

You basically register sections, sections are like these drop down things, you register settings and like attach a control to it and then WordPress takes care of the rest and then you just have to field the data as it’s coming in and figure out where to store it. Not complex stuff, we were able to get the core promotional tools running in a weekend, no joke using this code base and I would encourage you it thoroughly.

So if there are any questions, i’d be happy to take it. I have these fancy USB sticks for people who ask questions because I’m sure you guys are burgeoning with them.

There’s a PDF with a link to our website. I’m not sure who created that marketing campaign, you should go ahead and go to our website directly.

Questions, can I answer any questions.

Q: Are you previewing those things, or were they live?

A: Ah, live previewing, that’s crazy right? So what you’re doing is manipulating the dom, and you’re going to have to manipulate the dom in the same way that you’ve been manipulating the dom in Javascript.

You do it in Javascript, what you do is you get a promise from the WordPress customizer API and anytime that value changes, at some point in the future, you get a call back that happens and then you decide what to do with it from there.

You get the key and the value, so what we did is we ended up doing a lot of like hacky-ish stuff, one of our really cool tools just like no demo of whatsoever, so you can drag and drop stuff and update stuff, that’s really cool.

The way that we’re able to do that is we smuggle data into the keys. It’s really bad practice in general, but it’s awesome with this I’ll tell you. So you can make those keys as long as you want, you know, we put the pin order, where it came from, all that data is in the key. I just read the key and it tells me what to do, I have a function that basically parses the key and figures out what to do from there. Very very simple stuff.

But it’s live previewing, so only when you hit this save and publish button do the changes that are here which are being updated in this form field but they are being reflected over here, this is the actual website.

I’ve done nothing to edit any code here until I can update and then I’m just updating post meta values, site options and user meta that ends up being displayed on the site. The huge caveat there, the huge caveat there is that as soon as your editors get on the crack that is editorial tools, we call these surf and edit tools because you surf and you edit. At the same time, they will want everything to update immediately which as a large website, is like no way, we have 12 caches, and no.

So what you end up having to do is create some sort of API that listens to update meta events and figures out where to cache, where to purge the caches. We’ve got literally thousands of places to be cached, for data to be cached. We have one call to action called purge post, give it a post id and it purges all of the locations for that.

So as a developer it’s not for free, especially if you’re on a large-traffic website, but we’re able to, I mean we run all of Parade on WordPress, it does all of our templating, it does everything.

We use maybe three web apps, we’ve got a master/slave database and then cache insets and that’s it. Very vanilla install, we’re talking like $800 a month to run as far as infrastructure costs go. Not human costs, we have our op, we have our dev, we have me and a couple of contractors and all that. But it is, like you’ll save tons and tons of dough if you’re to be doing this because you’ll live and preview it at the same time.

Q: So you can have another radio button that says disable?

A: You know that actually, I have one probably, yeah that’s exactly what we do. If it’s a real preview we actually disable ads. Customize previews are these weird beasts where they’re like supposed to be friendly you know stuff but you get this action where it’s like a customized preview so you get some Javascript in there to be able to handle all the post events. But yeah, exactly, we have all our eds tools are basically turning them off.

Questions, can’t throw it to you, fancy USB key, I know you want it, right anyone else? Questions?

Q: What about the front end for the actual composition, where they have to do some fancy [...]?

A: So this is huge and important and I want to impress this upon all of you. All of what you see here is promotional stuff so I talked about how I’m uncomfortable with the fact that there are category check boxes in there. I’m uncomfortable because WordPress admin is the single best CMS admin tool on the planet.

If you try to invent a new interface that will supersede it, surpass it, be better, you’re wrong, you’re wrong.
What we do is we don’t touch wp-admin, we provide all of these tools also on the wp-admin site because there are power users who love to be in HTML mode, in wp-admin, have their custom fields shown.

Some people will manipulate some of this data, it’s all in custom fields mostly at the post level, they’ll do it by hand but we don’t want that to be the training on day 1.

We want to be like “here’s you article, if you want to change the headline, do this” but that’s all that the headline is, it appears on the food channel, or the promo block channel or whatever.

If they’re actually editing the headline itself, they’re doing it in the WordPress backend, because I very firmly believe that the WordPress backend is the single best place to edit.

Q: Do you end up duplicating the [...]?

A: yeah so that’s other huge issue and that’s why we moved to client side templating. Because what you’re going to end up doing is it’s not just duplicating code, it’s like duplicating code and doing backflips while doing it.

Because when you try to handle this scenario, where you got stuff on our member tools, like you can edit your social stuff like website title and all this, like okay, if you have a website title but you don’t have a website URL, you can display it.

So it’s not like you can just take the code that you have that already constructed this thing together and just display it again, this is one of the other problems that’s really slow.

What it’s doing is WordPress loads, it loads the page inside of it, this is a page it’s our deepest and slowest page that’s why I chose to load it. It’s got 100 items on it, even if one of these items passes through our promotions API…that was like 5 seconds.

No it’s longer than that, rendering time each one of these goes through and goes “I’m on a member page do I have any special headlines here ” and all this. So there’s also that overhead of tons more queries.

You’re talking about a lot of very small queries, unless you’re loading all the data up front and passing it around all your objects.

I wanted to show some of the crazy stuff, which is like I have a website title and that makes no sense if I don’t have a URL but now it shows up and then it’s got the website title but then I remove the website title and it figured out to use […].

So like you have to handle all these cases, it’s not as simple as being a client site template gallery where it’s just slap the data object into the template, it’s got the handlebar things it looks good you have to think about all the corner cases and like before this demo I was like if you looked at our GitHub if you guys want to laugh.

All the bugs I had to like I wanted this demo to go better than it did with the ad there and I was making sure that all the corner cases worked that if you like have show email disable, okay here’s a great one…

So you have show email disabled, but then you click show email, well your templated code doesn’t have an email, cause when the page loads, it was told not to show the page, so nowhere we have this best practice where we wouldn’t move a dom element if it isn’t needed.

We don’t leave it empty because it can have averse design effects so we don’t remove it entirely, which means if I want to show email first I have to provide this preview with the email beforehand or that featured image that I told you about that was like right here.

If that’s disabled on page load, well in this customized view, I actually have to load it anyway and then I hide it, and then when they want it, I show it.

So we’re talking about not just duplicating code, we’re talking about backflips while doing it so it is not for the, you’ve got to really know what you want when you do this thing, and what I would suggest is you come up with exactly the form fields and mock it out in photoshop, figure how you want it and figure out the behaviours associated with those and then code.

‘Cause otherwise you’re going to find yourself in all these weird corner cases that you won’t know how to deal with.

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.

Metro UK’s Powerful Content Algorithm – Now With Full Transcript

At our first London WordPress Big Media & Enterprise WordPress Meetup,  Dave Jensen (@elgrom) from Metro UK (hosted right here on WordPress.com VIP) explained how Metro continually experiments with their content algorithm to promote and feature the most interesting content for their readers and increase engagement on their site and mobile apps.

Dave recently shared some insight on how Metro UK has grown 350% through some growth hack experiments, so he provides another great inside look on what Metro has been doing internally to tweak their site content.

Below is his slide deck and the video from his presentation which we’ve shared previously, and we’re publishing it again now with full transcript below. 

Welcome, I’m Dave Jensen, I’m the head of development for Metro UK. We’ve been a WordPress VIP client since about December 2012. I think we’re one of the larger enterprise, largest publishers in the UK that use WordPress VIP.

So we’ve been playing around with all sorts of different crazy ways of interacting with our content for the last while, when we first released, we had this whole swipe based interaction that we’d been using which was fun to build, a little bit too complicated. Over the last while, we’ve been playing around with how we could automate some of the placement of stuff on the page so, our algorithms.

We’re a pretty lean operation. Maybe some of you won’t see this as lean but for big publishers there’s 6 developers, 20 people writing content all the time. We have a 24/7 mindset though, so we have champagne aspirations on a beer budget. We’re always doing constant experimentations of how a development process works.

We’ve kind of gone through a process of building something around some kind of trending content and we’ve kind of stretched that out into a kind of newsfeed and this is what we’ll go through today.

How can we do something clever and combine those into something that we might be able to move up the page and take over?

So basically we started collecting a whole bunch of data sources just to begin with, it started as one of our guys needed a dissertation project. So we grabbed a lot of data from Facebook, shares likes, comments, grabbed some information from Twitter, from Omniture, which is our analytics and from WordPress, so we can kind of build everything together.

We took all this data and stuck it in MySQL, then we started doing some pretty basic calculations on that. I wanted to keep everything really simple, so the feedback loops that we could have from everyone involved, they could all feel part of this process and having them engaged with us, is gonna give us a lot of benefit.

Because you know, with running some crazy big data thing, and nobody understands what we’re doing, they can’t tell me when I’m doing something wrong – which is really often. So basically we took the views, we took the social interactions and we times it by a multiplier, we get a score.

We ran this every half an hour and every half an hour, we took this one from the previous one and it kind of gave us a rate of change, a number that is going on. When we released the new site, we were lucky enough to convince the editorial team to stick this at the top, second thing down on the homepage, underneath their thing.

It might sound funny, but editorial people are usually pretty protective around what they put on their homepage, this was a reasonably large step for them at the time.

We also kind of snuck in our sidebar program, so we were pretty interested to see the top bit here. It’s how the trending stuff does the bottom bit is kind of how the clicks on the top stuff work.

We were pretty interested to see that even without all the images, having it text based underneath that there was a real pretty similar level of interaction between the two modules. So we thought we’d probably stumbled across something which was interesting and seemed to jive with our users.

They also changed 24/7 without anybody from our team kind of having to touch it, which was quite nice, so on a Sunday morning, before anyone was in the office, that was still reasonably fresh.

It also, from a commercialization point of view, gave us a way of promoting native content and some kind of native display units to hopefully play around making some more money. ‘Cause it’s always nice to do that.

So from that, when we removed swipe from the site, it was far too complicated, we went down kind of a hole, we started playing with a stream of news. At the bottom of the homepage we just grabbed the latest posts and we put them in a kind of you know page, infinite scroll-type approach.

This got quite a high level, we were really surprised even that the bottom of the homepage, kind of screw it away, at the number of interactions that were getting within this.

There were a lot of people kind of scrolling, playing, clicking around, from that we thought well we kind of have this trending stuff at the top, which is doing quite interesting and we have all these people clicking on these kind of lists down here at the bottom.

How can we do something clever and combine those into something that we might be able to move up the page and take over?

So the timeline is pretty straightforward, it’s just kind of sets the thing. The interesting thing was that we took the information that we calculated and put that back into WordPress to be post meta data and then we used that information to style the front end.

So the big image over there was something that was within the trending, the second one down was just normal one and the one at the bottom was something that had been promoted by an editor.

The neat thing was there was a high-level of consistency across all the platforms. We have a responsive site and it worked quite well.

We were kind of like, even just within a normal time-based feed, we were using the data that we had to change the appearance to give the stuff that was popular a larger percentage of screen time, even in something which was time-based.

Then we started playing around with some advertising and things that looked less like advertising and more fit into the style of the site. The neat thing was there was a high-level of consistency across all the platforms, we have a responsive site, it worked quite well. We were playing around with that and we spent lots of time optimizing it and all the graphs went like that which was pretty neat, so I was enjoying myself on that.

The next kind of phase of this was you know, when we were playing around with the trending stuff, it was great but recency was a real problem that we had. Cause you know, you had to get all the data to the point and then it was what was the biggest one between them.

So we had to come up with a simple calculation to you know call that up and so we just introduced a coefficient to that, to kind of give it a shape and boost things up, which were very early on, to allow to give them a bit of airtime and get them closer to the top of the streams.

So add a coefficient to the end and just by taking that, and giving it a score with the coefficient, we built something which seems to get a, seems to be performing pretty well.

We’ve been optimizing that in quite a high-level gain and you have some graphs going up, so the scrolls and clicks. First of all we track a lot of information, so you can see down at the bottom, from going to timelines when we started to newsfeed version to infinite. Each one of those had a gradual increase.

Our statistics, some of the biggest learnings that we’ve had is because we have such variable traffic numbers.

In order to figure out actually what’ going on, we had to break everything down per daily active user which was a kind of,it was a bit one of those moments, like “why didn’t I do this before”?

Because it’s just a kind of number, we can say “hey, you like news or sports”, give them another 5,000 views and the things you read are much more likely to be closer to the top.

When we moved from a time-based feed to a news-based feed, clicks increased by 9 percent across the board, which we’re quite happy with. This has allowed us to kind of take over the homepage and it’s kind of the third thing down.

We’ve been A/B testing and content density, is one of the things we’re moving towards kind of increasing the content density, even more things on the page…more opportunities to click, more people click.

Infinite scroll had a pretty big impact as well because if you stop content then people leave and they don’t have the opportunity to click. Then we would get some good clicks on our native display and the content drivers to native content.

Some of the lessons learned…Content volume is a big problem and kind of a bit of a beast that you keep on feeding and if you don’t feed it or you give it too much of the same type of content, I get complaints, because then it kind of looks clustered within that.

Because we’re running on a scale, we’ve had some pretty fun times with MySQL and Cloudfront. Making sure we cut all of the caches at the highest level, so kind of cutting it at a category level and not playing around with it too much beneath that has allowed us to keep that going, keeping everything fast. The faster things load, the less people notice that and they click.

The common understanding has definitely helped us get feedback throughout that. so some of the things we learned from a WordPress point of view.

So we’ve been using this VIP caching thing to be able to grab the first page of information and make it kind of available and part of the page rather than having to go into it grab via ajax.

That’s the third thing that, down on the homepage. If something falls over, making it always there is good otherwise I get shouted at.

We have also with the API, we built, we actually mimicked the public API’s format,so we can kind of interchangeably use our API versus the kind of latest public API stuff, which is probably one of the quite nice hacks that we did. We were playing around with storing lots of stuff in large options for a while but that didn’t scale very well and we were using post-meta to store information.

We’ve also been playing around with CHEEZETEST to kind of give us the kind of A/B testing results but it can add quite a lot of complication if you’re trying to test too much with it.

So we took a kind of microservice architecture approach to this. We kind of have a service for data mining, a service for the newsfeed, a service for the commercial feed, which keeps all the services quite nicely separated.

We’ve been using Backbone for the templates and Cloudfront for our caching. We’ve also plugged it into an Android app, that we’ve built which has been quite fun which is just a top 10 stories on the site any one time. We are been able to pass in the channels people read and give them a boost up.

Because it’s just a kind of number, we can say hey, you like news or sports, give them another 5,000 views and the things you read are much more likely to be closer to the top.

Of the thing which would be fun, a few installs to that marketing still, the biggest fun challenge we’re having with that… and right on the money, thank you for listening.

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

Building community at TheBlaze.com – Big Media & Enterprise Meetup New York

Kenton Jacobsen from The Blaze presented “Building community at TheBlaze.com” at the recent Big Media & Enterprise Meetup in New York City.

View the presentation slides below:


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.

USA Today’s World Cup and WordPress.com VIP – Big Media & Enterprise Meetup New York

Ephraim Gregor from USA Today presented “World Cup and WordPress.com VIP”  at the recent Big Media & Enterprise Meetup in New York City.

View the presentation slides below:

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.

Edelman: Activating a Global Workforce of Bloggers – Big Media & Enterprise Meetup New York

Jon Silver from Edelman presented “Activating a Global Workforce of Bloggers” at the recent Big Media & Enterprise Meetup in New York City.

View the presentation slides below:

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.

Evolution of the Forbes Publishing Platform with WordPress – Big Media & Enterprise Meetup New York

Vadim Supitskiy  from Forbes.com presented “Evolution of the Forbes Publishing Platform” at the recent Big Media & Enterprise Meetup in New York City.

View the presentation slides below:

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.

Migrating to WordPress for Publishers – Big Media & Enterprise Meetup San Francisco

Chris Scott from Voce Communications presented “Migrating to WordPress for Publishers” at the recent Big Media & Enterprise Meetup in San Francisco, California.

See the presentation slides below: 

The San Francisco Big Media & Enterprise Meetup was held on June 17, 2014. Check out the other presentations from the event.

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.