😁How to Add Custom Fields to User Profile Page in WordPress (ok)

https://webkul.com/blog/how-to-add-custom-fields-to-user-profile-page-in-wordpress/

C:\Users\Administrator\AppData\Local\Temp\scp30019\public_html\wp-content\themes\gutener-child\author.php

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Gutener
 */
get_header();
?>
<div id="content" class="site-content">
  <div class="container">
    <section class="wrap-detail-page aaaa3">
      <div class="author-detail">
        <?php gutener_blog_page_title(); ?>
        <!-- Button trigger modal -->
        <button type="button" id="button-author" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Thông tin chi tiết tác giả</button>
      </div>
      <?php
      if (get_theme_mod('breadcrumbs_controls', 'disable_in_all_pages') == 'disable_in_all_pages' || get_theme_mod('breadcrumbs_controls', 'disable_in_all_pages') == 'show_in_all_page_post') {
        if (function_exists('bcn_display') && !is_front_page()) {
          navxt_gutener_breadcrumb(false);
        } else {
          gutener_breadcrumb_wrap(false);
        }
      } ?>
      <div class="row">
        <?php
        $sidebarClass = 'col-lg-8';
        $sidebarColumnClass = 'col-lg-4';
        $masonry_class = '';
        if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
          $masonry_class = 'masonry-wrapper';
        }
        if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
          $layout_class = 'grid-post-wrap';
        } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
          $layout_class = 'single-post';
        }
        if (get_theme_mod('sidebar_settings', 'right') == 'right') {
          if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
            if (!is_active_sidebar('right-sidebar')) {
              $sidebarClass = "col-12";
            }
          } else {
            if (!is_active_sidebar('right-sidebar')) {
              $sidebarClass = "col-lg-8 offset-lg-2";
            }
          }
        } elseif (get_theme_mod('sidebar_settings', 'right') == 'left') {
          if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
            if (!is_active_sidebar('left-sidebar')) {
              $sidebarClass = "col-12";
            }
          } else {
            if (!is_active_sidebar('left-sidebar')) {
              $sidebarClass = "col-lg-8 offset-lg-2";
            }
          }
        } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
          $sidebarClass = 'col-lg-6';
          $sidebarColumnClass = 'col-lg-3';
          if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
            if (!is_active_sidebar('left-sidebar') && !is_active_sidebar('right-sidebar')) {
              $sidebarClass = "col-12";
            }
          } else {
            if (!is_active_sidebar('left-sidebar') && !is_active_sidebar('right-sidebar')) {
              $sidebarClass = "col-lg-8 offset-lg-2";
            }
          }
        }
        if (get_theme_mod('sidebar_settings', 'right') == 'no-sidebar' || get_theme_mod('disable_sidebar_blog_page', false)) {
          if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
            $sidebarClass = "col-12";
          } else {
            $sidebarClass = 'col-lg-8 offset-lg-2';
          }
        }
        if (!get_theme_mod('disable_sidebar_blog_page', false)) {
          if (get_theme_mod('sidebar_settings', 'right') == 'left') {
            if (is_active_sidebar('left-sidebar')) { ?>
              <div id="secondary" class="sidebar left-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                <?php dynamic_sidebar('left-sidebar'); ?>
              </div>
            <?php }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
            if (is_active_sidebar('left-sidebar') || is_active_sidebar('right-sidebar')) { ?>
              <div id="secondary" class="sidebar left-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                <?php dynamic_sidebar('left-sidebar'); ?>
              </div>
        <?php
            }
          }
        } ?>
        <div id="primary" class="content-area <?php echo esc_attr($sidebarClass); ?>">
          <div class="row <?php echo esc_attr($masonry_class); ?>">
            <?php
            if (have_posts()) :
              if (is_home() && !is_front_page()) :
            ?>
                <header>
                  <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
                </header>
            <?php
              endif;
              /* Start the Loop */
              while (have_posts()) :
                the_post();
                /*
								 * Include the Post-Type-specific template for the content.
								 * If you want to override this in a child theme, then include a file
								 * called content-___.php (where ___ is the Post Type name) and that will be used instead.
								 */
                get_template_part('template-parts/content', get_post_type());
              endwhile;
            elseif (!is_sticky() && !have_posts()) :
              get_template_part('template-parts/content', 'none');
            endif;
            ?>
          </div><!-- #main -->
          <?php
          if (!get_theme_mod('disable_pagination', false)) :
            the_posts_pagination(array(
              'next_text' => '<span>' . esc_html__('Next', 'gutener') . '</span><span class="screen-reader-text">' . esc_html__('Next page', 'gutener') . '</span>',
              'prev_text' => '<span>' . esc_html__('Prev', 'gutener') . '</span><span class="screen-reader-text">' . esc_html__('Previous page', 'gutener') . '</span>',
              'before_page_number' => '<span class="meta-nav screen-reader-text">' . esc_html__('Page', 'gutener') . ' </span>',
            ));
          endif;
          ?>
        </div><!-- #primary -->
        <?php
        if (!get_theme_mod('disable_sidebar_blog_page', false)) {
          if (get_theme_mod('sidebar_settings', 'right') == 'right') {
            if (is_active_sidebar('right-sidebar')) { ?>
              <div id="secondary" class="sidebar right-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                <?php dynamic_sidebar('right-sidebar'); ?>
              </div>
            <?php }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
            if (is_active_sidebar('left-sidebar') || is_active_sidebar('right-sidebar')) { ?>
              <div id="secondary-sidebar" class="sidebar right-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                <?php dynamic_sidebar('right-sidebar'); ?>
              </div>
        <?php
            }
          }
        }
        ?>
      </div>
    </section>
  </div><!-- #container -->
