Styling Custom Meta Boxes?

Question

I've built a basic meta box and have this in my functions.php.

My code can be found here: http://pastebin.com/JQEdtHbb

The problem is the stylesheet isn't changing the custom meta box's styling! I have the stylesheet being called from the correct directory in the code. If it matters, this is being used with custom post templates.

Answer 1

Remove the wp_enqueue_style line from the above code and replace it with this:

add_action( 'admin_print_styles-post-new.php', 'portfolio_admin_style', 11 );
add_action( 'admin_print_styles-post.php', 'portfolio_admin_style', 11 );

function portfolio_admin_style() {
    global $post_type;
    if( 'portfolio' == $post_type )
        wp_enqueue_style( 'portfolio-admin-style', get_stylesheet_directory_uri() . '/css/portfolio-admin.css' );
}

It is better to put the styling for the admin panel in a separate file like in a theme_directory/css/portfolio-admin.css as the front-end styling could conflict with the admin styles.

Answer 2

Use the admin_enqueue_scripts or admin_print_styles action hooks and wp_enqueue_style like you would on the front end.

Answer 3

First things first, I'm not sure there's a $post_type global but pretty sure there is a $post->post_type so you should probably be comparing to that. Secondly, unless you want your child themes to completely override all your CSS files (i.e. not use them even if not overriden) then you should be using get_template_directory_uri() instead of stylesheet directory.

Then, to make sure your stylesheet is included, view the source of the add new portfolio item page and see if your stylesheet is there and that the link is not broken, i.e. it links to the correct CSS file.

Finally, make sure the rules in your stylesheet are not the problem (as @ptriek mentioned above), add a #portfolio-options label { color: red !important; } and remove everything else from the stylesheet, this should turn your portfolio option labels to red. If it works then your stylesheet is fine and the rest is up to its contents :)

Good luck!

Answer 4

I'm not sure if this is going to help, but:

• Are you sure the problem isn't just CSS-related? Could you post the CSS-code?
• Do the styles show up if you check the elements with Firebug?

Answer 5

If this does not change the css style on your custom meta box, the problem is most likely with your css.

add_action('admin_enqueue_scripts', 'portfolio_admin_style');

function portfolio_admin_style($hook) {
    global $page_handle;
    if ( ($hook == 'post.php') || ($hook == 'post-new.php') || ($hook == 'page.php') || ($hook == 'page-new.php') || ($_GET['page'] == $page_handle) ) {
        wp_enqueue_style( 'portfolio-admin-style', (get_stylesheet_directory_uri() . '/css/portfolio-admin.css'), false, '1.0.0' );
    }
}