Welcome to WordPress Development StackExchange site! In general you understand everything right, but there can be one important caveat: if some page content like page header, navigation menu, etc is already sent to the user, a try to set cookie from PHP script will give a following error: "Cannot modify header information – headers already sent by..."
. To avoid it you can add some javascript to your form and set a cookie from this javascript. Lets try the following code:
function protected_password_content( $atts, $content=null ) {
// if password is sent via posting form, try to use it first
// next try to get password from the cookie
$userpass = isset( $_REQUEST['password'] ) ? $_REQUEST['password'] : ( isset( $_COOKIE['userpass'] ) ? $_COOKIE['userpass'] : NULL );
if ( in_array( $userpass, array('password') ) ) {
$return = do_shortcode($content);
} else {
$return = '
<span>To view this section, enter your access code.</span><br>
<form action="" method="post" onsubmit="putCookie(this)">
<input style="display:block; width: 69%; height: 50px; margin-right: 1%; padding: 0px; float: left; border:1px solid blue;border-radius:3px;" type="text" placeholder="   Access Code Here" name="password" id="userpass">
<input style="display:block; margin: 0px; width: 30%; height: 50px; padding: 0px;" type="submit" value="Show Content">
</form>
<script>
function putCookie(form) {
var today = new Date();
var expiry = new Date(today.getTime() + 24 * 3600 * 1000); // plus 1 day
document.cookie = "userpass=" + escape(form.userpass.value) + "; path=/; expires=" + expiry.toGMTString();
}
</script>';
}
return $return;
}
You do not required to specify the cookie expire time. If you omit that part, the cookie will be set as so-called session cookie, which would be valid only until user closes his browser:
function putCookie(form) {
document.cookie = "userpass=" + escape(form.userpass.value) + "; path=/";
}