This tutorial shows how to use native WordPress Password Protection with Oxygen on your site.

To begin, we'll install a code snippets plugin so that we can add a custom condition to Oxygen using Oxygen's Conditions API.

Next, we'll open our Main template in Oxygen and add our newly created condition to our parent Div element to hide Oxygen's content on the front end if a password hasn't been entered on the front end. Any child elements of this Div element will also be hidden on the front end.

We'll then add a Section element to our template and add a Code Block element that uses the built-in WordPress get_the_password_form function. This will allow users to enter a password on the front end of the site. We'll also add a condition to this section to only show it on the front end if a password has not been entered.

Finally, we'll beautify our password Section by adding some additional elements, styles, and custom CSS.

Video Table of Contents: 

• Introduction 0:00
• Adding the Oxygen Condition: 1:06
• Setting Up your Template: 3:37
• Adding and Styling the Password Form 5:06

Resources: 

• Password condition: https://gist.github.com/Spellhammer/e45fba76d65234534d1261cc1e434b16
• Oxygen Conditions API: https://oxygenbuilder.com/documentation/other/conditions/
• get_the_password_form function: https://developer.wordpress.org/reference/functions/get_the_password_form/