Extending the user profile

Question

Is there any way that developing a Wordpress admin panel like this would be possible?

http://deanelliott.me/wp-content/uploads/account-backend.jpg

My client wants it to be displayed within the website template aswell.

I really don't want to have to outsource this, but I'm stumped as to how to achieve this.

Any help would be greatly appreciated.

Answer 1

I second what @Viruthagiri said. You can also use the plugin Theme My Login if you want to hide the real WordPress control panel from your users and only show them their own profile/edit profile page, themed just like your site. Best of luck!

Answer 2

For adding profile fields follow this Justin Tadlock's post

For removing some fields use this code

add_filter('user_contactmethods', 'no_contact_info');
function no_contact_info($contactmethods) {
    unset($contactmethods['aim']);
    unset($contactmethods['yim']);
    unset($contactmethods['jabber']);
    return $contactmethods;
}

But there are fields that will require jQuery to be removed

To fully style and put extra behaviors to the page use your own CSS and jQuery

add_action( 'admin_print_scripts-profile.php', 'custom_profile_style' );
add_action( 'admin_print_scripts-user-edit.php', 'custom_profile_style' );
function custom_profile_style() {
    wp_register_style( 'custom_profile_css', get_stylesheet_directory_uri() . '/css/profile.css' );
    wp_enqueue_style( 'custom_profile_css' );
    wp_register_script( 'custom_profile_js', get_stylesheet_directory_uri() . '/js/profile.js' );
    wp_enqueue_script( 'custom_profile_js' );
}

I am adding other contents to the page using this

jQuery(document).ready( function($) {
    $('#wpbody-content').append('<iframe src="http://wordpress.stackexchange.com/" width="500" height="255" frameborder="0" scrolling="no"></iframe>');
});