Nearly 30% of the world’s websites now run on WordPress, which makes it the most popular web development platform. As a content management system WordPress has a market share of 60%, leaving the competition far behind (second in line is Joomla with a market share of a mere 6.6%).

The ecosystem of the open-source CMS is massive: there are around 40,000 free WordPress themes, and 45,000 free plugins. Web developers continue to innovate on the platform, so we wanted to present a roundup of some of the best sites, running on WordPress, that launched or relaunched this year and unveil a unique behind-the-scenes look of how they were created.

The resulting list is a real snapshot of WordPress in 2017. It’s used by organisations of all sizes, often heavily customised, and — due to its flexible nature — can integrate with some of the most cutting-edge techniques in web design and development today, giving a lot of control to content editors, while keeping the needs of the users in mind at all times.

Enjoy!

Amnesty International USA

The website redesign that Amnesty International USA launched in May 2017 was based on a six-month project that defined a design system to reinforce the branding, which would make it easy to implement on any page of the site using WordPress, Bootstrap 4 and Advanced Custom Fields.

Senior web developer and digital technology manager Daniel Schutzsmith explains: “Amnesty already has a Global Identity Toolkit that provided the outline for how we should use typography, images, colours, and even content for the new website. We looked to a terrific social impact design studio founded by two refugees out of Brooklyn called Hyperakt.”

“After months of stakeholder interviews and exercises, they created several different types of modules that we could place on a page to create a unique design. We then developed the WordPress site in-house and focused on bringing this design system to life through the Advanced Custom Fields plugin and its Flexible Content field. The result is an easy interface in the edit post screen for any user to be able to add, edit, or remove different design modules at will.”

Love for Iceland

Love for Iceland is a unique and very content-heavy tribute to the nordic country, built by Spanish studio Veintidós Grados.

According to co-founder Vicente Lucendo the biggest difficulty was to integrate all the content. The team wanted to add a spin of creativity to the traditional blog structure, while keeping usability in mind, and focused on the navigation to make it easy to use and more app-like.

“We used the WordPress REST API and developed a front-end application with a custom fields plugin that allowed us to have control of everything,” Vicente explains. “It was important to be able to show the content immediately, so we developed a preload system in the background that anticipates what can be seen and has all the content ready when the user requests it.”

For the backgrounds, the team used a displacement map made with WebGL, but as that’s bad for performance they had to be very careful with the rest of the animations to prevent janks and FPS drops as much as possible

The site won a very rare FWAWWWARD award, only given to those sites that manage to win an Awwward and an FWA award on the same day.

Toilet Twinning

Toilet Twinning is a water and sanitation initiative, run by Tearfund and Cord, with a novel approach to fundraising: you donate £60 and get a certificate of a latrine in a developing nation with which you ‘twin’ your own.

The main website is based on WordPress with version 5 of the Advanced Custom Fields plugin. Joe Lambert, director of Rareloop, says they chose it because of the amount of control they can give to content editors.

The customised setup also relies on a couple of open-source frameworks to help make the site more secure and maintainable:

Bedrock: provides proper dependency management of third party packages and plugins via PHP’s Composer.

Timber: provides access to the powerful Twig templating language, so you can separate view and controller code.

Joe Lambert explains: “We also now build all our sites using an open source pattern library we created called Primer. This enables us to build and test all components of the front-end of the site in isolation without having to worry about where the data that powers it comes from. We’ve found this componentised approach to front-end code has really helped us to build out re-useable ‘design systems’ rather than a series of hard to change templates. Our WordPress setup integrates with Primer, so that the same Twig templates are used between the two. This makes iterative changes much easier to manage and allows for the pattern library to be a living document post launch.”

Stories for Good

Stories for Good is an independent online publication that features films, photography and articles about important issues around the world.

It’s one of designer Christopher Dowson’s favourite sites of the year. “I’m always excited by seeing a simple idea that has been really well executed, and Stories for Good just ticks all the right boxes for me,” he explains.

“There can be a temptation with WordPress to over-design a theme. After all, there are so many bells, whistles and widgets available that it’s easy to shoehorn in a lot of functionality and then attempt to find a use for it later. This site has clearly been designed away from the CMS, with WordPress’s inherently flexible feature set easily integrated to create a fast and powerful experience for users.”

Chris also highlights security concerns. As the most popular CMS, WordPress is also the most targeted but any indication that Stories for Good is based on WordPress has been carefully and cleverly concealed. This will keep it safe from even the most determined of would-be attackers.

Institut Kunst

The official website of the Art Institute at the Academy of Art and Design in Basel, Switzerland, focuses on what it wants to teach: art.

It follows an uncompromising movement that rejects mainstream web trends, called ‘web brutalism’, named after architecture characterised by simple, block-like forms and raw concrete construction, which flourished in the 1950s and 1960s. The term was coined by Pascal Deville, co-founder and creative director of Freundliche Grüsse, a full-service creative agency based in Zürich and Berlin.

