Theme the User Edit Profile page

Question

I am using the Edit Profile module.

This module takes all the fields attached to a user profile and displays them on a separate tab located at yoursite.com/user/[USERID]/edit-profile.

I would like to theme the fields on this edit profile page. How can I do it?

I have tried two approaches but none seem to work:

Approach 1: Tpl.php suggestion from theme developer

Theme Developer suggests to use the following template: page--user--edit-profile.tpl.php This however has two problems: 1) It affects the whole page and not just the user profile form. 2) It doesn't seem possible to access the fields on the user profile from this template.

Approach 2: template.php

The form ID of the user profile edit form is edit-profile-user-profile-form so I used the following code in my template.php file to override it:

function THENAME_theme(&$existing, $type, $theme, $path) {

    return array(
        'edit-profile-user-profile-form' => array(
            'arguments' => array('form' => NULL),
            'template' => 'templates/edit/user-profile',
            'render element' => 'form',
            ),
    );


}

This, however, only over rides the main user profile page and not the fields on the edit tab. Can anyone help?

Answer 1

I have figured this out.

The solution is to use approach 2 (in my opening post). However, in the template.php file, you have to remove all the dashes from the form ID (edit-profile-user-profile-form) and replace them with underscores.

So the code in template.php would be as follows:

function THENAME_theme(&$existing, $type, $theme, $path) {

    return array(
        'edit_profile_user_profile_form' => array(
            'arguments' => array('form' => NULL),
            'template' => 'templates/edit/user-profile',
            'render element' => 'form',
            ),
    );

}

Next create a file called user-profile.tpl.php and save it in templates/edit.

In the user-profile.tpl.php file, use the following code to print out the fields:

<?php print drupal_render($form['field_NAME_OF_FIELD']); ?>

Answer 2

I think, this may work. Little modification.

function THENAME_theme(&$existing, $type, $theme, $path) {

return array(
    'user_profile_form' => array(
        'arguments' => array('form' => NULL),
        'template' => 'templates/edit/user-profile-edit',
        'render element' => 'form',
        ),
);

}

Next go to your theme (sites/all/theme/yourtheme/) and create file called user-profile-edit file inside templates/edit/. Try to dpm($form). You will get whole form elements. You can render one by one whichever you needed.