Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
@stefankroesbergen
Copy link

stefankroesbergen commented Apr 18, 2020

Could someone please help me with the question above?

@mcknightd
Copy link

mcknightd commented Apr 19, 2020

@stefankroesbergen There are many ways to do this, and this might not be the best way, but it works:

View your account page using a browser web inspector and find the data-tab attribute of the href tag in your custom tab. It's the same value you used in your functions.php file to create the custom tab. You'll need this value later on. For this example, we'll use data-tab="MyCustomTab".

Now make a copy of the file /wp-content/plugins/ultimate-member/templates/account.php into your wordpress sub-theme folder: /wp-content/themes/(your subtheme)/ultimate-member/templates/account.php.

Wordpress will now use the new sub-theme account.php file instead of the original one in the plugin folder when rendering an account page. Open the new account.php file (in your sub-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="MyCustomTab"]').prop('disabled', true).click(function(e){ // CHANGE 'MyCustomTab' TO YOUR DATA-TAB VALUE
        e.preventDefault();
        window.location.href="https://wordpress.org";}); // CHANGE THIS TO THE URL YOU WANT
      })
      </script>
     <?php
     }

Per the comments, change MyCustomTab to whatever your data-tab value is, and change the wordpress.org link to the url you want. This should disable that tab's normal delegated behavior and tell it to it open the url instead.

@stefankroesbergen
Copy link

stefankroesbergen commented Apr 19, 2020

@mcknightd, perfect that did the job. Can you also advised how the custom tab be placed directly under the "My orders" tab?

@mcknightd
Copy link

mcknightd commented Apr 20, 2020

@stefankroesbergen

Can you also advised how the custom tab be placed directly under the "My orders" tab?

In the function you used to create the tab, in this block of lines

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

Change the [800]'s to lower or higher numbers in increments of 100 to change its order. You might need to change it in increments of 50 to get it in the exact spot.

@Wesleyagbai
Copy link

Wesleyagbai commented Apr 30, 2020

Hello,I would like to add a page that was added to the woocommerce account page, I tried the woocommerce extension but it didn't display the page I'm looking for but displayes the default woocommerce page, my question is how do i add a page without the page id or shortcode?

@ayhanmalkoc
Copy link

ayhanmalkoc commented May 7, 2020

Hello friends.

Can I include the woocommerce my bookings page on my Ultimate member account page?

  • Default woocommerce my account / my bookings
    path: woocommerce-bookings / includes / templates / myaccount / my-bookings.php

Can you help me?

@GitHubpappas
Copy link

GitHubpappas commented May 16, 2020

Hi

Can anyone help me on adding extra tabs and content on my profile ?
Also I am having difficulty adding content to my existing About Tab

I am using the free version without the theme
For now I have About Posts Comments tabs
About has no content I would like to add biography there
I tried a lot with no luck ....
I don't want to modify ( if possible ) plugin files eg. /public_html/wp-content/plugins/ultimate-member/includes/core/class-profile.php

Any help will be deeply appreciated

Kind regards

NIkos

@GitHubpappas
Copy link

GitHubpappas commented May 19, 2020

Hi

Can anyone help me on adding extra tabs and content on my profile ?
Also I am having difficulty adding content to my existing About Tab

I am using the free version without the theme
For now I have About Posts Comments tabs
About has no content I would like to add biography there
I tried a lot with no luck ....
I don't want to modify ( if possible ) plugin files eg. /public_html/wp-content/plugins/ultimate-member/includes/core/class-profile.php

Any help will be deeply appreciated

Kind regards

NIkos

After all the trouble finally it worked O_O
Should be something with my theme
Now it's working fine after the updates I didn't touch the code and it works now

The only problem I have now is that I am trying to override the templates in profile but the WP still uses the ones in the original location.
I have exactly the same structure in my child theme and I use a custom profile with no problem

@ghmercado
Copy link

ghmercado commented May 21, 2020

so sorry super um noob here, i need to make a multi column, multi tab profile form
aa

is above code the way to do this? any help welcome tia

@kemmieg
Copy link

kemmieg commented Jun 8, 2020

Is there a way to add a tab that lists all the posts by that particular user? I've tried using the wp_query but it breaks the page.

@jooyoungjoung87
Copy link

jooyoungjoung87 commented Jun 13, 2020

Hi @mcknightd
I used your code. Everything seems perfect. However, the only issue is that it prints the meta key values as numbers (which are option values) 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

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

`

@mcknightd
Copy link

mcknightd commented Jun 14, 2020

@GitHubpappas

The only problem I have now is that I am trying to override the templates in profile but the WP still uses the ones in the original location.

In the WP dashboard, edit the Profile Form and make sure you have selected your custom Template on the right under Customize This Form. Per ultimate member's instructions, you must also name the custom template file like this: 'profile-_______.php', and include the name at the beginning like <?php /* Template: Custom Profile */ ?>

@mcknightd
Copy link

mcknightd commented Jun 14, 2020

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

@mcknightd
Copy link

mcknightd commented Jun 14, 2020

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

@Soul27
Copy link

Soul27 commented Jul 13, 2020

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.

@kslew
Copy link

kslew commented Jul 15, 2020

Bigbrain coins

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.

@mcknightd
Copy link

mcknightd commented Jul 15, 2020

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

@kslew
Copy link

kslew commented Jul 15, 2020

Bigbrain coins 2

@mcknightd

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

@mcknightd
Copy link

mcknightd commented Jul 15, 2020

@kslew, try this:

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

@kslew
Copy link

kslew commented Jul 15, 2020

@mcknightd

Sorry, that doesn't work.

@mcknightd
Copy link

mcknightd commented Jul 15, 2020

@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

Amitlebo commented Aug 11, 2020

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

ayhanmalkoc commented May 4, 2021

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

ogdesigns commented Dec 8, 2021

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

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