Mura: Theme Documentation

By: 3Forty Media | Follow me on Themeforest

Introduction

Thankyou for purchasing Mura.

This document will help you get your theme installed and setup with further guides to help you get the most out of your theme. If you do have questions please leave a comment or send me a message through my profile page.

If you like Mura, please take a moment to rate or leave a comment or review, it really helps. Thanks so much!

Installation - top

Download your theme

Download the zipped package from your ThemeForest Downloads to your computer. Extract the downloaded file and you will see mura.zip, this is your theme archive.

Install theme

  1. Login to your WordPress Admin and go to: Appearance → Themes.
  2. At the top of the screen click Add New and then click Upload Theme.
  3. Select mura.zip archive file and click Install Now.
  4. Once installation is complete click Activate.

Install Child Theme *Optional

If you wish to add your own custom modifications I recommend installing the Mura child theme and adding your modifications. This will ensure you will not lose your changes when you update Mura theme.

You will need to install the parent theme first (above)

  1. Login to your WordPress Admin and go to: Appearance → Themes.
  2. At the top of the screen click Add New and then click Upload Theme.
  3. Select mura-child.zip archive file and click Install Now.
  4. Once installation is complete click Activate.

Plugins - top

Plugins are not required but are recommended to get the most out of your theme.

Some theme demo's will not work properly without the required plugins

To install plugins

  1. Appearance → Plugins.
  2. Check each plugin you want to install and select Install from the drop down menu.
  3. Click Apply.
  4. Once installed go to Plugins → Installed Plugins and activate each plugin.

Recommended plugins

P

TFM Homepage Post Blocks

Multiple customizable post block displays for your homepage, supports sidebars, widgets and full colour editing

Included in theme download
B

TFM Theme Boost

A collection of additional features, theme options, theme displays and add-ons for your theme.

Features

Hero: Display hero content (posts) of our choosing on the homepage with optional slider and carousel

Post Widget: A highly customizable posts display widget that supports numerous filter options, meta settings and display options.

Related Posts: Configurable related posts display

Social Media: Social channels, social wigets and theme options

Advertising: Upload banners or add your advertising code in various theme locations

Featured Posts: Persistent post displays in prominent locations

Once installed click the Settings link or the TFM Theme Boost link in the dashboard menu to enable the features you require

Included in theme download

Upgrade TFM: Theme Boost: v1.x → v2.x

Only upgrade TFM Theme Boost plugin if you have Mura theme version 1.6 or greater

  1. Install Mura theme version 1.6x or greater
  2. Click Plugins. in the main menu
  3. Look for TFM Theme Boost plugin and click the link that says Update Required
  4. Follow the onscreen instructions to upgrade the plugin and activate
  5. De-activate and uninstall the following plugins: TFM: Posts Widget, TFM: Related Posts, TFM: Hero, TFM: Social plugin.
    These plugins are now included in the TFM: Theme Boost plugin

Supported plugins

WooCommerce

WooCommerce is the world’s most popular open-source eCommerce solution.

Plugin site →

WP Dark Mode

WP Dark Mode automatically enables a stunning dark mode of your website based on user's operating system. Supports macOS, Windows, Android & iOS.

Plugin site →

MC4WP: Mailchimp for WordPress

Mailchimp for WordPress, the #1 unofficial Mailchimp plugin.

Plugin site →

Breadcrumb NavXT

Breadcrumb NavXT, the successor to the popular WordPress plugin Breadcrumb Navigation XT, was written from the ground up to be better than its ancesto...

Plugin site →

Yoast SEO

Improve your WordPress SEO: Write better content and have a fully optimized WordPress site using the Yoast SEO plugin.

Plugin site →

Demo Import - top

Mura includes many pre-built demos and optional demo content to help get you started. To install a demo

Before you begin

  1. Install and acivate the recommended plugins
  2. Click TFM Theme Boost link in the dashboard menu and enable all features

Disable any plugins and TFM Theme Boost features you do not require after the demo import

  1. Install & Activate One Click Demo Import
  2. Go to Appearance → Import Demo Data.
  3. Select a demo and click Import Demo
  4. Confirm by clicking Continue & Import

Note* If you have existing content you should click Switch to Manual Import to import just the settings. The required Widgets WIE file and Customizer DAT file are included in your full theme download

