{"id":154775,"date":"2018-12-21T07:50:13","date_gmt":"2018-12-21T07:50:13","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=154775"},"modified":"2025-12-04T07:14:05","modified_gmt":"2025-12-04T07:14:05","slug":"how-to-add-attribute-to-the-body-tag-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/","title":{"rendered":"How to add attribute to the body tag in Magento 2"},"content":{"rendered":"\n<p>Magento 2 automatically adds the controller and layout names as classes to the body tag. In this blog, we\u2019ll show how to add your own custom body class and include an additional attribute with a specific value.<\/p>\n\n\n\n<p>In the layout file add the following,<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?xml version=&quot;1.0&quot;?&gt;\n&lt;page xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd&quot;&gt;\n    &lt;body&gt;\n        &lt;attribute name=&quot;class&quot; value=&quot;custom-class&quot;\/&gt;\n        &lt;attribute name=&quot;data-var&quot; value=&quot;some-data&quot;\/&gt;\n    &lt;\/body&gt;\n&lt;\/page&gt;<\/pre>\n\n\n\n<p>The&nbsp;<strong>attribute&nbsp;<\/strong>tag is use add attributes to the body.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"937\" height=\"492\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png\" alt=\"\" class=\"wp-image-155245\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png 937w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504-250x131.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504-300x158.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504-768x403.png 768w\" sizes=\"(max-width: 937px) 100vw, 937px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>You may also check our quality <a href=\"https:\/\/store.webkul.com\/Magento-2.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Commerce Extensions<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento 2 automatically adds the controller and layout names as classes to the body tag. In this blog, we\u2019ll show how to add your own custom body class and include an additional attribute with a specific value. In the layout file add the following, The&nbsp;attribute&nbsp;tag is use add attributes to the body. You may also <a href=\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":201,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302,1],"tags":[7931,7930],"class_list":["post-154775","post","type-post","status-publish","format-standard","hentry","category-magento2","category-uncategorized","tag-body-tag-in-magento-2","tag-magento-2-layout"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to add attribute to the body tag in Magento 2 - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add attribute to the body tag in Magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Magento 2 automatically adds the controller and layout names as classes to the body tag. In this blog, we\u2019ll show how to add your own custom body class and include an additional attribute with a specific value. In the layout file add the following, The&nbsp;attribute&nbsp;tag is use add attributes to the body. You may also [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-21T07:50:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T07:14:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png\" \/>\n<meta name=\"author\" content=\"Sanjay Chouhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sanjay Chouhan\" \/>\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:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/\"},\"author\":{\"name\":\"Sanjay Chouhan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\"},\"headline\":\"How to add attribute to the body tag in Magento 2\",\"datePublished\":\"2018-12-21T07:50:13+00:00\",\"dateModified\":\"2025-12-04T07:14:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/\"},\"wordCount\":75,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png\",\"keywords\":[\"body tag in Magento 2\",\"Magento 2 layout\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/\",\"name\":\"How to add attribute to the body tag in Magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png\",\"datePublished\":\"2018-12-21T07:50:13+00:00\",\"dateModified\":\"2025-12-04T07:14:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png\",\"width\":937,\"height\":492},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add attribute to the body tag in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\",\"name\":\"Sanjay Chouhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sanjay Chouhan\"},\"sameAs\":[\"https:\/\/www.instagram.com\/sanjaychouhansc\/\",\"https:\/\/in.linkedin.com\/in\/scchouhansanjay\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add attribute to the body tag in Magento 2 - Webkul Blog","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:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How to add attribute to the body tag in Magento 2 - Webkul Blog","og_description":"Magento 2 automatically adds the controller and layout names as classes to the body tag. In this blog, we\u2019ll show how to add your own custom body class and include an additional attribute with a specific value. In the layout file add the following, The&nbsp;attribute&nbsp;tag is use add attributes to the body. You may also [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-12-21T07:50:13+00:00","article_modified_time":"2025-12-04T07:14:05+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png","type":"","width":"","height":""}],"author":"Sanjay Chouhan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sanjay Chouhan","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/"},"author":{"name":"Sanjay Chouhan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462"},"headline":"How to add attribute to the body tag in Magento 2","datePublished":"2018-12-21T07:50:13+00:00","dateModified":"2025-12-04T07:14:05+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/"},"wordCount":75,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png","keywords":["body tag in Magento 2","Magento 2 layout"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/","url":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/","name":"How to add attribute to the body tag in Magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png","datePublished":"2018-12-21T07:50:13+00:00","dateModified":"2025-12-04T07:14:05+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_504.png","width":937,"height":492},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-add-attribute-to-the-body-tag-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add attribute to the body tag in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462","name":"Sanjay Chouhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sanjay Chouhan"},"sameAs":["https:\/\/www.instagram.com\/sanjaychouhansc\/","https:\/\/in.linkedin.com\/in\/scchouhansanjay"],"url":"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/154775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/201"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=154775"}],"version-history":[{"count":6,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/154775\/revisions"}],"predecessor-version":[{"id":515261,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/154775\/revisions\/515261"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=154775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=154775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=154775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}