Account page tabs with additional content

Hi there.

I managed to get some answers, which may be helpful

You need to edit code in wp-includes/functions.php (just paste it in)

add_filter( ‘um_account_tab_general_fields’, ‘my_account_tab_general_fields’, 12, 2 );
function my_account_tab_general_fields( $args, $shortcode_args ) {
$args .= ‘,facebook’;

return $args;
}

This code will add “facebook” field into account/general tabs (“account” tab). This code will apparently work with only predefined UM fields, it will not work if you will try to do same this with field created by yourself.

Ive also managed to actually add TAB to accoount tabs, called “Wallet”. Again, you need to add this code to your functions.php

add_filter(‘um_account_page_default_tabs_hook’, ‘my_custom_tab_in_um’, 100 );
function my_custom_tab_in_um( $tabs ) {
$tabs[800][‘wallet’][‘icon’] = ‘um-faicon-pencil’;
$tabs[800][‘wallet’][‘title’] = ‘Wallet’;
$tabs[800][‘wallet’][‘submit_title’] = ‘Update your Wallet’;
$tabs[800][‘wallet’][‘custom’] = true;
return $tabs;
}

add_action(‘um_account_tab__wallet’, ‘um_account_tab__wallet’);
function um_account_tab__wallet( $info ) {
global $ultimatemember;
extract( $info );
$output = $ultimatemember->account->get_tab_output(‘wallet’);
if ( $output ) { echo $output; }
}

add_filter(‘um_account_content_hook_wallet’, ‘um_account_content_hook_wallet’);
function um_account_content_hook_wallet( $output ){
ob_start();
?>

<div class=”um-field”>

<!– Here goes your custom content –>

</div>

<?php

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

Its working for me.

Only thing I have no idea how to go about is – I’ve created “wallet” field in UM, but still do not know how to put it in “wallet” tab in accounts.

Support girl is quite helpful, but again, I have same feeling, its not easy to play with someone else code you do not know, and their instructions are not easy to follow.

I will post again if I will be able to resolve my issue

• This reply was modified 6 years, 6 months ago by odinn.

Hi obakemono, hi Odinn,

to insert a field in your custom tab try this snippet after “<!– Here goes your custom content –>”:

  <?php
  	global $ultimatemember;
  	$id = um_user('ID');
  	$output2 = '';

  	$names = [ 'NAMEOFFIELD' ];

	$fields = [];
  	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 )
    	$output2 .= UM()->fields()->edit_field( $key, $data );

  	echo $output2;
   ?>
</div>

		
	<?php

Hope that’ll help.

Lol, initially I came up with:

add_filter( ‘um_account_content_hook_wallet’, ‘um_account_content_hook_wallet’ );
function um_account_content_hook_wallet( $output ){
ob_start();
um_fetch_user( get_current_user_id() );

?>
<div class=”um-field um-field-wallet um-field-text um-field-type_text” data-key=”wallet”><div class=”um-field-label”><label for=”wallet-196″>Your Ethereum wallet address.<span class=”um-req” title=”Required”>*</span></label><div class=”um-clear”></div></div><div class=”um-field-area”><input autocomplete=”off” class=”um-form-field valid ” type=”text” name=”wallet-196″ id=”wallet-196″ value=”<?php echo um_user(‘wallet’); ?>” placeholder=”” data-validate=”” data-key=”wallet” />
<input type=”hidden” name=”user_id” id=”user_id” value=”<?php echo um_user(‘user_id’); ?>”/>
<input type=”hidden” name=”form_id” id=”form_id_196″ value=”196″ />

<?php
$output .= ob_get_contents();
ob_end_clean();
return $output;
}

It was working, I managed to update details on account page, but after saving my changes I was redirected to profile page ??

Your code below:

add_filter(‘um_account_content_hook_wallet’, ‘um_account_content_hook_wallet’);
function um_account_content_hook_wallet( $output ){
ob_start();

global $ultimatemember;
$id = um_user(‘ID’);
$output2 = ”;

$names = [ ‘wallet’ ];

$fields = [];
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 )
$output2 .= UM()->fields()->edit_field( $key, $data );

echo $output2;

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

Actually works like a dream, this is what I was looking for!

THANK YOU VERY MUCH ??

Hello,
I tried this on my own tab but in fact when I change some field values, then click on the “update” button, the form says that my account has been updated but the values aren’t saved.
Am I missing something ?

What if I wanted to create two additional tabs? How do I go about doing that?

