Celebrity Chef Website Design & Development Using WordPress
- Project coordinator – 1
- UI/UX designer – 1
- Developer – 2
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
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
Submit Recipe & User Recipes Module
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.
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
- Easy navigation in the header increased 200% more clicks
- Better user experience for the Recipes listing and the Recipe detail page
- Better user experience for the user recipes listing and user recipe detail page.
- Advanced recipes filter and auto-complete search on the Recipes page.
- Able to attract more users with improved user journey.
- Website is ready for new marketing campaigns to attract more users