Extend Ultimate Member Account page with custom tabs/content

gistfile1.php

/* add new tab called "mytab" */

add_filter('um_account_page_default_tabs_hook', 'my_custom_tab_in_um', 100 );
function my_custom_tab_in_um( $tabs ) {
	$tabs[800]['mytab']['icon'] = 'um-faicon-pencil';
	$tabs[800]['mytab']['title'] = 'My Custom Tab';
	$tabs[800]['mytab']['custom'] = true;
	return $tabs;
}
	
/* make our new tab hookable */

add_action('um_account_tab__mytab', 'um_account_tab__mytab');
function um_account_tab__mytab( $info ) {
	global $ultimatemember;
	extract( $info );

	$output = $ultimatemember->account->get_tab_output('mytab');
	if ( $output ) { echo $output; }
}

/* Finally we add some content in the tab */

add_filter('um_account_content_hook_mytab', 'um_account_content_hook_mytab');
function um_account_content_hook_mytab( $output ){
	ob_start();
	?>
		
	<div class="um-field">
		
		<!-- Here goes your custom content -->
		
	</div>		
		
	<?php
		
	$output .= ob_get_contents();
	ob_end_clean();
	return $output;
}

@jooyoungjoung87

I used your code. Everything seems perfect. However, the only issue is that it prints the meta key values as numbers on the page (forum site) after the user updates their info successfully in the account tab. Idk why this happens.
Below is the image link for reference (red border-box)
https://imgur.com/THn0WKQ

I have not worked with a forum site so I'm not familiar with the page you are showing in your screenshot.

@ghmercado
The above code will allow you to add more tabs to the user profile form and include whatever custom fields or content you want in those tabs.

But the default tabs layout in ultimate member is on the left side instead of the top like in the image you have. You could probably get ultimate member tabs to display along the top using a custom template, but it could be a relatively advanced undertaking as far as css goes. There is a paid UM Theme extension that might have some options for this too.

Hi

Awesome plugin, you have created. I have added a custom account tab to allow my users to upload a document. When users click on 'Update Profile', I want the data to be saved and the 'verification request' to be sent automatically.

I succeeded in saving the data,
but how do i add the verification request on that hook?

Thank you.

Hello,

For the points tab (created using myCRED plugin), how to I capitalize the first letter of each word to become "My Big Brain Coins" instead ?
Thank you.

@kslew

An easy way would be to find the ID of the points tab using a browser inspector and then create a css rule in your site CSS overrides like this:
#theID { text-transform: capitalize; }

where theID is the id of the tab.

@mcknightd

This is what I saw.
I'm sorry. I'm not trained for coding.

@kslew, try this:

.um-account-nav a[data-tab="points"] { text-transform: capitalize; }

@mcknightd

Sorry, that doesn't work.

@kslew you can check again in your inspector to see if the style is being applied and overridden of if it is not being applied at all.

@mcknightd

It works only when I open the inspector.
It goes back to 'normal' after I close the inspector.

Hello!
Is there a way with the code above to show courses from learndash plugin by the same profile in which is viewed.
e.g. "admin" is the author of course "how to cook meth", so when viewing "admin" profile, in the new custom tab it will show courses given by "admin" and "how to cook meth" will be listed same as "posts" tab is shown. Thanks!

Hi @mcknightd
I have a problem with the dropdowns. Your code it works perfect to edit a text custom input from account.php page, but doesn't work properly with dropdowns. When i update, the value disappear.

Also a second question, how can I view in other screen, on dropdown selected value, imagining that the ID is "dropdown_custom_1"?
Like this it doesnt work: echo um_user('dropdown_custom_1');

Thank you!

This might help answer some questions here about adding a custom tab and adding custom fields to it and having the fields update properly.

First, you must create the new custom fields in the Ultimate Member dashboard. You can just build them into a profile form and save the form so they are in the system.

In the example below, the meta-keys for the two fields we add are: CustomField1 and CustomField2
The below code works in UM version 2.1.1
Note: This does not validate the fields.

