Although Total includes tons of built-in options for customizing the theme, many people may want to make additional edits or more advanced edits via CSS. Below are the 2 methods you should be using for your tweaks.
The number one rule when working with a WordPress theme is to never edit the style.css file manually. Any changes you make there will be lost when you update your theme and keeping your theme updated is essential for security and functionality.
Method 1: Using The Custom CSS Panel
Total includes a custom admin panel located at Theme Panel > Custom CSS, which uses the native WordPress code editor. This allows you to add inline CSS to your site, which is inserted into the <head> section of your pages.
Essentially, this is just a shortcut to the core WordPress function found at Customize > Additional CSS. The theme simply provides an extra area to manage your CSS, but the actual output is still handled by WordPress itself.
Method 2: Using WordPress Additional CSS Customizer Setting
As mentioned earlier, WordPress includes a built-in CSS field in the Customizer. You can access it by going to Appearance > Customize > Additional CSS.
This field allows you to add custom CSS that renders live changes as you type, giving you immediate feedback on how your edits affect your site.
The built-in Customizer CSS field is convenient, but its small size can make managing longer lines of code difficult.
That’s why Total provides the Custom CSS panel in the WordPress admin. This panel is larger and easier to use, making it simpler to write, edit, and organize longer CSS snippets for your site.
Method 3: Using A Child theme
A child theme is the best approach when you plan to make extensive changes, or when you need to modify templates, filters, or functions and not just CSS. It’s also ideal if you simply prefer the structure and safety of using a child theme.
You can download a sample child theme directly from the Total sample child theme Github repository.
If you didn’t start with a child theme and are switching to a child theme now you will need to import and export your Customizer settings. Please see the guide on exporting theme settings.
Method 4: Using the WPBakery plugin – CSS for a specific pages only
If you want to apply custom CSS to a single page, you can use WPBakery Page Builder’s custom CSS feature. This allows you to target only that page without affecting the rest of your site.
The CSS can be added directly in the page editor, and changes will apply immediately to that page only, giving you precise control over page-specific styles.
You can also use this field to insert custom CSS for a dynamic template or custom card.
