Skip to content

Top Bar

The top bar social icons are actual created using a very modular method so it can easily be tweaked and even extended. Simply copy the code below into your child theme functions.php file and modify it accordingly. You can move items around if you want to change the order in which they display on the…

Alter The Top Bar Social Icons

First of all if you aren’t sure what the Top Bar is, it’s the area at the top of the site, see the screenshot below: How To Edit Simply go to Appearance > Customize > Top Bar > Content and here you will find the field to edit the content. To remove it simply remove…

How To Edit The Top Bar Content & Social Icons

Simply go to Appearance > Customize > Topbar and here you can enter the URL’s for any of your social media profiles and choose your specific settings for their display.

Adding Social Links To The Topbar

The Total theme includes a built-in shortcode for creating a login/logout link which you can add anywhere on your site (including certain options in the Theme Customizer such as the Topbar content field). Here is the very basic way of adding the shortcode to your site: [wp_login_url text="Login" logout_text="Logout"] And here are the accepted parameters: login_url –…

Adding a Login/Logout Link

The Total theme includes a region at the very top of the site called the “Top Bar” where you can literally add anything you want either via the Customizer text field or by creating a custom page and displaying the page content in this area (or via theme action hooks – for developers). This area…

Change The Top Bar Content (phone number, text, etc)

The Top Bar height is actually dictated mostly by 15px top and bottom padding added by default to the Top Bar. If you want your bar smaller all you have to do is log into WordPress and go to Appearance > Customize > Top Bar > General and enter a smaller number for the top…

How To Make Top Bar Smaller (decrease height)

By default the Total theme centers all your content based on your site widths settings or default values, including your Top Bar content. If you want you can make your entire site 100% wide by tweaking these settings, however, you can also have centered content with a full-width Top Bar if wanted via the option available at…

Full-Width Topbar

There is actually a simple search form shortcode included in Total which you can use to place a simple search form anywhere on the site (there is also a search form Visual Composer module with many options). If you want to add a search to your Top Bar you can do so via the shortcode…

Add A Search Form To The Top Bar (Searchform Shortcode)

The Top Bar has the ability to become sticky/fixed on scroll. To Enable simply go to Appearance > Customize > Top Bar > General and check the “Sticky” box.

Make Top Bar Sticky

By default you can enter your custom html for your topbar content via the Customizer at Appearance > Customize > Topbar. However,  it is also possible to create your own custom topbar using Visual Composer modules. This is done by simply creating a new template with Templatera, adding your content then entering the ID of…

Display a Custom Template for the Top Bar Content

To disable the Top Bar is very easy and there are actually 3 different ways of doing this: Disable Globally via Customizer If you want to disable the Top Bar globally (on your whole site) you can do this in the WordPress Customizer under Appearance > Customize > Top Bar > General Note: You can…

How to Enable/Disable the “Top Bar” Area

The ] shortcode was introduced in Total 5.2 and it allows you to easily add inline items to the Top Bar content field such as phone numnber, email, login/logout link…etc. This shortcode makes it easy to display text with an icon on the side as well it ensures your top bar items render well on…

The topbar_item Shortcode
Back To Top