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
Leave a Response

Leave a Reply

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