{"id":1828,"date":"2024-12-17T10:47:10","date_gmt":"2024-12-17T09:47:10","guid":{"rendered":"https:\/\/wpmastertoolkit.com\/module\/classe-de-body-personnalisee\/"},"modified":"2025-01-02T17:39:59","modified_gmt":"2025-01-02T16:39:59","slug":"classe-de-body-personnalisee","status":"publish","type":"module","link":"https:\/\/wpmastertoolkit.com\/en\/module\/customized-body-class\/","title":{"rendered":"Customized Body Class"},"content":{"rendered":"<h1 class=\"wp-block-heading\">Add custom classes to the <code data-no-auto-translation=\"\">&lt;body&gt;<\/code> with WPMasterToolKit<\/h1>\n\n\n\n<p>Adding custom CSS classes to the tag <code data-no-auto-translation=\"\">&lt;body&gt;<\/code> of a page can be an essential feature for WordPress developers and site owners who wish to adjust the design or enable specific functionality for particular pages or types of content. With this in mind, we've developed the <strong>Custom Body Class<\/strong> within our WPMasterToolKit plugin.<\/p>\n\n\n\n<p>This module makes it easy to add custom CSS classes to the <code data-no-auto-translation=\"\">&lt;body&gt;<\/code> individual pages, offering even greater flexibility in terms of personalization.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Which plugin can this module replace?<\/h2>\n\n\n\n<p>The module <strong>Custom Body Class<\/strong> from WPMasterToolKit can replace several plugins that specialize in managing CSS classes on the <code data-no-auto-translation=\"\">&lt;body&gt;<\/code>such as :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Insert Body Class Plugin for WordPress<\/strong> or similar plug-ins that add a simple interface for customizing <code data-no-auto-translation=\"\">&lt;body&gt;<\/code>.<\/li>\n\n\n\n<li>Tailor-made solutions developed by themes or agencies for this specific functionality.<\/li>\n<\/ul>\n\n\n\n<p>With this module, you won't need to search for or use an additional plugin: WPMasterToolKit manages everything in a single solution.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Main features of the module<\/h2>\n\n\n\n<p>This is what the module offers <strong>Custom Body Class<\/strong> :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Adding custom classes to specific pages :<\/strong> Thanks to a metabox added to the content editor, administrators or editors can define CSS classes to be applied to the <code data-no-auto-translation=\"\">&lt;body&gt;<\/code> of a page or article.<\/li>\n\n\n\n<li><strong>Selective activation by content type :<\/strong> The administrator can choose the content types (articles, pages, custom post types, etc.) for which this feature will be activated.<\/li>\n\n\n\n<li><strong>Dynamic customization :<\/strong> Defined classes are applied dynamically when pages are loaded onto the site, offering flexibility without modifying the source code.<\/li>\n\n\n\n<li><strong>Ease of management in the administration interface :<\/strong> A configuration sub-page allows global control of parameters.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">How to use the Custom Body Class module<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Activate module :<\/strong> If the module is not activated in WPMasterToolKit, go to the modules page and activate it.<\/li>\n\n\n\n<li><strong>Configuring content types :<\/strong> <ul class=\"wp-block-list\"><\/ul><figure class=\"wp-block-image size-large\"><img alt=\"Screenshot of WPMasterToolkit interface.\" fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"279\" class=\"wp-image-3093\" src=\"https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-57-1024x279.png\" srcset=\"https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-57-1024x279.png 1024w, https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-57-300x82.png 300w, https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-57-768x210.png 768w, https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-57-1536x419.png 1536w, https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-57.png 1781w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ul class=\"wp-block-list\"><li>Go to the module parameters section, available via a sub-menu in <strong>WPMasterToolKit &gt; Custom Body Class<\/strong>.<\/li><li>Select the content types (pages, articles, or custom types) for which you wish to activate the metabox.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>Go to the module parameters section, available via a sub-menu in <strong>WPMasterToolKit &gt; Custom Body Class<\/strong>.<\/li>\n\n\n\n<li>Select the content types (pages, articles, or custom types) for which you wish to activate the metabox.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Adding classes to content :<\/strong>\n<ul class=\"wp-block-list\">\n<li>When editing an article or page, a metabox entitled <strong>WPMasterToolKit (Custom Body Class)<\/strong> will be available in the side column.<\/li>\n\n\n\n<li>Enter the CSS classes you wish to add to the field, separating them with commas (e.g. : <code data-no-auto-translation=\"\">class1,class2,my-custom-class<\/code>).<figure class=\"wp-block-image size-large\"><img alt=\"Screenshot WordPress editor, test text.\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-58-1024x444.png\" class=\"wp-image-3099\" srcset=\"https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-58-1024x444.png 1024w, https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-58-300x130.png 300w, https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-58-768x333.png 768w, https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-58-1536x666.png 1536w, https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2024\/12\/image-58.png 1794w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Save changes :<\/strong> Once the classes have been added, click on \"Update\" or \"Publish\". The classes will be added automatically to the <code data-no-auto-translation=\"\">&lt;body&gt;<\/code> when the page is viewed.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Why did we make these technical choices?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Optimum performance thanks to conditional activation<\/h3>\n\n\n\n<p>With WPMasterToolKit, each module is loaded only when it is activated. This reduces the memory footprint and optimizes performance. The module <strong>Custom Body Class<\/strong> injects its functionalities only if you have activated and configured it beforehand.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Filtering based on content type<\/h3>\n\n\n\n<p>We have integrated granular control to allow administrators to limit this functionality to the content types required. This avoids unnecessarily adding meta-boxes in the administration interface, or modifying content where the functionality is not relevant.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Native integration with WordPress<\/h3>\n\n\n\n<p>The module uses the WordPress filter <code data-no-auto-translation=\"\">body_class<\/code>This ensures seamless integration with the WordPress core, themes and other plugins that may modify the <code data-no-auto-translation=\"\">&lt;body&gt;<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The module <strong>Custom Body Class<\/strong> from WPMasterToolKit is a simple yet powerful solution for WordPress administrators and developers looking to customize their pages with dynamic CSS classes. It combines the flexibility of easy class management within the administration with the optimized performance of a well-designed plugin.<\/p>\n\n\n\n<p>If you're tired of using multiple plugins to manage small features, WPMasterToolKit simplifies your life by combining everything into one. Activate this module today and discover how it can transform your style and feature management.<\/p>","protected":false},"excerpt":{"rendered":"<p>WPMasterToolKit's Custom Body Class module offers a simple solution for customizing your WordPress site by adding tag-specific CSS classes `.<body>of your pages or articles. Whether you want to adjust the design or activate specific functionalities, this module lets you define classes directly from the content editor, while optimizing performance and content type management. An ideal feature for replacing additional plugins and keeping your site light and efficient.<\/p>","protected":false},"featured_media":0,"parent":0,"template":"","meta":{"_acf_changed":true,"_seopress_robots_primary_cat":"","_seopress_titles_title":"Personnalisez facilement le avec WPMasterToolKit","_seopress_titles_desc":"Ajoutez simplement des classes CSS au body de WordPress avec WPMasterToolKit pour une personnalisation flexible sans plugins suppl\u00e9mentaires.","_seopress_robots_index":"","_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true},"class_list":["post-1828","module","type-module","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/module\/1828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/module"}],"about":[{"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/types\/module"}],"wp:attachment":[{"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/media?parent=1828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}