Tutorial: How To Use Native WordPress Password Protection On Pages In Oxygen

In this tutorial, we'll use the native WordPress Password Protection in Oxygen to hide or show content on pages or templates.

We'll begin by installing a code snippets plugin on our site, and add a custom condition for Oxygen via Oxygen's Conditions API.

Then, we'll add a Div element to our page or template and use our newly created condition to hide the content on the front end if a password hasn't been entered. Any other elements within this Div will also be hidden.

Next, we'll add a new Section to our page or template, and add a Code Block element that uses the native WordPress get_the_password_form function to allow users to enter a password on the front end. We'll also add a condition to hide this section on the front end if a password has been entered.

We'll then finish off the tutorial by adding some additional elements, styles, and custom CSS to the password Section to make it more appealing.

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/