Skip to content

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.…

Adding Custom CSS to Your Site

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,…

Altering The Meta Viewport Tag

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…

Tweaker (Starter) Plugin

Action Hooks are a very useful tool in WordPress and they are used to perform functions (actions) in specific places of a theme or plugin. Many themes and plugins, such as Total, use action hooks as an easy way for users to modify the output of the project or to add their own custom code.…

How To Use Action Hooks in WordPress

What is a child theme, when should you be using a child theme, child theme tips and sample child theme download.

Child Theme Setup and Example

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…

How to remove the Total WPBakery Row Modifications

Important: Before you go adding custom files or code to your site to customize your post type, be aware that you can make use of our Post Types Unlimited plugin for adding your custom post types which gives you all the options you need to fully customize your custom post type and you can even…

Custom Post Type Singular Template File

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…

Develop Your Own Custom Grid Element for WPBakery

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…

Creating A New WPBakery Element (Starter Class)

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.…

How To Find a Page, Post, Template or Term ID

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…

Post Thumbnail Helper Functions

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…

How To Use Filters in WordPress

In WordPress all of your menu’s are saved in the database with a unique ID which you can reference when making advanced tweaks to your site such as showing different menus conditionally via a snippet. If you don’t know how to locate the ID of your menu (because it is a bit tricky) here is…

How to Find a Menu ID in WordPress

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…

Responsive Text Alignments

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]

Theme Action Hooks Reference

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…

CSS Framework Utility Classes

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…

Adding Modal Dialogs using HTML
Back To Top