Thank you for using the Tri WordPress theme by Web3 Brisbane - Web3's superior WordPress theme framework.

Tri Theme Documentation © 2024 Web3 Pty Ltd. Founded: 22/08/2012

Site layouts

Tri theme layout can be customised in the WordPress customiser:

Divided into the following sections:
Header, Blog, Footer and WooCommerce

Single page customisations

Built in metaboxes allow you to modify single post type layouts.

Action functions allow you to add additional content into certain areas of the site.

If you cant add content via actions, simply copy the corresponding theme template file to the child theme to make modifications.

Theme CSS styles

All of the most commonly updated styles can be modified via SCSS variables in the child themes styles.scss. Style variables aim to match what is used in Bootstrap 5.

Tri theme has a post/page metabox to modify pages in the right sidebar.

Sidebar - Choose the sidebar to display or hide. If the default option is set, it will use whatever is set in the theme customiser options.

Header - Choose different header display options

Metabox on Custom Post Types

The Layout & Display metabox only displays on the post and page post type. If you want other post types then you can add them to this function:

// Add the Layout & Display Metabox to a custom post type
function tri_additional_metabox_posts() {
	return array('portfolio'); // Add your custom post type slug to the array
}
add_filter( 'tri_add_layout_meta_field', 'tri_additional_metabox_posts' );

Additional metabox options

The advanced custom fields plugin can be used to add additional fields to the metabox.

Tri theme has actions throughout the theme that allow you to execute code functions in specific parts.

You use actions to include code in a specific part of the theme without needing to modify theme files.
Put the code function in your child themes functions.php. Read more about actions here.

function my_new_function() {
	echo 'Hello World!';
}
add_action( 'tri_header_before', 'my_new_function' );

Rows works in conjunction with columns. To be able to use the columns, you need to wrap a row around each line of columns. You can manipulate the layout of the columns by adding in different classes.

Optional built-in CSS classes

<div class="row">
	<!-- Div columns here -->
</div>

View Rows demo on Tri theme site →

The Tri theme has been built on a 12 column responsive grid system. Columns form the base for all page and post layouts. Each column is evenly spaced and is locked in a fixed width container based upon the device width being viewed on. A full width row adds up to 12

Available grid sizes are: auto, 1, 2 (sixth), fifth, 3 (quarter), 4 (third), 5, 6 (half), 7, 8 (two-third), 9, 10, 11, 12 (full)
Using auto will automatically determine even spacing based on how many columns are in the row. It will try and space each column on one line.

Columns must be wrapped by a row.

Optional built-in CSS classes

<div class="col-12 col-md-6">Content</div>

Create an accordion text toggle box. Has two parts, the title and the body.

Optional built-in CSS classes

<div class="tri-accord mb-3">
	<div class="accord-title font-weight-bold">
		<?php tri_icon( 'add_circle_outline', 'sm mr-2 mr-sm-2' ); ?> Title
	</div>
	<div class="accord-body">Body</div>
</div>

Add an SVG icon to the page that is wrapped in a <i> tag.

Parameters

The tri_icon( $name, $classes, $type ) function accepts 3 arguments.

Parameter 1 - Icon name. (string)

Parameter 2 - CSS Classes. (string)

Parameter 3 - Icon Type. (string)

<!-- Echo the SVG icon wrapped in <i> tag -->
<?php tri_icon( 'ac_unit', 'lg' ); ?>

<!-- Echo the SVG icon wrapped in <i> tag -->
<?php tri_icon( get_field('icon'), 'lg' ); ?>

Icon Helper Functions

You can also use these helper functions to display the svg icons.

<!-- Get the SVG icon wrapped in <i> tag -->
<?php tri_get_icon( 'ac_unit', 'lg', 'material' ); ?>

<!-- Echo just the SVG icon. (Doesnt accept CSS classes) -->
<?php tri_svg( 'ac_unit', 'material' ); ?>

<!-- Get just the SVG icon.  (Doesnt accept CSS classes) -->
<?php tri_get_svg( 'ac_unit', 'material' ); ?>

View Icons demo on Tri theme site →

Using Custom Icons

You can add your own custom SVG icons via the child theme. Add your SVG's into a folder in the 'assets/img' folder in your child themes root. You will need to add the third parameter to the icon function.

Your custom icons folder structure should look like this:

*tri-child theme* /assets/img/custom-icon

If you want to put your icons into a sub-folder inside the custom folder, you can, you just need to add that folder name before the icon name followed by a forward slash / in the icon parameter.

