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.

Update 2025: Since Elementor ver. 3.26.5, this code causes the error “call of page_setting_description is deprecated”. That’s why you should comment out lines 26 and 74 and check the functionality of this script.

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();

}

Written by Anton, founder of OSWOptimize and an SEO & Web Performance expert with over 14 years of hands-on experience. I specialize in fixing Core Web Vitals, CLS issues, and boosting search rankings for WordPress websites.

Most popular articles:

How to remove Rank Math plugin dashboard notification How to add email notification when an order is in Pending status in WooCommerce without plugin How to Add Post Thumbnails to WordPress RSS Feed Add Purchased Products Column to WooCommerce Orders