Add a custom Account Tab with Profile Form fields

-
96812109_235495604568625_8265686744658083840_n

UM has a form builder that you can use to add fields in Login, Profile and Register forms but how come it doesn’t support the Account form?

Welp!

In this tutorial, you will learn how to add a custom Account tab in Ultimate Member.

Learn how to add Profile forms in a custom Account Tab or custom shortcode with the PHP class that i’ve made for this tutorial – to make your life easier in adding these custom tabs!

First, you must to add the following code in your Theme’s function.php file

class UM_Custom_Account_Tabs{

	private $tabs = array();

	function __construct( ){
         
		add_filter( 'um_account_page_default_tabs_hook', array( $this, 'account_tabs' ), 999 );
		add_action( 'template_redirect', array( UM()->form(), "form_init" ) );
		
	}

    /**
     *  Add tab
    */
	public function add_tab( $args ){
        $this->tabs[ ] = $args;
	
		add_filter( "um_account_content_hook_{$args['tab_id']}",  function() use( $args ) {
            
            $content = '';

            if( isset( $args["before_content"] ) ){
               $content .= $args["before_content"];
            }

            if( isset( $args['form_id'] ) ){
            	$content .= $this->render_form( $args['form_id'] );
            }

            if( isset( $args['shortcode'] ) ){
            	$content .=  do_shortcode( $args['shortcode'] );
            }

            if( isset( $args["after_content"] ) ){
               $content .= $args["after_content"];
            }

            return $content;
            
		}, 10, 2 );
    }

    /** 
     * Register Tabs in Account form
     */
	public function account_tabs( $tabs ){
        
        foreach(  $this->tabs as $tab ){
	        $tabs[ $tab["position"] ][ $tab["tab_id"] ] = array(
					'icon'          => $tab["icon"],
					'title'         => $tab["title"],
					'submit_title'  => $tab["button_title"],
					'custom'        => true,
			);
	    }

		return $tabs;

	}
    
    /**
     * Fix rendering Radio options
     */
	public function fix_render_options( $fields ){

        foreach ( $fields as $key => $field ) {
        	if( in_array( $fields[ $key ]['type'], array("radio") ) ){
        		add_filter("um_radio_field_options",function( $options ){
        			$options = array_combine( array_values( $options ) , array_values( $options ) );
        			 return $options;
               });

            }
        }
		return $fields;
	}
    
    /** 
     * Render the form/shortcode
     */
	public function render_form( $form_id = null ){
        
        if( ! $form_id ) return;

        ob_start();
        $args["form_id"] = $form_id; 
        $args["mode"] = "profile";
        $args["custom_fields"] = $this->fix_render_options( UM()->query()->get_attr( 'custom_fields', $form_id ) );
        $args["core"] = "profile";
        $args["user_id"] = get_current_user_id();
       
        extract( $args );
          
			/**
			 * UM hook
			 *
			 * @type action
			 * @title um_main_{$mode}_fields
			 * @description Some actions before login form fields
			 * @input_vars
			 * [{"var":"$args","type":"array","desc":"Login form shortcode arguments"}]
			 * @change_log
			 * ["Since: 2.0"]
			 * @usage add_action( 'um_before_{$mode}_fields', 'function_name', 10, 1 );
			 * @example
			 * <?php
			 * add_action( 'um_before_{$mode}_fields', 'my_before_fields', 10, 1 );
			 * function my_before_form( $args ) {
			 *     // your code here
			 * }
			 * ?>
			 */
			do_action( "um_main_{$mode}_fields", $args );

		    echo "<input type='hidden' name='mode' value='{$mode}'/>";
		    echo "<input type='hidden' name='user_id' value='{$user_id}'/>";
		    echo "<input type='hidden' name='form_id' value='{$form_id}'/>";
		    echo "<input type='hidden' name='is_signup' value='true'/>";
            echo "<input type='hidden' name='profile_nonce' id='profile_nonce' value='".esc_attr( wp_create_nonce( 'um-profile-nonce' . $args["user_id"] ) )."' />";
         



        $template = ob_get_contents();
        ob_end_clean();

		return $template;
	}

}

Once you’ve added the code, you can include this code to the functions.php file to register your custom Account tab:

// Initiate the Class 
$mytab = new UM_Custom_Account_Tabs( );

// Then use the method `add_tab` to register your tab with your details
$mytab->add_tab( array(
	    "tab_id" => "mycustomtabname",
    	"title" => "My Custom Tab",
    	"button_title" => "Save",
    	"icon" => "um-faicon-users",
    	"position" => 0, // first tab in the Account form
    	"form_id" => 123,
    	"before_content" => "",
    	"after_content" => "",
    	"shortcode" => "",
 ) );

Here are the parameters to register your custom tab.

tab_id ( required ) – A unique identifier of your tab. In order to prevent using a duplicate tab_id, try adding a prefix name e.g. ninja_mytab

title ( required) – This title will show as a tab content header. Used in button title if left blank

button_title (option ) – If left empty/blank, the tab title will be used to add as a button title.

icon (required) – if your theme supports font-awesome, you can add the class here. Ultimate Member is using font-awesome but it has its own class prefixes: um-faicon-<icon name>. Sample usage: um-faicon-users

position ( required ) – this allows your tab to be placed at the first position of the tab or last.

form_id ( optional ) – this attribute allows you to use an Ultimate Member Profile form to show in the Tab content. Only a profile form is supported.

before_content ( optional ) – Add a custom content before the Form or Content.

