Tutorial: How to create a simple password protected page

I built a library page with all of our free content, but I wanted the download buttons hidden, unless the visitor provided the password. This way, they can see all the thumbnails of the content, but don’t have access unless they optin.

I decided just to go with a simple GET variable in the URL, so it is not secure and the password is the same for everyone. The reason I opted for solution is because the build in WP version is very crude and nearly impossible to style.

Here is how I you can get the same effect.

You need ACF.
[ACF]

Create Field Group - "Global Password"
Single text field - Name: "global_password"

Show this field group if PAGE is [PasswordPageHere]

[END ACF]

[PAGE]

IN WP: 
1. Edit page, and add the password that you want into the "Global Password" custom field

IN CORNERSTONE: 

2. Create a login form
[RAW HTML]
	<div class="login-form-container">
		<form class="login-form" action="" method="GET">
			<div class="form-group">
				<label class="form-label" for="password">Password:</label>
				<input class="form-input" type="password" id="password" name="psw">
			</div>
			<button class="form-button" type="submit">Submit</button>
		</form>
	</div>
[END RAW HTML]

3. Add all content  

4. Hide content elements
Select Element to hide (download button, div, section etc.) 
Go to Customize/Conditions:
	Add STRING {{dc:url:param key="psw"}} is {{dc:post:meta key="global_password"}}
Also for convenience add: Make visible when USER logged in 

NOTE: Hide the section/element with the login form  when the user has provided a password.

[END PAGE EDITS]

There you go… Done! Hope it saves you a few minutes while developing.

1 Like

Here is the live site in case you want to see it working: https://cleanstream.se/kunskapsbanken/

Hey @marcuszacco,

Thanks for your tips and we really appreciate your time and effort.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.