Install different demos

Note* If you want to try different demos, you will need to reset your Customizer settings before installing a new demo.

  1. Install Customizer Reset
  2. Go to Appearance → Customize → Reset.
  3. You can now install a different demo *You may still need to manually remove some of the widgets

Due to licensing restrictions some demo images may not be included. Placeholder or royalty/attribute free images may be included instead.

How to update your theme - top

Important* Backup your database and backup any theme file modifcations you have made before updating your theme. You will need to add your file changes again after updating your theme.

Envato Market Plugin

You will need to download Envato Market Plugin to use this method

Install Envato Market Plugin

  1. Appearance → Plugins → Add New
  2. Click Upload
  3. Locate and select the Envato Market plugin and click Install
  4. Once installed click Activate Plugin

Configure your Envato API

  1. Click the link in the Activate Envato API Connection
  2. Sign in to your Envato Account if you are not already
  3. Enter a Token Name
  4. Check the following options:
    • View and search Envato sites
    • Download the user's purchased items
    • List purchases the user has made
    • Terms and Conditions agreement
  5. Click Create Token button
  6. Copy the token
  7. Paste the token into into your Envato Market Dashboard token field and Click Save

Whenever a theme update is available you will see an Update Available notice.

Manual update

Manually update your theme

Mura has seven menu locations. The method for creating each menu is the same, simply select a different display location for each menu.

To create a new menu

  1. Go to Appearance → Menus.
  2. Click Create a new menu.
  3. Enter a name for your menu (E.g. Primary Menu) and click Create Menu.
  4. In the Add Menu Items panel add categories, posts, pages & custom menu items. Click Add to Menu and arrange as required
  5. Select a display location (E.g. Primary Menu)
  6. Click Save Menu

Menu locations

Primary Menu

The primary menu is located in the three site header layouts. The primary menu supports multiple levels

  • Default
  • Logo Below Nav
  • Logo Left Menu

You can also set your primary menu to Toggle Sidebar to add a mobile menu on small devices.

Toggle Sidebar Primary Menu

Located in the slide out sidebar and supports unlimited levels

Footer Menu

The footer menu is located in w/Menu footer layouts

Split Menu

Split Menu is located in the header layout: Logo Split Menu and consists of two menu locations; Split Menu Left & Split Menu Right

Header Secondary

The secondary menu is located in the left or right side of all header layouts. This menu is useful for subscribe or call to action buttons or the Mura multi level social menu

Header Third

The third menu is located in the left or right side of the header. Not all header layouts support a third menu. This menu is useful for subscribe or call to action buttons or the Mura multi level social menu

Social Menu - top

The social menu is a drop down menu that displays social media icons and text within menu items.

You can add the social menu to any multi-level menu (E.g. Primary Menu) or assign to a display location such as the Third Menu.

  1. Go to Appearance → Menus.
  2. Click Screen Options tab at the top of the page.
  3. Check CSS Classes checkbox.

Create the parent menu item

If you are adding menu items to an existing parent menu (E.g. Primary Menu) you can skip this step. You will still need to add tfm-social-menu to the parent menu item.

  1. Click Custom Links in the Add menu items panel
  2. Add a Hashtag to the URL field and text to the Link Text field
  3. Click Add to Menu
  4. Expand the menu item and enter tfm-social-menu in the CSS Classes field
  5. Remove the hashtag from the URL field

Add the sub menu items

  1. Click Custom Links in the Add menu items panel
  2. Add the full URL for your social media page in the URL field and text in the Link Text field
  3. Click Add to Menu
  4. Arrange this item as a sub-menu item
  5. Expand the menu item and enter the relevant CSS class in the CSS Classes field. E.g. tfm-twitter to show the Twitter social icon
  6. Repeat for every social media site you want to add (supported icon list below)

Set Location & Save the menu

  1. Choose a display location in the Menu Settings panel
  2. Click Save Menu

Supported icons & CSS classes

Call to action/Subscribe Button - top

  1. Go to Appearance → Menus.
  2. Click Screen Options tab at the top of the page.
  3. Check CSS Classes checkbox.
  4. Create your call to action/subscribe menu item.
  5. Expand the menu item and enter tfm-pill-menu in the CSS Classes field
  6. If you want a subscribe icon add tfm-pill-menu tfm-subscribe in the CSS Classes field

