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

Basic Page Creation

Create a New Page

Step 1: Add New Page

WordPress Admin → Pages → Add New

Step 2: Set Page Title

Examples:
- "Member Dashboard"
- "Student Portal"
- "Customer Account"
- "Employee Hub"

Step 3: Set Permalink

Click "Edit" next to permalink
Use lowercase, hyphens, no special characters

Good: member-dashboard
Bad: Member_Dashboard!

Step 4: Choose Template

Page Attributes → Template
Select: Full Width (recommended for dashboards)

Essential Page Elements

1. Welcome Message

Basic Welcome:

<div className="welcome-section">
    <h1>Welcome Back!</h1>
    <p>You're logged in as a Member.</p>

Personalized Welcome (with PHP):

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

2. Quick Navigation

Dashboard Links:

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

Add CSS (in Customizer or theme):

.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

Use Shortcodes to Show Different Content:

<?php if ( current_user_can( 'subscriber' ) ) : ?>
    <div class="member-resources">
        <h2>Member Resources</h2>
        <a href="/downloads/">Download Center</a>
    </div>
<?php endif; ?>

4. Recent Activity or Updates

Show Latest Posts:

[recent_posts count="5" category="members-only"]

Show User's Recent Activity (requires plugin):

[user_activity limit="10"]

5. Call-to-Action

Encourage Next Steps:

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

Page Templates for Different Roles

Template 1: Member Dashboard (Subscribers)

Content Structure:

1. Personalized Welcome
2. Quick Stats (if applicable)
3. Navigation Cards:
   - My Profile
   - Member Content
   - Community Forum
   - Support
4. Recent Updates
5. Logout Link

Example Code:

<div className="member-dashboard">
    <h1>Welcome, [display_name]!</h1>

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

        <div className="stat-box">
            <h3>Member Since</h3>
            <p>[member_since_date]</p>

    <div className="dashboard-nav">

    <div className="recent-updates">
        <h2>Latest Updates</h2>
        [recent_posts count="3"]

Template 2: Customer Account (WooCommerce)

Content Structure:

1. Welcome Message
2. Order Summary
3. Quick Actions:
   - View Orders
   - Manage Addresses
   - Account Details
4. Recommended Products
5. Support Link

Use WooCommerce Shortcodes:

[woocommerce_my_account]

Or custom layout:

<h1>Your Account</h1>

<div className="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>

[woocommerce_order_tracking]

Template 3: Student Portal (Education)

Content Structure:

1. Student Welcome
2. Enrolled Courses
3. Upcoming Assignments
4. Progress Tracker
5. Resources & Help

Example with LearnDash:

[ld_profile]
[ld_course_list]

Template 4: Employee Hub (Corporate)

Content Structure:

1. Employee Welcome
2. Department Links
3. Company News
4. HR Resources
5. Time Off Requests

Example:

<h1>Employee Portal</h1>

<div className="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 className="announcements">
    <h2>Latest Announcements</h2>
    [recent_posts category="announcements" count="5"]

Restricting Page Access

Method 1: Using Attributes Shortcode

Wrap entire page content:

Shows to non-members:

"You need to be logged in to access this page."

Method 2: Pro Version Page Protection

If using Pro version:

1. Edit page
2. Find "Attributes Access Control" meta box
3. Check "Restrict Access"
4. Select allowed roles
5. Set redirect for unauthorized users

Styling Your Pages

Use Page Builder

Compatible builders:

• Elementor
• Beaver Builder
• Divi
• Gutenberg (Block Editor)

Best practices:

• Use consistent colors
• Keep it simple and clean
• Mobile-responsive design
• Clear call-to-action buttons

Custom CSS for Dashboards

Add via Customizer:

Appearance → Customize → Additional CSS

Example Styles:

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

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

/* Navigation Grid */
.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);
}

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

Testing Your Pages

Common Issues

Page Shows 404 Error

Content Not Restricted

Page Looks Broken

Pro Tips