{"id":3778,"date":"2020-04-11T19:45:24","date_gmt":"2020-04-11T14:45:24","guid":{"rendered":"https:\/\/webplover.com\/hosting\/?p=3778"},"modified":"2022-05-30T12:52:51","modified_gmt":"2022-05-30T07:52:51","slug":"highlight-active-page-link-in-wordpress","status":"publish","type":"post","link":"https:\/\/webplover.com\/hosting\/highlight-active-page-link-in-wordpress\/","title":{"rendered":"How to Highlight Current Active Page Link in WordPress [with Pictures]"},"content":{"rendered":"\n<p>If you want to highlight the current active page link anywhere in your WordPress website or blog, then this tutorial is for you.<\/p>\n\n\n\n<p>In this tutorial I will teach you, how can you highlight the current active page link anywhere in WordPress website, wherever you want.<\/p>\n\n\n\n<p>Here I will apply it in sidebar, but you can use it anywhere in your website.<\/p>\n\n\n\n<p><strong>Let\u2019s Start<\/strong><\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id_8183c5-d9 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id_8183c5-d9 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id_8183c5-d9 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id_8183c5-d9 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_008717-7c, .wp-block-kadence-advancedheading.kt-adv-heading_008717-7c[data-kb-block=\"kb-adv-heading_008717-7c\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_008717-7c mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_008717-7c[data-kb-block=\"kb-adv-heading_008717-7c\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading_008717-7c img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_008717-7c[data-kb-block=\"kb-adv-heading_008717-7c\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading_008717-7c wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_008717-7c\">Step 1: Create a new menu<\/h2>\n\n\n\n<p>First of all create a new menu add add items to it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"425\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/create-nav-menu-1-1024x425.jpg\" alt=\"\" class=\"wp-image-6690\" srcset=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/create-nav-menu-1-1024x425.jpg 1024w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/create-nav-menu-1-300x125.jpg 300w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/create-nav-menu-1-768x319.jpg 768w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/create-nav-menu-1-1536x638.jpg 1536w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/create-nav-menu-1.jpg 1817w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_e0e38c-c2, .wp-block-kadence-advancedheading.kt-adv-heading_e0e38c-c2[data-kb-block=\"kb-adv-heading_e0e38c-c2\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_e0e38c-c2 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_e0e38c-c2[data-kb-block=\"kb-adv-heading_e0e38c-c2\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading_e0e38c-c2 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_e0e38c-c2[data-kb-block=\"kb-adv-heading_e0e38c-c2\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading_e0e38c-c2 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_e0e38c-c2\">Step 2: Add menu to widget<\/h2>\n\n\n\n<p>After creating menu, now add it to your sidebar widget<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"408\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-menu-to-sidebar-1024x408.jpg\" alt=\"\" class=\"wp-image-6692\" srcset=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-menu-to-sidebar-1024x408.jpg 1024w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-menu-to-sidebar-300x119.jpg 300w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-menu-to-sidebar-768x306.jpg 768w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-menu-to-sidebar.jpg 1417w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"323\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/select-nav-menu-1024x323.jpg\" alt=\"\" class=\"wp-image-6693\" srcset=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/select-nav-menu-1024x323.jpg 1024w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/select-nav-menu-300x95.jpg 300w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/select-nav-menu-768x242.jpg 768w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/select-nav-menu.jpg 1263w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Our new menu is added in the sidebar, as you can see in the screenshot<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/widget-in-sidebar-1024x509.jpg\" alt=\"\" class=\"wp-image-6694\" srcset=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/widget-in-sidebar-1024x509.jpg 1024w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/widget-in-sidebar-300x149.jpg 300w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/widget-in-sidebar-768x382.jpg 768w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/widget-in-sidebar.jpg 1525w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_faed57-60, .wp-block-kadence-advancedheading.kt-adv-heading_faed57-60[data-kb-block=\"kb-adv-heading_faed57-60\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_faed57-60 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_faed57-60[data-kb-block=\"kb-adv-heading_faed57-60\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading_faed57-60 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_faed57-60[data-kb-block=\"kb-adv-heading_faed57-60\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading_faed57-60 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_faed57-60\">Step 3: Add custom css<\/h2>\n\n\n\n<p>Now we need to add custom css code to style the current page link in the sidebar.<\/p>\n\n\n\n<p>For this go to <strong>Appearance -> Customize -> Additional CSS<\/strong> or you can use any custom css plugin like <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\">Simple Custom CSS and JS<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"460\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-custom-css-to-wordpress-1024x460.jpg\" alt=\"\" class=\"wp-image-6695\" srcset=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-custom-css-to-wordpress-1024x460.jpg 1024w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-custom-css-to-wordpress-300x135.jpg 300w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-custom-css-to-wordpress-768x345.jpg 768w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-custom-css-to-wordpress-1536x690.jpg 1536w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/add-custom-css-to-wordpress.jpg 1793w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>and paste this css code inside it, then click on <strong>Publish<\/strong> button.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.widget .current-menu-item a {\n\tcolor: #28a745;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/hightlighted-current-page-link-1024x506.jpg\" alt=\"\" class=\"wp-image-6696\" srcset=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/hightlighted-current-page-link-1024x506.jpg 1024w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/hightlighted-current-page-link-300x148.jpg 300w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/hightlighted-current-page-link-768x379.jpg 768w, https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2022\/05\/hightlighted-current-page-link.jpg 1525w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can add more css according to your need, to style the current page link.<\/p>\n\n\n\n<p><strong>Now if you have any&nbsp;question, let me know through comment or email, I will try to help you.<\/strong><\/p>\n\n\n\n<p>Here are a few guides for you to read next:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/webplover.com\/hosting\/blog\/display-wordpress-posts-in-grid-layout\/\">How to Display Your WordPress Posts in Grid Layout<\/a><\/li><li><a href=\"https:\/\/webplover.com\/hosting\/blog\/change-footer-copyrigh-text-of-hestia-theme\/\">How To Change The Footer Copyright Text Of Hestia WordPress Theme<\/a><\/li><li><a href=\"https:\/\/webplover.com\/hosting\/blog\/add-website-to-google\/\">How to Add Website to Google [With Pictures]<\/a><\/li><\/ul>\n\n\n\n<div class=\"g-ytsubscribe\" data-channelid=\"UCArLhGLL14dgeiIKwlu4jYA\" data-layout=\"full\" data-count=\"hidden\">&nbsp;<\/div>\n\n\n\n<p><strong>If you find this article helpful, then please Subscribe to our <\/strong><a href=\"https:\/\/m.youtube.com\/channel\/UCArLhGLL14dgeiIKwlu4jYA\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>YouTube Channel<\/strong><\/a><strong> for video tutorials, and share this article on social media.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to highlight the current active page link anywhere in your WordPress website or blog, then this tutorial is for you. In this tutorial I will teach you, how can you highlight the current active page link anywhere in WordPress website, wherever you want. Here I will apply it in sidebar, but you&#8230;<\/p>\n","protected":false},"author":220,"featured_media":4394,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[228],"tags":[],"class_list":["post-3778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/posts\/3778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/users\/220"}],"replies":[{"embeddable":true,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/comments?post=3778"}],"version-history":[{"count":0,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/posts\/3778\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/media\/4394"}],"wp:attachment":[{"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/media?parent=3778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/categories?post=3778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/tags?post=3778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}