When we first began working with Cowgirl Magazine, they already had a pretty fast site thanks to their full AMP compatibility. They were, however, using a proprietary AMP plugin. Because of this, they effectively found themselves tied to the plugin maintainer for design and functionality updates. As their vendor became less and less responsive, Cowgirl Magazine approached XWP asking for a way out of this situation.
During our discovery phase, we found that the proprietary AMP plugin was tightly coupled not only to the current theme in use, but also to several extensions providing Cowgirl Magazine with some key functionality: ability to customize layout, tools to place and define ads, set up campaign overlays, and place campaign widgets. Three key requirements became clear:
- We had to break the vendor lock-in…
- without affecting the ad revenue…
- while maintaining the general look and feel of the website.
To free Cowgirl Magazine from this vendor lock-in, XWP recommended a technical migration to the official AMP for WordPress plugin. To keep the budget lean, we also set out to identify a modern, AMP-compatible replacement WordPress theme that would support industry standard publisher tools and plugins. Enter: Newspack.
Newspack Takes You Far
Newspack is a commercial publishing platform run by Automattic on top of WordPress.com infrastructure, but its key technical pieces – the Newspack Theme and Newspack Plugin – are both open-source and packed with publisher oriented features.
We ultimately chose the Newspack Theme and plugins to replace the legacy setup, because Newspack, even in its default state, takes publishers much closer to the finish line by doing several key things just right.
1. AMP Compatibility
Newspack integrates with the official AMP plugin seamlessly and is even officially recognized as a compatible theme. For Cowgirl Magazine, we just enabled the AMP for WordPress plugin with the Newspack Theme and we were running a valid AMP site in minutes.
2. Modern Front-End Layout
Newspack’s front-end code utilizes flexbox layout. This allows developers to reorder elements on the page without changing page markup.
Why is this so important? Every publisher wants their site to be unique. That often includes changes to the layout of the theme, which in WordPress is usually solved by creating a child theme that overrides certain templates of the parent theme.
By limiting the amount of overridden templates, whenever the parent theme is updated, new features and changes are more likely going to be applied to the site as intended. Keeping the amount of overridden templates down helps maintain the site.
On the Cowgirl Magazine website, we were able to reorder items in the header and the footer of the site to match the previous design without changing the underlying HTML.
3. Open Ecosystem
At its core, the Newspack plugin assembles and configures other publisher-oriented plugins. Newspack builds an ecosystem of tools that works well with some of the expansion plugins being developed to be primarily used on Newspack enabled sites. Doesn’t that lead into another vendor lock-in trap? Fortunately the answer is no, because the system is highly modular. Even the few plugins that are required can be turned off after the initial setup.
Don’t have a use for Newspack Blocks? Don’t install the plugin. You don’t want Newspack Ads to manage your ad units? Swap it for an alternative ad manager. Don’t like Newspack Campaigns? Feel free to use another plugin or your own implementation.
4. Compatibility with Tools Publishers Care About
The Newspack plugin is shipped with explicit support for multiple industry standard tools WordPress publishers rely on: Yoast SEO, Jetpack, Google Site Kit and many more. On Cowgirl Magazine we had to make sure any solution we came up with paired well with Yoast SEO, which Newspack Theme does out of the box.
Where the Configuration Ends
We spent a day building a proof of concept site, which was enough for us to migrate a majority of existing Cowgirl Magazine website features on top of Newspack simply through configuration, which included setting up:
- A valid AMP site.
- Yoast SEO and Schema plugins.
- Majority of ad placements and ad unit.
- Campaign overlay and frequency.
- Mailchimp integration.
- Basic site layout, header layout and widget placements.
We were impressed how far Newspack has taken us without writing a single line of code. But Newspack is not a visual site builder, and configuration has to end somewhere. There have been a few customizations where we needed to roll up our sleeves and integrate some custom code against Newspack.
While the code is clean and well structured, we also encountered a few minor challenges. The Newspack theme exposes plenty of logical customization options through WordPress Customizer, but it doesn’t include many hooks that would allow child theme creators to modify the parent template output without having to override the whole template or resort to less conventional solutions like utilizing output buffering to capture and remove markup.
The same is true for the other Newspack feature plugins like Ads. While AMP ads are supported by the Newspack Ads plugin, more advanced customization like adding a rtc-config parameter to facilitate basic header bidding or data-multi-size to increase ad competition is not possible to achieve, because the plugin doesn’t define a hook that third-party developers could use to alter the <amp-ad> component output.
Still, such issues are not difficult to work around and the results speak for themselves. We were able to swap the AMP plugin and the AMP theme in the heart of the previous site with an unexpectedly low amount of effort while retaining the look and feel of the original site. We were also able to keep ourselves within the constraints of the client’s budget. And the cherry on top? The new Cowgirl Magazine site is faster than before thanks to less complex markup and styles.
XWP helps all kinds of organizations—from Cowgirl Magazine and Rolling Stone to Heavy.com and Answers.com—leverage AMP to improve the user experience of their sites in WordPress and beyond. To learn more about how we can help your site, fill out our contact form. We’d love to connect!
