A preview of Roog BBQ, a WordPress website

Roog BBQ

Roog BBQ is where two of my hobbies meet: web development and barbecue. This website is a blog with barbecue recipies, tips and tricks built on WordPress.

In short

Roog BBQ is an ongoing project.
The following tools are used while developing this project:

  • WordPress
  • PHP
  • Laravel Mix
  • SASS
  • Tailwind CSS
  • JavaScript
Visit Roog BBQ

Back-end

The website is built on WordPress. It uses the Underscores starter theme which is extended with a lot of custom features written in PHP.

The Advanced Custom Fields plugin plays a big role in the back-end for custom post types and custom fields.

Front-end

Laravel Mix is used to compile front-end assets like SASS, JavaScript and thumbnail images.

The website recently transitioned from traditional CSS to Tailwind CSS. This saved up to about 20% in the CSS bundle size.

For JavaScript functionalities plain JavaScript is used.

Recipies

The recipe section of Roog BBQ is the most developed section. It's built with a big focus on UX, accessibility and SEO.

Go to a recipe page

Key features

Summary
Recipe details on top of each recipe page.
Adjustable portions
Adjusted portions will recalculate required ingredients.
Short and long descriptions
Toggable short and long preparation descriptions for preparation steps.
Toggable images
Toggable images for preparation steps.
Mark steps or ingredients
Mark steps or ingredients as done to maintain a clear overview of progression.
Fly-out ingredients
To always have access to the ingredients. Even when you scrolled further down the preparation steps.
Structured data
Structured data is generated from all of the recipes custom fields. This structured data is rendered as a JSON format on each recipe page.

Timeline

To keep track of all cooking sessions, I have created a timeline. The timeline is feeded from a custom post type.

Go to timeline

Key features

Multiple dates
Multiple date entries can be added to a timeline item. This way a timeline item can be added to the timeline multiple times if a recipe is created more then once.
Links
Hyperlinks can be added to a timeline item to link to a recipe.
Scroll to top