Skip to main content
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


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.


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.


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

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.


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.
Hyperlinks can be added to a timeline item to link to a recipe.
Scroll to top