Adding a custom account page

[apos37]

I am trying to add a custom account page. This is my first time using the docs. I watched the video on how to use custom templates, and figured out how to add an item to the sidebar menu:

add_filter( 'hivepress/v1/menus/user_account', [ $this, 'my_events_account_sidebar' ], 10, 2 );

public function my_events_account_sidebar( $props, $menu ) {
    return hivepress()->helper->merge_arrays( $props, [
        'items' => [
            'my_events' => [
                'label'  => esc_html__( 'Events', 'hivepress' ),
                'route'  => [ $this, 'my_events_account_content' ],
                '_order' => 11,
            ]
        ]
    ] );
} // End my_events_account_sidebar()

Now I am trying to figure out how to add the page content. I assume I should add my own route, but I’m not finding any documentation on how to do so. I trying using a callback name ([ $this, 'my_events_account_content' ], and that didn’t work. Any further help here?

[apos37]

Okay, I got a little further with this, but still need some help. I used hivepress/v1/routes and debugged the array that is passed. Here is my code:

add_filter( 'hivepress/v1/routes', [ $this, 'account_route' ] );

public function account_route( $routes ) {
    // ddtt_write_log( $routes );
    return hivepress()->helper->merge_arrays( $routes, [
        'user_account_events' => [
            'title' => 'Events',
            'base'  => 'user_account_page',
            'path'  => '/events',
            'redirect'  => [ $this, 'redirect_account_page' ],
            'action'    => [ $this, 'render_account_page' ],
            'paginated' => true,
        ]
    ] );
} // End account_route()

public function redirect_account_page() {
    // Check authentication
    if ( !is_user_logged_in() ) {
        return hivepress()->router->get_return_url( 'user_login_page' );
    }

    // Else return false
    return false;
}

public function render_account_page() {
    // Render page template.
    return 'WOOHOO!';
} // End render_account_page()

This worked to create the path (/account/events/), but the page is completely blank and just shows my “WOOHOO” message. I can’t seem to figure out how to include the rest of the website and the account section. Any assistance would be greatly appreciated.

[tharlab]

I think uwill never getting answer here,
there is alot of question here about it but never got answer
instead developer suggest them to hire pro developer…
maybe because of complexity about it, as dev i also struggle to add only a menu,
the easier way i do is if UR using woocommerce create menu then embed it into hivepress account page, this also the way HP integrate with some woocommerce features …

[apos37]

Thank you. I’m not using Woocommerce. Maybe I’ll copy the template and just hard code if I can’t get a response. I agree that I see a LOT of responses saying, “hire a developer.” I understand that for a lof of things, but something like this should be an easy thing to just point me in the right direction. Not looking for them to write code for me.

[apos37]

Okay, I figured out a workaround for anybody that is interested.

Step 1: Make an “Account” page using the /account/ slug as a placeholder. It won’t do anything. Just call it what you want.

Step 2: Make the page(s) you want to add to your account area as normal pages, with the “Account” page you created as the parent so that it follows the same url structure (/account/my-events/).

Step 3: Edit the page(s) in the block editor like you would a template. Basically, add a column block with 1/3 on the left side and 2/3 on the right side. On the left side, add a shortcode that we will be creating: [sl_account_sidebar]. On the right side, add a “Heading” block for the title, call it what you want, set it to H1, and add “content-title” to the custom classes. It will then match the theme titles. Below that, add your content, and save.

Step 4: Duplicate the menu in the menu section, including your custom page(s):

Make note of the menu id found in the url query string (ie. /wp-admin/nav-menus.php?menu=82)

Step 5: Use the following code to get the link on the account menu. I have my custom code in a class, so I am using “public function” and calling it from my constructor with [ $this, 'account_sidebar' ]. If you are not using a class, just remove “public”, and call it with 'account_sidebar' instead.

add_filter( 'hivepress/v1/menus/user_account', [ $this, 'my_account_sidebar' ], 10, 2 );

public function my_account_sidebar( $props, $menu ) {
    return hivepress()->helper->merge_arrays( $props, [
        'items' => [
            'my_events' => [
                'label'  => esc_html__( 'Events', 'hivepress' ),
                'url'    => '/account/my-events/',
                '_order' => 11,
            ]
        ]
    ] );
} // End account_sidebar()

Step 6: Create our shortcode for the sidebar:

add_shortcode( 'sl_account_sidebar', [ $this, 'display_account_sidebar' ] );

public function display_account_sidebar() {
    // Menu id (the one you made note of earlier)
    $menu_id = 82;

    // Get the menu items
    $menu = wp_get_nav_menu_items( $menu_id );

    // If found?
    if ( is_user_logged_in() && !empty( $menu ) ) {

        // The sidebar
        $results = '
        <aside class="sl-sidebar hp-page__sidebar site-sidebar" data-component="sticky" style="height: 100% !important;">
            <nav class="hp-widget widget widget_nav_menu hp-menu hp-menu--user-account">
                <ul>';
                
                    // Now iter the links, including the vendor profile
                    foreach ( $menu as $item ) {

                        // Check if current
                        $current_page = get_the_permalink( get_the_ID() );
                        if ( $current_page == $item->url ) {
                            $current_class = ' hp-menu__item--current current-menu-item';
                        } else {
                            $current_class = '';
                        }

                        // The link
                        $results .= '<li class="menu-item hp-menu__item hp-menu__item--vendor-view'.$current_class.'"><a href="'.$item->url.'"><span>'.$item->title.'</span></a></li>';
                    }

        $results .= '</ul>
            </nav>
        </aside>';

        // Return
        return $results;
    }
    return false;
} // End display_account_sidebar()

I think that’s it. If you have any questions, let me know.

[tharlab]

good you are figured out, but i think method above inefficient,
hivepress declare it self as framework, but dont know what kind of framework LOL,
technically to create menu endpoint you need define controller/route,
and sadly there is no proper documentation about it lol
even though this is a very basic important feature
they need to learn from mature product like buddypress/WC
here my custom menu with sub-tab menu horizontally adapted from buddypress

[apos37]

I agree completely. Lol. Hence the word, “workaround.”

[ihor]

I’m sorry for the late reply, we aim to answer within 24 hours but developer-specific topics may be delayed if they require more dev attention. Thanks for sharing the workaround, I would suggest the same - using a page created in WordPress/Pages and setting the URL for a newly added menu item (via the account menu hook) is the easiest way to do this. The only downside is that the account layout with the sidebar and menu is not inherited, but you can partly re-create the menu via the Menu block or widget. The proper way to do this (which requires further development) is creating a custom template that inherits the account template, creating a route for it, etc.

Hope this helps.