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;
}

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.