WordPress is no longer just a blogging tool, as these brilliant examples of WordPress websites demonstrate.
Once regarded as just a blogging tool, WordPress has quickly become a fully fledged content management system (CMS) for professional web designers and agencies, used on millions of sites across the world.
Yet many still think of it as a tool for amateurs and hobbyists. To set the record straight, we've picked some of the best WordPress websites around to show you just what this incredible content management system is capable of...
01. This Is Your Kingdom
Designed by Katie Marcus, and robustly developed by Kim Lawler, the site is built to handle growing levels of content. Lawler used WordPress to allow site editors and guest bloggers to update easily and regularly, giving visitors plenty of reasons to return regularly.
The delicate, playful design hints at a wide range of activities shared on the site, and does a great job of being appealing and eye-catching, without being stereotypically girly or niche. Illustration plays a big part in the appeal of the site, paving the way for imagination and exploration.
02. Travel Portland
The beautifully responsive site is built on WordPress and uses a customised responsive theme based on Zurb's Foundation framework. Third-party APIs are also utilised throughout the site, including: Storify, MapBox, Weather Underground and ChooseCulture.
The team also used MaxMind's geolocation API to give them the capability to customise content on the homepage based on the location of the visitor. This lets them serve different information for in-town visitors versus those in the planning phases.
03. Worry Free Labs
On monitoring the website traffic, Jason Curry, founder at Worry Free Labs, says, "our web traffic from mobile and tablet has been increasing dramatically," so a responsive website was the way to go.
Like most web agencies, Worry Free Labs decided to make use of HTML5. There are some lovely touches throughout the site that make browsing on mobile an enjoyable experience, from the easy sliding and animation on the work page, and the automated reveal on scroll slides under services, to the swipe to send button on the contact form.
04. I Shot Him
"Over time, we've learned that our clients are pretty good at understanding the backend, so we've kept using it to ensure the ease of transition for clients," Jeter continues. "We've looked into a few other options but none of them have convinced us to convert."
05. Great Lengths Hair
Although the site is image-heavy, different images are loaded depending on the screen dimensions. The responsive navigation is also clean, easy-to-use and responds quickly to touch.
The site is built on WordPress showing once again how flexible and powerful this CMS can be. There are also a number of the new HTML5 elements used throughout the site such as <header> and <footer> . The popular Masonry library is used for positioning social elements depending on page width. The W3C Geolocation API is also taken advantage of to help users locate the nearest stockist of the hair products.
06. Toronto Standard
"The site uses mostly HTML5 and CSS3. One of the most important tools we used are CSS3 media queries, which allowed us to reorganise our dynamic grid to make an experience that always fit the browser size. On the backend, the entire site runs on WordPress so there's not a complex proprietary system for contributors to learn."
07. Harvey Nichols
"We were tasked with revamping the retailer's online presence and upgrading its website using the Magento Enterprise open source platform and WordPress. Pod1 worked closely with Harvey Nichols, with a team of 10 people on each side in constant communication to make the project a success."
08. Captain Creative
To manage James's online identity and leave enough time to save the world (wide web) he chose WordPress, "mainly because I knew I wanted a portfolio and blog combined into the one site," says James. He adds, "I don't write code so it also helps that it's widely used in case I run into any technical problems. I'd also used it previously as a CMS for other website clients, so I was familiar with the interface."
However, James warns, "It does have its downsides. I had a security issue recently where someone was able to modify the appearance of the site and even change my WP login credentials. Fortunately, I was able to sort it out without too much trouble. Lesson learnt: make sure you keep your version of WP updated!"
09. Little
The homepage features the amount of imagery necessary to showcase Little's portfolio of high-profile clients, but rather than serve the same assets to a mobile device that a desktop browser would receive, the images are optimised for Retina screens – resulting in a manageable page weight. It's a difficult balancing act between page weight and high-quality imagery, but Little has hit the mark, resulting in a beautiful design.
10. Poster Roast
"The project was an extracurricular activity outside of our working hours. This meant we had to be thrifty and work out how to cut out time spent learning new code so we could concentrate on the design. It needed to be reliable, with good support from its original designers via email and forums. It needed to take the worry of 'If I do this, will it break?' We've worked with the guys at Organic Themes before and they're really helpful.
"We used the excellent WP E-Commerce with gold cart plug-in. Tweaked for the specific usage of the site, we used the categories in a slightly different way to its intention. The plug-in is really flexible to cater for various uses and solid enough to play around with, without breaking it. The most useful element of this plug-in was its ease of integration within any theme structure. Widgets and short codes let you add categories and products wherever you need them, enabling you to drive traffic to where you want."
11. Viewport Industries
Asked what he's most proud of about the site, Whitaker replies: "Responsive images! We wanted to try out Josh Emerson's Responsive-Enhance script and had fun with the homepage. On a mobile device you will get black and white versions of the product logos; on the desktop view they're higher resolution and full colour."
Thanks to WordPress's flexibility, Whitaker took this further. "I wrote a function that generates a black and white version for every image uploaded, providing it is bigger than 400px wide. It's relatively easy to conditionally check for the black and white version and show it in the blog post's featured image. It's nice having this automated and it seems to be working well."
12. Tornobambino
"We've mastered WordPress in both full theme design and plug-in development, which is why we are able to create an almost custom CMS over the engine, keeping development costs low when compared to a full custom CMS coded from scratch." The agency usually develops its our custom WordPress plug-ins in-house based on a client's specifications. "And if needed, to keep costs lower, we customise open source plug-ins," adds Cau.
13. E&E
"We find WordPress to be incredibly flexible," co-founder Austin Mayer explains, "whether we're developing a portfolio site like Eyes and Ears or full-blown creative artist websites such as A Fine Frenzy or The Wall Flowers.
Also, WordPress has an amazing developer community. Chances are, if you run into a problem or need to refine a hangup in your code, someone has done it before and figured it out."
14. Jess Marks Photography
"Since we outsource most web and marketing related things these days, more people and companies are proficient in WordPress over ExpressionEngine, so it became little clear that moving to WP was a smart idea."
"Coming from ExpressionEngine, some things are much the same - the way you create posts, enter data and so on," recalls Bliesner of the transition between CMSes. "But WordPress is miles ahead when it comes to the availability of plug-ins - and overall ease of use."
15. Work by Simon
The studio focuses on design and development for HTML5, CSS3, mobile websites and WordPress - which has been their preferred CMS over the last four years.
"We love WordPress because it has the ability to easily translate designs to custom templates," explains Simon. "Another reason it was our top choice is flexibility for blogs and portfolio content. The portfolio section is easily controlled by using custom WordPress post types. Each thumbnail is uploaded with the featured image field, and tags are also applied to indicate the services provided."
The guys have taken full advantage of modern CSS3 techniques. "Creation of CSS3 animations for the Labs, Chemical Reactions and Observatory pushed my limits of animation using CSS only," Simon jokes. But as you can see their efforts have been worth it.
16. Branded07
Take, for example, the simple blog search form. Not only does it occupy an odd location, but it's designed in a far more interesting way than a simple box. The precision and elegance extends to many elements, such as the buttons, illustrations and even the pagination. It's just a WordPress skin that's wonderfully executed.
Throughout the site, you'll find layouts tailored to the content. With a CMS, it can be tempting to have a single layout that all content flows into, but here each page feels as though it's had special consideration to ensure its proper delivery.
17. Circa
More and more businesses are beginning to promote themselves on the web, and restaurants are no exception. Circa shares menus, recipes, reviews and special offers online. The customer's dining experience is of the utmost importance to Circa.
The restaurant wanted this philosophy to come across on its website. "Because we were able to clearly define the required content types and build custom templates within WordPress, it allowed us to be truly uncompromising with the graphic design," says Mosig. "The beauty of WordPress is that it allows you to create complex designs, which are ultimately maintained by a client with very few technical skills."
18. Web Courses Bangkok
"We release lots of content, partly for marketing ourselves, but mainly for our trainees to use," Carl explains. "The blogging roots of WordPress made it very easy to get the content out quickly and easily." Carl was most pleased with the flexibility of WordPress when it came to building the templates for his design.
"I found that other CMSs end up forcing you in one direction and with this redesign we wanted the CMS to work for us." Since the launch of WordPress 3 the platform is really starting to hold its own as a fully fledged CMS and the WCB site is a great example of what it's capable of. It's all a far cry from the 'cookie-cutter' implementations of the past.
19. Iron to Iron
They use WordPress for all of their client work, he adds. "It makes building any website easier, ours included. Automating things, from the portfolio content population to collecting contact form submissions, is one of the many benefits."
They're also using the Pods CMS plug-in to give them additional functionality and control of their content. Christopher is also a member of the development team for the plug-in: "We devote a consistent amount of time to that project in order to better utilise it," he says.
20. Eddie Diaz Design
"It has also given me better SEO and search engine results. I've noticed my site being ranked higher due to the CMS and the clean code and layout. I believe WordPress is a winner in many ways, and I've used it for other personal and client projects with great results".
21. Yoke
The guys selected WordPress as their CMS. "We can add posts seamlessly and easily, then set up good interrelated articles between these posts, offering the user a less linear journey through our content," says Bigford, who goes on to discuss workflow.
"Using WordPress enables us to speed up the build by narrowing the number of templates we use. We know we're designing for a CMS, so we're strict with our output and always stick to a maximum of three templates. This allows us to make sure we get fewer, tighter and more polished templates, rather than many, loose pages."
22. Grind
Magic+Might designed and developed the site in collaboration with Co:Collective and they selected WordPress as the CMS. "We leverage WordPress to manage content and templating for the site. WordPress is also used to manage the content for our members-area site, and our blog, the Grindist," explains Josh Campbell. "We picked WordPress for a number of reasons. First we wanted a stable, feature rich platform but without a large investment, that would be able to grow with our needs.
"We also wanted a clean management interface for our writers and editors so they can focus on creating great content." There is a fantastic community surrounding WordPress and the guys at Grind feel that this reflects on the kind of collaborative community that they are all about.
23. Guy Gungell
"After a fair amount of research and experimentation with Joomla, Drupal and WordPress, I settled on the latter for my own company blog, The Tinderbox. The progression to using WordPress as a CMS after that was a natural move," Adam explains. "In my opinion where WordPress really excels is the fact that my clients find it so easy to use.
"This means that with very little effort on my behalf, they can be up and blogging and tinkering with their SEO meta data the very same day the site launches. Custom post types are one of my favourite features as they make creating a CMS for a client so much easier."
24. Myjive
They selected WordPress as their CMS and I caught up with Ron to discuss their decision. "WordPress provides a highly extensive set of features that can be customised to meet our needs," he explains.
"Using a CMS allows for quick population and editing of menus, copy and images," he continues.
"The revisions functionality also allow us to make sure our content is accurate. We're most proud of the Work section. The CMS allows us to associate Work with the Client, the Services and Tactics performed on the project, the Industry, the project's Flickr photoset and any related Vimeo videos."
25. Rodesk
It was co-founded by Laurens Boex and Jasper van Orden. They selected WordPress as the CMS to power their infographic- focused design.
"WordPress is the best CMS for sites such as Rodesk, we've developed with it for quite some time," explains Boex. "With a ton of plug-ins and extensions and a world wide community of supportive developers it's easy to work with and integrate quickly."
26. Ribot
Its site is powered by WordPress, using a theme designed in-house with HTML5 markup. Jerome explains: "We love to be semantic when crafting HTML, so HTML5 gives us the ability to use more descriptive semantic tags than just plain <div>s, making the code easier to read, structure and understand.
"The hardest thing to do when starting with HTML5 is wrap your head around the concept that a page can have multiple headers and sections now, and so more than one H1 tag. It's a different way of thinking about HTML, and means you can see a document as a collection of redistributable modules of content rather than just a single page."
27. 6Wunderkinder
"There is a large community behind it, so you can access support and find answers quickly, and you can use tons of plug-ins. We put a lot of effort into a custom design. We've received a lot of attention for our 'about' page and invested a lot of time in designing and building a story for each individual working at 6Wunderkinder".
As WordPress continues to evolve, more and more developers are turning to the system for their CMS needs. The wave of so-called 'cookie- cutter' websites that WordPress has been accused of starting has long passed. 6Wunderkinder is a testament to that fact and a great example of what can be achieved.
28. Girl With a Camera
"I was using Tumblr for a good while, but became fed up with the constant downtime," she explained. "I knew WordPress was hugely customisable and would give me a lot of flexibility over how I could display my photos."
Meanwhile, Brett says the feature he's most proud of is the way that each post's layout and background colour can be changed to best suit the content. "One of my absolute favourite things about WordPress is how fast I can go from an HTML template to a working theme."
29. Tinkering Monkey
"We used two CMSes," explains Chang, "The store is run through an open-source shopping cart system called OpenCart, and the other pages are managed through WordPress."
There are many e-commerce tools to choose from, but Chang wanted to avoid the fees and functionality limitations of other solutions. "It had all the features that we wanted built-in already," she says, "and a back-end that was easy for us to jump in and make changes. It basically gave us full control while keeping our costs to a minimum."
30. Intellidogs
The site was designed and built by Alex McGibbon, who selected WordPress for the job. "It was decided early on that the users needed to trust Karen in order for them to make a purchase," McGibbon explains. "A blog is a great way for Karen to establish a rapport with people, and as it's such an important feature of the site, WordPress seemed liked the best tool for the job."
Thanks to the open source nature of the tool and its plug-ins, he was able to modify the eShop plug-in to meet the client's needs. "I made the store items open in an Ajax window that closed once the user had added that chapter to the cart," he explains. "This made the process of adding chapters very snappy, and massively sped up the visitor's task of customising their manual."
31. Jenny Bristow
Developer Derek Johnson explains the decision to go with HTML5: "The nature of WordPress makes it easier to distinguish between <article>, <section> and <div> content," he says.
"When I was planning this project, it just seemed more logical and straightforward to use new HTML5 elements than to have a lot of nested divs. The site uses a host of new elements, a couple of new input types ('search' and 'email'), ARIA roles and block level links. I also love the way sectioning content works to create a document outline and give semantic structure to web pages," adds Johnson.
32. Obi Media
"I added a blog, which will provide two key roles. First, it will enable us to keep our clients up to date with what's going on and second, it provides a hub for visitor interaction, through comments and asking questions.
"I also made use of WordPress's custom menus in the header and footer of the site so even non-techies can re-arrange and edit the site's navigation should we see a need to push visitors in a certain direction."
33. 42BELOW
"WordPress has become a natural choice. It's really blossomed into a fully featured CMS system and a platform in its own right, on top of which you can build your own functionality. There's a danger that if you make too many custom edits you lose the ability to update as new versions are rolled out.
"We walked a fine line with this website, but with WordPress 3 around the corner we made sure we kept the core intact. We also used a lot of jQuery, in particular jQuery Address to build the navigation. jQuery offers a huge and incredibly useful JavaScript library. We find it indispensable for the rapid development of site features."
34. CRACK Magazine
Central to the brief was the need to increase CRACK's user retention rate and lower user drop-offs, as the rigidity of their current site was clearly limiting their growth. The team at Fiaso Design worked with D:Coe Design to create a fully responsive design using a WordPress core that focuses on adaptable grid structures to show off a wealth of content, while looking smart on across different browsers and devices.
"We created a fully responsive masonry-style design that marries dynamic content with an integral look and feel. By focussing on adaptable grid structures they can now show off a wealth of content types while looking smart on all browsers and devices" says Ben Steers, Creative Director at Fiasco Design.
35. Derren Brown
Pixel Dandy's Marc Hagan-Guirey, the man behind the recent redesign says, "The project took about six months. The team comprised of Duncan Godwin who built the site, Abeo the project manager and myself with the design and concept.
"The site was built using Photoshop CS6 and Illustrator CS6. Duncan, the developer, built the site using WordPress with a sprinkling of jQuery plug-ins, lots of emails, and cups of tea."
36. Entyce
"WordPress is an established system, and we like the concept of open source - it's very versatile and can easily be modified and styled as required," she adds. "As with any software there are a few flaws, but in our opinion these are outweighed by the pros".
In advocacy of WordPress, Entwistle adds: "It's a great software to work with and it's free! It's easy to use, well documented and has a great community with lots of articles if you get stuck or need help".
37. Bluelounge
The site is built on a combination of the CodeIgniter framework, Interspire Shopping Cart and WordPress. Michael Sunarlim, a web producer at Bluelounge explains: "I chose to use CodeIgniter as the main platform when we decided to redesign our website because it's a great framework," he says. "As I was more of a frontend developer, CI easily won my preference to build a structured and expandable website without sacrificing PHP's strong values."
38. Ghosthorses
When choosing the CMS to drive his major redesign, Fairbanks knew it had to be WordPress. "I've been using WordPress for as long as I've been building sites because I like how malleable it is, and the fact that it's so popular means there's a really good community of support behind it. Also the Featured Image function does all the legwork of cropping, resizing and embedding my images."
He's also felt the blight of WP's limited media handling capabilities, but has found a suitable solution. "I've moved the Multiple Post Thumbnails plug-in into my functions.php file by default now for all my sites to easily add scrollable galleries."
39. Olly Sorsby
He picked WordPress as the CMS. "I found with WordPress, once I got my head around where everything was, that it was very easy to navigate and use to produce the site. I think the plug-ins and widgets are great – the drag-and-drop feature is so easy to use. Being able to install a plug-in or widget which lets me drop a contact form where I like, then be able to get it looking exactly how I want, is great."
40. Design the Planet
"WordPress is our go-to CMS," vice president and COO Perryn Olson explains. "We find it easier to work with and much easier for our clients to quickly pick up on without having a steep learning curve like Joomla or Drupal."
Olson is a big fan of established CMSes, it turns out. "We've seen a backlash against proprietary CMSes from prospective clients, because of poor experiences with previous companies," she says. "Some companies feel trapped if they use a proprietary CMS - because they can never leave and their website becomes a hostage - while WordPress is universal and fairly portable from one company to another."
41. Mario Batali
recipes and products. It also expands on the Batali brand, allowing visitors to become immersed by highlighting easy-to-browse, self- produced videos within the clean design and organised navigation.
"People love looking at food, so we wanted to make sure that it really was the star of the show," says Adam Scher, co-founder of Operation:CMYK. The 'What Should I Cook' recipe section has a nice filtering system with an appropriate Masonry grid layout to display suggested meals, which look delicious.
The homepage also has Twitter functionality built in, as Batali loves to respond to recipe ideas, places to eat and technique questions on Twitter. Scher adds, "For us, it was about empowering [the Batali team] to use their online space more efficiently and effectively while giving them creative freedom to create Mario's world."
42. The Band Agency
"It's popular, which is an easy sell to clients," says Brown. "The open-source community and documentation for developing WordPress functionality and templates is incredibly robust. In the end WordPress is an extremely rewarding platform to develop on."
As we all know, one of WordPress's great selling points is plug-ins. "Advanced Custom Fields allows us to create custom control panels that can be assigned to any post type and as a standalone options panel," Brown divulges. "In addition, we implement the Yoast SEO plug-in, which handles our meta tags, site map and social media meta integration."
43. Ownerd
"As far as we're concerned, WordPress is as established as you can get. Yes, there is still some stigma; yes, it gets outfoxed by some larger enterprise CMSes ... but when it comes to flexibility, ease of build and ease of use from an admin perspective, WP always wins out," Veitch says.
Words: Ryan Taylor
This is an updated and extended version of an article that previously appeared on Creative Bloq.
Thank you for your article. It will definitely help me a lot...
ReplyDelete