iconset/my-icon

A tab container to place individual tab information into. Add single tab information into each tab.

Optional built-in CSS classes

<div class="tabs is-horizontal" role="tablist">
	<div class="tabs-nav">
		<a href="#tab-1" role="tab" aria-controls="tab-1" class="is-active">Tab Title 1</a>
		<a href="#tab-2" role="tab" aria-controls="tab-2">Tab Title 2</a>
	</div>
	<div class="tab-content">
		<div id="tab-1" class="tab-pane is-active" role="tabpanel">Tab Content 1</div>
		<div id="tab-2" class="tab-pane" role="tabpanel">Tab Content 2</div>
	</div>
</div>

<?php // ACF: Repeater field. title, content subfields
 if( have_rows('tabs') ): $i = 1;

	$all_tabs = array();
	while( have_rows('tabs') ): the_row();
		$all_tabs[$i]['title'] = get_sub_field('title');
		$all_tabs[$i]['content'] = get_sub_field('content');
		$i++;
	endwhile; ?>

	<div class="tabs is-horizontal" role="tablist">
		<div class="tabs-nav">
			<?php foreach ($all_tabs as $key => $tab): ?>
				<a href="#tab-<?php echo $key; ?>" role="tab" aria-controls="tab-<?php echo $key; ?>" class="<?php ($key == 1 ? 'is-active' : ''); ?>">
					<?php echo ( $tab['title'] ? esc_html( $tab['title'] ) : '' ); ?>
				</a>
			<?php endforeach ?>
		</div>

		<div class="tab-content">
			<?php foreach ($all_tabs as $key => $tab): ?>
				<div id="tab-<?php echo $key; ?>" class="tab-pane <?php ($key == 1 ? 'is-active' : ''); ?>" role="tabpanel">
					<?php echo ( $tab['content'] ? esc_html( $tab['content'] ) : '' ); ?>
				</div>
			<?php endforeach ?>
		</div>
	</div>
<?php endif; ?>

View Tabs demo on Tri theme site →

Makes a number count up from zero or down to a specified number.

<!-- PHP Shorthand Version -->
<?php tri_count_up( $number, $title, $duration ); ?>


<!-- HTML Version -->
<div class="tri-count-up text-center text-sm-center">
	<div class="count-number show-on-scroll" data-number="10" data-duration="3">
		<span class="invisible">0</span>
	</div>
	<div class="count-title text-uppercase">Title</div>
</div>

<!-- PHP Shorthand Version -->
<?php tri_count_up( get_field('number'), get_field('title'), get_field('button') ); ?>


<!-- HTML Version -->
<div class="tri-count-up text-center text-sm-center">
	<div class="count-number show-on-scroll" data-number="10" data-duration="3">
		<span class="invisible">0</span>
	</div>
	<div class="count-title text-uppercase">Title</div>
</div>

Use this shortcode to create styled testimonials.

Optional built-in CSS classes

View Testimonial demo on Tri theme site →

Tri uses the default posts list block to display recent posts. Read about how to administer the post list block here.

Optional built-in CSS classes

Embeds a popup on the page. The popup has two parts. The anchor that triggers the popup and the hidden content that gets displayed in the popup when the popup is triggered.

Trigger the popup by any anchor or button by adding the is-popup-link class to it.

<a href="#my-popup" class="is-popup-link">Open Popup</a>

<div id="my-popup" class="tri-popup mfp-hide">
	<!-- My Popup Content -->
</div>

<?php $link = get_field('link');
if( $link ): ?>
	<a href="<?php echo esc_url( $link['url'] ); ?>" class="is-popup-link"><?php echo esc_html( $link['title'] ); ?></a>
<?php endif; ?>

<div id="<?php echo esc_url( ltrim( $link['url'], '#' ) ); ?>" class="tri-popup mfp-hide">
	<?php the_field('content'); ?>
</div>

External video and map popups

The code is slightly different for external content such as YouTube videos. Use the is-popup-media class on the anchor and add the content URL as the href. No hidden div with the content is necessary.

<a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="is-popup-media">Open Video Popup</a>

<?php $link = get_field('link');

if( $link ): ?>
	<a href="<?php echo esc_url( $link['url'] ); ?>" class="is-popup-media"><?php echo esc_html( $link['title'] ); ?></a>
<?php endif; ?>