@coxinha
Hi,
I have added the snippets and it only adds a button on the content.
I have added a custom filed in registration form asking my users to select their choices among predefined choices (check boxes). What I need, is that user can see and EDIT their choices in their account page. Would you please help me know how to handle it?
Thanks

I’ve successfully added a new tab that displays my desired custom field (a checkbox), but I have two outstanding problems:

1. After clicking the submit button, the form alerts that the account has been updated, but the value in the custom field has NOT changed. Is this because this particular custom field is new and not yet added to the users entry in the database?
2. Is there a way to change the text on the submit button to something other than the title of the custom tab?

• This reply was modified 5 years ago by dmcknight.

UPDATE: I’ve found a way to put a functioning profile form into the tab content:

1. Using the code above, add $tabs[800]['YOUR_CUSTOM_TAB']['show_button'] = false; to hide the default button that appears in your tab. It goes after the line with $tabs[800]['YOUR_CUSTOM_TAB']['custom'] = true;
2. Now create a custom profile form template, per the documentation here.
3. In your custom template, you can remove the profile form header elements by adding // to the beginning of the line with do_action( 'um_profile_header', $args );
4. Then, in WordPress admin, create a new ultimate member profile form with the fields you want users to be able to update.
5. In the new profile form, use the Customize this Form option to use your new custom template.
6. Now, back in your functions file, where Your Custom Content goes, paste in the shortcode for your new profile form using this format:

       <?php
   
         echo do_shortcode('[ultimatemember form_id="12345"]');
   
        ?>
   

   (12345 should be replaced with your new profile form’s id)

CAVEAT: Who can help us get this form to redirect back to the account tab page instead of the profile page?

• This reply was modified 5 years ago by dmcknight.
• This reply was modified 5 years ago by dmcknight.
• This reply was modified 5 years ago by dmcknight.
• This reply was modified 5 years ago by dmcknight.
• This reply was modified 5 years ago by dmcknight.
• This reply was modified 5 years ago by dmcknight.

SOLUTION: Please IGNORE the Profile form idea above.

The solution to getting your custom fields to save is to include some code that updates them whenever the account page is updated:

  /* 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','CustomField1');  // ADD THE META-KEYS HERE

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

Working code for add custom fields to account:

add_action(‘um_after_account_general’, ‘showExtraFields’, 10);

function showExtraFields()
{

$custom_fields = [
“company_name” => “F?retag”,
];

foreach ($custom_fields as $key => $value) {
$fields[ $key ] = array(
‘title’ => $value,
‘metakey’ => $key,
‘type’ => ‘select’,
‘label’ => $value,
);

$field_value = get_user_meta(um_user(‘ID’), $key, true) ? : ”;

$html = ‘<div class=”um-field um-field-‘.$key.'” data-key=”‘.$key.'”>
<div class=”um-field-label”>
<label for=”‘.$key.'”>’.$value.'</label>
<div class=”um-clear”></div>
</div>
<div class=”um-field-area”>
<input class=”um-form-field valid ”
type=”text” name=”‘.$key.'”
id=”‘.$key.'” value=”‘.$field_value.'”
placeholder=””
data-validate=”” data-key=”‘.$key.'”>
</div>
</div>’;

echo $html;
}
apply_filters(‘um_account_secure_fields’, $fields, get_current_user_id() );

}

/* 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(‘company_name’); // ADD THE META-KEYS HERE

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

kristoffer132 I think your code is what I’m after but it doesn’t seem to be working

@dmcknight

Your solution is 99% there for me. The fields are showing and ‘saving’ but for dropdowns, the wrong info is being saved. Its saving the option order number and not the actual value. So for example: a dropdown option like: <option value=”0″>Marketing</option> is saving as ‘0’ not ‘Marketing’ which means the info cannot be used elsewhere using um_user(‘field_name’).

Any idea on how the code could be modified to fix that? ??

@haydnjames, I think this is a limitation of how UM handles custom dropdowns.

Hi, I am just wondering how can I get rid of the left navigation bar on the account page and only leave the content on the right side, I tried using the css code below but it does not work. (It seems weird doing this but I’m just trying to customize the account page so that I’ll make a new navigation bar other than the default one they provide)

.um_account_tabs {
display:none;
}

.um_account .um_account_content {
width: 100%;
}

I am trying to add a logout link as a tab on the account page. So far I have this,

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

and as far as adding a new tab called logout, it works. However, I don’t want it to function like the other tabs, where when it’s clicked, it shows content. I just want it to link to the logout page so that when it’s clicked, it immediately logs the user out. How can I go about doing this?