Customize profile.php

Question

Using the plugin "Advanced Custom Fields": https://wordpress.org/plugins/advanced-custom-fields/ I am able to add my custom fields to profile.php.

But how do I remove the default elements from profile.php (Personal Options, Name, etc.)?

I know I can create new template files in my child theme to override how pages look, but I can't find how to do this with profile.php.

I started using CSS to hide the elements, this works except for the titles which have no class or ID, and I can't simply hide the entire form because Advanced Custom Fields places the new elements in this same form.

I would prefer to stay away from large plugins that create front end user accounts on top of the existing system just so I can get a customized profile editing page.

Thanks for any help.

Answer 1

There are probably several options to achieve your goal, below is one of the options shown by me.
(these 2 functions belong to each other)

Please make always a copy of functions.php before you start to edit/add a plugin or other code snippet.

/**
 * Remove fields from an user profile page for all except Administrator
 *
 * FYI {@link https://codex.wordpress.org/Function_Reference/current_user_can}
 *     {@link https://codex.wordpress.org/Roles_and_Capabilities}
 *     {@link https://codex.wordpress.org/Plugin_API/Action_Reference/admin_footer}
 *     {@link https://developer.wordpress.org/reference/hooks/load-pagenow/}
 *
 * Checked with @version WordPress 4.8
 */
add_action('admin_init', 'wpse273289_remove_profile_fields' ); 
function wpse273289_remove_profile_fields()
{ 
    global $pagenow;

    // apply only to user profile or user edit pages
    if( $pagenow !=='profile.php' && $pagenow !=='user-edit.php' )
    {
        return;
    }

    // Make it happen for all except Administrators
    if( current_user_can( 'manage_options' ) )
    {
        return;
    }

    add_action( 'admin_footer', 'wpse273289_remove_profile_fields_js' ); 
}

/**
 * Remove (below)selected fields on user profile
 * This function belongs to the wpse273289_remove_profile_fields function!
 * 
 */
function wpse273289_remove_profile_fields_js()
{
    ?>
    <script>
    jQuery(document).ready( function($) {
        $('input#user_login').closest('tr').remove(); // Username
        $('input#first_name').closest('tr').remove(); // First Name
        $('input#nickname').closest('tr').remove();   // Nickname (required)            
        $('input#email').closest('tr').remove();       // Email (required)
    });
    </script>
    <?php
}

The fields above in the script are just examples so please adjust to your own preference.
Both functions are checked in a local sandbox and working for me.

Note: above is NOT tested with ACF plugin but that should not be a problem.

Answer 2

Other option is to use css to disable/hide those elements.

First you need to add function which will add body class based on user role:

function your_prefix_add_admin_body_class( $classes ) {
    $roles = wp_get_current_user()->roles;
    return "$classes ".implode(' ', $roles);
}

add_filter( 'admin_body_class', 'your_prefix_add_admin_body_class' );

And then add custom css to your admin:

function your_prefix_custom_css() {
    echo '<style>
        body:not(.administrator) .user-user-login-wrap,
        body:not(.administrator) .user-first-name-wrap,
        body:not(.administrator) .user-last-name-wrap{
            display: none;
        }
    </style>';
}

add_action('admin_head', 'your_prefix_custom_css');

Just keep in mind, this is not the most secure solution. If user knows a bit of css, he can re-enable it.