after_content ( optional ) – Add a custom content after the Form or Content.

shortcode ( optional ) – Use this attribute if you want to display a content via shortcode. e.g. [woocommerce_bookings]. This also supports plain & html content.

UPDATE:

November, 20, 2020 
    - I've added a new fixes for the Invalid Noce issue when submitting the form. 
    - For unknown reasons, the form doesn't work when the tab is at the top level. So i recommend that you make it the second form after the Account tab when it is enabled.

That’s how you create a custom tab! You don’t have a time to do coding? Let me know and i will send you a plugin for only $40! Please send me a message via Contact page.

Don’t forget to subscribe to my newsletteer to get the latest Ultimate Member tips and tricks as well as Free plugins!

Subscribe to our newsletter!

Help me reach other people who need the help

16 Comments Add a custom Account Tab with Profile Form fields

  1. I have a strange issue with your code where it breaks the other forms.

    For example if I use the default user profile form id. It shows fine and I can update it. But if I click on Account and try to change the first name, on the account tab, the form will say it updates but it doesn’t actually save anything.

    1. Hi Miles, sorry for the very late response. I was busy the past couple of weeks. Have you tried changing the position to a higher value? I noticed that when you use a lower value as the position, the account save doesn’t work maybe because of how the Account form is designed for single for usage.

      After i changed the position to zero, I was able to save the custom form in the custom Account tab.

      $mytab->add_tab( array(
      "tab_id" => "mycustomtabname",
      "title" => "My Custom Tab",
      "button_title" => "Save",
      "icon" => "um-faicon-users",
      "position" => 100, // first tab in the Account form
      "form_id" => 123,
      "before_content" => "",
      "after_content" => "",
      "shortcode" => "",
      ) );

      Regards,

  2. Hello there. First of all, thank you very much for sharing this code with us. I gave feedback on adding a shortcode. I have a few questions.

    I added php codes to function.php.
    I don’t know what to do with where to add the shortcode?

    [Woocommerce_bookings]

    1. I added php codes and got such an error.

      Warning: Invalid argument supplied for foreach() in /home/u146132751/domains/*******/public_html/dev/wp-content/plugins/code-snippets/php/snippet-ops.php(446) : eval()’d code on line 66

    2. Hi @ayhan, Sorry for the late response. I was busy the past couple of weeks. Have you tried adding the shortcode like this?


      $mytab->add_tab( array(
      "tab_id" => "mycustomtabname",
      "title" => "My Custom Tab",
      "button_title" => "Save",
      "icon" => "um-faicon-users",
      "position" => 0, // first tab in the Account form
      "form_id" => 123,
      "before_content" => "",
      "after_content" => "",
      "shortcode" => "[woocommerce_bookings]", // Your shortcode is here
      ) );

      Regards,

  3. Hi,

    I used the code above, and I was wondering how I could get edit the form for the custom tab on UM Form? Because my account is not showing up on the form that I could edit in the Dashboard under UM user. I had copied both of the codes provided above, but I’m not sure where to go from there.

    Thanks

  4. Hi there!

    I would like to thank you for your code.
    I have only 1 issue with it, and I’ve not found a way to fix it. When I use the code for the custom fields, and then let the users change their info in the ‘account’ tab, the custom dropdown results returns as for example ‘1’ instead of the value of the dropdown.

    So people change the field for example to ‘Green’, which is 1st in the dropdown list. I, as admin, only see they changed it to ‘1’ instead of ‘Green’.
    Would you have a fix for this?

    Much appreciated!!

    Greetings from Belgium

    1. Hi Jef,

      Are you using the custom choices callback function? If so, could you please share your code so we can review it?

      Regards,

  5. 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%;
    }

    Great tutorial!

    Thanks!

    1. Hi Larry, have you tried using UM Account shortcodes so you can split the tab contents?

      Try using the following to your Account page:
      [ultimatemember_account tab="general"]
      [ultimatemember_account tab="password"]
      [ultimatemember_account tab="privacy"]

      Regards,

  6. You need to add a security token now:


    $securityToken = esc_attr(wp_create_nonce('um-profile-nonce' . $user_id));
    echo "";

  7. Hi!
    I used your code exactly the way you explained. Now I have a custom account tab. I created one custom field “user_title”, the rest are default fields from UE. So these are my field:
    user_title
    user_login
    first_name
    last_name
    user_email

    The problem now is, that the user_login field as well as the user_email field are not showing up in the form. Also, when I click save to update my profile, I get the error “This is not possible for security reasons”. I already checked for plugin and theme compatibility issues, but there are none. Also all the other forms work fine, just the one I included with your code doesn’t work. What could be the issue here?

  8. HI!
    Thanks for the code!
    I’ve encountered two issues when I tried to put the code to my site. The only thing I changed was from the position 0 to 100 to keep the custom tab below the account tab.

    1 – On my test site, the custom tabs aren’t shown like this https://imgur.com/IH4YS7o
    2 – On the second site, I got the following message: Warning: Invalid argument supplied for foreach() in /home/clients/*******/Divi/functions.php on line 8661, the line in question is this one https://imgur.com/bLHnUvd

    What can I do to fix these? Thank you!

  9. Hi sir Champ Camba
    I use the Digits plugin to log in via mobile number
    I just need to display the mobile number on the account page below the email address and the user can not change it.
    Exactly similar to the username
    Do you have a solution?

    And the last question
    Do we have to enter the second code snippet in the function.php of theme file?

Leave a Reply

Your email address will not be published. Required fields are marked *