A call to action button can be applied to any item in any menu or a single menu item assigned to a separate display location (E.g. Header Secondary or Header Third)

Widgets - top

Mura supports classic widgets & block widgets. Since WordPress 5.8.0 there are three methods of adding widgets.

Add a widget

  1. Go to Appearance → Widgets
  2. Select a sidebar
  3. Click the Plus button at the top of the page or inside the sidebar
  4. Search or Browse and select a widget
  5. Configure the widget and click Update

Add a widget with preview (customizer method)

  1. Go to Appearance → Customize → Widgets
  2. Select a sidebar (dependng on the page your are on not all sidebars will be visible)
  3. Click the Plus button at the top or bottom of the customizer panel
  4. Search or Browse and select a widget
  5. Configure the widget and click Publish

Add a widget (classic method)

Since WordPress 5.8.0 you will need to install the Classic Widgets plugin to use this method

  1. Go to Appearance → Widgets
  2. Drag the widget to the appropriate sidebar
  3. Configure the widget and click Save

Configure widget colours in Colour Settings.

Custom Widgets

You need to install TFM Posts Widget & TFM Social Plugin to use these widgets.

TFM Posts Widget

  1. Add TFM Posts Widget to your sidebar by your chosen method
  2. Configure the widget and click Save/Publish

TFM Social Widget

  1. Go to Appearance → Customize → TFM: Social Media Settings
  2. Enter the full URL's of your social media channels
  3. Click Publish
  4. Add the TFM Social Media widget to your sidebar by your chosen method
  5. Configure the widget and click Save/Publish

Add Widgets Between Posts - top

The category page and homepage have a sidebar between blog list posts. These work like any other sidebar and support all widgets.

Homepage Widgets

  1. Add your widget to Home: Between Blog Posts sidebar by your chosen method
  2. Go to Appearance → Customize → Mura: Theme Settings → Homepage Settings
  3. Scroll down to Add widgets between posts
  4. Enter the position you would like to display your sidebar (E.g. 3 to set your sidebar as the third item in the blog list)
  5. Click Publish

Category Widgets

  1. Add your widget to Category: Between Blog Posts sidebar by your chosen method
  2. Go to Appearance → Customize → Mura: Theme Settings → Archive/Category Settings
  3. Scroll down to Add widgets between posts in Category Pages
  4. Enter the position you would like to display your sidebar (E.g. 3 to set your sidebar as the third item in the blog list)
  5. Click Publish

Install Widget Context or Jetpack plugin and enable Widget Visibility to hide/show different widgets for different categories, posts and pages.

Go To Plugins → Add New. Search for Jetpack or Widget Context. Download & activate the plugin.

Theme Settings - top

All theme settings are managed with Live preview within the WordPress customizer separated into easy to manage sections and tabs.

Homepage Settings

Appearance → Customize → Mura: Theme Settings → Homepage Settings

These settings apply to your latest posts. You can display Homepage Post Blocks instead.

Archive/Category Settings

Appearance → Customize → Mura: Theme Settings → Archive/Category Settings

These settings apply to all category, archive, author, tag and search archives

Single Post Settings

Appearance → Customize → Mura: Theme Settings → Single Post Settings

You can override these global settings or set your options on a per post basis at the bottom of the New/Edit Post Settings Panel in the Mura: Post Options section


Mura Post Options

Mura post options allow you to override global theme settings on a per-post basis.

Single Post Style

Override the global post style setting

Single Sidebar

Override the global sidebar setting

Thumbnail Aspect Ratio

Override the global thumbnail aspect ratio setting

Disable Single Featured Image

Disable the featured image in single post view.

Featured Post

Featured posts have alternative styling for added visibility in archive & blog lists.


Display share icons

Display author bio social icons

Display related posts

Page Settings

Appearance → Customize → Mura: Theme Settings → Page Settings

You can override page sidebar settings or set your sidebar on a per page basis at the bottom of the New/Edit Page Settings Panel in the Mura: Page Options section

Display share icons

Header Settings

Appearance → Customize → Mura: Theme Settings → Header Settings

Display social icons in the header

Footer Settings

Appearance → Customize → Mura: Theme Settings → Footer Settings

