How to Add A Title Field To User Profiles In WordPress

In the tutorial below, I'll share three ways to create, call, and display a given author's job title in WordPress posts using the free version of the Code Snippet Plugin. All you have to do is copy and paste the code provided.

Using Oxygen Page Builder

Here's how you can add the title field to user profiles using the Code Snippets plugin.

1. Install and activate the Code Snippets plugin on your WordPress site.
2. Go to Snippets > Add New to create a new snippet.
3. Copy the following PHP code into the Code field.

// Add a title field to the user profile
function add_title_field_to_profile($user){
?>
  <table class="form-table">
    <tr>
      <th><label for="title">Title</label></th>
      <td>
        <input type="text" name="title" id="title" value="<?php echo esc_attr(get_the_author_meta('title', $user->ID)); ?>" class="regular-text" /><br />
        <span class="description">Please enter your title.</span>
      </td>
    </tr>
  </table>
<?php
}
add_action('show_user_profile', 'add_title_field_to_profile');
add_action('edit_user_profile', 'add_title_field_to_profile');

// Save the title field when the user profile is saved
function save_title_field($user_id){
  if (!current_user_can('edit_user', $user_id)) {
    return false;
  }
  update_user_meta($user_id, 'title', $_POST['title']);
}
add_action('personal_options_update', 'save_title_field');
add_action('edit_user_profile_update', 'save_title_field');

4. Give your snippet a title (e.g. "Add Title Field to User Profiles") and click the "Save Changes and Activate" button.
5. To display the title on the front end, go to Oxygen Builder and create a new template or edit an existing one.
6. Add a Dynamic Data shortcode in the template and select "Author Meta" as the source.
7. In the "Key" field, enter "title".
8. Customize the title display by adding text, HTML, and CSS around the shortcode as desired.
9. Preview the template to see the user's title displayed on the front end.

This code uses the get_the_author_meta function to retrieve the user's title from the database and display it in Oxygen Builder.

Using The Block Editor

Here's an example of how you can add a title field to user profiles in WordPress using the Code Snippets plugin and display it on the front end using the block editor:

1. Install and activate the Code Snippets plugin on your WordPress site.
2. Go to Snippets > Add New to create a new snippet.
3. Add the following code to the snippet:

function add_title_field_to_profile( $user ) {
    ?>
    <table class="form-table">
        <tr>
            <th><label for="title">Title</label></th>
            <td>
                <input type="text" name="title" id="title" value="<?php echo esc_attr( get_the_author_meta( 'title', $user->ID ) ); ?>" class="regular-text" /><br />
                <span class="description">Please enter your title</span>
            </td>
        </tr>
    </table>
    <?php
}
add_action( 'show_user_profile', 'add_title_field_to_profile' );
add_action( 'edit_user_profile', 'add_title_field_to_profile' );

function save_title_field_to_profile( $user_id ) {
    if ( !current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }
    update_user_meta( $user_id, 'title', $_POST['title'] );
}
add_action( 'personal_options_update', 'save_title_field_to_profile' );
add_action( 'edit_user_profile_update', 'save_title_field_to_profile' );

4. Give your snippet a title (e.g. "Title Field in User Profile") and click the "Save Changes and Activate" button.
5. Create a new page or post using the block editor.
6. Add a "Shortcode" block to the page or post.
7. In the Shortcode block, add the following shortcode to display the title field:

[display_title_field]

Using A Shortcode

Here's an example of how you can add a title field to user profiles in WordPress using the Code Snippets plugin and display it on the front using a shortcode:

1. Install and activate the Code Snippets plugin in your WordPress site.
2. Go to Snippets > Add New to create a new snippet.
3. Add the following code to the snippet:

function add_title_field_to_profile( $user ) {
    ?>
    <table class="form-table">
        <tr>
            <th><label for="title">Title</label></th>
            <td>
                <input type="text" name="title" id="title" value="<?php echo esc_attr( get_the_author_meta( 'title', $user->ID ) ); ?>" class="regular-text" /><br />
                <span class="description">Please enter your title</span>
            </td>
        </tr>
    </table>
    <?php
}
add_action( 'show_user_profile', 'add_title_field_to_profile' );
add_action( 'edit_user_profile', 'add_title_field_to_profile' );

function save_title_field_to_profile( $user_id ) {
    if ( !current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }
    update_user_meta( $user_id, 'title', $_POST['title'] );
}
add_action( 'personal_options_update', 'save_title_field_to_profile' );
add_action( 'edit_user_profile_update', 'save_title_field_to_profile' );

function display_title_field() {
    global $post;
    $user_id = $post->post_author;
    $title = get_the_author_meta( 'title', $user_id );
    return $title;
}
add_shortcode( 'display_title_field', 'display_title_field' );

4. Give your snippet a title (e.g. "Title Field in User Profile") and click the "Save Changes and Activate" button.
5. Create a new page or post and add the following shortcode to display the title field:

[display_title_field]

6. Save your changes and preview the front end to see the title field displayed on the page or post.

With this code, a title field will be added to the user profile section in the WordPress backend and can be displayed on the front end using a shortcode.