Styling Custom Meta Boxes?

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

The current code:

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() . '/styles/portfolio-admin.css' );
}


add_action('init', 'create_portfolio');
    function create_portfolio() {
        $portfolio_args = array(
            'label' => __('Portfolio'),
            'singular_label' => __('Portfolio'),
            'public' => true,
            'show_ui' => true,
            'capability_type' => 'post',
            'hierarchical' => false,
            'rewrite' => true,
            'supports' => array('title', 'editor', 'thumbnail')
        );
        register_post_type('portfolio',$portfolio_args);
    }

// Input fields
add_action("admin_init", "add_portfolio");
    add_action('save_post', 'update_website_url');
    function add_portfolio(){
        add_meta_box("portfolio_details", "Portfolio Options", "portfolio_options", "portfolio", "normal", "low");
    }
    function portfolio_options(){
        global $post;
        $custom = get_post_custom($post->ID);
        $website_url = $custom["website_url"][0];
        $port_excerpt = $custom["port_excerpt"][0];
?>

    <div id="portfolio-options">
        <label>Website URL:</label><input name="website_url" value="<?php echo $website_url; ?>" />
        <label>Excerpt:</label><input name="port_excerpt" value="<?php echo $port_excerpt; ?>" />       
    </div><!--end portfolio-options-->   
<?php
    }
    function update_website_url(){
        global $post;
        update_post_meta($post->ID, "website_url", $_POST["website_url"]);
        update_post_meta($post->ID, "port_excerpt", $_POST["port_excerpt"]);
    }

add_filter("manage_edit-portfolio_columns", "portfolio_edit_columns");
add_action("manage_posts_custom_column",  "portfolio_columns_display");

function portfolio_edit_columns($portfolio_columns){
    $portfolio_columns = array(
        "cb" => "<input type=\"checkbox\" />",
        "title" => "Project Title",
        "description" => "Description",
    );
    return $portfolio_columns;
}

function portfolio_columns_display($portfolio_columns){
    switch ($portfolio_columns)
    {
        case "description":
            the_excerpt();
            break;              
    }
}

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.

4 Answers
4

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.

Leave a Comment