Control Oxygen Templates with Custom Data Attributes ✨

There's probably a gazillion awesome use cases for this concept.

In this video I'm going to focus on just one use case, which solves a problem I've been having since the first day I ever used a template in Wordpress (not just Oxygen, but WP altogether).

A universal problem with templates is that a background image or object-fit cover image (think blog post featured image) can't be controlled at the individual post level. So, if you want to change the featured image background position (to see a more relevant part of the photo), overlay color, etc. you can't. Until now.

This goes beyond blog posts -- it works with all kinds of templates and has various use cases, so don't miss it!

In this video you'll learn:

- How to create a dropdown custom field for controlling background position
- How to create a custom data attribute in Oxygen
- How to dynamically insert the dropdown choice into the data attribute value field.
- How to target data attributes with CSS
- And more.

Super powerful stuff IMO. Let me know what you think!

Code here: https://digitalambition.co/watch/dynamically-control-template-behavior-in-oxygen-with-custom-data-attributes/

Can you think of any other really valuable use cases for dynamically controlling templates with data attributes? Please share!

0:00 Intro
1:02 Problem Overview
3:50 Add BG Position Custom Field
7:10 Intro to Data Attributes
9:00 Creating Dynamic Custom Data Attribute
11:00 The CSS
13:15 Testing It