Tip: You can place the hidden popup content anywhere on the page and trigger it by any anchor link or button using the same anchor of the id you assigned to the popup.

Note: If you are using another anchor link then you need to ensure it has the class "is-popup-link" (for inline content) or "is-popup-media" (for youtube, vimeo or google maps links) to trigger the popup.

Converts an email address into a character encoded email address that helps prevent spam when using your email address on a page. It also includes an item property to indicate better visibility to search engines

<?php $email = 'email@example.com'; ?>

<!-- PHP Shorthand Version -->
<?php tri_antispam_email( $email ); ?>


<!-- HTML Version -->
<?php if ( is_email( $email ) ) : ?>
	<a class="tri-email" itemprop="email" href="mailto:<?php echo antispambot( trim( $email ) ); ?>">
		<?php echo antispambot( esc_html( $email ) ); ?>
	</a>
<?php endif; ?>

<?php tri_antispam_email( get_field('email') ); ?>

Converts a phone number into a click-to-call phone number so users can easily contact you. It also includes an item property to indicate better visibility to search engines.

<!-- PHP Shorthand Version -->
<?php tri_phone( '0123 456 789' ); ?>


<!-- HTML Version -->
<a class="tri-phone" itemprop="telephone" href="tel:0123456789">0123 456 789</a>

<!-- PHP Shorthand Version -->
<?php tri_phone( get_field('phone') ); ?>


<!-- HTML Version -->
<a class="tri-phone" itemprop="telephone" href="tel:<?php echo esc_attr( preg_replace('/\s+/', '', get_field('phone') )  ); ?>">
	<?php echo esc_html( get_field('phone') ); ?>
</a>

Tri theme has a few widgets inbuilt that add additional features. You can add these widgets the same way as any other widget in the Appearance > Widgets page.

Tri uses the default social icons widget. Read about how to customise it here

The Tri Contact Information widget allows you to quickly and easily set your contact details. Fill in each field to display the corresponding information accompanied with an icon.

The widget automatically converts the phone numbers to a click-to-call and the email to an encoded (antispam) email tap-to-email link.

Tri theme has a number of ready made CSS classes to make designing and layout consistent and simpler.
Essentially, ready made classes are class names that you can add to an element to take advantage of pre-defined styles included in the Tri theme. They are mostly based off bootstrap utility classes

How to Use Ready Made Classes

Rounded

Note: to make an element completely circle, it needs to have the same width and height otherwise it will be turned into an oval shape.

Spacing elements

You can add margin and padding space to an element by using one of the following spacing classes. The class sizes are multiples of a base number. By default the number is 1rem (16px) represented as $spacer.

• 0 = 0
• 1 = $spacer * 0.25rem
• 2 = $spacer * 0.5rem
• 3 = $spacer
• 4 = $spacer * 1.25rem
• 5 = $spacer * 3rem

Margin & Padding Spacing

All sides

Top

End (Right)

Bottom

Start (Left)

Alignment of elements

Display elements

Horizontal Lists

Add class to the <ul>

Typography

Various CSS classes to manipulate text

Colours

Animations

Animate elements on the screen
You can animate any element on the screen by adding the following 3 classes to it.

Gravity Forms

Gravity forms has a number of ready made classes here. Tri theme has a number of additional ready made classes to make gravity forms layouts easier.

Apply these classes to the forms CSS Class Name field in the form layout section of each forms Form Settings

SCSS Stylesheet Variables

Tri uses SCSS to build its stylesheet. It pulls the parent themes styles from the parent theme through to the child themes stylesheet when the style.scss file is compiled in the child theme.

A number of the parent themes styles are overwriteable through SCSS variables. This gives the benefit of not having to declare new styles in the child theme to overwrite the parent themes styles. You simply update the variable and the theme sets that new value in the right place once it is compiled in scss. This means that the stylesheet is kept as small as possible.

Variables are found in the parent theme at tri/assets/scss/_variables.scss.

To overwrite a variable through the child theme, write/copy the variable you want to overwrite and paste it into the Tri child themes variables section at the top of the style.scss file. Make sure to remove the !default attribute from the end of the variable to make the new variable value take affect.

Media query breaks

Tri uses a mobile first approach where mobile styles are loaded first then the styles scale up from there to tablet then desktop. Be aware of the media queries when adding styles. They may work for desktop but mobile might not display nicely.
These are the media query breaks that we use for mobile, tablet and desktop in Tri:

/* #Mobile
 ================================================== */
