Creating Destination Pages for Redirects

Overview

When users log in and get redirected to specific pages based on their role, those destination pages should be well-designed, functional, and appropriate for the user type. This guide shows you how to create effective landing pages.

Before You Start

• Plan your redirects: Know which roles go where
• Map user journeys: What should each role do after login?
• Identify required pages: List all destination pages needed
• Choose page templates: Full-width or sidebar layout?

Basic Page Creation

Create a New Page

WordPress Admin → Pages → Add New

Examples:

• “Member Dashboard”

• “Student Portal”

• “Customer Account”

• “Employee Hub”

Click “Edit” next to permalink

Use lowercase, hyphens, no special characters

Good: member-dashboard

Bad: Member_Dashboard!

Page Attributes → Template

Select: Full Width (recommended for dashboards)

Essential Page Elements

1. Welcome Message

<div class="welcome-section">

<h1>Welcome Back!</h1>
    You're logged in as a Member.
</div>

<div class="welcome-section">

<h1>Welcome Back, <?php echo wp_get_current_user()->display_name; ?>!</h1>
    Last login: <?php echo date('F j, Y'); ?>
</div>

2. Quick Navigation

<div class="dashboard-nav">
    <a href="/my-account/" class="dash-link">
        <span class="icon">👤</span>
        My Account
    </a>
    <a href="/member-content/" class="dash-link">
        <span class="icon">📄</span>
        Member Content
    </a>
    <a href="/support/" class="dash-link">
        <span class="icon">💬</span>
        Support
    </a>
    <a href="/%3C?php%20echo%20wp_logout_url(%27/%27);%20?%3E" class="dash-link">
        <span class="icon">🚪</span>
        Logout
    </a>
</div>

.dashboard-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.dash-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}

.dash-link:hover {
    background: #e9ecef;
    transform: translateY(-2px);
}

.dash-link .icon {
    font-size: 48px;
    margin-bottom: 10px;
}

3. Role-Specific Content

<!-- Only for Subscribers -->
[attributes_restrict roles="subscriber"]
    <div class="member-resources">

<h2>Member Resources</h2>

<ul>

<ul>
<li><a href="/downloads/">Download Center</a></li></ul>

<ul>
<li><a href="/webinars/">Members-Only Webinars</a></li></ul>

        </ul>
    </div>
[/attributes_restrict]

<!-- Only for Customers -->
[attributes_restrict roles="customer"]
    <div class="customer-tools">

<h2>Your Orders</h2>
        <a href="/my-account/orders/">View Order History</a>
    </div>
<p>[/attributes_restrict]
</p>

4. Recent Activity or Updates

[recent_posts count=”5″ category=”members-only”]

[user_activity limit=”10″]

5. Call-to-Action

<div class="cta-box">

<h3>Ready to Get Started?</h3>
    Browse our member content library:
    <a href="/member-content/" class="button">Browse Content →</a>
</div>

Page Templates for Different Roles

Template 1: Member Dashboard (Subscribers)

• Personalized Welcome

• Quick Stats (if applicable)

• Navigation Cards:

– My Profile

– Member Content

– Community Forum

– Support

• Recent Updates

• Logout Link

<div class="member-dashboard">

<h1>Welcome, [display_name]!</h1>

    <div class="quick-stats">
        <div class="stat-box">

<h3>Membership Status</h3>
            <p class="status-active">Active</p>
        </div>
        <div class="stat-box">

<h3>Member Since</h3>
            [member_since_date]
        </div>
    </div>

    <div class="dashboard-nav">
        <!-- Navigation cards here -->
    </div>

    <div class="recent-updates">

<h2>Latest Updates</h2>
<p>        [recent_posts count="3"]
    </p></div>
</div>

Template 2: Customer Account (WooCommerce)

• Welcome Message

• Order Summary

• Quick Actions:

– View Orders

– Manage Addresses

– Account Details

• Recommended Products

• Support Link

[woocommerce_my_account]

Or custom layout:

<h1>Your Account</h1>

<div class="account-nav">
    <a href="/my-account/orders/">Orders</a>
    <a href="/my-account/downloads/">Downloads</a>
    <a href="/my-account/addresses/">Addresses</a>
    <a href="/my-account/edit-account/">Account Details</a>
</div>

[woocommerce_order_tracking]

Template 3: Student Portal (Education)

• Student Welcome

• Enrolled Courses

• Upcoming Assignments

• Progress Tracker

• Resources & Help

[ld_profile]

[ld_course_list]

Template 4: Employee Hub (Corporate)

• Employee Welcome

• Department Links

• Company News

• HR Resources

• Time Off Requests

<h1>Employee Portal</h1>

<div class="employee-nav">
    <a href="/departments/">Departments</a>
    <a href="/company-news/">Company News</a>
    <a href="/hr-resources/">HR Resources</a>
    <a href="/time-off/">Request Time Off</a>
    <a href="/directory/">Employee Directory</a>
</div>

<div class="announcements">

<h2>Latest Announcements</h2>
    [recent_posts category="announcements" count="5"]
</div>

Restricting Page Access

Method 1: Using Attributes Shortcode

[attributes_restrict roles="subscriber,customer"]

<h1>Member Dashboard</h1>
    <!-- All page content here -->

[/attributes_restrict]

“You need to be logged in to access this page.”

Method 2: Pro Version Page Protection

• Edit page

• Find “Attributes Access Control” meta box

• Check “Restrict Access”

• Select allowed roles

• Set redirect for unauthorized users

Styling Your Pages

Use Page Builder

• Elementor

• Beaver Builder

• Divi

• Gutenberg (Block Editor)

• Use consistent colors

• Keep it simple and clean

• Mobile-responsive design

• Clear call-to-action buttons

Custom CSS for Dashboards

Appearance → Customize → Additional CSS

/<em> Dashboard Container </em>/
.member-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/<em> Welcome Section </em>/
.welcome-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    border-radius: 10px;
    margin-bottom: 30px;
}

/<em> Navigation Grid </em>/
.dashboard-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.dash-link {
    background: white;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.dash-link:hover {
    transform: translateY(-5px);
}

/<em> Mobile Responsive </em>/
@media (max-width: 768px) {
    .dashboard-nav {
        grid-template-columns: 1fr;
    }
}

Testing Your Pages

• Test as each role: Create test accounts for each user type
• Check mobile view: Test on phone/tablet
• Verify all links: Click every link on page
• Test restrictions: Try accessing as logged-out user
• Check logout link: Ensure it works correctly

Common Issues

Page Shows 404 Error

Content Not Restricted

Page Looks Broken

Pro Tips