Development
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. Important: The number 1 rule when working with a WordPress theme is to NEVER edit the style.css file manually.…
By default the Total theme uses the following meta viewport tag (when responsiveness is enabled): <meta name="viewport" content="width=device-width, initial-scale=1"> This is one of the most common viewport tags for responsive designs which allows for zooming into your site when using mobile devices. Altering The Meta ViewPort Tag Luckily the Total theme is all about modular development,…
From my experience selling WordPress themes on ThemeForest I’ve realized a lot of customers don’t like using child theme’s for one reason or another and they prefer to manually alter their themes. This is a very bad habit because if you ever need to update the theme (updates usually fix issues, so you should always…
The Total theme by default makes some adjustments to the Visual Composer rows to fix some design issues and also to add some extra options that weren’t precent in older versions of the plugin. This however, may cause some issues with 3rd party plugins or with your personal preferences. Luckily it’s very easy to remove…
Important: This is guide is very old and the way the theme elements work has been drastically changed. Additionally with the introduction of Card Styles it would be recommended and much faster to simply create a new card style rather than an entire builder element. The Total theme includes many great “Grid” modules in the…
WPBakery page builder elements are just WordPress shortcodes, so creating a new one is extremely simple. All you need to do is register a new shortcode with WordPress via the add_shortcode function, then use the WPBakery vc_lean_map function to register that shortcode with the page builder and give it some options. Below is a very simple…
In WordPress everything has an “ID”. Pages, tags, categories, menus…etc all have unique “ID’s” which is how they are referenced and saved in the database. This is referred to as Global Unique Identifier or guid for short. Sometimes you may need to know an ID to reference it in a shortcode, setting or custom function.…
The Total theme has a built-in image resizing function that crops images only as needed instead of the core WordPress post thumbnail function which crops images to every defined size whenever you upload a new image. For this reason Total has it’s own helper functions for returning images in the theme which you can make…
Filters are a functionality in WordPress that allows you to easily modify the data or output of other functions on the site. In the Total theme we’ve incorporated TONS of filters that will allow you to alter various aspects of the theme via a child theme without having to manually edit the theme code. But…
Since version 4.7 Total includes responsive text alignment classes that can be used in your modules or custom code. These allow you to alter the alignment at different breakpoints. As you will see the classes use the format text-{viewport-size-prefix}-{alignment} making it easy to use and remember later on. Global Alignments (All window sizes) textleft textcenter…
The Total theme is a very advanced and modular theme which has been coded with the use of “hooks” to allow better development but also child theme modifications such as adding/removing/moving content without having to actually edit any template files. Below is a list of the hooks available in the theme: [total_docs_actions_table]
The Total WordPress theme has been developed over the years with speed and customizability in mind. The theme’s custom CSS Framework is one of the features that helps keep the theme optimized and modular. The CSS Framework is a set of utility classnames that can be used to apply the same CSS properties to multiple…
The Total theme includes built-in javascript for the modern dialog element. In fact, it’s used for a few features such as the Social Sharing element (when set to Modal) and the Post Cards when the link type is set to modal. The dialog element is a core browser element that allows for creating popups with…