Horizontal scroll for WordPress Admin Post & Pages

If you view All Posts  or All Pages in WordPress admin you will see the columns resize in order to fit all the information into the visible screen width.

If you have used WordPress then the chances are you have seen the title column get squashed down so its only a few characters wide. e.g.:

This is usually worse when you install plugins that add extra columns e.g.  In the image above Yoast SEO has added the columns on the right plus I have added a Featured image thumbnail.

As all displayed posts get squashed this can lead to a very long page and makes it almost impossible to quickly read the Post Title or select an edit function ... and its just plain annoying !

So lets try and do a couple of things to make our lives a little better:

1. Allow the columns to overflow the screen width and scroll right and left as required
2. Set a minimum size for some of the columns so we can read them easier.

To do this we have to get our hands dirty and apply a little CSS to the WordPress admin by adding the following code to the active themes functions.php :

add_action('admin_head', 'add_admin_css');
function add_admin_css() {
echo '<style>
  .post-type-post div.wrap {overflow-x:scroll; width:98%;}
  .post-type-post table.wp-list-table.fixed{table-layout:auto;}

  .post-type-post table.wp-list-table th#title{min-width:350px;}
  .post-type-post table.wp-list-table th#categories{min-width:150px;}
      
  .post-type-page div.wrap {overflow-x:scroll; width:98%;}
  .post-type-page table.wp-list-table.fixed{table-layout:auto;}

  .post-type-page table.wp-list-table th#title{min-width:350px;}
  .post-type-page table.wp-list-table th#categories{min-width:150px;}
  </style>';
} 

Qinnan Note: If you have not edited the functions.php file before then the WooCommerce website has a reasonable description of how to go about it: How to use theme functions.php

What this code does:

• Make the div that wraps the Page list scroll horizontally and set its width to 98% of the available space
• Stop the columns being fixed width
• Define the widths of the title & Category columns

The tweak is repeated for both Posts & Pages but should be possible to adapt it, as required, for other post types.

Now you can see that there is a new scroll bar below the Post list so the last few items on the right can be scrolled into view if required.

Also the columns don't change size if you make the browser narrower. Most useful if you are editing on a mobile device.

Don't forget you may be able to use the Middle Mouse Click to scroll in all directions (if your mouse setup allows it).

http://pratergroup.co.uk/wp-json/wp/v2/posts/253 Tip: How to configure the mouse in Windows 10 read down the page untill you find the title: "How to change the mouse wheel vertical and horizontal scrolling options"

That's one less thing to bug me when using WordPress admin. I Hope you find it usefull.

Footnote

The code above was used for readability so you can see what is happening, it can be shortened a little to this:

add_action('admin_head', 'add_admin_css');
function add_admin_css() {
   echo '<style>
  .post-type-post div.wrap, .post-type-page div.wrap  {overflow-x:scroll; width:98%;}
  .post-type-post table.wp-list-table.fixed, .post-type-page table.wp-list-table.fixed{table-layout:auto;}
  .post-type-post table.wp-list-table th#title, .post-type-page table.wp-list-table th#title{min-width:350px;}
  .post-type-post table.wp-list-table th#categories, .post-type-page table.wp-list-table th#categories{min-width:150px;}
  </style>';
}