Headless Profile Form

-
um-headless-profile

It’s been 3 months since I’ve posted new tutorials! So here’s a new one for you!

If you want to use the Ultimate Member Profile Form without the cover photo and profile photo, you just need to follow these easy steps below:

  1. Create a new file called profile-headless.php in your theme. e.g. /wp-content/themes/your-theme/ultimate-member/templates/profile-headless.php
  2. Add the following codes to the profile-headless.php file:
<?php /* Template: Headless Profile */ ?>
<div class="um <?php echo $this->get_class( $mode ); ?> um-<?php echo $form_id; ?>">
	<div class="um-form">
		<?php
		$edit = ( isset( $_GET['um_action'] ) && $_GET['um_action'] == 'edit' );

		if ( $edit && ! isset( UM()->user()->cannot_edit ) ) {

			echo '<form method="post" action="">';
		}

		um_fetch_user( um_profile_id() );

		$nav    = UM()->profile()->active_tab;

		$subnav = ( get_query_var( 'subnav' ) ) ? get_query_var( 'subnav' ) : 'default';

		echo '<div class="um-profile-body">';

		$mode = $args['mode'];

		do_action( "um_before_form", $args );
		do_action( "um_before_{$mode}_fields", $args );
		do_action( "um_main_{$mode}_fields", $args );
		do_action( "um_after_form_fields", $args );

		// need to add the buttons manually because of UM hardcoded cancel link
		if ( $edit && ! isset( UM()->user()->cannot_edit  ) ) {

			?>
			<div class="um-col-alt">
				<div class="um-left um-half">
					<input type="submit" value="<?php echo $args['primary_btn_word']; ?>" class="um-button"/>
				</div>
				<?php if ( isset( $args['secondary_btn'] ) && $args['secondary_btn'] != 0 ) { ?>
					<div class="um-right um-half">
						<a href="<?php echo remove_query_arg( 'um_action', $_SERVER['REQUEST_URI'] ); ?>" class="um-button um-alt"><?php echo $args['secondary_btn_word']; ?></a>
					</div>
				<?php } ?>
				<div class="um-clear"></div>
			</div>
			<?php
		}
		do_action( "um_after_form", $args );

		echo "</div>";

		if ( ! $edit && ! isset( UM()->user()->cannot_edit  ) ) {

			$edit_link = add_query_arg( 'um_action', 'edit', $_SERVER['REQUEST_URI'] );
			?>
			<div>
				<a href="<?php echo $edit_link; ?>" class="um-button">Edit</a>
			</div>
			<div class="um-clear"></div>
			<?php
		}

		if ( $edit && ! isset( UM()->user()->cannot_edit  ) ) {

			echo "</form>";
		}
		?>
	</div>
</div>

3. Go to WP Admin > Ultimate Member > Forms > Edit a Profile Form

4. See “Customize this form?” and turn the option “Apply custom settings to this form” to “Yes”.

5. In the “Template”, select “Headless Profile”. Click on “Update/Save” – And that’s it!

Don’t forget to subscriber to my Newsletter to get the latest tutorials!

Help me reach other people who need the help
headless profile formultimate member

2 Comments Headless Profile Form

  1. Thank you so much for this, super useful.

    Do you know if there is a shortcode for the items in the nav bar? I still need the messaging & gallery function, as well as the message button, so that the users can interact with that, but would like to ad this in one of the profile form fields, so that it is not in a top bar. Is this possible?

    Thank you!

    1. Hi @Danielle, you can add this PHP code to display the menus:
      do_action( 'um_profile_menu', $args );

      You should add it between the PHP tags.

      Regards,

Leave a Reply

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