Get Started With Mai Theme V2

All documentation articles for our latest themes running Mai Engine plugin. For classic themes (Mai Lifestyle/Law/Business/News) view the classic docs here.

Introduction to Mai Theme

An introduction to the core of how Mai Theme works, and why it's different (and better).

View Article

WordPress Settings

The default WordPress settings that work best for Mai Theme.

View Article

Installation/Activating Your Theme

How to install and activate your theme.

View Article

Importing Demo Content (Mai Setup Wizard)

How to instantly get your site looking like the demo with the Mai Setup Wizard.

View Article

Regenerating Images

Generate all of the images sizes registered in Mai Theme.

View Article

We often get the question, “What size images should I upload?” when people are new to Mai Theme. When using Mai Theme you no longer have to think about image sizes. Instead, you only need to be concerned with orientation and aspect ratio. Image Sizes We recommend uploading larger images in order to future-proof your …

View Article

Adding a Logo

How to add a logo, set the width on desktop and mobile, and customize the top/bottom spacing.

View Article

Available Menu Locations

All of the available menu locations in Mai Theme.

View Article

Adding a Menu Search Icon

How to add a search menu icon with popup/dropdown search field.

View Article

Adding a Menu Button

How to add a callout button menu item to your menu.

View Article

Adding Menu Icons

Adding an icon to your menu is possible with our shortcode.

View Article

Aligning a Menu Item

You can align a menu item to the right or left with some helper utility classes we have built in to Mai Theme. To make a menu item align all the way to the right, you need to put “auto” margin on the left of it by adding has-auto-margin-left class the the menu item. To …

View Article

Customizing Your Mobile Menu

How to have a custom mobile menu, different than your default menus.

View Article

Content Areas (formerly Template Parts)

Versatile, block-powered content areas. Our block-based solution for Widget Areas.

View Article

Widget Areas

The available widget area in Mai Theme.

View Article

Hide Elements (& Landing Pages)

Mai Theme has a super easy to use and extremely flexible metabox on every post/page called “Hide Elements”. It should be self-explanatory and does just this, hides elements on the page. Check the boxes for whatever you want to hide on the specific post/page you’re editing. The default location for this metabox is in the …

View Article

Colors

Set your base colors to appropriately reflect your brand. Color settings are used for the color palette in blocks and other customizer settings.

View Article

Typography

Set your body and heading typography with loads of Google font options. Fonts are downloaded to your server and loaded locally for lightning fast pagespeed.

View Article

Site Layouts

Set up your global site layouts for every content type.

View Article

Site Header

Design your site header with dynamic sticky and transparency options.

View Article

Navigation Menus

Align and set breakpoints for navigation menus.

View Article

Page Header

Enable and customize your page header on posts, pages, and archives.

View Article

Enable Content Types (Single & Archive)

Control the way content displays on your archive pages.

View Article

Content Archives

Specify how content displays on each archive type.

View Article

Single Content

Specify how content displays on each post and page type.

View Article

Breadcrumbs

Select the pages which should display breadcrumbs.

View Article

Comments and Trackbacks

Enabling comments and trackbacks on posts an pages.

View Article

Header and Footer Scripts

Add code to output immediately before the closing or tag in the document source.

View Article

Mai Post/Term Grid Blocks

An extremely powerful set of blocks to display a grid of post or term entries in various layouts.

View Article

Mai Divider Block

Add and customize a full width section divider.

View Article

Mai Icon Block

Add an icon, adjust size, colors, spacing, and more.

View Article

Mai Menu [mai_menu] Shortcode

Add any menu to a shortcode block anywhere on your site.

View Article

Mai Content [mai_content] Shortcode

Display a reusable block, post, or page's content via a shortcode.

View Article

Mai Icon [mai_icon] Shortcode

The shortcode is a fully-functioning shortcode version of our Mai Icon block. It’s great for putting icons in menus and anywhere blocks are not currently available. We have all Font Awesome 5 Pro icons, in light, regular, and solid styles. Your first step is to decide which icon you want to use. icon (required) This …

View Article

Mai Cart Total [mai_cart_total] Shortcode

Our Mai Cart Total shortcode allows you to display the WooCommerce cart total anywhere you’d like. Note, if you want to show the total in a menu item you may want to check out our Mai Icon shortcode with the cart_total parameter. Example:

View Article

Mai Avatar [mai_avatar] Shortcode

Our Mai Avatar shortcode allows you to display a post author’s avatar in your header or footer meta, inside your content, template parts, or anywhere shortcodes can be used. The example below adds the shortcode to the Header Meta text field in Customizer > Theme Settings > Single Content > Post. Here are the available …

View Article

Mai Price [mai_price] Shortcode

Display WooCommerce product pricing anywhere. Great for use in Custom Content field of Mai Post Grid block.

View Article

Mai Rating [mai_rating] Shortcode

Add a star rating anywhere in your content. Works great in the Custom Content field in Mai Post Grid or the Customizer, or in the description of Mai Favorites.

View Article

Mai Search Form [mai_search_form] Shortcode

Add a search form anywhere in your content. This is good for locations that blocks are not available.

View Article

Mai Back To Top [mai_back_to_top] Shortcode

Display a back to top link anywhere on your site.

View Article

Customizing CSS

If you’re a beginner/intermediate user of CSS you may look under the hood of Mai Theme and see things look a little stranger than you’re used to when it comes to our CSS. Mai Theme makes extensive use of “custom properties,” also known as “CSS variables” to allow much more efficient overrides when customizing your …

View Article

Config File – Customizing Fonts & Theme Defaults

All current Mai Themes use a config based system for global settings and defaults. Any theme can override the defaults by adding a config.php file in the root directory of the theme. Create config.php File Create a config.php file in your theme, if it doesn’t exist (you will need server access to do this) in …

View Article

Translating Mai Theme

All translatable strings are ready to translate in a .pot file in our Mai Engine plugin. You can access that file via /wp-content/plugins/mai-engine/assets/lang/mai-engine.pot Many of our customers have found success using Loco Translate plugin for their translations as well.

View Article

Mai Favorites

Manage your products and services with this plugin. It’ll create a post type for your affiliate links with images, description and buttons. Don’t have Mai Favorites plugin? Discover more details about our custom-built plugins, and get it today. Required Parameters Your favorite links are easily displayed on a page via the Mai Post Grid block, …

View Article

Mai Testimonials

Your testimonials are easily displayed on a page via the Mai Post Grid block. Don’t have Mai Testimonials plugin? Discover more details about our custom-built plugins, and get it today. Required Parameters Mai Theme includes our Mai Testimonials plugin, which is displayed through the Mai Post Grid block for powerful and dynamic testimonials layouts. The …

View Article

Changelog

This is the official changelog for the Mai Engine plugin that powers all v2 Mai Themes. 2.18.0 (10/25/21) Added: You can now use shortcodes and blocks (via ) in author bios. Added: [Developers] New mai_before_entry_content_inner and mai_after_entry_content_inner hooks. Added: Default button classes added to WooCommerce blocks to help with styling consistency. Added: Custom properties on WooCommerce onsale badge for …

View Article