Make the Total WordPress Theme Gutenberg-Compatible (CSS fixes + filters)

by Last updated:

The Total theme by WPExplorer ships with a Visual Composer bias — Gutenberg works but feels like a bolt-on. This snippet bundles the CSS patches and PHP filters I use to make the Block Editor feel native: full-width alignment, editor-side preview matching the frontend, working Group block spacing, and styled code blocks.

Total is a solid theme — customisable, well-supported, 35,000+ sales on ThemeForest. But it was designed around Visual Composer (now WPBakery), and even through the 2025 updates, Gutenberg support feels tacked on. The code in this snippet is what I handed to a client in 2023 who had committed to Total for their whole site and wanted to move their blog onto Gutenberg. Five years of Total + Gutenberg pairings later, these are the patches that consistently make the difference.

What this snippet fixes

  • Full-width and wide-width alignment (.alignfull, .alignwide) render edge-to-edge instead of being clipped by Total’s container
  • Block editor preview matches the frontend — heading sizes, line-heights, spacing all consistent
  • Group and Cover blocks get correct background-colour bleed and spacing
  • Core code block uses a readable monospace stack with syntax-safe padding
  • Button block inherits Total’s button styling without double-bordered mess
  • Removes Total’s inline styles that override the Block Editor’s theme.json settings

Install and use

Drop the PHP block into your child theme functions.php (never the parent — it gets overwritten on Total update). Drop the CSS into your child theme style.css. Flush any full-page cache so the frontend picks up the new styles.

<?php
/**
 * Total theme + Gutenberg compatibility patches.
 * Place in child theme functions.php.
 */

/* 1. Tell Total to allow Gutenberg's wide and full-width alignment. */
add_theme_support( 'align-wide' );

/* 2. Load matching editor styles so the block editor previews the frontend. */
add_action( 'after_setup_theme', function () {
    add_theme_support( 'editor-styles' );
    add_editor_style( get_stylesheet_directory_uri() . '/style.css' );
} );

/* 3. Remove Total's legacy VC container clipping on Gutenberg posts. */
add_filter( 'body_class', function ( $classes ) {
    if ( is_singular() && has_blocks( get_the_ID() ) ) {
        $classes[] = 'has-blocks-layout';
    }
    return $classes;
} );

/* 4. Strip Total's inline-style heading overrides that fight theme.json. */
add_action( 'wp_enqueue_scripts', function () {
    wp_dequeue_style( 'wpex-heading-custom-styles' );
}, 999 );

How it works

Total’s frontend wraps content in a max-width container that clips Gutenberg’s .alignfull blocks — they render at full post-content width instead of edge-to-edge. The CSS patches below escape that container using the calc(50% - 50vw) negative-margin trick, only for the Gutenberg blocks that opt into it via alignfull or alignwide. The PHP filters do four things: enable align-wide theme support (Total doesn’t by default), register the child-theme stylesheet as an editor style so the Block Editor previews match the frontend, add a body class when viewing a block-editor post so the CSS patches scope cleanly, and dequeue Total’s inline heading styles that override theme.json typography presets.

The CSS patches

  • CSS block (paste in child theme style.css): gist.github.com/wpgaurav — search “total-gutenberg.css”
  • Tested on Total 5.7 through 5.9, WordPress 6.2 through 6.9
  • Does not require deactivating WPBakery — the patches live alongside it
  • For sites moving off Total entirely, my preferred migration target is Kadence or GeneratePress with the Block Editor — both are Gutenberg-first

FAQs

Leave a Comment