Display social icons in the footer

Display MailChimp Signup form before footer

You will need to install TFM: Theme Boost & Mailchimp for WordPress plugins to use this feature

  1. Go to Appearance → Customize → Mura: Theme Settings → Footer Settings
  2. Check: Display MailChimp Form in Footer Area
  3. If you have multiple forms enter the Form ID of the form you want to display
  4. Add your form title
  5. Click Publish

Logo Settings

Appearance → Customize → Mura: Theme Settings → Logo/Site Title Settings

Image Format Settings

Appearance → Customize → Mura: Theme Settings → Image Format Settings

Image format inherits global post settings (configured in Homepage Settings & Archive Settings) or you can configure elements and thumbnail aspect ratio separately.

You can set post formats in the New/Edit Post settings panel → Post Format

Colour Settings - top

Appearance → Customize → Mura: Color Settings

Change theme colour scheme

Appearance → Customize → Mura: Color Settings → Theme Color Scheme

Set widget highlight background color

You can set a separate background (highlight) colour for selected widgets. Highlight widgets inherit all other colour settings configured for each sidebar.

Appearance → Customize → Mura: Color Settings → Misc. Colors → Highlight Widget Background

Select the widgets you want to highlight

  1. Add your widget to your sidebar using your chosen method
  2. Click Options icon (three dots) → Show More Settings → Advanced
  3. Add tfm-highlight-widget to Additional CSS Class
  4. Configure the widget and click Update/Publish

Select the widgets you want to highlight (legacy widgets)

This method is for legacy widgets in WordPress 5.8.x only.

