Stanford Persuasive Technology Lab indicated that “46% of people say that a website’s design is the number one criterion for discerning the credibility of a company.” The power of visual communication is also aptly summarized in the famous words of Zig Ziglar: “People don’t buy for logical reasons. They buy for emotional reasons.”
Today, Darren Stevens, a WordPress developer from the UK, describes how these words prove to be true. He has faced challenging design requirements by a demanding customer. In this case study, Darren describes how he met these challenges in a project built with Types and Views plugins.
The website is a listing site displaying luxury cottage accommodations in Cornwall in South West England.
The main project requirements were as follows:
Great design,
Easy administration for the site owner,
Mobile responsive,
Cleaned on both front and back-ends.
About the author
Darren Stevens
Darren Stevens is a front-end developer creating websites through either developing custom themes or adapting pre-designed themes. Based near Hayle in Cornwall, he creates all HTML, CSS, and jQuery required for a website.
For over 12 years, Darren has been developing websites for small to large companies using Joomla and WordPress. These websites range from simple 1- to 5-page brochure sites to e-commerce and full-content management websites. He also helps businesses expand their web presence and audience.
How Darren found out and learned of Toolset plugins
In the past, he had a proposal for a Chinese real-estate website in which the client’s agents could upload properties. He considered creating Custom Post Types for agents and properties, but he needed a means to link posts of different Custom Post Types together. In researching how to achieve relational posts of different Custom Post Types, he found Toolset.
Darren recalls
“I downloaded the Types plugin and tested it on the client’s development site; all worked fine. Therefore, to help with creating the posts layout, I decided to purchase the full plugin set and use Views to create single block views, page views, and content blocks. Since then, I have installed Types and Views onto all sites I create as I find this set of plugins essential in the development of extensive WordPress websites.”
He learned to use the plugins (and still continues to learn) by testing and playing with them, as well as asking questions and searching for answers from the support department, which he considers a valuable resource.
Designing the Forever Cornwall site: How the process looked like
Forever Cornwall project great design
One of the biggest challenges in building luxury sites is in making them presentable. Potential customers will not be tempted to pay for high-standard accommodations unless the pictures and website design reflect the expected luxury.
Given the importance of the design aspect, we decided to dig deeper asking Darren detailed questions on the design process.
Starting from solid design foundations: Who designed the site
Asked who had designed the Forever Cornwall, Darren stated that the design process had been more of a multi-stage process.
Darren worked on the original design (the previous version of the website, done by another person). Although he cleaned the code and structure first, everything in this case came from the client’s hand-drawn sketches and websites as references for design. An unusual aspect for Darren was that they did not use Photoshop.
Darren explains
“The Forever Cornwall site design partly came from the original website (colors, birds) and the client’s hand-drawn sketches (the client used to own a design agency). The homepage design (large image) came about from viewing local competitor websites as well as other websites within the luxury cottage industry around the UK. Given the target audience, the luxury market, we had to create a site that appealed to them: by using large imagery showcasing beautiful shots of the cottages.”
Choosing a theme
Avada theme: original (source: theme-fusion.com/avada/)
Avada theme after Darren’s modifications (www.forevercornwall.co.uk)
The site was built from an initial theme, Avada, which presented plenty of functionality built into the theme code. However, Darren branched away from the theme, undertaking various adjustments and hand building areas of the templates himself.
Darren comments
“The theme was a good starting point, and I have used it previously. However, in this case, we found that many its functionality were not needed, and consequently, I decided to remove a significant part of the theme code to improve download speeds. Toward the end of the project, I did wonder if the original theme was required at all as I could have built the site without it. Most sites created recently are built upon the theme HTML5Blank.”
Why Toolset was chosen for the Forever Cornwall project
Using Views plugin
Asked why he decided to use Types and Views to build the site, Darren clarified: “I needed an easy-to-use method of creating cottage views in multiple forms. Moreover, using Views with filtering based on short code attribute is very helpful and reduces duplication of views.”
Custom post types and taxonomies in Types plugin
Creating a Custom Post Type through Types is quick and simple. He also stated that including views in either PHP template code or editor shortcode is very easy and allows him to create themes from the HTML level up.
Cornwall site done with Toolset: Front- and back-end views
The final effect of Darren’s work can be viewed in detail when navigating the site per page. However, WordPress developers are usually most interested in how a website looks like from behind the scenes. In this section, Darren reveals the appearance of the most important elements of his website from within the WordPress admin panel.
Let us see how the site was built using Types and View plugins.
Custom Post Types for cottages
Custom Post Types for cottages
As the main purpose of the site was to list luxury cottage accommodations, the Cottage Custom Post Types was used as the fundamental structure. The following list shows the benefits of this approach:
All cottage offers are separated from regular WordPress posts and can be managed independently and easily.
Offers can be grouped using taxonomies (more details in further sections).
Each cottage offer can be easily extended using custom fields.
Using custom fields
custom post fields: front-end view
The Types plugin is used to create Custom Post Types in the first place. However, most Toolset users, including Darren, could not do without the other useful feature of the Types plugin: the ability to define custom fields.
In the accommodation area, an important feature is that visitors can find the basic, most important information very quickly and in an easy-to-read form. In the picture, the right side of the screen shot shows “short cottage info,” which refers to basic cottage information presented with readability in mind and achieved by using icons (the green ones) in combination with the short descriptions.
custom fields: back-end view
Now, let us see how it is done using the Types plugin. The fields are defined using Types->Custom Fields Control, associated with Cottage Custom Post Type. As such, they become accessible from within a single cottage post edit. Please refer to the image on the left.
Taxonomies
taxonomy terms: back-end view
The great thing about using Custom Post Types is the ability to group related posts into taxonomies. As shown in the picture, Darren defined two taxonomies to organize cottage posts. The first one is called “Cottage Regions.” Hence, all cottages belonging to a particular region can be viewed quickly.
The picture on the left shows three instances of this taxonomy. In WordPress terminology, they are called taxonomy terms:
Gwithian and St. Ivas Bay
Helford and Helston
Mount’s Bay and Praa Sands
Meanwhile, the following image shows the page from the WordPress dashboard’s point of view.
taxonomies: front-end view
Now, let us see how these specific taxonomy terms are presented on the front end. On the picture, you can see some posts belonging to the taxonomy term “Helford and Helston.” These posts are instances of Cottage Custom Post Type.
Compare the taxonomy term name (Helford and Helston) with the URL of the page (ending in helford-and-helston). A specific taxonomy page works out of the box in WordPress, assuming you have Setting->Permalinks set to Post name in your WordPress admin. All you have to do is to style it using CSS to ensure the proper presentation.
Extra features used
One of the most important features for sites offering accommodation services is a flexible search function. In navigating the Forever Cornwall site, we can see a search bar for users to look for accommodation offers that fulfill their criteria.
Although the Views plugin allows the building of a complex custom search, Darren created his search function differently. His goal was to integrate it with an outside booking agency.
Custom search
Custom search
The search facilities come from a third-party booking agency that the client uses to manage all customer bookings and other concerns. The agency provided the form code, and Darren installed it into the site and then added styling. The form would send the search request to the agency, who would process it and return the results. Darren would then style those results on the Forever Cornwall website. The search thus appears to be done on the site itself. Actually, the client integrates their site with the bookings agency service: https://www.anytimebooking.co.uk
A booking calendar
A booking calendar
Another interesting and handy feature used on the Forever Cornwall site is an interactive booking calendar. For each cottage offer, the bottom of the page shows a calendar through which customers find out information on available and already booked accommodations.
The booking agency calendar was implemented based on a similar method for the search facilities described above. Darren only added CSS styling to fit the calendar appropriately into the Forever Cornwall website.
Darren’s opinion on Types and Views
What Darren liked most about Types and Views
“I like the ease with which I can create CPTs that are separate from a functions file call, as well as the ease of extending and updating them. I am particularly interested in the relational aspect of Types CPT, which I used on the Manhandungy website. The Views plugin is a great means for creating my own layouts from selected database post data. I use this all the time.
I needed an easy-to-use method for creating cottage views in multiple forms. Further, using Views with filtering based on short code attribute is very useful and reduces the duplication of views. Creating a CPT through Types is quick and simple. I also find including views in either PHP template code or editor shortcode very easy. I can thus easily create themes from the HTML level up.”
What Types and Views are missing or where they could go better
Darren summarizes
“I would like a little more intuitiveness in the GUI for the Types interface. I find the GUI for the Advanced Custom Fields plugin easier to use. I would also like to know how using Views affects the speed performance when WordPress processes the code/plugin.”
Juan de Paco, Toolset lead developer, answers Darren’s questions
Juan de Paco, Toolset lead developer
“The Views team is always working to improve our performance. In the near past, we have had a great success on the front-end, by integrating the native WordPress caching system into our workflow. In the future iteration, we will go a huge step forward in back end optimization.
We plan to add the same caching techniques on some repetitive tasks on the admin side of WordPress, and then slightly restructure our plugin architecture. Our main goal is to have less, better, and more focused code, and then add extensive online documentation for third-party developers. The overall result will be a more functional Views plugin with a narrow impact on speed performance.”
Summing up working with Toolset: Darren’s final thoughts
“To me, WordPress has long since left the scope of blogging-only websites. Using Types/Views, we can far extend the capabilities of WordPress into full brochure/directory/e-commerce (with Woocommerce and Woocommerce Views) websites.
I don’t believe I could make the same high-level sites without using these plugins, and I look forward to seeing further development of the plugins and their contribution in enhancing websites.”
What is your way to deal with demanding customers?
How do you like Darren’s site and solutions? Feel free to share your comment with us.
How do you use Types and Views plugin to create your WordPress sites? If there is anything special about your site using our Toolset plugins, please also let us know. Most interesting cases will be covered in the new articles in this Case Studies series.
Stanford Persuasive Technology Lab indicated that “46% of people say that a website’s design is the number one criterion for discerning the credibility of a company.” The power of visual communication is also aptly summarized in the famous words of Zig Ziglar: “People don’t buy for logical reasons. They buy for emotional reasons.” Today, Darren…
Did you mean “Zig Ziglar”? Inspiring article, though!
Yes, corrected. Thanks Jacob.