Skip to content

Instantly share code, notes, and snippets.

@franz-josef-kaiser
Created March 29, 2012 13:52
Show Gist options
  • Save franz-josef-kaiser/2237680 to your computer and use it in GitHub Desktop.
Save franz-josef-kaiser/2237680 to your computer and use it in GitHub Desktop.
Hide the admin bar with the click of a button in the WP admin UI
<?php
/**
* Plugin Name: "Hide Admin Bar"-Button
* Plugin URI: http://unserkaiser.com
* Description: Easier debugging when the error message is hidden behind the admin bar.
* Version: 0.1
* Author: Franz Josef Kaiser
* Author URI: http://unserkaiser.com
*/
// Prevent loading this file directly - Busted!
! defined( 'ABSPATH' ) AND exit;
/**
* Adds a button to the admin bar to allow collapsing the admin bar
* Else some error messages that are output in the html <head> can not be read
*
* @version 0.3
*
* @return void
*/
function oxo_admin_bar_extd()
{
global $wp_admin_bar;
if ( ! is_admin_bar_showing() )
return;
// YOU HAVE TO ADJUST THIS TO FIT YOUR THEME
$title = '<div style="cursor: pointer; margin-bottom: 0;">&DoubleLeftArrow;<div></div></div>';
is_admin() AND $title = '<div id="collapse-button" class="ab-icon" style="cursor: pointer; margin-bottom: 0;"><div></div></div>';
$wp_admin_bar->add_node( array(
'id' => 'collapse'
,'title' => $title
,'parent' => false
,'meta' => array(
'title' => 'collapse'
)
) );
// Add the scripts
add_action( 'admin_footer', 'oxo_admin_bar_extd_cb', 9999 );
}
add_action( 'admin_bar_menu', 'oxo_admin_bar_extd' );
/**
* Callback that builds the needed script for the admin bar button
*
* @since 0.3
*
* @return void
*/
function oxo_admin_bar_extd_cb()
{
?>
<script type="text/javascript">
jQuery( document ).ready( function($)
{
clicked = 0;
$( '#wp-admin-bar-collapse div' ).click( function()
{
if ( 0 == clicked ) {
clicked = 1;
$( '#wpadminbar' ).animate( { width: 35 }, 0 );
$( '#wpadminbar' ).css( 'min-width', 35 );
$( '#wp-admin-bar-root-default' ).children().not( '#wp-admin-bar-collapse' ).hide();
$( '#wp-admin-bar-top-secondary' ).hide();
} else {
clicked = 0;
$( '#wpadminbar' ).animate( { width: '100%' }, 0 );
$( '#wpadminbar' ).css( 'min-width', 600 );
$( '#wp-admin-bar-root-default' ).children().not( '#wp-admin-bar-collapse' ).show();
$( '#wp-admin-bar-top-secondary' ).show();
}
} );
} );
</script>
<?php
}
@franz-josef-kaiser
Copy link
Author

@cliffordp I adjusted some stuff. Try it now. If it doesn't work, then just take a look at the // YOU HAVE TO ADJUST THIS TO FIT YOUR THEME comment. If you find a solution that calls in the button sprite (search the path, incl. as <img) and include the necessary css, then please leave a comment here, so I can add it. Thanks.

@cliffordp
Copy link

I added to my theme's functions.php and the back-end worked. On the front-end, I saw the ⇐ but it didn't do anything when clicked. Suggestions? Or email me direct at "tko" [at] "tourkick.com"

@franz-josef-kaiser
Copy link
Author

@cliffordp Sry, but conversation has to stay here as it's a public gist for a reason: I host my small plugins here for everyone.

@cliffordp
Copy link

I totally understand keeping the info public, but if you needed/wanted my website info, I wouldn't want to post it here - that's all... Obviously, once it's figured out / fixed, your code would be updated for all to enjoy. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment