How To Create A WordPress User Profile Edit Page That Looks Like The Frontend

If you would like your users to be able to edit their profiles but would like the profile page display the theme of your website versus the WordPress backend admin page, you don’t actually have to create a new template page and redirect from user-edit.php page.

Instead, just add some code to your functions.php file to hook into the admin_head, in_admin_header, and in_admin_footer functions. Then modify your theme’s header and footer files as explained below.

Users will see a profile page that matches the theme of your website. As an added bonus you won’t need to integrate plugins that hook into the profile page like you would if you had created a custom template page to manage user profile editing.

Code For functions.php

The code below performs the following functions:

Modifies how the profile page is displayed for everyone except administrator
Hides the admin page elements we don’t to show to regular users using CSS
Adds our website’s modified header to the top of the profile page
Adds our website’s modified footer to the bottom of the profile page
Add some custom text to the bottom of the profile page

////////
//  UseWordPress.com 
//  Faux Frontend Custom User Profile Page
//  https://usewordpress.com/snippets/how-to-create-a-wordpress-user-profile-edit-page-that-looks-like-the-frontend/
////////
//  Apply this to everyone except administrator
if ( !current_user_can( 'administrator' ) ) {
  add_action( 'admin_head', function(){
  // Add or Remove fields as needed using CSS by ID or class
    ob_start(); ?>
    <style>
      #your-profile > h2,
      .user-rich-editing-wrap,
      .user-admin-color-wrap,
      .user-syntax-highlighting-wrap,
      .user-comment-shortcuts-wrap,
      .user-admin-bar-front-wrap,
      .user-url-wrap,
      .user-description-wrap,
       #adminmenuback,
       #adminmenuwrap,
       #adminmenumain,
       #wpadminbar,
       #wpfooter,
       #footer-left,
       #footer-upgrade
       {
        display: none;
        visibility: hidden;
        position: unset;
        padding: 0px;
        color:transparent;
      }

      #wpwrap {
          position: unset;
      }

      #wpcontent {
        margin-left: 0px;
        height: 0px;
        padding-left: 0px;
      }
      .wp-admin #content {
        padding: 25px;
      }
      html.wp-toolbar {
        padding-top: 0px;
        box-sizing: unset;
        margin-top: 0px !important;
      }
    </style>
    <?php ob_end_flush();
  });

    // Add your website's modified header file to the profile page
  add_action( 'in_admin_header', 'uwp_user_header_profile_mod' );
  function uwp_user_header_profile_mod()
  {
    require_once ( get_template_directory() . '/header-profile.php' );
    echo '<style>body {background: #fff;}</style>'; // Adding some styles
  }

 // Add your website's modified footer file to the profile page
  add_action( 'in_admin_footer', 'uwp_user_profile_footer_mod' );
  function uwp_user_profile_footer_mod()
  {
    require_once ( get_template_directory() . '/footer-profile.php' );
  }

    // Add some custom text to the profile page
  add_action( 'show_user_profile', 'uwp_user_edit_section', 999 );
  add_action( 'edit_user_profile', 'uwp_user_edit_section', 999 );

  // Define the custom text to be displayed on the profile page
  function uwp_user_edit_section() {
    echo 'some custom text';
  }

}

Modify Your Theme’s Header And Footer Files (Save As)

Because wp_admin already outputs <html> and <body> tags, you’ll need to remove those tags from your header and footer files then Save As header-profile.php and footer-profile.php (or whatever new names you want to assign). If this breaks your theme because of classes that are normally added to the body on the frontend, you can add those classes by creating a new container div in the header and footer (where the <html>,<body>,</html>, and</body> tags were originally).

//  At the beginning of your modified profile header file (header-profile.php), add
<?php wp_head(); ?>
<div <?php body_class(); ?>>


//  At the very bottom of your modified profile footer file (footer-profile.php), add
</div>

Menus

If menus you added to your theme’s header file using wp_nav_menu aren’t working in the admin section, you can add them back in using the function created above. Add them directly above the ob_end_flush() function.

////////
//  UseWordPress.com
//  Faux Frontend Custom User Profile Page
//
////////
//  Apply this to everyone except administrator
if ( !current_user_can( 'administrator' ) ) {
  add_action( 'admin_head', function(){
  // Add or Remove fields as needed using CSS by ID or class
    ob_start(); ?>
    <style>
      #your-profile > h2,
      .user-rich-editing-wrap,
      .user-admin-color-wrap,
      .user-syntax-highlighting-wrap,
      .user-comment-shortcuts-wrap,
      .user-admin-bar-front-wrap,
      .user-url-wrap,
      .user-description-wrap,
       #adminmenuback,
       #adminmenuwrap,
       #adminmenumain,
       #wpadminbar,
       #wpfooter,
       #footer-left,
       #footer-upgrade
       {
        display: none;
        visibility: hidden;
        position: unset;
        padding: 0px;
        color:transparent;
      }

      #wpwrap {
          position: unset;
      }

      #wpcontent {
        margin-left: 0px;
        height: 0px;
        padding-left: 0px;
      }
      .wp-admin #content {
        padding: 25px;
      }
      html.wp-toolbar {
        padding-top: 0px;
        box-sizing: unset;
        margin-top: 0px !important;
      }
    </style>

    <?php 
                  wp_nav_menu(array('menu' => 'Nav Menu','container_class' => 'cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left','container_id' => 'my_menu_id',));
    ?>

    <?php ob_end_flush();
  });