Project Details

Website Features

The revamped website had the following features.

• Built with WordPress
• Custom-built global search module with Autocomplete feature.
• Recipes listing page with Ajax pagination.
• Advanced filters like Veg, Non-veg, Vegan, Cuisines, Health Specials, etc.
• Advanced Autocomplete search on Recipes listing page.
• Recipes listing page based on custom taxonomies(Veg, Non-veg, Vegan, Cuisines, Health Specials)
• Custom-designed Recipe detail page with various pieces of information like Ingredients,
• Process, Prep Time, Cook time, Services, Cuisines, gallery
• Custom-built Review and rating module for each recipe.
• Zelish – Shop Ingredients integration on the Recipe detail page.
• Customized Print option for printing the Recipe’s Ingredients and Process section from the Recipe detail page.
• “Submit a Recipe” page for users to submit their own recipes.
• “User Recipes” module for displaying the Recipes submitted by users which are approved by the Chef’s team.
• Shop page with links to Chef’s Amazon page.
• Custom-designed Press page with details of news about Chef’s recent updates and the information about him featured in various articles and news.
• Blog migration into the website from Blogger.
• Attractive and unique design for all the pages.
• Loads quickly
• Custom-designed homepage which provides a quick overview of famous recipes and recipes of the week and recipes display with category filters.

Website Design & Development Process

Designing Process

As the recipes being the core of the website, our designing team and chef’s team had multiple discussions regarding the design of the website. The major goal was to make the website attractive and easy for the users to navigate through.
Our designers designed the website mockups as per the client’s ideas and shared them with the client for approval. And approved designs are sent to the development team.

Theme Selection

The existing website was developed using a readymade theme with so many plugins. We planned to develop the website from scratch using a custom theme and to use plugins only if it is necessary.

Development Phase

As we planned earlier, before starting the development, we made a list of modules that needed to be built from scratch, and the ones which needed to be done by plugins. We used the Advanced custom fields Pro plugin as a core for this custom development.

Recipes Module

We started the Recipes module development as it was the main module and this module is used throughout the website on most of the pages. We created a custom post type called Recipes and set up various custom taxonomies like Veg, Non-veg, Vegan, Cuisines, Ingredients, Health Specials, and Special recipes, etc for filtering and categorizing purposes.

As mentioned earlier in the features section, the Recipe module has various information like Ingredients, Process, Cuisines, Prep time, etc. So, we had to create multiple custom fields in the backend using ACF Pro for accommodating this information. After completing the setup in the backend, our development team started the development of the recipes page with filters and auto-complete search along with Ajax pagination. We faced quite a few challenges while developing this module as we had to connect filters, search, and pagination to work separately and also in a combined way depending on the user’s selection.

The Recipe detail page was a huge module as it had a customized design and also various features like Gallery slider(Image and Youtube Video), Review & rating feature, Custom Print option, and Zelish – shop ingredients integration.

Also, each recipe had so many pieces of technical information like Prep time, Cook time, total time, cuisine, servings, ingredients, process, categories, tags, ratings, etc. We have to use all this information along with a few other information to use this to set up the Schema markup for every recipe for SEO purposes.

We developed all the above-mentioned features from scratch without using any plugins to meet the client’s requirements.

Another major challenge was the mobile version of the website. Mobile was not only a responsive design but also a different design layout compared to the desktop version. So, it was almost like developing 2 different websites in terms of design.

For Zelish – Shop ingredients feature, we had to work with an external team for this integration where we faced various challenges due to their plugin’s compatibility issues with other third-party plugins.

The recipe detail page also had a fixed sidebar which had a Social sharing option where users can share the recipe on various Social media platforms like Facebook, Twitter, Whatsapp, Pinterest, and SMS, etc.

Even though the recipes page was a custom-developed one, we also had the native category and taxonomy pages for the recipes module, we followed the same UI for those Archive pages like the recipes page.

Global Auto complete Recipes search Module

To make it easy for the users to search for recipes, we developed a global recipes search module on the header where users can search from any page of the website. Also, it was built as an Autocomplete search. So, as soon as the user starts typing the letter, relevant recipes will be automatically suggested for the users. Users can click on the recipe directly and go to the recipe detail page. As we already developed an auto-complete search on the Recipes page, we used that same prototype and made certain changes as per this search’s desired functionality.

Submit Recipe & User Recipes Module

The user Recipes module was pretty simple compared to the Recipes module. The Submit Recipe page had a custom form with various fields to collect the recipe information. All the user-submitted recipes will be stored in the backend for review. Approved recipes will be posted on the front end of the User Recipes page.

For this, we set up a custom post type called “User Recipes” without any custom taxonomies. We designed the User Recipes listing page and user recipe detail page as per the new design.

Blog Module

The Blog module also had a design mockup, so we just had to develop the blog listing page, blog archive pages, and blog detail page based on the design.

Press Page and Other CMS pages

The press page was a custom-designed page with 2 types of news provided in the tiles layout.
The first type being the news/updates about Chef with links to the respective articles and the other being gallery tiles which have Newspaper clippings with the Lightbox option.

Apart from these, there were other CMS pages like About, Shop, Contact, etc. We designed a common layout for the CMS pages to match the website design.

Recipes Migration

The existing website has 1000s of recipes posted as blog articles. Since the recipe on the new website had various pieces of information, we were not able to directly import them into the new website. So, we exported the recipes from an old website in an EXCEL sheet and we created new columns for fields like Cuisine, Ingredients, Prep time, Cook time, Total time, Process, Description, veg, non-veg, vegan, etc and shared it to the client to organize the recipes and fill them. Once this is done, we used the Ultimate CSV Importer Pro plugin to import them into the new website.

Website Migration Process

As usual, we did the development on our server. Even though the existing website has blogs, pages, and 1000s of recipes, we migrated them to the new website during the development and after the development is completed. As a usual ritual, our SEO team analyzed the existing website, and the new website made necessary SEO changes in the new site and set up necessary redirections as well. After all these SEO checks, we migrated the new website to the live environment using the “All in One WP Migration” plugin successfully.

We followed the below steps after migrating the website.

• Working on CSS & JS fixes
• Mobile responsiveness testing
• Making the site look consistent across pages
• Start with functional testing and fixes
• Going through designer level testing and fixes
• After testing, we removed the testing comments and reviews which we posted during the development and testing phase.
• Going through final live testing and fixes

As one of the top providers of website solutions provider, ColorWhistle can create, strategize, design and develop your website requirements. From integrating third party tools to website development, we can create effective solutions that will cater to your business challenges and goals.

If you need any help with website designing, website development or digital marketing for your business get in touch or call us at +1 (210) 787-3600. We are happy to partner with you.