In an interview on his site brutalistwebsites.com, the art institute’s director Chus Martinez explains that they chose a brutalist design “because it defeats corporate visual standards, and it really suits the purpose of leaving a memory behind.”

The site was designed and coded by Dan Solbach and Esther Hunziger, artist and teacher at the art institute.

Stanford eCorner

Web development and strategy agency 10up partnered with Stanford eCorner (as part of the Stanford Technology Ventures Program) to redesign their website, and migrate its content and users to WordPress, with audio and video files hosted on Kaltura.

“eCorner’s mission is to educate the masses about entrepreneurism — that it’s not just for engineering or business students but for all,” explains 10up’s senior web strategist Ruth Rosengren. “The challenge for our team was two-fold: First, strategically, how to organise the content in a more meaningful and categorial way (they previously organised by type, for example, video, podcast, or article) that’s also easily digestible, and second, integrate their media with Kaltura and Rev for hosting and transcription.”

The site utilises a number of post types and also allows visitors to register in order to save collections of content for later consumption.

MAKE International

Keith Brymer Jones is a British potter and ceramic designer as well as a judge on the BBC’s The Great Pottery Throw Down. He’s also the director and head of design for designer ceramics and homeware store MAKE international. The company ended up running five separate ecommerce sites, and one of the major drawbacks was that the inventory had to be regularly and manually updated to avoid stock levels falling out of synch with the other sales channels — a labour-intensive process that was prone to human error.

Web consultancy Narrative Industries chose omnichannel retail management system Brightpearl, which comes with a built-in CRM, accounting and a powerful API, but found that the WooCommerce plugin that’s available for Brightpearl fell short of their ambitions.

Founder and digital strategist Alec East explains: “We built our own Brightpearl connector that can handle real-time inventory across multiple sales channels, but also takes advantage of the multi-currency, retail and wholesale, customer specific pricing, multi-lingual support, and a host of other enterprise level features that Brightpearl offers but the standard plugin doesn’t support. We wrapped it all in an elegant queuing system for those times when connections break, to improve reliability.”

MAKE now has just two sites: one for Keith Brymer Jones and one for the multi-brand. Since the launch in August, conversion rates across both sites have doubled, the bounce rate is down from around 37% to just 2%, and average order value is up.

Mendo

Build in Amsterdam, who won the awwwards ecommerce site of the year 2016 for Protest Sportswear, have created an ecommerce experience for Mendo, “a candy store for book aficionados”.

Back-end and front-end technologies of the site include WordPress, WooCommerce and Backbone plus Marionette. The site features a custom search function and a smart algorithm for book suggestions. If you click on the button “+ how big is this”, you can compare the book with a pair of glasses, a charger or even a pizza slice. There’s also a homemade responsive lazy-loading, parallax and animation set.

Since Mendo launched the new site, its sales have increased by 70%.

Simply Chocolate

The online shop for Danish chocolate brand Simply Chocolate is made on a base of WordPress and WooCommerce and — on the front-end — out of 99% of JavaScript, using Pixi.js, React and Redux.

Pelle Martin, founder and creative director of independent digital product and brand experience company Spring/Summer explains: “It has a few restrictions but we made a big effort in making it feel and seem integrated throughout. The checkout actually is a separate setup. The concept is tied together when you finish your checkout, and you get a little message from one of the bars that you have just purchased.”

The site also makes use of a few plugins and a tool called Texpack, which Pelle says they compiled on their Digital Ocean droplet to generate spritesheets, all of which are then compressed using Pngquant, an image optimisation tool for the lossy compression of PNG images.

StoryCorps Archive

The StoryCorps Archive comprises one of the largest digital collections of human voices. Their private interview database was on Drupal, while the mobile app used WordPress and PhoneGap.

10up worked with StoryCorps to write a grant application to secure the funding to combine both platforms and built a new site, together with the in-house development team.

“The archive is a public facing site that utilises a customised REST API to connect to the mobile app and store interviews recorded by users directly to the new combined database,” Jay Moore, senior web strategist at 10up, explains. “Leveraging the power of Elasticsearch and ElasticPress (10up’s search and query engine for WordPress) to expand the capabilities of WordPress, the new product makes navigating the more than 100,000 interviews intuitive, and efficient for research.”

Olivine Life

Built using WordPress and WooCommerce, Olivine Life is an online interior design service. The key feature is the ability to design your own room by adding fabrics and furniture to your board. You can then either get in touch with the interior designers behind the site for a consultation or simply buy everything from your board.

Kirsty Burgoine, lead front-end developer at Fisheye, who built the site, says that setting up the products was a big challenge and required quite a lot of customisation.

“There needed to be an option to buy a cutting or to order a certain amount of metres of the fabric,” she explains. “High value items like sofas needed links to external sites, where you could buy them, as the interior designers couldn’t keep everything in their own warehouse. In order to create these options, the site used a number of WooCommerce product extensions like Composite Products and Product Bundles. It also used a very customised version of a wishlist facility to allow the ability to create your own boards.”

 

What were your favourite WordPress sites of the year? Let us know in the comments below.