Version 1.3 of the Total WordPress Theme had over 70 fixes and updates. I know its a lot to take in so in this post I wanted to highlight some of the more important changes/updates and also some tips/tricks.

Total Changelog

Header Height & Dropdown Border

People kept requesting that dropdowns would be flush at the bottom of the header so in this version I made it possible. A new option where you can enter your fixed header height has been added and along with it a new top border color setting for the dropdowns (to match other popular themes). This will take affect immediately after updating if using header style 1 and can also be disabled super easily by leaving the field empty for the fixed header height and disabling the setting for the dropdown border.

fixed-header

dropdown-border

Header Toggle Bar

One of my favorite updates is the addition of the Toggle Bar. This is a section in the header that can literally have anything you want. Simply select a page from the theme options for the toggle bar and it will display whatever is on the page. Unlike other themes that use widgets or a simple theme option, total will let you build this area using the Visual Composer – fun!

tooglebar-one

Custom Per-Page Menu & Local Scrolling

One of the most requested features is a local scrolling menu so people can create a single page site where the links in the menu scroll down to the various sections. This is pretty hot these days! And now version 1.3 of Total makes it possible!

I think I’ve created this in the best way possible. All you need to do is add a class “local-scroll” to your menu item, set the link to a div on the page and you are all set!

local-menu

row-id

Choosing menus on a per page basis

Now what if I wanted a local menu on 1 page but not every page? Don’t worry I already thought about this, so the latest version of the theme also introduces a new option where you can select a custom menu on a per page basis, which is awesome for this and other situations.

page-menu

WooCommerce Styles

Added in version 1.3 are new WooCommerce styles. I’ve added only 1 more style besides the default which I think looks much cleaner, but i’ll probably be adding more in the future now that the function has been added!

By default when you update the theme it will change the WooCommerce style, to revert back to the old version simply alter the theme option and select Style 1.

woo-style

WooCommerce Styling Options

I’ve also added some new styling options for WooCommerce elements so you can make the store match your brand. So far there aren’t a ton of options but now that the section has been included you’ll see more additions in future updates. I’ve also added a few other settings for disabling/enabling various WooCommerce features which aren’t already in the Woo settings.

woo-styling

Theme Customizer

I started adding Theme Customizer support for some of the most important color options. This will make it easier to tweak your main colors and see the results live. Eventually i’ll be adding most theme options to the customizer, but there are many options to advanced to add, such as link colors and gradient buttons. Either way I believe having the main styling options in here is a huge plus.

Currently the customizer is using the refresh method so you might have to wait a second to see the change live, but in the future this will all be javascripted for instant gratification. It’s a huge update so it’s been postponed a bit.

theme-customizer

New Improved CSS Grid

The theme is now using a new improved CSS grid based on the Bootstap 3 structure. Basically all columns now have a left/right padding and their surrounding element a left/right negative margin. Prior, the theme used percentages for the spacing between elements, this meant you didn’t get pixel perfect spacing, now you can have pixel perfect spacing between items as well as EASILY change spacing between columns via CSS. Want more padding between portfolio items? Simply add some CSS to your site like such:

#wrap .wpex-row.vcex-portfolio-grid {
   margin-left: -20px;
   margin-right: -20px;
}
#wrap .wpex-row.vcex-portfolio-grid .portfolio-entry.col {
   padding-left: 20px;
   padding-right: 20px;
   margin-bottom: 40px;
}

Add an equal left/right padding, the sum of the two will be the space between items so also add the sum as the bottom margin. Then add negative margins to the main wrap equal to the padding applied to the inner columns. Pretty simple huh?

Improved Mobile Menu

The mobile menu had a big overhaul. Larger fonts, nicer icons (no images for icons) and better cross-device support. There really isn't anything for you worry about here, just wanted to let you know incase you didn't notice that the menu is now more epic ;)

total-mobile-menu

Remove Custom Post Type Slugs

The number of times people have asked me how to remove the slugs from custom post types is insane. Ever since custom post types were added to WordPress people have been wanting to remove the slugs and its as easy as you think. There are some plugins out there but from my experience they all seem broken. Generally it's not a great idea to remove the slugs (do to conflicts with standard posts/pages), but hey, it's your site so if you want to do it, do it.

I've added a new option in the SEO tab of the theme options panel where you can simply click and remove all the slugs from your portfolio, testimonials and staff post types which are built-into the Total WordPress Theme. Simple enable the setting then go to Settings->Permalinks and re-save them and you're good to go!

post-type-slugs

Experimental? What the heck is that??
Basically use the setting at your own risk. Nothing horrible is going to happen by enabling the setting, you won't lose any content or destroy your site (impossible) but some pages might break if you have conflicting URLs. So if you have a massive site you'll want to run a 404 check on your site to make sure none of your pages/posts aren't working so you can then go through and alter the permalinks to make them unique.

Skins - New PHP Classes

If you aren't a developer this might not mean much, but basically all the different skins are now created with their own classes. See the "skins" folder. This means that there is a much greater ability for customization in the future. I will be going through all the skins in the next update and making sure they all look amazing and now with these new classes I can override default theme functions if I want to alter various layouts/functionality on a per skin basis. I will also be updating the theme so that you can create skins via your child theme, now wouldn't that be cool?

So from a developer stand point this small update will eventually turn into a huge benefit!

total-skins

Other Updates

As mentioned there were over 70 updates so these are just a few of the top updates. Have a look through the changelog to see all the other things fixed or added. And of course we welcome all and any suggestions on ThemeForest. I hope you liked the update and are still a Total fan!