How To Add An Additional CSS Class To a Whole Page in Elementor

This post is about a simple helper for Elementor that will make your life easier. If you’ve ever created your template for Elementor, you’ve probably encountered the problem that you can’t set an additional class for the entire template. Yes, you can add a class for any block, element, or section, but you can’t do it for the whole page in the standard Elementor or Elementor Pro package.

#1 Solution via Plugin Helper

So, to be able to add an additional class for the whole page (for example, for a page template, single post, and so on), you need to install my plugin. After that in Page Settings>Settings>General Settings you will have the following option Additional page body classes. As you can see there is nothing complicated about it. Good luck!

Download Plugin – Elementor Additional Class

#2 Solution via Code

You can also solve this problem by adding the code to the fucntions.php file of your child theme.

if ( ! class_exists('Elementor_Add_Page_Body_CSS_Class'))
{
  class Elementor_Add_Page_Body_CSS_Class
  {
    public $page_setting_key; // Key for page setting
    public $page_setting_label; // Label for page setting
    public $page_setting_placeholder; // Placeholder for page setting
    public $textdomain; // Text domain

    // Class constructor
    public function __construct()
    {
      $this->page_setting_key         = 'additional_body_classes'; // Setting key for additional body classes
      $this->page_setting_label       = 'Additional page body classes'; // Label for additional body classes
      $this->page_setting_description = 'Add your classes WITHOUT the dot. e.g.: my-class'; // Description for additional body classes
      $this->page_setting_placeholder = 'body-class-1 body-class-2'; // Placeholder for additional body classes
      $this->textdomain               = 'yourplugin'; // Text domain
    }

    // Initialize our hooks/filters
    public function init()
    {
      add_action('elementor/documents/register_controls', [ $this, 'add_body_class_control' ]); // Add body class control
      add_filter('body_class', [ $this, 'maybe_add_additional_body_classes' ]); // Add possible additional body classes
    }

    // Maybe add a custom body class value based on the page controls
    public function maybe_add_additional_body_classes($classes)
    {
      $page_settings_manager = \Elementor\Core\Settings\Manager::get_settings_managers( 'page' );
      $page_settings_model = $page_settings_manager->get_model( get_the_ID() );

      $value = $page_settings_model->get_settings( $this->page_setting_key );
      if ( ! empty( sanitize_text_field( $value ) ) )
      {
        $classes[] = sanitize_text_field( $value );
      }

      return $classes;
    }

    // Register the body class control in the Page Settings control stack
    function add_body_class_control( \Elementor\Controls_Stack $controls_stack )
    {
      if ( ! \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
        return;
      }

      $controls_stack->start_injection( [
        'of' => 'post_status',
        'fallback' => [
          'of' => 'post_title',
        ],
      ] );

      $controls_stack->add_control(
        $this->page_setting_key,
        [
          'type'        => \Elementor\Controls_Manager::TEXT,
          'label'       => esc_html__( $this->page_setting_label, $this->textdomain ),
          'label_block' => true,
          'placeholder' => esc_html__( $this->page_setting_placeholder, $this->textdomain ),
          'description' => esc_html__( $this->page_setting_description, $this->textdomain ),
          'separator'   => 'before',
        ]
      );

      $controls_stack->end_injection();
    }

  }

  $Elementor_Add_Page_Body_CSS_Class = new Elementor_Add_Page_Body_CSS_Class();
  $Elementor_Add_Page_Body_CSS_Class->init();

}

Most popular articles:

How to remove Rank Math plugin dashboard notification How To Customize Yoast SEO Breadcrumbs in WordPress How To Add a Badge To Selected Products – Woocommerce How To Remove Product Attributes (Variations) From Woocommerce Emails.