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

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

Does this break WPBakery / Visual Composer pages?

No. The patches target Gutenberg-authored posts only (via the has-blocks-layout body class) and leave VC pages alone. Mixed sites work fine — blog posts can be Gutenberg while landing pages stay VC.

Will Total updates break the patches?

Only if Total renames the CSS classes the patches target. Since 2023 that hasn’t happened. If it does, update the selectors in the CSS patch — the PHP hooks are stable.

Should I just switch themes?

If you’re only on Total for the blog, yes — a Gutenberg-first theme (Kadence, GeneratePress, Twenty Twenty-Five) will feel better than patched Total. If you’ve built complex VC landing pages that would take weeks to rebuild, these patches are the lower-cost option.

Does this work with WPBakery 7.x?

Yes. WPBakery and Gutenberg can coexist cleanly — WPBakery owns pages, Gutenberg owns posts. The patches don’t touch any WPBakery internals.

What about Total’s page builder (not VC)?

Total ships its own builder option beyond WPBakery. The patches don’t interfere with it — different rendering pipeline, different CSS. If you use Total’s native builder, these patches still help Gutenberg posts without breaking the builder-rendered pages.

Is Total still worth buying in 2026?

Honest take: not if Gutenberg is your primary editor. Total’s customisation options are deep but the Block Editor experience will always feel second-class compared to Kadence, GeneratePress, or Twenty Twenty-Five’s FSE. For sites already on Total with years of content, stay — the migration cost is real. For new builds in 2026, pick a Gutenberg-first theme from the start.

Leave a Comment