Adding Custom Pages in Your Client Portal using Blade

This guide is aimed at developers and experienced end-users familiar with WordPress theming and the blade template language.

In your Client Portal you can easily register custom pages directly from your WordPress theme using Blade templates. These pages can be dynamically added to your client portal, restricted by roles, and customized using metadata parameters.

In this guide, you'll learn how to create and register a custom page, configure it for your Hub, and add it to your navigation menu.

Step 1: Setting Up the Hub Directory in Your Theme

Custom pages should be placed in a special directory within your active WordPress theme called hub. This folder is where the system will look for any custom Blade templates you want to use.

- Directory Path: /wp-content/themes/your-active-theme/hub/

Create this folder if it doesn't exist in your active theme.

Example File Structure:

wp-content/
├── themes/
│ ├── your-active-theme/
│ │ └── hub/
│ │ └── live-support.blade.php

Step 2: Creating a Custom Page Template

Once you’ve set up the hub folder, you can create custom Blade templates to add pages to your portal. Each template can have specific metadata at the top that will allow you to customize how the page appears in the menu and who has access to it.

Example Blade Template:

{{-- title: "Live Support" --}}
{{-- icon: "chat" --}}
{{-- show_in_menu: "true" --}}
{{-- role: "administrator" --}}

@extends('layouts.app')

@section('content')
    <div class="text-center">
        <h2 class="mb-4 text-4xl font-black text-black dark:text-white">
            Welcome to the Live Support page!
        </h2>

        <p class="mb-4 text-gray-600 dark:text-gray-400">
            Here you can chat with our support team for live assistance.
        </p>

        @shortcode('[live_support_chat]')
    </div>
@endsection

Each template can have specific metadata at the top that will allow you to customize how the page appears in the menu and who has access to it.

Metadata Parameters Explained:

- title: This defines the title that will be displayed in the navigation menu.
- icon: This is the icon (from your phosphor library) that will be shown next to the menu item.
- show_in_menu: Set to "true" if you want this page to appear in the menu. Set to "false" if you want to hide it.
- role: Restrict access to this page based on WordPress roles. For example, only users with the administrator role will see this page if set to "administrator".

This metadata allows for full control over the page's appearance and accessibility within your Client Portal.

Step 3: Customizing the Menu and Navigation

When you register a custom page via your theme’s hub/ directory, the metadata you define will determine whether the page shows up in the Dollie Hub Builder's menu. The show_in_menu and role fields give you control over this.

Menu Visibility:

- If show_in_menu is set to "true", the page will automatically appear in the portal's menu.
- You can restrict who can see the page by setting the role. For example, setting it to administrator ensures that only users with administrative privileges can access this page.

Icons:

You can define an icon to be shown alongside the page in the navigation menu by specifying the icon parameter. The icon name should match the one from Phosphor icon library.

Role-based Access Control:

By defining the role parameter, you can ensure that certain pages are only visible to users with specific WordPress roles. Use WordPress roles like editor, administrator, subscriber, etc.

Step 4: Using WordPress Functions and Shortcodes

Since you’re building custom pages inside a WordPress theme, you can leverage all the functionality that WordPress offers. You can include shortcodes, call WordPress functions, or even embed page builder shortcodes directly in your Blade templates.

Example: Using WordPress Functions

You can display dynamic content such as the current user's name or account details by utilizing WordPress functions within your Blade templates. For example, using wp_get_current_user() allows you to display personalized greetings or user-specific data.

{{-- title: "Account Overview" --}}
{{-- icon: "user-circle" --}}
{{-- show_in_menu: "true" --}}
{{-- role: "subscriber" --}}

@extends('layouts.app')

@section('content')
    <div class="text-center">
        <h2 class="mb-4 text-4xl font-black text-black dark:text-white">
            Welcome, {{ wp_get_current_user()->display_name }}!
        </h2>

        <p class="mb-4 text-gray-600 dark:text-gray-400">
            Here’s a quick overview of your account.
        </p>

        @shortcode('[account_details]')
    </div>
@endsection

Example: Using Shortcodes and Page Builders

You can use WordPress shortcodes in your Blade templates just like in any other WordPress post or page. Additionally, you can create a full design in your page builder (like Bricks Builder, Elementor, etc.), save it as a shortcode, and use it within your Blade file.

For instance, after designing your Live Support page using Bricks Builder, you can generate a shortcode for the page and include it in your Blade template. This allows you to combine the flexibility of Blade templates with the design power of page builders, giving you complete control over the appearance and functionality of your custom pages.

{{-- title: "Bricks Page" --}}
{{-- icon: "headset" --}}
{{-- show_in_menu: "true" --}}
{{-- role: "administrator" --}}

@extends('layouts.app')

@section('content')
    <div class="text-center">
        <h2 class="mb-4 text-4xl font-black text-black dark:text-white">
            Welcome to Live Support
        </h2>

        @shortcode('[bricks_template id="123"]')
    </div>
@endsection

Conclusion

By following this guide, you can easily create dynamic, custom pages for your Dollie Hub using Blade templates inside your WordPress theme. The metadata parameters allow for full customization, enabling you to control page visibility, icons, and role-based access. You can also enhance your pages by integrating WordPress functions, shortcodes, and designs from your favorite page builders, such as Bricks or Elementor.

Updated on: 21/08/2024