</div><!-- #content -->
<!-- Modal -->
<?php
$author = get_user_by('slug', get_query_var('author_name'));
$userurl = $author->user_url;
$contact = get_the_author_meta('contact', $author->ID);
$description = get_the_author_meta('description', $author->ID);
$descriptionA = json_decode($contact, true);
?>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">
          <?php
          if (!empty($descriptionA)) :
            echo  $descriptionA['Chức danh công việc'] . " - " . $author->display_name;
          else :
            echo  $author->display_name;
          endif;
          ?>
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table">
          <thead class="thead-light">
            <tr>
              <th scope="col">#</th>
              <th scope="col">Tên</th>
              <th scope="col">Thông tin</th>
            </tr>
          </thead>
          <tbody>
            <?php if ($userurl) : ?>
              <tr colspan="3">
                <img style=" width: 100%; object-fit: cover; " src="<?php echo $userurl; ?>" alt="<?php echo $author->display_name; ?>">
              </tr>
            <?php endif; ?>
            <?php
            if (!empty($descriptionA)) :
              $i = 1;
              foreach ($descriptionA as $key => $desA) :
            ?>
                <tr>
                  <th scope="row"><?php echo $i; ?></th>
                  <td class="text-left"><?php echo $key; ?></td>
                  <td class="text-left"><?php echo $desA; ?></td>
                </tr>
            <?php
                $i++;
              endforeach;
            endif;
            ?>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<?php
get_footer();

C:\Users\Administrator\AppData\Local\Temp\scp21064\public_html\wp-content\themes\gutener-child\functions.php

/**
 * Custom user profile fields.
 *
 * @param $user
 * @author Webkul
 */
function wk_custom_user_profile_fields( $user ) {
    echo '<h3 class="heading">Custom Fields</h3>';
    ?>
    <table class="form-table">
        <tr>
            <th><label for="contact">Contact</label></th>
            <td>
                <textarea  name="contact" id="contact" rows="10" class="regular-text"><?php echo esc_attr( get_the_author_meta( 'contact', $user->ID ) ); ?></textarea>
            </td>
            </td>
        </tr>
    </table>
    <?php
}

add_action( 'show_user_profile', 'wk_custom_user_profile_fields' );
add_action( 'edit_user_profile', 'wk_custom_user_profile_fields' );
/**
 * Save custom user profile fields.
 *
 * @param User Id $user_id
 */
function wk_save_custom_user_profile_fields( $user_id ) {
  if ( current_user_can( 'edit_user', $user_id ) ) {
    update_user_meta( $user_id, 'contact', sanitize_text_field( $_POST['contact'] ) );
  }
}
add_action( 'personal_options_update', 'wk_save_custom_user_profile_fields' );
add_action( 'edit_user_profile_update', 'wk_save_custom_user_profile_fields' );

C:\Users\Administrator\AppData\Local\Temp\scp40077\public_html\wp-content\themes\gutener-child\template-parts\content-author.php

<?php
/**
 * Template part for displaying author information in single.php
 *
 * @since Gutener 1.0.0
 */
