Skip to content

Design

The Total WordPress theme includes tons of easy to use options to customize the design of your site. Most of your theme options can be found in the live WordPress theme customizer. Total uses only native WordPress functions, so you should be familiar with the way the Customizer looks and works. Simply navigate to Appearance > Customize…

Theme Options/Customizer

Total includes a custom Typography class built exclusively for Total that provides you with a live preview while in the Customizer so you can see font and typography changes right before your eyes as you make the edits! Also all typography options are looped through and the CSS is generated then saved in it’s own…

Altering Default Fonts & Typography

Changing your background is extremely easy in Total and you can actually set it both globally and also alter the background on a per-page or per-post basis. Learn About Theme Layouts 1. Global Background Setting Via the Customizer you can quickly and easily change your background. Simply go to Appearance > Customize > Global Styles…

How to Change Site Backgrounds

All the theme options in Total are stored using the theme_mods functionality in WordPress. By default there isn’t any way to import, export or reset these, therefore I have added a unique admin panel built exclusively for the Total theme so you can do so. Important: Theme mods are stored based on the theme name,…

Exporting and Resetting Theme Options

Creating full-screen background areas is very trendy these days and Total makes it really easy to do so! The Visual Composer rows have the ability to stretch to the full-screen width. This will allow you to create full-screen rows on any page no matter what the layout is. a. Insert your row and select your stretch row…

Creating Full-Width/Screen Rows & Backgrounds (normal, parallax or fixed backgrounds)

The WordPress customizer is a core function built-into WordPress so as long as your server supports WordPress then the Customizer should work 100%. That said, there are some known plugins that could break things as well as specific server settings that could cause issues. Below is a list of the troubleshooting steps to go through…

Troubleshooting Customizer Issues

Total includes many built-in options to easily tweak your design, plus all changes you make to colors and fonts are cached in a single theme mod for use by the theme thus speeding up the site (unlike other themes that loop through all options on init). To customize any area of your theme simply go to your…

Customizing Your Theme Design

By default the Total WordPress theme does not use any font-smoothing on the site. A lot of themes add font-smoothing by default but it’s really a bad habit because it can cause specific fonts to render very poorly and should only be used in specific cases. If you with to enable font-smoothing though it’s very…

Enable Font Smoothing For “Thinner” Fonts

The Total theme doesn’t include a function for automatically adding custom fonts to your site, this would simply add bulk to the theme that will slow down most people so it’s best left out. That said, as a developer you could easily add a custom font via a child theme – you should always use…

How To Add Custom Fonts using Code

Total includes built-in options that will allow you to quickly change the “accent” colors (default is blue) througout the theme. Simply go to Appearance > Customize > Global Styles > Accent Colors to change the theme accents.

Accent Color

The WordPress customizer is awesome but it can also be a bit slow when  you have tons of options. For this reason I added a panel where you can quickly and easily enable/disable different sections. For example if all you are changing is the header you can disable everything except the header before launching the…

Enable/Disable Customizer Sections

By default the Total theme only loads the Latin subset for Google fonts (fonts selected under Appearance > Customize > Typography). If you are using a specific language on your site make sure to go to Appearance > Customize > Typography > General and enable the Font Subsets you need for your site. Please not that…

Selecting Font Subsets (some characters aren’t showing on your site)

Since Total 3.2.0 you can now easily disable all Google fonts right via the Theme Panel. This will not only remove the default Open Sans font but also remove all the Google font options from the Customizer and the WPBakery page builder elements.

Disable Google Fonts Completely

We have noticed that the WordPress Customizer can get a bit laggy in the Google Chrome browser. If you are finding the Customizer “laggy” (slow) when opening and closing tabs and panels we suggest you try using the latest version of Firefox to see if things are faster. We have found Firefox to work much better…

Fix Laggy (slow) Customizer

The Total theme includes many great features built-in that provide extra functionality but can be easily disabled if not in use. Disabling features won’t make your site faster because each feature runs very quickly, however, disabling features will slim down the WordPress dashboard. Demo Importer Enables a new admin screen at Theme Panel > Demo Importer…

Theme Panel Features Explained

The Total theme includes built-in settings for altering the default button colors used in the theme either globally or on a per-button basis. Global Button Color & Border Radius To change your button color site-wide simply log into WordPress and go to Appearance > Customize > General Theme Options > Links & Buttons to make…

Change Theme Button Color, Styling & Typography

The Total theme includes built-in settings to completely change the way your forms look on the site. Simply log into WordPress and go to Appearance > Customize > General Theme Options > Forms to alter the default form field design (this will apply to all forms and inputs).

Styling Forms & Input Fields

In the Total theme there are borders used for headings, sidebars, between blog posts, comments…etc. You can use CSS to alter the border colors but you can also use a Customizer setting to alter the borders across the whole site! Simply go to Appearance > Customize > General Theme Options > Accent Colors to change…

Change Theme Border Colors

If you are looking to create rows with background images that basically stay in place while your site scrolls down much like the “Paris” demo you can easily via the “Fixed Background Style” option when editing row. Simply go to the “Design Options” tab and near the bottom you will find the setting so you…

Fixed Row Background Images

The Total theme includes options built-in for customizing the design of the numbered pagination. Simply go to Appearance > Customize > General Theme Options > Pagination and alter your settings accordingly.  

Alter the Pagination Design

The Total theme includes a unique and exclusive Card API that allows you to display your standard posts, pages and custom post types beautifully on your site. You can choose from over 100 pre-built card styles or you can create your own custom cards. Using Cards with Default Archives To get started using card simply…

Post Entry Cards

Total Cards are used to display post entries within grids and archives and while there are a many pre-build cards to choose from sometimes you may want to create a custom card design and luckily the WPEX_Card API makes it super easy! Creating custom Card styles in your child theme is quite simple, below you…

How to Create Custom Theme Cards Using The API

The Font Manager in the Total WordPress theme is a part of the Total Theme Core plugin which allows you to quickly and easily add or upload custom fonts to your site that you can use in the theme’s Customizer options and builder modules. You can select to define font families that you’ve already loaded…

Register Custom Fonts via the Font Manager

Here you can find a list of arguments that can be passed onto the wpex_card function when displaying theme cards in custom loops or when creating custom cards. Parameters List Parameter Type Description style string Your card style. post_id int The post being displayed. allowed_media array List of allowed media: thumbnail, video, audio, gallery. thumbnail_id…

Card Function (wpex_card) Arguments
Back To Top