Add multiple tabs to accounts page
-
Hello Team
I’m trying to add multiple tabs to the accounts using the sample code provided in the doc. but apparently only one tab gets added. Please help us to test this.
Also may i know what is the index used in the $tabs array e:g 9999 in $tabs[999]?
<?php
/* add new tab called "nxltab" */
add_filter('um_account_page_default_tabs_hook', 'nxl_tab_in_um', 100 );
function nxl_tab_in_um( $tabs ) {
$tabs[9999]['nxltab']['icon'] = 'um-icon-log-out';
$tabs[9999]['nxltab']['title'] = 'Logout';
$tabs[9999]['nxltab']['custom'] = true;
return $tabs;
}
/* make our new tab hookable */
add_action('um_account_tab__nxltab', 'um_account_tab__nxltab');
function um_account_tab__nxltab( $info ) {
global $ultimatemember;
extract( $info );
$output = $ultimatemember->account->get_tab_output('nxltab');
if ( $output ) { echo $output; }
}
/* Finally we add some content in the tab */
add_filter('um_account_content_hook_nxltab', 'um_account_content_hook_nxltab');
function um_account_content_hook_nxltab( $output ){
$logout_url = wp_logout_url(home_url());
ob_start();
?>
<div class="um-field">
<p>Are you sure you want to logout?</p>
<a class="um-button" href="<?php echo $logout_url; ?>">Logout</a>'
</div>
<?php
$output .= ob_get_contents();
ob_end_clean();
return $output;
}
/* Another custom tab with form */
/**
* Add custom tabs.
*
* @param array $tabs Account tabs.
* @return array
*/
function um_account_custom_tabs( $tabs ) {
$tabs[ 10000 ][ 'custom_tab_01' ] = array(
'icon' => 'um-faicon-plus',
'title' => __( 'Custom fields', 'ultimate-member' ),
'submit_title' => __( 'Save', 'ultimate-member' ),
'custom' => true,
);
return $tabs;
}
add_filter( 'um_account_page_default_tabs_hook', 'um_account_custom_tabs', 99 );
/**
* Add custom tab content.
*
* @param string $output Tab content.
* @return string
*/
function um_account_content_custom_tab_01( $output = '' ) {
// List of fields you want to display.
$fields = array(
'um_pet',
'um_colors',
'um_multi_select',
);
ob_start();
foreach( $fields as $key ) {
$data = UM()->builtin()->get_a_field( $key );
echo UM()->fields()->edit_field( $key, $data );
}
return ob_get_clean();
}
add_filter( 'um_account_content_hook_custom_tab_01', 'um_account_content_custom_tab_01', 20 );
/**
* Validate custom fields.
*
* @param array $post_args Input data.
*/
function um_account_errors_custom_tab_01( $post_args ) {
if( ! isset( $post_args[ 'um_account_submit' ] ) ) {
return;
}
// List of fields you want to validate.
$fields = array(
'um_pet',
'um_colors',
'um_multi_select',
);
foreach( $fields as $key ) {
$data = UM()->builtin()->get_a_field( $key );
if( empty( $post_args[ $key ] ) && ! empty( $data['required'] ) ) {
UM()->form()->add_error( $key, __( 'This field is required.', 'ultimate-member' ) );
}
}
}
add_action( 'um_submit_account_errors_hook', 'um_account_errors_custom_tab_01', 20 );
/**
* Save custom fields.
*
* @param int $user_id User ID.
*/
function um_account_update_custom_tab_01( $user_id ) {
// List of fields you want to update.
$fields = array(
'um_pet',
'um_colors',
'um_multi_select',
);
foreach( $fields as $key ) {
if( isset( $_POST[ $key ] ) && ! UM()->form()->has_error( $key ) ) {
update_user_meta( $user_id, $key, wp_unslash( $_POST[ $key ] ) );
}
}
}
add_action( 'um_after_user_account_updated', 'um_account_update_custom_tab_01', 8 );Best Regards
-
You can add multiple tabs together in a function like this
add_filter('um_account_page_default_tabs_hook', 'nxl_tab_in_um', 100 ); function nxl_tab_in_um( $tabs ) { $tabs[900][ 'custom_tab_01' ] = array( 'icon' => 'um-faicon-plus', 'title' => __( 'Custom fields', 'ultimate-member' ), 'submit_title' => __( 'Save', 'ultimate-member' ), 'custom' => true, ); $tabs[900]['nxltab']['icon'] = 'um-icon-log-out'; $tabs[900]['nxltab']['title'] = 'Logout'; $tabs[900]['nxltab']['custom'] = true; $tabs[900]['nxltab']['show_button'] = false; return $tabs; }Your issue with the custom tab is the content function is returning nothing and UM is not displaying the tab.
You can try this replacement
function um_account_content_custom_tab_01( $output = '' ) { // List of fields you want to display. $output .= '<div class="um-field">'; // Meta keys for the UM fields to display $meta_keys = array( 'um_pet', 'um_colors', 'um_multi_select', ); $fields = array(); foreach( $meta_keys as $meta_key ) { $fields[ $meta_key ] = UM()->builtin()->get_specific_field( $meta_key ); } foreach( $fields as $key => $data ) { $output .= UM()->fields()->edit_field( $key, $data ); } $output .= '</div>'; return $output; } add_filter( 'um_account_content_hook_custom_tab_01', 'um_account_content_custom_tab_01', 20 );Thanks so much veronica. The tab shows up but doesn’t render any fields.
may I also know what is that index in $tabs array signifies? e:g 999 in $tab[999]
further, is it possible to add the comments profile tab as a accounts tab?
Here is the complete code , when i run it through the html validator it shows these errors. It shows an unclosed form element but i have not used any form therein the code. Please help
https://validator.w3.org/nu/#l68c22889
Here is the site : https://bit.ly/3Yb7q6H
<?php
// Requires for user deletion process
require_once( ABSPATH.'wp-admin/includes/user.php' );
// Init ajax handlers
add_action( 'wp_ajax_nxl_delete_acct', 'nxl_delete_acct' );
add_action( 'wp_ajax_nopriv_nxl_delete_acct', 'nxl_delete_acct' );
function nxl_user_logged_using_socials(){
global $wpdb;
//get the user id
$user_id;
if ( is_user_logged_in() ) {
$user_id = get_current_user_id();
} else {
return false;
}
$provider = $wpdb->get_results("SELECT type FROM {$wpdb->prefix}social_users WHERE ID=".$user_id, OBJECT);
if(empty($provider) || is_null($provider)){
return false;
}
else{
return true;
}
if ( $wpdb->last_error ) {
error_log('wpdb error: ' . $wpdb->last_error);
}
}
/* add new tab called "nxltab" */
add_filter('um_account_page_default_tabs_hook', 'nxl_tab_in_um', 100 );
function nxl_tab_in_um( $tabs ) {
/* Add Comments tab */
$tabs[900][ 'comments_tab' ] = array(
'icon' => 'um-faicon-plus',
'title' => __( 'Comments', 'ultimate-member' ),
'custom' => true,
'show_button' => false
);
/* Add Logout tab */
$tabs[1000][ 'nxltab' ] = array(
'icon' => 'um-icon-log-out',
'title' => __( 'Logout', 'ultimate-member' ),
'custom' => true,
'show_button' => false
);
/* Check if the current user has logged in using a social provider */
$is_social_login = nxl_user_logged_using_socials();
if($is_social_login){
/* If it is a social login, hide the password change tab*/
unset($tabs[200]);
/* Further, hide the default account deletion form and load the nxl account deletion form */
unset($tabs[99999]);
$tabs[99999][ 'nxl_delete' ] = array(
'icon' => 'um-faicon-trash-o',
'title' => __( 'Delete Account', 'ultimate-member' ),
'custom' => true,
'show_button' => false
);
}
return $tabs;
}
/* make our new tab hookable */
add_action('um_account_tab__nxltab', 'um_account_tab__nxltab');
function um_account_tab__nxltab( $info ) {
global $ultimatemember;
extract( $info );
$output = $ultimatemember->account->get_tab_output('nxltab');
if ( $output ) { echo $output; }
}
add_action('um_account_tab__nxl_delete', 'um_account_tab__nxl_delete');
function um_account_tab__nxl_delete( $info ) {
global $ultimatemember;
extract( $info );
$output = $ultimatemember->account->get_tab_output('nxl_delete');
if ( $output ) { echo $output; }
}
add_action('um_account_tab__comments_tab', 'um_account_tab__comments_tab');
function um_account_tab__comments_tab( $info ) {
global $ultimatemember;
extract( $info );
$output = $ultimatemember->account->get_tab_output('comments_tab');
if ( $output ) { echo $output; }
}
/* Finally we add some content in the tabs */
add_filter('um_account_content_hook_nxltab', 'um_account_content_hook_nxltab', 20);
function um_account_content_hook_nxltab( $output = ''){
$logout_url = wp_logout_url(home_url());
ob_start();
?>
<div class="um-field um-left">
<p>Are you sure you want to logout?</p>
<a class="um-button nxl_fit_content" href="<?php echo $logout_url; ?>">Logout</a>
</div>
<?php
$output .= ob_get_contents();
ob_end_clean();
return $output;
}
add_filter('um_account_content_hook_nxl_delete', 'um_account_content_hook_nxl_delete', 20);
function um_account_content_hook_nxl_delete( $output = ''){
ob_start();
?>
<p>Are you sure you want to delete your account? This will erase all of your account data from the site. To delete your account enter your email address below.</p>
<div id="um_field_0_single_user_email" class="um-field um-field-email um-field-single_user_email um-field-email um-field-type_email" data-key="single_user_email">
<div class="um-field-label">
<label for="single_user_email">Email<span class="um-req" title="Required">*</span></label>
</div>
<div class="um-field-area">
<input class="um-form-field valid" type="email" name="single_user_email" id="single_user_email" value="" placeholder="" data-validate="" data-key="single_user_email" aria-invalid="false">
</div>
</div>
<div class="um-col-alt">
<button class="um-button nxl_fit_content" id="nxl_delete_acct" type="submit">Delete Account</button>
</div>
<div class="nxl_notifications_wrapper">
<span id="nxl_notifications"></span>
</div>
<?php
$output .= ob_get_contents();
ob_end_clean();
return $output;
}
/**
* Add custom tab content.
*
* @param string $output Tab content.
* @return string
*/
function um_account_content_comments_tab( $output = '' ) {
$user_id = get_current_user_id();
// get comments data structure
$comments = get_comments( array(
'number' => 10,
'user_id' => $user_id,
'post_status' => array('publish')
) );
if ( ! empty( $comments ) ) {
$output .= '<div class="um-ajax-items">';
foreach ( $comments as $comment ) {
$comment_title = apply_filters( 'um_user_profile_comment_title', get_the_title( $comment->comment_post_ID ), $comment );
$link = apply_filters( 'um_user_profile_comment_url', get_permalink( $comment->comment_post_ID ), $comment );
$output .= '<div class="um-item">
<div class="um-item-link">
<i class="um-icon-chatboxes"></i>
<a href="'.esc_url( get_comment_link( $comment->comment_ID ) ).'">
'.get_comment_excerpt( $comment->comment_ID ).'
</a>
</div>
<div class="um-item-meta">
<span>'.
'On <a href="'.$link.'">'.$comment_title.'</a>'
.'</span>
</div>
</div>';
}
if ( $count_comments > 10 ) {
$output .= '<div class="um-load-items"><a href="javascript:void(0);" class="um-ajax-paginate um-button" data-hook="um_load_comments"
data-user_id="'.esc_attr( um_get_requested_user() ).'" data-page="1"
data-pages="'.esc_attr( ceil( $count_comments / 10 ) ).'">'.
_e( 'load more comments', 'ultimate-member' ).'
</a>
</div>';
}
} else {
$output .= '<div class="um-profile-note"><span>You have not made any comments</span></div>';
}
$output .= '</div>';
return $output;
}
add_filter( 'um_account_content_hook_comments_tab', 'um_account_content_comments_tab', 20 );unclosed form element
Yes, the Account page is built as a large Form and the different Tabs are displayed within this Form when being selected.
.../plugins/ultimate-member/includes/core/class-account.php .../plugins/ultimate-member/includes/core/um-actions-account.php
- The topic ‘Add multiple tabs to accounts page’ is closed to new replies.
