Headless Profile Form

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:

Create a new file called profile-headless.php in your theme. e.g. /wp-content/themes/your-theme/ultimate-member/templates/profile-headless.php
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!

ShareTwitter FacebookGoogle+

3Comments 798Views

3 Comments

Danielle Hitchcock


Posted July 16, 2021 at 4:39 pm 0Likes

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!
- Champ Camba
  
  
  Posted July 24, 2021 at 7:30 pm 0Likes
  
  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,
Varnothing


Posted November 16, 2021 at 10:49 pm 0Likes

Sorry but could you point out between which PHP tags should I add this code?