Styling Custom Meta Boxes?

1 Views

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

The current code:

Read More
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.

Post Views: 1

Related posts

Leave a Reply

4 comments

  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.

  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!

  4. 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' );
    }
}