Custom style on profile options page

is there any way to style the profile page on wordpress ? I will like to add something like:

Start of the page just below the <h2> tag

Read More
<div id="normal-sortables" class="meta-box-sortables ui-sortable">
    <div id="poststuff" class="metabox-holder has-right-sidebar">
        <div id="post-body">
            <div id="post-body-content" style="margin-right: 0 !important;">
                <div id="normal-sortables" class="meta-box-sortables ui-sortable">

Before each opening <table> tag (note “the php_e(‘name’)” )

<div id="namepage" class="postbox ">
    <h3 style="cursor: default !important;"><?php _e('Name') ?></h3>
        <div class="inside">

After each closing </table> tag

    </div>
</div>

After the </form> tag

                </div>
            </div>
        </div>
    </div>
</div>

I’m not interested in adding a custom CSS file, I will be happy to use what is there already.

As a test I edited the user-edit.php from wp-admin and it looks fine, in my opinion much better.

Is there any proper way to add these div’s to the page.

Edit, I’m aware of the following code, but I hope some body can help with the “preg_replace” to add the above div’s.

function users_edited($buffer) {
if (!current_user_can('activate_plugins')) {
        global $pagenow;
        if ($pagenow == 'profile.php' || $pagenow == 'users.php' || $pagenow == 'user-edit.php') {
            //Hide the Name table
            $name = '#<h3>Name</h3>.+?<table.+?/table>#s';
            $buffer=preg_replace($name,'',$buffer,1);
            $personal = array('#<h3>Name</h3>.+?<table.+?/table>#s', '#<h3>Personal Options</h3>.+?<table.+?/table>#s');
            $buffer=preg_replace($personal,'',$buffer,1);

            //Modiffy Contact Person header from h2 to h3
            $contactperson='#<h2>Contact Person</h2>#';
            $buffer=preg_replace($contactperson,'<h3>Contact Person</h3>',$buffer,1);

        }
        return $buffer;
    }
}
function users_edit_start() { 
if (!current_user_can('activate_plugins')) {
        ob_start("users_edited"); 
    }
}
function users_edit_end() { 
if (!current_user_can('activate_plugins')) {
        ob_end_flush(); 
    }
}
add_action('admin_head', 'users_edit_start');
add_action('admin_footer', 'users_edit_end');

Related posts

Leave a Reply

2 comments

  1. It works on a standard profile page (your profile / Profile) without other plugins installed.

    Other plugins may affect the overall result. I think code can be improved, if some one knows how please give it a go.enter image description here

    function better_profile_page($buffer) {
            global $pagenow;
                if ($pagenow == 'profile.php' || $pagenow == 'users.php' || $pagenow == 'user-edit.php') {
                    $form_start = '#<form id="your-profile" action="'.esc_url( self_admin_url( IS_PROFILE_PAGE ? 'profile.php' : 'user-edit.php' ) ).'" method="post">#';
                    $new_form_start = '<form id="your-profile" action="'.esc_url( self_admin_url( IS_PROFILE_PAGE ? 'profile.php' : 'user-edit.php' ) ).'" method="post"><div id="normal-sortables" class="meta-box-sortables ui-sortable">
                    <div id="poststuff" class="metabox-holder has-right-sidebar">
                        <div id="post-body">
                            <div id="post-body-content" style="margin-right: 0 !important;">
                                <div id="normal-sortables" class="meta-box-sortables ui-sortable">';
                    $buffer=preg_replace($form_start, $new_form_start ,$buffer,1);
    
                    $h3_open_a = '#<h3>#';
                    $buffer=preg_replace($h3_open_a,'<div id="namepage" class="postbox "><h3 style="cursor: default !important;">',$buffer,1);
    
                    $h3_close = '#</h3>#';
                    $buffer=preg_replace($h3_close,'</h3><div class="inside">',$buffer,1);
    
                    $h3_open_b = '#<h3>#';
                    $buffer=preg_replace($h3_open_b,'</div></div><div id="namepage" class="postbox "><h3 style="cursor: default !important;">',$buffer);
    
                    $submit_button = '#<p class="submit">#';
                    $buffer=preg_replace($submit_button,'<p class="submit" style="float: left ! important; padding: 12px ! important;">',$buffer);
    
                    $form_close =  '#</form>#';
                    $new_form_close = '</div></div></div></form>';
                    $buffer=preg_replace($form_close, $new_form_close ,$buffer,1);
                }
                return $buffer;
        }
        function edit_profile_page_start() { 
                ob_start("better_profile_page"); 
        }
        function edit_profile_page_end() { 
                ob_end_flush(); 
        }
        add_action('admin_head', 'edit_profile_page_start');
        add_action('admin_footer', 'edit_profile_page_end');
    
  2. You’ve been poking around in the right pages. I think you know the answer already. 🙂 If you see a hook in the right place you can do it. Otherwise, do what you can with CSS, or Javascript, and if that isn’t enough you are looking at a core edit. If you saw a hook you probably wouldn’t be asking, so…

    You also have the option of opening a ticket and submitting a patch to WordPress and try to get the hooks you want.