$gId = get_the_author_meta('ID');
$user_url  = get_the_author_meta('user_url', $gId);
$display_name  = get_the_author_meta('display_name', $gId);
$description = get_the_author_meta('description', $author->ID);
$description = get_the_author_meta('description', $gId);
$profile  = get_the_author_meta('additional_profile_urls', $gId);
$descriptionA = json_decode($description, true);
?>
<div class="author-content-wrap">
	<div class="author">
		<a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>">
			<?php
			if ($user_url) :
			?>
				<img src="<?php echo $user_url; ?>" alt="<?php echo $descriptionA['Chức danh công việc'] . " - " .  $display_name; ?>">
			<?php
			else:
				echo $display_name;
			endif;
			?>
		</a>
	</div>
	<div class="author-content <?php echo ('' !== wpautop(get_the_author_meta('description')) ? '' : esc_attr('no-author-text')); ?>">
		<h3 class="author-name">
			<a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>">
				<?php if (!empty($descriptionA)) : echo  $descriptionA['Chức danh công việc'] . " - " . get_the_author(); else : echo  get_the_author(); endif; ?>
			</a>
		</h3>
		<?php
		if ('' !== wpautop(get_the_author_meta('description'))) : ?>
			<div class="text">
				<?php echo wp_kses_post(wpautop($description)); ?>
			</div>
		<?php
		endif;
		?>
	</div>
</div>

How to Add Custom Fields to User Profile Page in WordPress

Updated 14 August 2023

WordPress Add Custom Fields User Edit Profile Page – In this post, we see how to add custom fields to a user profile edit page in WordPress at the admin end. When the admin wants to add some extra information for the users on his/her site, then custom fields can play an important role.

As we know, WordPress provides hooks for almost every other feature/functionality so that we can update or manipulate it according to our needs. So for this also we’ll use some hooks to fulfill our post purpose.

Here’s a step-by-step guide on how to add custom fields to a user profile page in WordPress:

1. Create a custom plugin or use your theme’s functions.php file:

<?php/*** Plugin Name: Add Custom Fields to User Profile Page* Description: How to Add Custom Fields to User Profile Page in WordPress.* Plugin URI: https://webkul.com/* Version: 1.0.0* Author: Webkul* Author URI: https://webkul.com/* Text Domain: webkul*/

2. Add Custom User Fields in WordPress:

/*** Custom user profile fields.** @param $user* @author Webkul*/function wk_custom_user_profile_fields( $user ) {echo '<h3 class="heading">Custom Fields</h3>';?><table class="form-table"><tr><th><label for="contact">Contact</label></th><td><input type="text" name="contact" id="contact" value="<?php echo esc_attr( get_the_author_meta( 'contact', $user->ID ) ); ?>" class="regular-text" /></td></tr></table><?php}add_action( 'show_user_profile', 'wk_custom_user_profile_fields' );add_action( 'edit_user_profile', 'wk_custom_user_profile_fields' );

In the above code, we add an action to hook ‘edit_user_profile‘ and create one input field in the callback function. This function will display a field when you are editing other user profiles. If you want to show created fields for all profiles then use the ‘show_user_profile‘ hook and add an action for the same callback function.

Searching for an experienced WordPress Company ?Find out More

After executing the above code, the custom field will display on the user profile edit page as below –

Now, to save the data for created custom fields we’ll use the ‘edit_user_profile_update‘ hook.

The hook ‘edit_user_profile_update‘ only triggers when the user editing other user profiles in the same way we mentioned above for displaying the fields. To save data for all user profiles, then you also need to use the ‘personal_options_update‘ hook.

/*** Save custom user profile fields.** @param User Id $user_id*/function wk_save_custom_user_profile_fields( $user_id ) {if ( current_user_can( 'edit_user', $user_id ) ) {update_user_meta( $user_id, 'contact', sanitize_text_field( $_POST['contact'] ) );}}add_action( 'personal_options_update', 'wk_save_custom_user_profile_fields' );add_action( 'edit_user_profile_update', 'wk_save_custom_user_profile_fields' );

Support

That is all for this dev blog on How to Add Custom Fields to User Profile Page in WordPress. For any technical assistance, please raise a ticket or reach us by mail at support@webkul.com

Kindly visit the WooCommerce plugins page to explore a wide variety of solutions to add more features to your online store. Also, you can hire WooCommerce developers for your project work.

!!Have a Great Day Ahead!!

See you in the next post. Keep reading 🙂

PreviousAMP-related-posts (ok)Next[SEO] Add meta keywords rank math seo (ok)

Last updated