`

  /* create new tab */
  add_filter('um_account_page_default_tabs_hook', 'MyCustomTab', 100 );
    function MyCustomTab( $tabs ) {
    $tabs[800]['MyCustomTab']['icon'] = 'um-faicon-pencil-square-o'; // tab icon
    $tabs[800]['MyCustomTab']['title'] = 'My Custom Tab'; // tab title
    $tabs[800]['MyCustomTab']['submit_title'] = 'Update'; // button text
    $tabs[800]['MyCustomTab']['custom'] = true;
    return $tabs;
  }

  /* make our new tab hookable */
  add_action('um_account_tab__MyCustomTab', 'um_account_tab__MyCustomTab');
    function um_account_tab__MyCustomTab( $info ) {
    global $ultimatemember;
    extract( $info );
    $output = $ultimatemember->account->get_tab_output('MyCustomTab');
    if ( $output ) { echo $output; }
  }

  /* Finally we add some content in the tab */
  add_filter('um_account_content_hook_MyCustomTab', 'um_account_content_hook_MyCustomTab');
  function um_account_content_hook_MyCustomTab( $output ){
    ob_start();

    $id = um_user('ID');
    $output = '<div class="um-field">';
    $names = array('CustomField1','CustomField1');  // ADD THE META-KEYS HERE

    $fields = array(); 
    foreach( $names as $name ){
      $fields[ $name ] = UM()->builtin()->get_specific_field( $name );
    }
    $fields = apply_filters('um_account_secure_fields', $fields, $id);
    foreach( $fields as $key => $data ){
      $output .= UM()->fields()->edit_field( $key, $data );
    }

    $output .= '</div>';

    $output .= ob_get_contents();
    ob_end_clean();
    return $output;
  }

  /* ensure that the custom fields are updated when the account is updated */
  add_action('um_account_pre_update_profile', 'getUMFormData', 100);

  function getUMFormData(){
    $id = um_user('ID');
    $names = array('CustomField1','CustomField2');  // ADD THE META-KEYS HERE

    foreach( $names as $name )
      update_user_meta( $id, $name, $_POST[$name] );
  }

`

I meen the problem is with this code

Hi @mcknightd
I used your code thank you for it, could you plz help me for making the fields editable only with admin for each user? thank you

This might help answer some questions here about adding a custom tab and adding custom fields to it and having the fields update properly.

First, you must create the new custom fields in the Ultimate Member dashboard. You can just build them into a profile form and save the form so they are in the system.

In the example below, the meta-keys for the two fields we add are: CustomField1 and CustomField2
The below code works in UM version 2.1.1
Note: This does not validate the fields.

`

  /* create new tab */
  add_filter('um_account_page_default_tabs_hook', 'MyCustomTab', 100 );
    function MyCustomTab( $tabs ) {
    $tabs[800]['MyCustomTab']['icon'] = 'um-faicon-pencil-square-o'; // tab icon
    $tabs[800]['MyCustomTab']['title'] = 'My Custom Tab'; // tab title
    $tabs[800]['MyCustomTab']['submit_title'] = 'Update'; // button text
    $tabs[800]['MyCustomTab']['custom'] = true;
    return $tabs;
  }

  /* make our new tab hookable */
  add_action('um_account_tab__MyCustomTab', 'um_account_tab__MyCustomTab');
    function um_account_tab__MyCustomTab( $info ) {
    global $ultimatemember;
    extract( $info );
    $output = $ultimatemember->account->get_tab_output('MyCustomTab');
    if ( $output ) { echo $output; }
  }

  /* Finally we add some content in the tab */
  add_filter('um_account_content_hook_MyCustomTab', 'um_account_content_hook_MyCustomTab');
  function um_account_content_hook_MyCustomTab( $output ){
    ob_start();

    $id = um_user('ID');
    $output = '<div class="um-field">';
    $names = array('CustomField1','CustomField1');  // ADD THE META-KEYS HERE

    $fields = array(); 
    foreach( $names as $name ){
      $fields[ $name ] = UM()->builtin()->get_specific_field( $name );
    }
    $fields = apply_filters('um_account_secure_fields', $fields, $id);
    foreach( $fields as $key => $data ){
      $output .= UM()->fields()->edit_field( $key, $data );
    }

    $output .= '</div>';

    $output .= ob_get_contents();
    ob_end_clean();
    return $output;
  }

  /* ensure that the custom fields are updated when the account is updated */
  add_action('um_account_pre_update_profile', 'getUMFormData', 100);

  function getUMFormData(){
    $id = um_user('ID');
    $names = array('CustomField1','CustomField2');  // ADD THE META-KEYS HERE

    foreach( $names as $name )
      update_user_meta( $id, $name, $_POST[$name] );
  }

`

