{"id":1581,"date":"2014-01-30T19:33:15","date_gmt":"2014-01-30T19:33:15","guid":{"rendered":"http:\/\/hyperdrive-designs.com\/?p=1581"},"modified":"2018-10-22T12:46:09","modified_gmt":"2018-10-22T12:46:09","slug":"adding-dashicons-custom-post-types-admin-menu","status":"publish","type":"post","link":"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/","title":{"rendered":"Adding Dashicons to Custom Post Types Admin Menu"},"content":{"rendered":"<p>OK, WordPress Designers and Developers. I finally have figured out how to use the new Dashicons. If you do not know what the Dashicons are, go to the website <a href=\"http:\/\/melchoyce.github.io\/dashicons\/\">here<\/a>. With WordPress getting a nice overhaul in the admin theme, Dashicons are used throughout the new admin theme. So I just got finished making a new plugin which required a custom post type. So I wanted to give the new post type a cool new Dashicon then the default pin. So here are the steps:<\/p>\n<p>1. In the custom post type script where you normally state the menu_icon this is what your syntax will be (see highlighted line # 22):<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">function create_orl_books()\r\n{\r\nregister_post_type( 'orl_books',\r\n  array(\r\n    'labels' =&gt; array(\r\n    'name' =&gt; 'ORL books',\r\n    'singular_name' =&gt; 'ORL Book',\r\n    'add_new' =&gt; 'Add New',\r\n    'add_new_item' =&gt; 'Add New ORL Book',\r\n    'edit' =&gt; 'Edit',\r\n    'edit_item' =&gt; 'Edit ORL Book',\r\n    'new_item' =&gt; 'New ORL Book',\r\n    'view' =&gt; 'View',\r\n    'view_item' =&gt; 'View ORL Book',\r\n    'search_items' =&gt; 'Search ORL Book',\r\n    'not_found' =&gt; 'No ORL Book found',\r\n    'not_found_in_trash' =&gt;\r\n    'No ORL Book found in Trash'\r\n    ),\r\n    'public' =&gt; true,\r\n    'menu_position' =&gt; 15,\r\n    'menu_icon' =&gt; 'dashicons-[book]',    'supports' =&gt; array('title', 'editor', 'thumbnail')\r\n    )\r\n  );\r\n}<\/code><\/pre>\n<p>2. OK. Now we know where to place the code correctly, how do we get the Dashicons? Go to the <a href=\"http:\/\/melchoyce.github.io\/dashicons\/\">Dashicons<\/a> website and find the icon that you would like to use.Click on the icon and go back to the top of the Dashicon home page and click on copy html. There you will see what the CSS class is and get that name and place it in the brackets on the menu-icon line.<\/p>\n<p><a href=\"http:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2014\/01\/dashicon.png\"><img loading=\"lazy\" class=\"alignnone wp-image-1583 size-large\" src=\"http:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2014\/01\/dashicon-1024x432.png\" alt=\"\" width=\"1000\" height=\"421\" \/><\/a><\/p>\n<p>3. Save your css page and then refresh your admin webpage and this is what you should see:<\/p>\n<p><a href=\"http:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2014\/01\/dashicon2.png\"><img loading=\"lazy\" class=\"alignnone wp-image-1585 size-full\" src=\"http:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2014\/01\/dashicon2.png\" alt=\"\" width=\"191\" height=\"387\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>OK, WordPress Designers and Developers. I finally have figured out how to use the new Dashicons. If you do not know what the Dashicons are, go to the website here. With WordPress getting a nice overhaul in the admin theme,<\/p>\n","protected":false},"author":1,"featured_media":192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[3,11,13,15],"tags":[],"acf":false,"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding Dashicons to Custom Post Types Admin Menu - Hyperdrive Designs<\/title>\n<meta name=\"description\" content=\"Article describing Adding Dashicons to Custom Post Types Admin Menu\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Dashicons to Custom Post Types Admin Menu - Hyperdrive Designs\" \/>\n<meta property=\"og:description\" content=\"Article describing Adding Dashicons to Custom Post Types Admin Menu\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Hyperdrive Designs\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-30T19:33:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-22T12:46:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2018\/10\/blue-triangles-wp-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2250\" \/>\n\t<meta property=\"og:image:height\" content=\"1875\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Darren\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Darren\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/\",\"url\":\"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/\",\"name\":\"Adding Dashicons to Custom Post Types Admin Menu - Hyperdrive Designs\",\"isPartOf\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/#website\"},\"datePublished\":\"2014-01-30T19:33:15+00:00\",\"dateModified\":\"2018-10-22T12:46:09+00:00\",\"author\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6\"},\"description\":\"Article describing Adding Dashicons to Custom Post Types Admin Menu\",\"breadcrumb\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hyperdrivedesigns.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Dashicons to Custom Post Types Admin Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#website\",\"url\":\"https:\/\/hyperdrivedesigns.com\/\",\"name\":\"Hyperdrive Designs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hyperdrivedesigns.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6\",\"name\":\"Darren\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g\",\"caption\":\"Darren\"},\"url\":\"https:\/\/hyperdrivedesigns.com\/author\/darren\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Dashicons to Custom Post Types Admin Menu - Hyperdrive Designs","description":"Article describing Adding Dashicons to Custom Post Types Admin Menu","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/","og_locale":"en_US","og_type":"article","og_title":"Adding Dashicons to Custom Post Types Admin Menu - Hyperdrive Designs","og_description":"Article describing Adding Dashicons to Custom Post Types Admin Menu","og_url":"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/","og_site_name":"Hyperdrive Designs","article_published_time":"2014-01-30T19:33:15+00:00","article_modified_time":"2018-10-22T12:46:09+00:00","og_image":[{"width":2250,"height":1875,"url":"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2018\/10\/blue-triangles-wp-1.png","type":"image\/png"}],"author":"Darren","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Darren","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/","url":"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/","name":"Adding Dashicons to Custom Post Types Admin Menu - Hyperdrive Designs","isPartOf":{"@id":"https:\/\/hyperdrivedesigns.com\/#website"},"datePublished":"2014-01-30T19:33:15+00:00","dateModified":"2018-10-22T12:46:09+00:00","author":{"@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6"},"description":"Article describing Adding Dashicons to Custom Post Types Admin Menu","breadcrumb":{"@id":"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hyperdrivedesigns.com\/adding-dashicons-custom-post-types-admin-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hyperdrivedesigns.com\/"},{"@type":"ListItem","position":2,"name":"Adding Dashicons to Custom Post Types Admin Menu"}]},{"@type":"WebSite","@id":"https:\/\/hyperdrivedesigns.com\/#website","url":"https:\/\/hyperdrivedesigns.com\/","name":"Hyperdrive Designs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hyperdrivedesigns.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6","name":"Darren","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g","caption":"Darren"},"url":"https:\/\/hyperdrivedesigns.com\/author\/darren\/"}]}},"_links":{"self":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts\/1581"}],"collection":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/comments?post=1581"}],"version-history":[{"count":0,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts\/1581\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/media\/192"}],"wp:attachment":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/media?parent=1581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/categories?post=1581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/tags?post=1581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}