Skip to content

Instantly share code, notes, and snippets.

@ultimatemember
Last active May 30, 2024 18:03
Show Gist options
  • Save ultimatemember/f7eab149cb33df735b08 to your computer and use it in GitHub Desktop.
Save ultimatemember/f7eab149cb33df735b08 to your computer and use it in GitHub Desktop.
Extend Ultimate Member Account page with custom tabs/content
/* 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;
}
@kslew
Copy link

kslew commented Jul 15, 2020

@mcknightd

Sorry, that doesn't work.

@mcknightd
Copy link

@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.

@kslew
Copy link

kslew commented Jul 15, 2020

@mcknightd

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

@Amitlebo
Copy link

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!

@markelc
Copy link

markelc commented Sep 10, 2020

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!

@markelc
Copy link

markelc commented Sep 10, 2020

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

@assyam
Copy link

assyam commented Nov 13, 2020

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

`

@ayhanmalkoc
Copy link

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

@Selah1337
Copy link

Selah1337 commented May 9, 2021

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;
    }
  1. 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).

  2. 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.

  3. 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.

@drispal
Copy link

drispal commented Jul 29, 2021

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 ?

@ogdesigns
Copy link

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

@NorbertKrupa
Copy link

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.

@crestsphere
Copy link

crestsphere commented Nov 30, 2022

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

@melwong
Copy link

melwong commented Apr 30, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment