Add CSS to custom post type admin pages

  • Resolved Josh Leuze

    (@jleuze)


    13 years, 11 months ago

    I’m working on a plugin that creates a custom post type and I am trying to customize that post type a bit.

    I have the custom post type working fine using register_post_type, and I have added a custom icon using menu_icon. That is the smaller icon in the menu.

    But I would like to customize the larger icon on the Edit and Add New admin page for that custom post type as well.

    I have some code that works to do this across all of the edit.php pages:

    function myposttype_admin_css() {

		echo  "<link type='text/css' rel='stylesheet' href='";
		echo plugins_url('myposttypeadmin.css', __FILE__);
		echo  "' />";

	}

	add_action( "admin_print_styles-edit.php", 'myposttype_admin_css' )

    But I’d like it to be more specific and only add that stylesheet to the custom post type pages.

    I tried this action with no success:

    add_action( "admin_print_styles-edit.php?post_type=myposttype", 'myposttype_admin_css' )

    Anyone have any ideas on how I can pull this off?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Josh Leuze

    (@jleuze)

    13 years, 11 months ago

    I figured out a solution to my problem, courtesy of this post where someone was trying to add JavaScript to custom post type pages.

    The code that did the trick for me is not too far off from the original, if just checks the post type before adding the code to the header:

    function myposttype_admin_css($hook_suffix) {

		global $typenow; if ($typenow=="myposttype") {

			echo  "<link type='text/css' rel='stylesheet' href='" . plugins_url('myposttypeadmin.css', __FILE__) . "' />";

		}

	}

	add_action('admin_enqueue_scripts', 'myposttype_admin_css');

    Took a lot of digging and trial and error, but I finally have a proper custom post type with custom logos and a settings page in the right spot!

    Thread Starter Josh Leuze

    (@jleuze)

    13 years, 10 months ago

    I noticed that my solution wasn’t quite working right. The custom icon showed up on the main and add new pages, but the default icon was still showing up on the Edit Post page.

    Did some more digging and found this very helpful tutorial.

    I changed the code like this and the custom icon is showing up on all the custom post type pages:

    add_action('admin_head', 'myposttype_admin_css');

	function myposttype_admin_css() {

		global $post_type; if (($_GET['post_type'] == 'myposttype') || ($post_type == 'myposttype')) :		

			echo "<link type='text/css' rel='stylesheet' href='" . plugins_url('/css/myposttypeadmin.css', __FILE__) . "' />";

		endif;

}
    jamesjm

    (@jamesjm)

    13 years, 10 months ago

    What about adding custom css to template files? (Either via the template files themselves or the plugin that adds the custom post type?)

    Thread Starter Josh Leuze

    (@jleuze)

    13 years, 10 months ago

    Hey James, I think the easiest way to add custom CSS to specific page templates or even individual pages in WordPress is to use the body_class template tag, this adds a bunch of handy classes to each page that you can use to style them in a fine grained fashion.

    So if you have a page template called page-custom.php, you can use .page-template-custom to style the pages that use that template.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add CSS to custom post type admin pages’ is closed to new replies.