WordPress Admin Editor – changing the column layout: fixed content + fluid sidebar



On my WordPress sites I like to have a fixed width for the post content. When editing the posts however, the main column has a fluid layout. Additionally, I wanted to be able to use the sidebar in a more efficient way, by putting there the Faster Image Insert box.

WordPress Admin Area Columns Resized

So I decided I needed a 800px wide content column and a fluid sidebar that could expand taking the remaining width space.

In order to achieve this, I wrote some CSS code and a simple jQuery function. They are respectively included in a custom javascript file (read here how to include a custom javascript in the admin area) and a custom CSS stylesheet (read here how to setup this custom css style for the admin area).

@media screen and (min-width: 1300px)
{
	
	$admin-content-col-width:800px;
	
	#post-body-content, #postbox-container-2 {width: $admin-content-col-width !important; float:left;}
	#post-body.columns-2 #postbox-container-1 {
		margin-right:0; 
	}
	#poststuff #post-body.columns-2 {
		margin-right:0;
	}
	#poststuff #post-body.columns-2 #side-sortables {width:100%;}
	
}

And this is the javascript code, wrapped inside
jQuery(document).ready(function(){ ...});

function resize_wp_admin_cols()
{
       var new_sidebar_width = jQuery('#wpbody-content').width() - jQuery('#post-body-content').width() -45;
       
       if(new_sidebar_width>275)
       {
		   jQuery('#postbox-container-1').css('width',new_sidebar_width+'px');			       
       }
       else
       {
	       jQuery('#postbox-container-1').css('width','');	
       }
}

resize_wp_admin_cols();
jQuery(window).resize(function(){
		
	resize_wp_admin_cols();
		
});

Leave a comment