@media (max-width: 767px) {}

/* #Tablet and Higher
 ================================================== */
@media (min-width: 768px) {}

/* #Desktop
 ================================================== */
@media (min-width: 992px) {}

/* #Large Desktop
 ================================================== */
@media (min-width: 1200px) {}

@media only screen and (max-width: 991px){
}

Smooth anchor scrolling

You can add smooth anchor scrolling to any anchor link on your page. To do so, simply add the following class "js-scroll" to an anchor link then add the anchor id to an element such as a grid, section or divider. E.G.

<a href="#my-id" class="js-scroll">Scroll to content</a>

<div id="my-id">My scroll to content</div>

Offsetting Smooth anchor scrolling

If you would like to make the smooth anchor scroll position above or below the anchor, you can offset it above or below. It is the same steps as Smooth anchor scrolling but you add an additional offset attribute below.

<a href="#my-id" data-offset="50" class="js-scroll">Scroll to content</a>

The value can be a positive number or a negative number.
Make the number positive (e.g. 20) to offset the scroll above the anchor.
Make the number negative (e.g. -20) to offset the scroll below the anchor.

Menu smooth anchor scrolling

If you want to scroll to an anchor on the page using a menu item then you can do that by setting the URL to the id of the anchor.

The second step is to add the following class to the menu item.

js-menu-scroll

Set a custom logo on a specific page

If you are building a custom page that requires a different logo, this code will allow you to set the custom logo whilst keeping the logo set in theme options as a backup/for other pages.
The code below will set a custom logo URL for the homepage. The image that is set will go into the child themes img folder.
You can adjust the if statement to set the custom logo on specific pages only using Conditional Tags.

/*******************************************************************************
	Set a custom URL for the logo on a particular page
*******************************************************************************/
function tri_set_custom_logo_url( $logo ) {

	// If homepage, set custom logo, otherwise use default logo set in theme options
	if ( is_home() ) {
		return get_template_directory_uri() . '/img/custom-logo.png';
	} else {
		return $logo; // the $logo parameter is the URL from tri_brand_logo() function
	}
}
add_filter('tri_custom_logo_url', 'tri_set_custom_logo_url');

Add custom menu items on a specific page

If you are building a custom page that requires a different menu, this code will allow you to add items to the menu on a specific page whilst keeping the menu as is across other pages.
You can adjust the if statement to set the menu items to only show on specific pages using Conditional Tags.
This code adds items to the end of the menu

/*******************************************************************************
	Append custom menu items to main menu
*******************************************************************************/
function tri_custom_menu_item ( $items, $args ) {
	// Adds a custom menu item to the main menu on homepage only
	if ( $args->theme_location == 'main_nav' && is_home() ) {
		$items .= '<li class="menu-item"><a href="#">Menu</a></li>';
	}
	return $items;
}
add_filter( 'wp_nav_menu_items', 'tri_custom_menu_item', 10, 2 );

/*******************************************************************************
	Overwrite menu with custom items in main menu
*******************************************************************************/
function tri_custom_menu_item ( $items, $args ) {
	// Adds a custom menu item to the main menu on homepage only
	if ( $args->theme_location == 'main_nav' && is_home() ) {
		$items = '<li class="menu-item"><a href="#">Menu</a></li>';
	}
	return $items;
}
add_filter( 'wp_nav_menu_items', 'tri_custom_menu_item', 10, 2 );

There are a number of plugins that are built for Tri. They are features that are not always used so they are added as their own plugin to keep Tri lightweight.

Tri MegaMenu plugin adds the ability to make slightly more advanced menu layouts using the built in menu classes option.

Tri mega menu plugin.

The Tri MegaMenu uses the default WordPress menu to layout the menu items. It uses the built in "CSS Classes" option to add the styling. CSS Classes is not enabled by default but can be activated by the "Screen Options" dropdown on the menu page.

As demonstrated in the image above, the MegaMenu has 4 classes available and can use the built in column classes to achieve the desired layout. You can compare the two previous images to see where to put each class in the column. The Menu Structure image below might also help you understand where to put the classes.

MegaMenu CSS Classes

Adding in columns

To add in columns, you can use the columns built in. Make sure you think about how the layout needs to be on all screen sizes.

Positioning MegaMenu

The megamenu is automatically positioned in the center. If you would like to position the menu to the left or the right of the page then you can add the following classes next to the tri-mm menu class.

Tri exit intent popup plugin.

Tri hellobar plugin.