If you have installed the Classic Widgets plugin use the classic method below.

  1. Add your widget to your sidebar using your chosen method
  2. View your website and locate the widget you want to highlight on the page
  3. Right Click on the widget → Inspect
  4. This will bring up the Inspector
  5. Locate the ID of the widget which will be something like section id="block-53" or section id="xxx_xxx_xxx"
  6. Select and copy the ID E.g. block-53
  7. Go to Appearance → Customize → Mura: Color Settings → Misc. Colors
  8. Paste/enter the ID of the widget in Highlight Widget IDs (comma separate multiple widget ID's)
  9. Click Publish

Select the widgets you want to highlight (classic method)

Since WordPress 5.8.0 you will need to install the Classic Widgets plugin to use this method

  1. Install and activate Widget CSS Classes
  2. Add your widget to your sidebar using the classic method
  3. Add tfm-highlight-widget to the CSS Class field for your widget
  4. Configure the widget and click Save

Homepage Post Blocks - top

You will need to install TFM: Homepage Post Blocks plugin to use this feature.

Using Post Blocks you can configure "blocks" of posts that are displayed on the homepage. Post blocks can replace the standard blog page or you can set a separate page for blog posts and use Post Blocks for the homepage (front page).

Appearance → Customize → TFM: Homepage Post Blocks

  1. Go to Appearance → Customize → TFM: Homepage Post Blocks
  2. Select a Block (E.g. Block 1)
  3. Check: Enable Block
  4. Configure the block settings & colours
  5. To add a sidebar to your block, check: Display Sidebar and select a position.
  6. Click Publish
  7. Repeat for each block you want to add

Display Widgets in Post Blocks

  1. Add your widgets to TFM: Hompage Post Block X sidebar by your chosen method
  2. Click Publish
  3. Repeat for each block/sidebar you want to add widgets

Create a separate blog list page

  1. Go to Pages → Add New
  2. Create a page for Post blocks (this will be your Homepage)
  3. Create a page for Blog posts (this will be your Posts Page)
  4. Go to Settings → Reading
  5. Set Your homepage displays to A static page
  6. Select the Post blocks page you created from the Homepage selection.
  7. Select the Blog posts page you created from the Posts page selection.
  8. Click Save Changes

You may want to add a link to your blog posts page in your menus

Related Posts - top

You will need to install TFM: Related Posts plugin to use this feature
  1. Go to Appearance → Customize → TFM: Related Posts
  2. Check Display Related Posts
  3. Configure related post settings & colours and click Publish

Social Media Settings - top

You will need to install TFM: Social Plugin plugin to use these features

Display share icons in posts & pages

  1. Go to Appearance → Customize → TFM Social Media Settings
  2. Check each share icon you want to display in Post & Page Share Icons
  3. Choose an Icon Style and Colour Scheme
  4. Check: Share Posts/Pages
  5. Choose a display location
  6. Click Publish

Display author bio social icons

  1. Go to Users → Profile
  2. Enter the full URL's of your social media channels and click Save
  3. Go to Appearance → Customize → TFM Social Media Settings
  4. Scroll down to Author Bio Social Icons and check Show Icons in Single Author Bio
  5. Choose an Icon Style and Colour Scheme
  6. Click Publish

Display social icons in the header & footer

  1. Go to Appearance → Customize → TFM Social Media Settings
  2. Enter the full URL's of your social media channels
  3. Choose an Icon Style and Colour Scheme
  4. Check: Show Social Icons in Site Header/Footer
  5. Click Publish

Social Media Widget

  1. Go to Appearance → Customize → TFM: Social Media Settings
  2. Enter the full URL's of your social media channels
  3. Click Publish
  4. Add the TFM Social Media widget to your sidebar by your chosen method
  5. Configure the widget and click Save/Publish

Advertising Areas - top

You can add your own banners, Google AdSense code or any other banner code to any sidebar using the HTML widget or image widget.

Add Google AdSense (or any other banner code)

  1. Add the HTML widget to your sidebar by your chosen method
  2. Enter your Advert Code (for example Google AdSense)
  3. Click Publish

Add a banner image and link

  1. Add the Image widget to your sidebar by your chosen method
  2. Enter your Advert Code (for example Google AdSense)
  3. Click Publish

TFM: Dedicated Advertising Areas

You will need to install TFM: Theme Boost plugin to use this feature

Upload your own banner and link

  1. Go to Appearance → Customize → TFM: Advertising Spots
  2. Select an Advertising Location
  3. Upload a standard resolution and/or high resolution banner
  4. Enter the desination URL
  5. Click Publish

Add Google AdSense (or any other code) or external banner source

For every advertising area there is a dedicated sidebar

  1. Go to Appearance → Customize → Widgets or use one of the other widget methods
  2. Select a TFM: Advertising Location
  3. Add the HTML Widget and enter your Advertising code or add the Image Widget and enter the URL and link for your banner
  4. Click Publish

Theme Translation - top

Loco Translate

Translate WordPress plugins and themes directly in your browser

Plugin site →

Install Loco Translate Plugin

  1. Go To Plugins → Add New. and search for Loco Translate
  2. Download & Activate the plugin
  3. Loco Translate is now added to the admin panel

Create a New Theme Translation

  1. Go to Loco Translate → Themes.
  2. Click Mura.
  3. Click New Language.
  4. Choose a language from the drop down menu and click Start Translating.
  5. In the source text field select the text you want to translate.
  6. In the translation field type your translation for the selected text.
  7. Click Save.

Change your site language to see the new translation

Create a New Plugin Translation

  1. Go to Loco Translate → Plugins.
  2. Click the plugin you want to translate.
  3. Continue from step 3 above.

To change text strings but not the language select the same language that is set in Settings → General → Site Language

Optimization (Page Speed/SEO) - top

The best thing you can do for your website speed is to host your website on a good VPS/Dedicated server or a good hosting package. You can also improve your site speed with one of the many cache or optimization plugins.

Recommended plugins

WP Super Cache

A very fast caching engine for WordPress that produces static html files.

Plugin site →

Autoptimize

Autoptimize speeds up your website by optimizing JS, CSS, images (incl. lazy-load), HTML and Google Fonts, asyncing JS, removing emoji cruft and more.

Plugin site →

Install Autoptimize Plugin

  1. Go To Plugins → Add New. and search for Autoptimize
  2. Download & Activate the plugin
  3. Autoptimize is now added to the settings panel

Configure Autoptimize settings

Settings → Autoptimize Or click the Autoptimize icon at the top of the page

JS, CSS & HTML

  1. Check Optimize JavaScript Code
  2. Check Aggregate JS-files
  3. Check Optimize CSS Code
  4. Check Aggregate CSS-files
  5. Check Also Aggregate inline CSS
  6. Check Optimize HTML Code
  7. Check Save aggregated script/css as static files
  8. Check Minify excluded CSS and JS files
  9. Check Also optimize for logged in users

Check/Remove any other settings as required.

Images

  1. Check Lazy-load images

Check/Remove any other settings a required.

Extra

  1. Check Combine and load fonts asynchronously with webfont.js
  2. Check Remove emojis
  3. Check Remove query strings from static resources

Check/Remove any other settings a required and click Save

Optimize Images

You can reduce the quality of stored images to reduce file size and improve page speed. Mura uses native WordPress image sizes for all displays. Using this feature will not generate additional images but will replace existing generated images with lower quality versions.

You will need to install and activate TFM Theme Boost plugin to use this feature

Install Regenerate Thumbnails Plugin

Regenerate Thumbnails

Regenerate the thumbnails for one or more of your image uploads. Useful when changing their sizes or your theme.

Plugin site →

  1. Go To Plugins → Add New and search for Regenerate Thumbnails
  2. Download & Activate the plugin
  3. Regenerate Thumbnails is now added to the Tools menu

Regenerate images

  1. Go To Appearance → Customize → TFM Theme Boost.
  2. Change Image Quality to 65* and click Publish
  3. Go to Tools → Regenerate Thumbnails
  4. Un-check Skip regenerating existing correctly sized thumbnails (faster).
  5. Click Regenerate Thumbnails for All x Attachments

* You can try different image quality settings until you are happy with the result.

Install & Configure AMP - top

Install AMP

  1. Go To Plugins → Add New. and search for AMP
  2. Download & Activate the Official AMP plugin
  3. There will now be a new AMP section in the main menu.

Configure AMP

  1. Go to AMP → Settings
  2. Check Reader in the Template Mode section
  3. Expand the Reader Theme tab & select AMP Legacy*
  4. Expand the Supported Templates tab and check Posts, Pages. Uncheck everything else.
  5. Click Save

* Mura has a custom AMP theme which will be used instead of the Legacy Theme.

Post Formats - top

You can set post formats in the New/Edit Post settings panel → Post Format

Standard Format

Select this format for standard posts, you can emebed media, galleries, images and video as normal.

Gallery Format

This format adds a gallery icon to posts (if post format icons are enabled). Gallery format functions like a standard post format.

Video/Audio Format

This format adds a video/audio icon to posts (if post format icons are enabled).

Add video/audio to the featured area in single posts

You need to install TFM Theme Boost plugin to use this feature. Only Default and Default Alt post styles support this feature.

  1. Go to Posts → Add New or edit an existing post
  2. Embed the video/audio you want to feature as the first element in your content
  3. Add any other post content as normal
  4. In the Settings Panel select Video/Audio Post Format
  5. In the Settings Panel under Mura: Post Options check Disable Single Featured Image
  6. Click Publish

Note* If your post does not have a featured image you can ignore these steps and just select video format.

Image Format

Image format has a cover style in archive and blog list displays.

You can customize the image format in Appearance → Customize → Mura: Theme Settings → Image Format Settings

Theme Hooks - top

Hooks allow you to further extend theme functionality by adding your own functions, sidebars, banners or plugin output. This is advanced functionality for theme developers.

Example use of a Hook

This function will output "lorem ipsum dior" after the theme header.

function my_custom_function( ) {
  echo '<h2>' . esc_html__( 'lorem ipsum dior', 'mura' ) . '</h2>';
}
add_action('tfm_after_header', 'my_custom_function', 10 );

Available hooks

  • tfm_before_header
  • tfm_after_header
  • tfm_header_left
  • tfm_header_right
  • tfm_after_content
  • tfm_before_single_content
  • tfm_author_bio_bottom
  • tfm_before_wrapper_close
  • tfm_after_entry_wrapper
  • tfm_before_post_pagination
  • tfm_page_footer
  • tfm_before_footer
  • tfm_after_footer
  • tfm_append_footer_bottom
  • tfm_before_loop
  • tfm_after_loop
  • tfm_before_comments
  • tfm_after_comments
  • tfm_before_entry_title
  • tfm_after_entry_title
  • tfm_after_wrap
  • tfm_prepend_after_title_meta
  • tfm_append_after_title_meta
  • tfm_hentry_footer_before
  • tfm_hentry_footer_after
  • tfm_after_continue_reading_button

How to change fonts - top

This guide uses the Easy Google Fonts plugin

  1. Go to Plugins → Add New and search for Easy Google Fonts
  2. Click Install Now and then click Activate

Change fonts for entire theme

We will be changing the body fonts and title fonts globally. To do that we need to create font controls.

  1. Go to Settings → Easy Google Fonts

Create Body Font Control

  1. Click Create new font control
  2. Give it a name (E.g. Body Font)
  3. Click Save Font Control

We now need to add the CSS selectors that we want to control. In this case thats the main body font.

Copy/paste these selectors into Font Control CSS Selectors and press the Enter Key

body,input,textarea,.tfm-menu-sash span

Click Save Font Control

font control

Create Title Font Control

  1. Click Create new font control
  2. Give it a name (E.g. Title Font Elements)
  3. Click Save Font Control

The title font is used in various theme elements not just titles so we need to enter the CSS selectors of every element that uses the title font

Copy/paste these selectors into Font Control CSS Selectors and press the Enter Key

.entry-meta a[class*="cat-link"],.tfm-link-more a,label,button,.button,input[type="button"],input[type="reset"],input[type="submit"],ul.primary-menu,.primary-nav-sidebar,ul.header-secondary,.wp-block-quote.is-large p,.wp-block-quote.is-style-large p,.widget_tag_cloud a,.single-post-tags a,.child-categories a,a.tag-cloud-link,.wp-block-latest-posts__list li a,.tfm_posts_widget .entry-title-link,.tfm-social-icons .tfm-social-icon,.entry-read-more .read-more

Click Save Font Control

Now lets apply our font choice to these controls

  1. Click Appearance → Customize → Typography → Theme Typography
  2. Select Body Font
  3. Choose a font from the Font Family selection list
  4. Click Publish

The new Body Font is applied throughout the theme. Now do the same for Title Font Elements. The new title font is applied throught the theme.

font control

Create Selective Font Control

You can also create a selective font control to change the font for specific elements. Let's change the font for buttons.

  1. Go to Settings → Easy Google Fonts
  2. Click Create new font control
  3. Give it a name (E.g. Buttons)
  4. Click Save Font Control

We just need the button CSS selectors. Copy/paste these selectors into Font Control CSS Selectors and press the Enter Key

button,.button,input[type="button"],input[type="reset"],input[type="submit"]
  1. Click Appearance → Customize → Typography → Theme Typography
  2. Select Buttons
  3. Choose a font from the Font Family selection list
  4. Click Publish

Add Rating to Posts - top

You will need to install TFM: Theme Boost plugin to use this feature

Add & display ratings to single posts

  1. Go to New/Edit Post page
  2. In the Settings panel scroll down to Mura: Ratings
  3. Select a range
  4. Enter a total score
  5. Select a ratings type (you can display as many rating types as you want)
  6. Click Publish

Display ratings in blog list/archive pages

  1. Go to Appearance → Customize → Mura: Theme Settings → Archive/Category Settings
  2. Scroll down to Ratings and check each rating type you want to display
  3. Click Publish

Sources and Credits - top

I've used the following images, icons or other files as listed.

Changelog - top

May 27, 2024 - Version 1.6.7

  • Additional webp support

May 26, 2024 - Version 1.6.6

  • WooCommerce v8.x (all versions) support

September 21, 2023 - Version 1.6.5

  • TFM Theme Boost Plugin update

July 09, 2023 - Version 1.6.4

  • wp6.2.2 editor styling fixes

July 05, 2023 - Version 1.6.3

  • Fixed: Woocommerce checkbox display bug

February 21, 2023 - Version 1.6.2

  • Migrated TFM social plugin CSS to TFM Theme Boost plugin directory (TFM Theme Boost v2.1)

February 10, 2023 - Version 1.6.1

  • Fixed Read time not displaying since version 1.6

February 01, 2023 - Version 1.6

  • Support for new TFM: Theme Boost Plugin (requires uninstall of TFM: Hero, TFM: Posts Widget, TFM: Social Media, TFM: Related Posts) and update of TFM: Theme Boost plugin
  • Fixed: Category slug count
  • Fixed: Human Readable entry data in hero plugin
  • Fixed: Cover format padding on mobile devices
  • Fixed: Social icons css
  • Added: Ajax cart icon
  • Added: Rankmath breadcrumbs styling support

December 29, 2022 - Version 1.5.6

  • Minor CSS updates
  • Plugin version requirement update
  • Allow basic HTML in featured image captions

December 23, 2022 - Version 1.5.5

  • Added Twitch and Gettr social and share icons

December 17, 2022 - Version 1.5.4

  • Fixed WooCommerce products support in TFM post blocks (requires TFM Homepage Post Blocks plugin update)

November 03, 2022 - Version 1.5.3

  • Fixed Hero margins on mobile

October 30, 2022 - Version 1.5.2

  • Updated download plugin URL's

October 22, 2022 - Version 1.5.1

  • Fixed pagination when using query offset

October 20, 2022 - Version 1.5.0

  • Added new demo import

September 10, 2022 - Version 1.4.9

  • Plugin updates

July 14, 2022 - Version 1.4.8

  • WP 6.0.1 fixes
  • Fixed meta customizer setting
  • File updates
  • New language file

July 12, 2022 - Version 1.4.7

  • Plugin updates
  • Minor CSS updates
  • Minor theme file updates
  • New language files

July 01, 2022 - Version 1.4.6

  • Phase 1 of Javascript API integration
  • Fixed nested list word-wrap on mobile
  • Fixed iOS zooming on search input field
  • Fixed toggle comments button still showing when disabled
  • Fixed Back To Top button CSS
  • Minor CSS updates
  • Minor plugin updates
  • New language files

June 21, 2022 - Version 1.4.5

  • Replaced search form popup with toggle search sidebar
  • Added additional widget area (search sidebar)
  • Fixed figcaption not showing for Hero layouts
  • Minor CSS updates

June 13, 2022 - Version 1.4.4

  • Minor WP6.0 bug fixes
  • TFM Homepage related posts: Added support for TFM Theme Boost Ratings
  • TFM Hero: Added support for TFM Theme Boost Ratings

June 09, 2022 - Version 1.4.3

  • Minor styling fixes and improvements
  • Additional theme colour options
  • New language files
  • TFM Theme Boost: Added JetPack ratings block support with additional custom display options (stars, points & percent) and ability to show in archive displays
  • TFM Hero plugin: Minor .js file update
  • TFM Homepage post blocks: Added support for TFM Theme Boost Ratings
  • TFM Posts Widget: Added support for TFM Theme Boost Ratings

June 05, 2022 - Version 1.4.2

  • Optimized category and tag slug customizer color settings (added limiters and filters)

June 04, 2022 - Version 1.4.1

  • Fixed Category slug global color not applying
  • Fixed Gutenberg text align in Blockquotes
  • Various styling updates
  • New language files
  • Added new demo imports
  • TFM HERO Added variable thumbnail sizes
  • TFM Homepage Post Blocks Added variable thumbnail sizes
  • TFM Homepage Post Blocks Added "Hero" thumbnail aspect ratio option
  • TFM Related Posts added sort order option

May 31, 2022 - Version 1.4

Fixes

  • Fixed border radius setting on mobile devices
  • Fixed false sidebar active status
  • Various styling fixes

Improvements & Updates

  • List layout now supports mulitple columns
  • Rewritten and improved mobile breakpoint styling
  • Removed font settings customizer panel (use Easy Google Fonts or CSS instead)
  • Added styling support for TFM Hero and TFM Post Blocks new Offset and List Layouts
  • Added new demo imports

Plugin Updates

See readme.txt file for each plugin for detailed updates

  • TFM Hero
  • TFM Homepage Post Blocks
  • TFM Related Posts

May 30, 2022 - Version 1.3.2

  • Fixed Front-end theme color settings in Guteneberg posts

May 27, 2022 - Version 1.3.1

  • Fixed Gutenberg color palette when changing theme colour scheme

May 26, 2022 - Version 1.3

  • WordPress 6.0 Compatibility Updates

May 15, 2022 - Version 1.2

  • Added AMP theme
  • Updated TFM: Theme Boost Plugin

May 11, 2022 - Version 1.1

  • TFM Related Posts Plugin: Fixed Tags relationship method bug
  • New Demo Imports

May 04, 2022 - Version 1.0

  • Initial Release

Back to top ^