Custom Post Type icon

  • I have a custom post type and would like to use the same icon as pages are using. Currently I have in my args array for register_post_type:
    'menu_icon' => admin_url() . 'images/media-button-video.gif',
    which works, but I would like to have the same icon as the pages. The div class they these links sit in is the same wp-menu-image, but if i link to the same image as the pages, I get the whole sprite showing. What do I need to do with this to make it work.

    Thank you for any help!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Position the element with css. Use sprite as a background image, Create a div window for the correct portion of the sprite to show through. Show the proper portion of the sprite with css background positioning.

    John McAlester

    (@johnmcalester)

    Is it possible to simply use one of the existing menu icons for a custom post type admin menu?

    When you register the CPT you can declare: ‘menu_icon’ =>

    Is it possible to declare something like: ‘menu_icon’ => ‘Pages’

    What are the names of the existing menu icons?

    Thread Starter brian914

    (@brian914)

    johnmcalester you can something like what I did up top:
    ‘menu_icon’ => admin_url() . ‘images/media-button-video.gif’
    You can just look up the paths of images that are already being used in existing menus.

    Thanks for the reply brian914. That works great for the menu icons which have a gif. As you stated in your first post, if we do this for the top level menu icons, the whole sprite is showing.

    The li that the CPT menu sits in is given a custom id based on the name of the CPT. It should be possible to place some custom CSS someplace and then just copy the rules for which ever menu icon you want.

    I am wondering where the custom CSS should be (functions, custom.css, etc.) and where exactly I can find the CSS rules which position the sprite for each menu icon.

    Thanks again!

    OK, I think I figured this out thanks to the start I got from this post:
    https://randyjensenonline.com/thoughts/wordpress-custom-post-type-fugue-icons/

    1. I added a function (code from the linked post above) to the functions.php file of my theme.

    2. Then I copied the menu.png image from: wp-admin->images to my theme’s image directory.

    *you could probably link to this file directly without having to copy it but I haven’t figured that out yet.

    3. Then, in the CSS within the function that I added to my theme’s function.php file, I entered the correct values to place the sprite for the icon that I wanted. The x value for each icon is 30 pixels different. So for the “Appearance” menu icon you set the x value to 0, the “Comments” icon is -30px, “Dashboard” icon -60px, etc. The x value is first and then the y value in the CSS declaration.

    Appearance: 0px
    Comments: -30px
    Dashboard: -60px
    Links: -90px
    Media: -120px
    Pages: -150px
    Plugins: -180px
    Tools: -210px
    Settings: -240px
    Posts: -270px
    Users: -300px
    Options: -330px
    Passwords (maybe?): -360px

    I hope this saves some people some time if they would like to set the menu icon of a registered CPT with one of the regular menu icons which come with WordPress.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom Post Type icon’ is closed to new replies.