{"id":1032,"date":"2012-11-24T17:00:26","date_gmt":"2012-11-25T01:00:26","guid":{"rendered":"http:\/\/www.virendrachandak.com\/techtalk\/\/?p=1032"},"modified":"2014-09-27T23:46:05","modified_gmt":"2014-09-28T06:46:05","slug":"how-to-add-css-classes-to-wordpress-menu-item","status":"publish","type":"post","link":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/","title":{"rendered":"How to add CSS classes to WordPress menu item"},"content":{"rendered":"

Recently I wanted to add some customization to some of my menu items. So I decided to add a CSS class to those particular menu items. I could modify my theme code and add some custom functions to do that. However, I first decided to explore the WordPress options and see if there was already some thing built in to do this. I found that there is an easy way to do this. This is normally a hidden option and in this post I will tell you how we can easily do that.<\/p>\n

\"\"<\/a><\/p>\n

How to add CSS classes to WordPress menu item<\/strong>
\n1. Go to Appearance -> Menus in your sidebar
\n2. On the top right of the screen click the \u201cScreen Options\u201d tab
\n3. Check the \u201cCSS Classes\u201d option in the Screen Options tab. You don’t need to save, the changes will be visible immediately
\n4. Add or open up the menu item you wish to add the CSS Classes to. Now you will see a field that says \u201cCSS Classes (optional)\u201d. Add the CSS classes there
\n5. Click \u201cSave Menu\u201d to save your changes<\/p>\n

These steps should work with WordPress 3.0+.<\/p>\n","protected":false},"excerpt":{"rendered":"

Recently I wanted to add some customization to some of my menu items. So I decided to add a CSS class to those particular menu items. I could modify my theme code and add some custom functions to do that. However, I first decided to explore the WordPress options and see if there was already […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"How to add CSS classes to WordPress menu item http:\/\/wp.me\/p2vTtQ-gE","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[91],"tags":[92,102],"class_list":["post-1032","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-menu","tag-wordpress-menu"],"yoast_head":"\nHow to add CSS classes to WordPress menu item - Virendra's TechTalk<\/title>\n<meta name=\"description\" content=\"Recently I wanted to add some customization to some of my menu items. So I decided to add a CSS class to those particular menu items. I could modify my\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add CSS classes to WordPress menu item - Virendra's TechTalk\" \/>\n<meta property=\"og:description\" content=\"Recently I wanted to add some customization to some of my menu items. So I decided to add a CSS class to those particular menu items. I could modify my\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/\" \/>\n<meta property=\"og:site_name\" content=\"Virendra's TechTalk\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/virendrachandak\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/virendrachandak\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-25T01:00:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-09-28T06:46:05+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.virendrachandak.com\/techtalk\/wp-content\/uploads\/2012\/07\/WordPress-add-CSS-Classes-to-menu-item.png\" \/>\n<meta name=\"author\" content=\"Virendra Chandak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@virendrachandak\" \/>\n<meta name=\"twitter:site\" content=\"@virendrachandak\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Virendra Chandak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/\"},\"author\":{\"name\":\"Virendra Chandak\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"headline\":\"How to add CSS classes to WordPress menu item\",\"datePublished\":\"2012-11-25T01:00:26+00:00\",\"dateModified\":\"2014-09-28T06:46:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/\"},\"wordCount\":198,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"image\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/wp-content\\\/uploads\\\/2012\\\/07\\\/WordPress-add-CSS-Classes-to-menu-item.png\",\"keywords\":[\"Menu\",\"WordPress Menu\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/\",\"url\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/\",\"name\":\"How to add CSS classes to WordPress menu item - Virendra's TechTalk\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/wp-content\\\/uploads\\\/2012\\\/07\\\/WordPress-add-CSS-Classes-to-menu-item.png\",\"datePublished\":\"2012-11-25T01:00:26+00:00\",\"dateModified\":\"2014-09-28T06:46:05+00:00\",\"description\":\"Recently I wanted to add some customization to some of my menu items. So I decided to add a CSS class to those particular menu items. I could modify my\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/wp-content\\\/uploads\\\/2012\\\/07\\\/WordPress-add-CSS-Classes-to-menu-item.png\",\"contentUrl\":\"http:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/wp-content\\\/uploads\\\/2012\\\/07\\\/WordPress-add-CSS-Classes-to-menu-item.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/how-to-add-css-classes-to-wordpress-menu-item\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TechTalk\",\"item\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress\",\"item\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/category\\\/wordpress\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to add CSS classes to WordPress menu item\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#website\",\"url\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/\",\"name\":\"Virendra's TechTalk\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\",\"name\":\"Virendra Chandak\",\"logo\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.virendrachandak.com\",\"https:\\\/\\\/www.facebook.com\\\/virendrachandak\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/virendrachandak\\\/\",\"https:\\\/\\\/x.com\\\/virendrachandak\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add CSS classes to WordPress menu item - Virendra's TechTalk","description":"Recently I wanted to add some customization to some of my menu items. So I decided to add a CSS class to those particular menu items. I could modify my","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:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/","og_locale":"en_US","og_type":"article","og_title":"How to add CSS classes to WordPress menu item - Virendra's TechTalk","og_description":"Recently I wanted to add some customization to some of my menu items. So I decided to add a CSS class to those particular menu items. I could modify my","og_url":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/","og_site_name":"Virendra's TechTalk","article_publisher":"https:\/\/www.facebook.com\/virendrachandak","article_author":"https:\/\/www.facebook.com\/virendrachandak","article_published_time":"2012-11-25T01:00:26+00:00","article_modified_time":"2014-09-28T06:46:05+00:00","og_image":[{"url":"http:\/\/www.virendrachandak.com\/techtalk\/wp-content\/uploads\/2012\/07\/WordPress-add-CSS-Classes-to-menu-item.png","type":"","width":"","height":""}],"author":"Virendra Chandak","twitter_card":"summary_large_image","twitter_creator":"@virendrachandak","twitter_site":"@virendrachandak","twitter_misc":{"Written by":"Virendra Chandak","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/#article","isPartOf":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/"},"author":{"name":"Virendra Chandak","@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"headline":"How to add CSS classes to WordPress menu item","datePublished":"2012-11-25T01:00:26+00:00","dateModified":"2014-09-28T06:46:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/"},"wordCount":198,"commentCount":2,"publisher":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"image":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/#primaryimage"},"thumbnailUrl":"http:\/\/www.virendrachandak.com\/techtalk\/wp-content\/uploads\/2012\/07\/WordPress-add-CSS-Classes-to-menu-item.png","keywords":["Menu","WordPress Menu"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/","url":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/","name":"How to add CSS classes to WordPress menu item - Virendra's TechTalk","isPartOf":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/#primaryimage"},"image":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/#primaryimage"},"thumbnailUrl":"http:\/\/www.virendrachandak.com\/techtalk\/wp-content\/uploads\/2012\/07\/WordPress-add-CSS-Classes-to-menu-item.png","datePublished":"2012-11-25T01:00:26+00:00","dateModified":"2014-09-28T06:46:05+00:00","description":"Recently I wanted to add some customization to some of my menu items. So I decided to add a CSS class to those particular menu items. I could modify my","breadcrumb":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/#primaryimage","url":"http:\/\/www.virendrachandak.com\/techtalk\/wp-content\/uploads\/2012\/07\/WordPress-add-CSS-Classes-to-menu-item.png","contentUrl":"http:\/\/www.virendrachandak.com\/techtalk\/wp-content\/uploads\/2012\/07\/WordPress-add-CSS-Classes-to-menu-item.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-add-css-classes-to-wordpress-menu-item\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TechTalk","item":"https:\/\/www.virendrachandak.com\/techtalk\/"},{"@type":"ListItem","position":2,"name":"WordPress","item":"https:\/\/www.virendrachandak.com\/techtalk\/category\/wordpress\/"},{"@type":"ListItem","position":3,"name":"How to add CSS classes to WordPress menu item"}]},{"@type":"WebSite","@id":"https:\/\/www.virendrachandak.com\/techtalk\/#website","url":"https:\/\/www.virendrachandak.com\/techtalk\/","name":"Virendra's TechTalk","description":"","publisher":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.virendrachandak.com\/techtalk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17","name":"Virendra Chandak","logo":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.virendrachandak.com","https:\/\/www.facebook.com\/virendrachandak","https:\/\/www.linkedin.com\/in\/virendrachandak\/","https:\/\/x.com\/virendrachandak"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2vTtQ-gE","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts\/1032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/comments?post=1032"}],"version-history":[{"count":0,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts\/1032\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/media?parent=1032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/categories?post=1032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/tags?post=1032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}