How to add "logout" link to the account page?

How to add "logout" link to the account page?

@ayhanmalkoc To add a custom logout link, please do the following.

1. In your child theme's functions.php file (I am assuming you have a child theme set up, if not, I recommend you do so), paste the following code

/**
 * UM Custom Logout Tab
 */

    add_filter('um_account_page_default_tabs_hook', 'um_logout_tab', 100 );
    function um_logout_tab( $tabs ) {
    	$tabs[800]['logout']['icon'] = 'um-faicon-sign-out';
    	$tabs[800]['logout']['title'] = 'Logout';
    	$tabs[800]['logout']['custom'] = true;
        $tabs[800]['logout']['show_button'] = false;
    	return $tabs;
    }
    	
    /* Make logout tab hookable */
    
    add_action('um_account_tab__logout', 'um_account_tab__logout');
    function um_account_tab__logout( $info ) {
    	global $ultimatemember;
    	extract( $info );
    
    	$output = $ultimatemember->account->get_tab_output('logout');
    	if ( $output ) { echo $output; }
    }
    
    /* Add some content in the tab */
    
    add_filter('um_account_content_hook_logout', 'um_account_content_hook_logout');
    function um_account_content_hook_logout( $output ){
    	ob_start();
    	?>
    		
    	<div class="um-field">
    		
    		<!-- Custom content -->
    		
    	</div>		
    		
    	<?php
    		
    	$output .= ob_get_contents();
    	ob_end_clean();
    	return $output;
    }

2. In your child theme (wp-content/themes/your-child-theme/), create a new folder called "ultimate-member" and within that new folder, create another folder called "templates". So your path should now be (wp-content/themes/your-child-theme/ultimate-member/templates).

3. Navigate to the Ultimate Member plugin folder (wp-content/plugins/ultimate-member/templates) and copy the file named "account.php". Then, go back to the "templates" folder you just created in your child theme in step 2 and paste the account.php file in there. Wordpress will now use the new account.php file in your child-theme, instead of the original one in the plugin folder, when rendering an account page.

4. Following @mcknightd steps earlier

Open the new account.php file (in your child theme folder), and find the line near the end with do_action( 'um_after_account_page_load' ); ?>. Paste the following code directly before that line:

     add_action( 'um_after_account_page_load', 'override_a_tab', 10 );
     function override_a_tab() {
      ?>
      <script type="text/javascript">
      jQuery(document).ready(function() {
        jQuery('[data-tab="logout"]').prop('disabled', true).click(function(e){
        e.preventDefault();
        window.location.href="https://yoursite.com/logout";}); // CHANGE THIS TO YOUR LOGOUT URL
      })
      </script>
     <?php
     }

Doing this will disable that tab's normal delegated behaviour and tell it to it go to that URL instead, which if you change it to your logout URL, will hence logout the user out when the tab is clicked.

Hello,
I have an issue with my account page that is very disturbing.
I have a new tab called monBeneficiaire in which I want to edit some fields (lien-de-parente in my example).
I tried both code of @hedgehog90 and @mcknightd but it is the same.
When I load my page account, I am in the tab general. If I made change directly and press the update button, my updates are commited.
But if I try to change tab like if I go in the password tab then come back to the general tab, I can still edit my fields but when I update, nothing change. Basically my updates are not commited if I click on any of my tab (even general).
I've been throught the whole conversation of this page but It seems that no one had the same issue.
Does someone have any clues of what happens ?

Hello @hemnathmouli @Ferdinand1945 @hirenshah @ghmercado @jkester1986 and everyone... Please how do i disable the button that is automatically added to the new custom account tab?
Image here >> https://ibb.co/RvXLMFv

Is there a way to return the user to their account page after saving details from a custom tab? It currently gives a 404 when it tries to return to the custom tab.

How do I integrate zoom online meeting platform with UM plugin?
Thanks in advance.

Could we add a submenu within the custom tab? A sub-custom tab that is.