Front-End Development, Responsive Development, WordPress CMS
The Texas Beef Council (TBC) is a non-profit organization charged with the promotion and marketing of beef and beef products.
As a busy organization, they needed the ability to manage and update their site on the fly without needing to know how to code or having to work in a cumbersome content management system.
Their initial CMS had functionality and usability limitations on how they could build pages, search, filter, and add content.
Based on their needs White Lion was able to leverage Wordpress to build a new site which allows for easier and more intuitive content management.
To give the client as much control as possible, we wanted every image and piece of content on the site to be administrable. To prevent things from quickly getting out of hand, we broke the site down into sections of content and created custom page templates for pages that would have similar content. Then, we broke down each page template into smaller buckets of content by creating custom fields based on what sorts of content would be needed. This approach had a two-fold effect: 1) It allowed easy, intuitive manageability by the client and 2) it allowed us to control the structure of the pages and maintain the design integrity of the site.
Easily adding new content.
The client also needed to be able to add new pages of content to certain sections of the site quickly, in a serial fashion and with similar formatting. Using custom post types for Recipes and Texas Stories allowed us to group these similar content types, making it easier to add and manage on the back-end, and sort and search on the front-end.
Keeping our code DRY.
This wasn’t an especially huge site, but it was fairly complex for a WordPress site. To minimize the complexity we sought to break down the site into its component parts. This allowed us to see what elements of the site would be shared across pages and avoid repeating the same code on every page.
A good example of this is the site header/hero image. Early on, we knew that every page would have either a single hero image, a hero image slideshow, or a simple page title at the top of the page. Therefore, we created a global field with conditional logic in the site admin that would apply to every page, allowing the client to add one of those three types of headers. We used a similar technique for the sub-navigation.
The recipe grid.
The Recipe Central section of the site was especially complex. In addition to a custom post type, we created custom taxonomies for “Meal Types” and “Cooking Methods.” We then used the FacetWP WordPress plugin to allow us to filter the recipes based on the custom taxonomies and the Relevanssi plugin for advanced, relevancy-based searching. We topped it all off with a masonry grid layout on the front-end (making use of the jQuery Masonry plugin for formatting) along with a hybrid infinite-scroll loading technique to load more recipes as the user nears the bottom of the page.
The page builder.
Nearing the end of the site build, the client approached us with a new feature they wanted to add prior to launch. The feature included pages with multiple types of content sections in varying orders. They also wanted to be able to add more of these pages in the future. To accommodate this level of flexibility we implemented a page builder that allowed the client to create and build a new page from various predetermined content sections, ranging from a simple text editor to an image grid.
“Our website is beautiful and we are able to consistently add new content and optimize our current solution to better communicate our messages.”