Restricting frontend acess based on user role otherwise redirect to login form

Question

I have created a custom user role in my functions.php file. I am creating a new page template for a page on my website that I would like to restrict by role(not by capabilities). Basically I would like to make it so that if a user with this new role or any editor/administrator role accesses the page they will see the content, otherwise it will display the default Wordpress login form. I also want it to send them back to this specific page after logging in. Here's the code I am using so far, it seems to be mostly working except that the redirect doesn't work. I also tried using wp_login_form() in place of the redirect, but that displays an unstyled form rather than what I would see by accessing wp-login:

<?php
/*
 * Template Name: Restricted content
 * Description: Restricted content template
 */

get_header(); ?>

<?php if( current_user_can('custom-role') || current_user_can('administrator') || current_user_can('editor')) { ?>

<div>
    Restricted content displayed here
</div>

<?php get_footer(); ?>

<?php

} else {
    wp_redirect(wp_login_url());
} 

?>

Answer 1

WP can't redirect after you have already output HTML - so move your if/else to the top, before you call for the header, and only output the header & footer if your condition is met.

Also, instead of using current_user_can('role'), use current_user_can('capability') - i.e.

<?php if(
    current_user_can('activate_plugins') ||
    current_user_can('edit_a_defined_custom_post_type')
) {
    get_header(); ?>
    <div>Restricted content here</div><?php
    get_footer();
} else {
    wp_redirect(wp_login_url());
} ?>

(According to the Codex, "While checking against particular roles in place of a capability is supported in part, this practice is discouraged as it may produce unreliable results.")