Add header and footer to WP backend

Question

I want to add a header in the backstage in order to look more blend in like the frontend. Nothing much I want to add, just the header and footer is enough. The content section remains the original style.

But I can't find an appropriate hook to this area. I tried to add get_header(); into admin-header.php and it works. However, I don't want to mess up with wp core files, so is there any way to add the files?

UPDATE

After months of resarching, I finally gave up this thought that adding frontend header and footer to the backend. Instead, I just use the frontend pages to become the user dashboard. Although, this involved a lot of work (I do it manually, not by a plugin), but it is more flexible.

However, still thanks for the advices/suggestion.

Answer 1

The in_admin_header action may be used to insert content before <div id="wpbody"> in the wordpress backend.

See Line 101 of /wp-admin/admin-header.php (line number as of version 3.3.2)

Further reading on actions: Action Reference, codex

Answer 2

I know this might seem crazy but using iframes of the header and footer and add to functions.php or create a plugin:

function frontheader() {
    echo 'IFRAME';
}
add_action('admin_head', 'frontheader');

function frontfooter() {
    echo 'IFRAME';
}
add_action('admin_footer', 'frontfooter');

Answer 3

Something that gets in the way of the header/footer concept is the left-side Admin Menu.
But with Ozh' Admin Drop Down Menu help, and its companion Admin Menus Fixed, it's possible to get the menu in another position and insert our custom upper and lower HTML.

^{click to enlarge ⤴}

add_action( 'in_admin_header', 'insert_header_wpse_51023' );
add_action( 'admin_footer', 'insert_footer_wpse_51023' );
add_filter( 'admin_print_styles', 'footer_hide_wpse_51023' );

function insert_header_wpse_51023()
{
    echo '<div style="width:100%"><img src="http://example.com/header.jpg" width="100%" /></div>';
}

function insert_footer_wpse_51023()
{
    echo '<div style="width:100%"><img src="http://example.com/footer.png" width="100%" /></div>';
}

function footer_hide_wpse_51023()
{
    echo '<style type="text/css">#wpfooter { display: none; }</style>';
}

Answer 4

From your description the part you'd like to wrap is probably div of wpwrap class. However there are no fitting hooks outside it, as well as you will need to do something with toolbar and so on.

WordPress admin side is considered (so far) very inflexible and hard to deeply customize, comparing to front end. It might make more sense to work with CSS styling and existing elements of it, rather than trying to introduce major new elements.

Answer 5

Are you trying to make the backend look for like the frontend so that when users access their profile?

Otherwise, what is the reason you want the header and footer in the backend?

If you want to give user access to their profile, you can use http://wordpress.org/extend/plugins/user-meta/ to make a front end profile / dashboard that has the header and footer.

There are also several functions and plugins that can off un-needed profile fields.

Answer 6

Add this to function.php

add_action( 'admin_head', 'insert_header_wpse_51023' );

function insert_header_wpse_51023()
{
    echo '  <div class="header">
            content for your header
            </div>';
}

Answer 7

I know this is old topic but it may help someone else who need this. Inside functions.php add following:

add_action( 'in_admin_header', 'my_header' );
function my_header()
{
if ( current_user_can( 'subscriber' ) ) { // If user is subscriber, remove the IF statement for all users.
    include('../wp-content/themes/YOUR_TEMPLATE_NAME/header.php'); // Adding header.php
    echo '<style>body {background: #fff;}</style>'; // Adding some styles, .css file can also be added here.
  }
}

Answer 8

If someone still needs to add the frontend header and footer to the backend, maybe this can help:

add_action( 'in_admin_header',function(){
  remove_all_actions( 'admin_notices' );
    ?>
    <style id="admin-in-header-css">
    html{
      margin:0 !important
    }
    #wpadminbar,
    #adminmenumain,
    #wpfooter,
    #footer-upgrade+div,
    #footer-left,
    #footer-upgrade{
        display: none !important;
    }
    #wpcontent, #wpfooter {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }
    </style>
    <?php
    ob_start();
    get_header();
    if( class_exists( 'WPBMap' ) ){
      WPBMap::addAllMappedShortcodes(); //Just in case you hvve WPBakery page builder
    }
    $frontend_header = ob_get_clean();
    echo do_shortcode( str_replace( '<html','<div',str_replace( '<body','<div',$frontend_header ) ) );
    ?>
    <style id="admin-after-head-css">
      html{
          margin:0 !important
      }
    </style>
    <?php
  
} );

add_action( 'in_admin_footer',function(){
  add_filter( 'admin_footer_text','__return_empty_string' );
  add_filter( 'update_footer','__return_empty_string' );
  ob_start();
  get_footer();
  if( class_exists( 'WPBMap' ) ){
    WPBMap::addAllMappedShortcodes(); //Just in case you have WPBakery pagebuilder
  }
  $frontend_footer = ob_get_clean();
  echo do_shortcode( str_replace( '</html>','',str_replace( '</body>','</div>',$frontend_footer ) ) );
} );

It's not possible to do it in a clean way because we are trying to do something a little dirty here, but I think this is a good compromise between dirtiness and the goal we want to reach.

All that we can remove via PHP we remove it via PHP, the rest will be hidden with some dirty CSS. I've assigned two times a zero top margin to the HTML element because the first time it has to be parsed just before the first rendering, and the second time it has to override the margin added by the core that arrives later during the rendering. If you add it only one time you will see a layout shift during the rendering.

I replaced <body,<html,, and to prevent double opening and closing tags (added by the core and the theme).

As said, this is a dirty solution, but it should work with most themes.