14

I am using Wordpress as a CMS for a project which makes extensive use of custom post types. I need to display columns in admin panels for each custom post type in a different way.

I've already created the necessary columns and populated them. What I need to do is to adjust the CSS a bit. Most importantly I'm trying to tweak the width of certain columns. For example I don't need a column listing the post ID to be as wide as the post name.

I enqueued a stylesheet in the admin panels for my custom post types but I can't get it right to style the column widths.

I tried to adjust the max-width of th or td elements, but it's ineffective. From firebug I can see the css style is there, but it's doing nothing.

While I could find a lot of tutorials to add/edit custom columns, I didn't really gather much information about how to style such columns. Any hint?

Thank you!

25

I found a solution that works for me!

I dropped this code in functions.php :

add_action('admin_head', 'my_column_width');

function my_column_width() {
    echo '<style type="text/css">';
    echo '.column-mycolumn { text-align: center; width:60px !important; overflow:hidden }';
    echo '</style>';
}
7

Thanks Nicusor: Works great. I was able to change the width of selected columns on the Posts panel (e.g Title, Author, Categories) with your solution as follows:

add_action('admin_head', 'my_admin_column_width');
function my_admin_column_width() {
    echo '<style type="text/css">
        .column-title { text-align: left; width:200px !important; overflow:hidden }
        .column-author { text-align: left; width:100px !important; overflow:hidden }
        .column-categories { text-align: left; width:100px !important; overflow:hidden }
    </style>';
}
4

You should be able to set the column width using CSS quite easily. You can use the .column-{name} class to apply styles to the column cells (both th and td). For example:

.column-mycolumn { width:20%; }

Make sure you don't have other styles overruling your column width because of CSS specificity rules. Also, long words without spaces or large images could force the column to be wider than specified in some browsers.

  • it worked! thank you so much! I was overcomplicating my css evidently – unfulvio Nov 16 '11 at 12:47
  • I have a column named "clicks" and this code placed in my childtheme styles.css file have no effect in the admin posts list! .column-clicks { width:60px; } – Nicusor Dumbrava Apr 14 '12 at 2:36
4

You can try this solved your problems:

add_action('admin_head', 'my_admin_custom_styles');
function my_admin_custom_styles() {
    $output_css = '<style type="text/css">
        .column-date { display: none }
        .column-tags { display: none }
        .column-author { width:30px !important; overflow:hidden }
        .column-categories { width:30px !important; overflow:hidden }
        .column-title a { font-size:30px !important }
    </style>';
    echo $output_css;
}
  • no semicolon at each CSS lines. – northtree Dec 20 '16 at 10:37
  • This was very useful. Just to add, Wordpress is also used on large screen mobiles by some of our editor users, so we added media queries as the !important rules above broke the default design of WP's admin listing. This is a very handy suggestion though. Thank you! – PKHunter Feb 7 '17 at 1:41
  • By default, some columns have class .fixed which results in width: 15%; . This ensures those columns have more room allocated to them than others (which are likely to break multiple lines.) But in practice, this can result in columns getting more space than they need! You can adapt Gaurang's function above to avoid giving extra space for your less important columns. e.g.: .column-tags { width: initial !important; }. – Fabien Snauwaert Jun 7 '18 at 19:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.