thumbnail_dax-avatar.jpg

dax-avatar.jpg

Web developer

I was part of the WordPress team in charge of developing the backend for this website. I did some small contributions in frontend but my main role was the development of the backend.

This website was built before the WordPress Gutenberg editor was introduced and we used custom fields to build blocks of content, that way the Campbell's staff should have an user friendly way to update the information.

Because of scalability concerns the themes and plugins were built from scratch, that way other developers can modify them for future needs.

The other consideration for this approach was security. We minimized the risks by avoiding third party plugins and coding under strict PHP and WordPress security standards.

large_ck_block_content2_7333a71d99.jpg

medium_ck_block_content2_7333a71d99.jpg

small_ck_block_content2_7333a71d99.jpg

thumbnail_ck_block_content2_7333a71d99.jpg

ck_block_content2_7333a71d99.jpg

One of my assignments was to build several custom blocks of content like the one you can see in this example. You could think of them as reusable components in React.

This example is a caroussel with a collection of recipes. The administrator can add a maximum of 12 collections and each collection has its own name, description, a main image and two extra images. Once the user clicks on a collection she or he is taken to that specific collection of recipes, for example "Recipes Using Tomato Soup".

large_campbells_kitchen_block_685758ff61.jpg

medium_campbells_kitchen_block_685758ff61.jpg

small_campbells_kitchen_block_685758ff61.jpg

thumbnail_campbells_kitchen_block_685758ff61.jpg

campbells_kitchen_block_685758ff61.jpg

Another of my assignment was to integrate the reviews and scores coming from an external API. I also builted functionalities like sorting and adding new reviews by using AJAX. Yup, there was not such a thing as React back in the day 😅

Since there wasn't an average score for a given recipe I also built a simple average calculation for the recipe score.

### SEO Structured Data

I was in charge of integrating the https://schema.org/ structured data in the markup of the whole theme, especially in recipes, although it seems now Campbell's use a JSON file instead of the code in the markup.

small_campbells_kitchen_reviews_b511f3f750.jpg

thumbnail_campbells_kitchen_reviews_b511f3f750.jpg

campbells_kitchen_reviews_b511f3f750.jpg

One of the biggest block of content of this website with twelve recipes and two articles.

large_campbells_kitchen_2_44b4274065.jpg

medium_campbells_kitchen_2_44b4274065.jpg

small_campbells_kitchen_2_44b4274065.jpg

thumbnail_campbells_kitchen_2_44b4274065.jpg

campbells_kitchen_2_44b4274065.jpg

This was my first time working with a big team with Agile method and remote colleagues. I learned a lot about coordinating efforts and distributing tasks.

This was also my first time working in a massive WordPress website with an incredible amount of data. Granted, I was not in charge of migrating databases but I was part of the team building the backend for the new data.

I was using Git environment in small personal projects but this was my first time to actually use it in a big project with several colleagues.

### A problem solved

I would like to mention that I gave a valuable idea and solved a problem: we needed to show only the new versions of the recipes to the visitors but in case of not existing a new version we should present the old one.

There were thousands of recipes and the Campbell's team was updating them one by one but we needed to show information, we could not wait for the whole update. So my idea was, instead of having a unique set of fields for the recipe data, we should have two set of fields: the old version fields and the new version fields. If the new version fields were empty, it means the recipe has been not updated yet so the website should use the old fields from the database, otherwise use the new fields.

We tried my idea, we made a lot of tests and then it was approved to go live. That way the website showed thousands of recipes and then the Campbell's team was able to update the information at its own pace.

The custom theme and blocks of content proved to be so useful that the client asked to develop other websites with the same approach, so we used the custom theme as a parent theme and the code from the blocks of content in the following Campbell's websites.

large_campbells_swanson_e0c8e1895e.jpg

medium_campbells_swanson_e0c8e1895e.jpg

small_campbells_swanson_e0c8e1895e.jpg

thumbnail_campbells_swanson_e0c8e1895e.jpg

campbells_swanson_e0c8e1895e.jpg

large_campbells_v8_57fad3f4ab.jpg

medium_campbells_v8_57fad3f4ab.jpg

small_campbells_v8_57fad3f4ab.jpg

thumbnail_campbells_v8_57fad3f4ab.jpg

campbells_v8_57fad3f4ab.jpg

large_campbells_well_yes_0da584018e.jpg

medium_campbells_well_yes_0da584018e.jpg

small_campbells_well_yes_0da584018e.jpg

thumbnail_campbells_well_yes_0da584018e.jpg

campbells_well_yes_0da584018e.jpg

large_campbells_kitchen_cff08aabb3.jpg

medium_campbells_kitchen_cff08aabb3.jpg

small_campbells_kitchen_cff08aabb3.jpg

thumbnail_campbells_kitchen_cff08aabb3.jpg

campbells_kitchen_cff08aabb3.jpg

Campbell's Kitchen is the biggest Campbell's website containing thousands of recipes with detailed information, including Campbell's products used and where to find them near the user.

The main goal was to redesign the old website and incorporate new technologies so the Campbell's team should be able to update the information with minimum IT expertise.