Installing, Securing WordPress and First Steps

Installing WordPress

If you need help installing WordPress, follow the instructions in WordPress Codex.

Securing WordPress

You can improve your WordPress installation security taking these steps:

  • Set the Authentication Unique Keys and Salts in wp-config.php file.
  • Set the $table_prefix variable in wp-config.php file (do not use the default value of "wp_").
  • Do not use admin as user name and set strong passwords.
  • After installation is done, remove wp-admin/install.php file.
  • Keep backups of the database and WordPress files.
  • Keep your WordPress installation, plugins and themes up to date.
  • You can further strengthen the security of your site by using a specialized plugins and services.

Theme Installation

How to Install the Theme?

Theme purchased on a marketplace

  1. (Re)download the theme package ZIP folder from the marketplace where you've purchased the theme from.
  2. Log into your WordPress admin.
  3. In WordPress admin navigate to Appearance » Themes and click the [Add New] button next to "Themes" page title.
  4. On "Add Themes" screen click the [Upload Theme] button next to page title.
  5. On the next screen choose the theme ZIP package file you've downloaded in step 1 above and click the [Install Now] button.
  6. After the theme is installed, activate it by clicking the "Activate" link.

Free theme available via WordPress.org repository

  1. Log into your WordPress admin.
  2. In WordPress admin navigate to Appearance » Themes and click the [Add New] button next to "Themes" page title.
  3. On "Add Themes" screen use a search field to search for "Mustang".
  4. Once you've found the theme in the search results list, click the [Install] button when hovering over the theme.
  5. After the theme is installed, activate it by clicking the "Activate" link.

Tip:

After activating the theme, you can read the theme's welcome page navigating to Appearance » Welcome (you can disable this page in Appearance » Customize » Theme » Others).

Important:

It is strongly recommended to follow or subscribe to WebMan on Facebook or Twitter to get the most recent theme update notices as fast as possible.

You should always keep your WordPress, themes and plugins up to date!

Theme Update

How to Update the Theme?

You will be notified in the WordPress admin bar each time a new updated theme version is released. To install this updated theme version please follow the steps below.

IMPORTANT:

If there is a specific procedure required for the theme update, this will be clearly stated on the WebMan's Facebook and Twitter pages.

Updating main stylesheet

After each theme update the main CSS stylesheet file gets regenerated to incorporate all the new style changes introduced in the updated theme version. You will get notified about this in the WordPress admin area.

Back Up!

It is strongly recommended to back up your theme settings before you update the theme. This is only a precaution procedure and a good practice.

For backing up the theme customizer settings, please use the Customizer Export/Import plugin.

Automatic Theme Update

If none of these apply to you, you need to update the theme manually (see below).

Manual Theme Update

First you need to download the theme ZIP package from your marketplace.
  • Updating via WordPress dashboard

    A simple way of doing a manual theme update would be deleting and reinstalling the theme directly via WordPress dashboard. You can read an article or watch a video on how to do this.

  • Updating via FTP

    This is a more advanced manual theme update procedure and you will need an FTP client (such as FileZilla) to connect to your server:

    1. (Re)download the theme package ZIP folder from the marketplace where you've purchased the theme from and unpack the theme installation ZIP file on your computer.
    2. Now you will need an FTP client to connect to your server.
    3. On your server navigate to YOUR_WORDPRESS_INSTALLATION_FOLDER/wp-content/themes/ folder.
    4. Delete the existing mustang folder (or create a backup just in case).
    5. Copy the unpacked theme mustang folder from your computer (from step 1. above) to the YOUR_WORDPRESS_INSTALLATION_FOLDER/wp-content/themes/ on your server.
    6. Log into your WordPress admin area and check the version of the theme in Appearance » Themes. Your theme should be updated now.

Installing Plugins

Why Do I Need Plugins?

Do you ask why do you need to use plugins when you expected the theme to have all the functionality in it?

According to WordPress guidelines, the themes are meant for presentational purposes only, while plugins provide website functionality.

The reason is simple. When you decide to update your website look in the future, you simply change the theme without loosing your website content and additional functionality such as shortcodes, e-shop or forum functionality among others.

This theme follows this basic WordPress philosophy and you can sleep assured your website is as future-proof as possible!

While you get beautiful look for your website with this theme, it also supports and integrates seamlessly with various plugins. For more info please read on.

Installing Recommended Plugins

The theme uses the TGM Plugin Activation script that prompts you to install recommended plugins after you activate the theme.

The suggested recommended plugins are essential to provide the core functionality the theme relies on and/or to ease out the process of editing your website pages. You can still use the theme without these plugins, however, its functionality and your user experience would be limited.

Other plugins than the recommended ones should work with the theme with no issues, though some might require additional tweaks to integrate them 100% with the theme (this is usually the case of more robust plugins such as e-shop or directory plugins).

Please understand that there are thousands of plugins available for WordPress and it is not possible for any theme developer to test the theme with all of them. Mustang was tested with most of the popular plugins. You can install any custom plugin following the WordPress instructions (or following the plugin documentation).

In case of any plugin incompatibility or error, please, contact the plugin support first before contacting WebMan Design Support Forum.

Premium plugins

If you are using a premium plugin(s), even the ones bundled with the theme in the past, you need a plugin license key to keep it up to date! You can obtain the license key by purchasing the plugin.

Please understand that I can not provide compatibility with outdated software. Please, update all your plugins to the most recent versions.

Bellow you'll find a list of plugins that were successfully tested with the theme and works with it without any conflicts:

WebMan Amplifier
(https://wordpress.org/plugins/webman-amplifier/)

This plugin extends the theme's functionality with additional content types, custom icon font, metaboxes, shortcodes (with page builder compatibility) and custom widgets.

It also provides seamless integration with Beaver Builder page builder plugin (and also the Visual Composer plugin).

This is essential plugin to provide advanced functionality for the theme and you will be prompted to install it after theme activation.

This plugin is required for demo content import

Please install this plugin before importing the theme's demo content XML file. Otherwise the content included in theme's demo content XML file might not get imported in whole.

Beaver Builder
(https://www.wpbeaverbuilder.com Pro, https://wordpress.org/plugins/beaver-builder-lite-version/ Free)

If you need a page builder plugin to create your pages with ease with a front-end drag and drop editor, I highly recommend using the Beaver Builder plugin. The plugin is available both in free Lite version and payed Pro version. The theme is 100% compatible with this plugin.

For more info on the plugin please visit the Beaver Builder website where you can also find the instructional videos for this page builder plugin.

Tutorials

If you are new to Beaver Builder page builder, you can watch instructional videos (check out alternative courses), or read the plugin's knowledge base.

Extensions

If you would like to extend the Beaver Builder page builder with some fancy free custom modules, give a CB Custom Modules plugin a try.

This plugin is required for demo content import

Please install this plugin before importing the theme's demo content XML file. Otherwise the content included in theme's demo content XML will not be displayed correctly.

The theme demo content was build using free Beaver Builder Lite Version.

WooCommerce
(https://wordpress.org/plugins/woocommerce/, https://woocommerce.com)

WooCommerce is the world's most favorite eCommerce solution that allows you to sell anything, beautifully.

This theme is fully compatible with WooCommerce e-commerce plugin out of the box, so you can start selling immediately. Just install, activate and setup the plugin and you are ready to go!

When you activate the WooCommerce plugin, the theme creates a new "Floating cart" widget area. You can put a "WooCommerce Cart" into this widget area to make the cart always available on your website (the cart icon is created in the upper right corner of the browser window).

Tip: Image sizes

Set up the WooCommerce product image sizes for the best compatibility with the theme:

Catalog Images520×520 px, hard crop
Single Product Image800×9999 px, disable hard crop
Product Thumbnails150×150 px, hard crop

Tutorials

If you are new to WooCommerce, you can watch instructional WooCommerce 101 video series, or read the plugin's documentation.

Extensions

If you would like to extend the plugin with some fancy new functionality, check out the official WooCommerce extensions list.

This plugin is required for demo content import

Please install this plugin before importing the theme's demo content XML file. Otherwise the content included in theme's demo content XML file might not get imported in whole.

bbPress
(https://wordpress.org/plugins/bbpress/)

Need a forum for your website? No problem with this plugin! The theme offers full integration for bbPress plugin.

Jetpack
(https://wordpress.org/plugins/jetpack/)

This plugin was built by Automattic (the company behind the WordPress) and contains a lot of very useful tools for your website.

To choose some of the features included in this plugin: tiled galleries, image lightbox zooming effect, contact form, custom CSS, extra widgets, infinite scroll, better search, social networks sharing buttons, related posts display, CDN, site verification and others.

For more info on the plugin usage and functionality please visit the Jetpack.me website.

With this plugin you can create a perfect breadcrumbs navigation.

Other Great Plugins Worth Checking Out

You can use any plugin with this theme. Here are some tested, used and recommended plugins by the theme author:

Caldera Forms
A great form builder plugin for WordPress! Highly recommended!
Custom Post Type Editor
Allows you to rename any post type.
Customizer Export/Import
Perfect plugin for backing up your theme's Customizer settings.
Disable Comments
Disables comments site-wide per post type.
Elementor Page Builder
Completely free frontend drag & drop page builder.
Front-end Editor
Edit your posts on the front-end of your site.
Imsanity
Automatically resizes huge image uploads.
Intuitive Custom Post Order
For easy posts ordering.
Maps Builder - Google Maps Plugin
Let's you build a custom Google Maps to be used in your posts and pages.
My Eyes Are Up Here
Helps you control how WordPress generates thumbnails.
Page Links To
Lets you make a WordPress page (or other content type) link to a custom URL of your choosing.
Polylang
Making your WordPress website multilingual. A great free alternative to paid WPML plugin.
Rename Taxonomies
Allows you to rename any taxonomy.
Smart Slider 3
Great free advanced, layered slider plugin.
Theme Check
Checks your themes against the latest WordPress theme review standards.
Widget CSS Classes
Add custom classes to your widgets.
WP Featherlight
The best free image lightbox (zooming) plugin that just works!

Installing Demo Content

One-click Installation

Warning

It is recommended to install theme demo content into empty, fresh WordPress installation only. Otherwise it might mess up your existing content!

For more info on automatic one-click demo content installation please read the Appearance » Welcome » "Installing the theme demo content". After installing and activating required One Click Demo Import plugin, head over to Appearance » Import Demo Data and run the import process.

In case you experience an issue during the one-click demo content import, please read the online information article.

Manual Installation

Warning

It is recommended to install theme demo content into empty, fresh WordPress installation only. Otherwise it might mess up your existing content!

For detailed instructions regarding each demo content file installation and download, please visit the theme demo files repository at Github.

You can use this procedure in case the One-click Installation procedure fails. In that case it is recommended to delete (permanently) the imported media files from your media library and run the database reset with a plugin such as Advanced WordPress Reset.

Please check WordPress codex for information about manual demo XML file import issues.

Demo Images and Other Media Quality

Please understand that demo images, audio and video files are low quality due to copyright protection and you should replace them with your own, properly copyrighted images.

Demo Content Import Issues

Please note that there might occur some connection issues when downloading demo attachments (media files) from demo content servers during the demo content import process.

These, however, are just demo attachments (images, videos, audio files) and you are perfectly fine (actually, you should) replacing them with your own assets.

Other demo content (posts, pages and custom posts content) will be imported without any issues.

Pages

Setting Up Front and Blog Page

  1. In WordPress admin navigate to Settings » Reading.
  2. For "Front page displays" option set "A static page (select below)".
  3. Select the front page from dropdown list. This page will become your home page.
    Select the posts page from dropdown list. This page will become your blog page.
TIP: You can also do this in theme customizer where you get live preview of your settings.

Page Settings Tab

Each page contains a setting tabs with advanced page options. Just click the "Settings" tab (and others) above the page content editor (if you enable a page builder, the page settings tab will be displayed in metabox below) and you will be able to set several different page options, depending on what page template is being used.

Page Builder

The theme is fully compatible with the best front-end page builder plugin for WordPress, the Beaver Builder, which will help you create a complex page layouts with ease! Please, don't forget to set up a "Fullwidth sections" page layout when using a page builder!

Setting Up a Page Template

  1. On page edit screen choose one of predefined page templates in Page attributes metabox on the right.
  2. Once you set the page template, notice how page options tabs changed to offer you only the options related to specific page template.

Tip:

Read below for more info on included page templates.

Page Template: Default

In page options tabs you can set these options:

Settings tab

For fullwidth sections please set the "Fullwidth section" option from the "Page layout" dropdown.

Slider tab

You can set a custom special slider (use any custom slider plugin) or featured image.

Page Template: Blank

This page template displays no header and footer, only the page content. The page content is centered on the screen. Blank page template is best suited for under construction pages or special landing pages. It has no options to set.

Page Template: Blog

With this theme you can set several blogs. Just use this page template and set its options:

Blog tab

Page Template: One page

You can set a custom menu for this page template. The special scrolling JavaScript will be used to scroll to the sections of this page.

Don't forget to set up a HTML ID attribute for the sections of the page as otherwise your anchor navigation won't work. The best is to set up the ID attribute on page builder rows.

In page options tabs you can set these options:

One page tab

Posts

Post Excerpt

Post excerpt will be displayed in posts list. If no excerpt set, a portion of post content will take its place in posts list (if set, until <!--more--> tag). Post excerpt will also be displayed at the top of the post content on single post page. Please note that you will probably have to enable post excerpt field in "Screen Options" first.

If you set the "Read more" tag inside the post content and you also set a post excerpt, first the post excerpt followed with post content (until "Read More" tag) will be displayed in posts list.

Table of Contents on Parted Post

If you are setting up a multipage post (using a "Page break" button in visual editor, or <!–nextpage–> tag in "Text" tab of visual editor), the automatic table of contents will be generated for the post/page for you.

All you need to do is to set up a post parts titles at the top of each post part (so, immediately after <!–nextpage–> tag) with H2 heading.

Setting Up a Post Format

On the post edit screen choose one of the predefined post formats in Format metabox on the right. The theme supports these post formats:

Standard post What is it?

This is basic standard blog post layout. It is recommended to set a featured image for this post format as it will be displayed in posts list alongside with post excerpt.

Audio post What is it?

Displays audio player to play your audio files. Could be used for Podcasting. Please place the [wm_audio] shortcode as the first thing in post content. The audio description text can follow on next line.

A standard post with a gallery of images in post content. Slideshow will be displayed on blog page from the first gallery found in post content. If no gallery found, featured image is displayed.

You can insert a [gallery] shortcode anywhere in the post. This shortcode will not be stripped out from the post content on the single post page.

Promotes interesting URL links. You can set the link anywhere in the post content. The link will be emphasized when post is displayed. Post title will not be displayed.

Quote post What is it?

A quotation. Please place the actual quote (blockquote) directly into post content. To set a quote source use a <cite> HTML tag. Post title will not be displayed.

Status post What is it?

A short status update, similar to a Twitter status update. Please place the actual status text directly into post content area. Post title will not be displayed.

Video post What is it?

A single video. Please place the [wm_video] shortcode as the first thing in post content. The video description text can follow on next line.

Projects

What Are They and How to Use Them?

This custom post type is provided via WebMan Amplifier plugin.

What Beaver Builder module to use to display Staff?

Please use "WM Posts (custom posts)" module and set the "Post type" option to "Projects".

Before using Beaver Builder page builder with this custom post type you need to enable it in Beaver Builder's settings first.
Navigate to Settings » Page Builder » Post Types.

Projects custom post can be used to showcase your work. You can place any content into projects and create stunning complex layouts using Beaver Builder page builder plugin.

For each project you can optionally tweak the project settings (click the "Settings" tab above content editor). You can set project layout, project custom link URL and project custom link action.

Custom preview slider:

If you are setting up a "Custom preview slider" option, please don't use any links inside the slider. Instead, set up a custom link for the project itself.

Each project can be categorized and tagged and you can use these taxonomies for portfolio filtering in dedicated Beaver Builder "Posts (custom posts)" module.

TIP: If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies, use the Rename Taxonomies plugin.

Logos

What Are They and How to Use Them?

This custom post type is provided via WebMan Amplifier plugin.

What Beaver Builder module to use to display Staff?

Please use "WM Posts (custom posts)" module and set the "Post type" option to "Logos".

Logos custom post can be used to easily manage your clients and parthers logos.

They can be grouped into categories, so you can create a separate category for clients and separate category for partners (and for others) and then display them on the website individually using a Beaver Builder module.

For each logo you can set up an image, custom link URL, custom link action and assign it to a logo category.

TIP: If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies, use the Rename Taxonomies plugin.

Testimonials

What Are They and How to Use Them?

This custom post type is provided via WebMan Amplifier plugin.

What Beaver Builder module to use to display Testimonials?

Please use "WM Testimonials" module.

Testimonials posts can be used to display reviews you receive from your clients or customers.

Besides the actual testimonial text you can also set its author details together with author photo or logo (featured image) and conveniently categorize testimonials for better organization.

TIP: If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies, use the Rename Taxonomies plugin.

Staff

What Are They and How to Use Them?

This custom post type is provided via WebMan Amplifier plugin.

What Beaver Builder module to use to display Staff?

Please use "WM Posts (custom posts)" module and set the "Post type" option to "Staff".

With staff custom post you can easily manage your company's team info.

This post type provides just short basic information about your team members, however, you can link it to any page/post or external website for more details on the person.

TIP: If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies, use the Rename Taxonomies plugin.

Content Modules

What Are They and How to Use Them?

This custom post type is provided via WebMan Amplifier plugin.

What Beaver Builder module to use to display Content Modules?

Please use "WM Content Module" module.

Content Modules can be used as a content injection to various website areas. You can display it within any page or post content. Content Modules can be styled as icon boxes, so they are perfect for your services or benefits presentation.

For each Content Module you can set up a title, description text, custom link URL, custom link action, featured image and/or font icon.

If you use font icon, you can change the icon color and its background too.

It is also possible to conveniently group Content Modules using dedicated tags.

TIP: If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies, use the Rename Taxonomies plugin.

Shortcodes

Shortcodes

Shortcodes are basically commands you place into page/post/text widget content that will create content elements that are not possible to create or would be otherwise complicated to create.

WordPress offers couple of shortcodes natively and one of them is [gallery /] shortcode. This theme even enhaces this shortcode's functionality.

You can read more on shortcodes in WordPress codex.

Shortcode Generator

With integrated Shortcode Generator it is very easy to insert any shortcode into the post or page content. Simply click the [S] button in visual editor, select a shortcode from dropdown and it will be inserted into the post content on the current cursor position.

However, the theme supports a Beaver Builder page builder plugin that lets you create a page/post content in drag and drop environment with ease. This is even more convenient way of creating post content that the Shortcode Generator.

WordPress native [gallery] shortcode can be controlled by several default attributes. However, the theme adds these additional shortcode attributes to enhance gallery functionality:

flexible
This is a boolean attribute, so set it to 0 (= "off"; or leave it blank, or don't set it at all) or 1 (= "on"). By turning this attribute "on" the gallery will be displayed in masonry style.
class
With this attribute you can set a custom class applied on each gallery image item. You can, for example, use a frame class to apply a frame arround the gallery images.

Using Navigational Menus

Mustang supports WordPress Menus, so you can easily create custom navigational menus directly in Appearance » Menus.

Custom menus may contain links to pages, categories, custom links or other content types (use the [Screen Options] button in upper right corner of the screen to decide which content types to show on the menu edit screen). You can specify a different navigation label for a menu item as well as other attributes.

To display menus on your website you need to assign them to a menu locations or use them in conjunction with the Custom Menus widget.

The theme allows you to create as many menus as you want. However these menus can be placed into predefined locations only. The theme defines these menu locations:

  • Main navigation - This is the main navigation area in the header of the website. The menu can be nested and hierarchically organised.
  • One page template menu overrides - You can set up a custom menu for One page template. This menu will override the main navigation menu for that specific page.

Creating a Menu

Please follow the instructions in WordPress codex on how to create menus.

Helpful tutorial: WordPress video tutorials.

Assigning Icons to Menu Items

For this functionality you will need to set the menu item CSS Classes attributes. To enable this attribute, check it in [Screen Options] tab in the upper right corner of the screen.

To add an icon to a menu item you need to assign one of the icon classes to it. You can display all the available icons and get their classes in Appearance » Icon Font » Click to display recent available icon classes.

Megamenu

For this functionality you will need to set the menu item CSS Classes attributes. To enable this attribute, check it in [Screen Options] tab in the upper right corner of the screen.

With built in simple megamenu functionality you can display submenu items layed out into several columns.

  1. To create a megamenu from submenu items please set a megamenu columns-# classes on the 1st level menu item. The # in columns-# stands for a number of columns the megamenu should be splitted into: 2, 3 or 4. This 1st level menu item essentially becomes a wrapper and trigger for your megamenu.

  2. Then the 2nd level menu items (first children) becomes titles/headings of the megamenu columns.

  3. Finally, the 3rd level menu items (second children) within your megamenu are the actual column menu items. So, you should set these for each column (for each 2nd level menu item).

The 4th level menu items won't be displayed in megamenu.

Widget Areas (Sidebars) and Widgets

Widget Areas (Sidebars)

Widget areas can be used as sidebars, displayed using a shortcode or displayed in predefined website areas, such as footer.

Custom Sidebars

You can create a custom sidebars and use them anywhere on the website with a help of WooSidebars plugin.

Additional Widgets

The theme also supports several new WebMan Amplifier plugin's widgets (such as Contact, Content Module, Projects, Submenu, Tabbed Widgets and Twitter widget).

Twitter Widget Setup

Twitter (www.twitter.com) API allows to display tweets on your website only when you set up additional security variables. Here is how to get them from Twitter (you need to create an application):

  1. Head over to https://dev.twitter.com/apps and click the [Create a new application] button.
  2. On the next screen fill out the form fields (no need to fill the "Callback URL" field) and press the [Create your Twitter application] button.
  3. On your application's details page scroll down and click the [Create my access token] button.
  4. Now you should be able to copy all the required variables (Consumer key, Consumer secret, Access token, Access token secret) and finish setting up the Twitter widget in your WordPress admin area.

Theme Customizer

Theme Customization

The theme seamlessly integrates its options into the WordPress theme customizer.

You can access it navigating to Appearance » Customize and all theme related settings can be found under "Theme" panel. All the changes you set in customizer will be immediately displayed in the theme preview. However, these changes will not be saved until you press the [Save & Publish] button.

You can set up your site's title, tagline and logo, manage navigational menu locations and widget areas, set up a front and blog page, theme colors, layout, predefined texts and fonts.

Backing the Settings Up

Use Customizer Export/Import plugin to back up your theme customizer settings.

Search Engine Optimization and Traffic Tracking

Search Engine Optimization

The theme is coded with best SEO practices in mind, meaning it is ready to be displayed on top of search results in search engines such as Google.

It also integrates Schema.org microformats automatically.

Please note though, that this is just basic SEO optimization and you will have to push it further to make the real deal with SEO. For such cases I recommend Yoast SEO plugin.

Traffic Tracking

I recommend using Google Analytics by MonsterInsights plugin as it offers advanced customization of tracking of you website.

Localization

How to Translate the Theme?

Free WordPress.org themes translation

If you have obtained the theme from WordPress.org themes repository, please translate the theme by clicking the Translate Mustang link in theme page sidebar.

REMINDER: Any translation files placed in the mustang/languages folder will be deleted when you update the theme.
  1. Make a copy of the original mustang/languages/mustang.pot file.
  2. You need to rename the copied file now. The naming convention is based on your language code locale and renaming the file extension to "po". So, the British English file would be named as en_GB.po.
  3. Use Poedit to translate the file and export (save) translation also in "mo" translation file format.
  4. Upload translated en_GB.mo file into your WordPress language directory, such as /wp-content/languages/themes/mustang/en_GB.mo. Alternatively you can put translations in your child theme: /wp-content/themes/your-child-theme/languages/en_GB.mo.

Contributing your translations back to the theme

If you would like to help out translating the theme, please contribute on WebMan Design Support Forum. (If you have translated the theme at WordPress.org repository, you don't have to do anything :))

Theme Modifications and Child Themes Download the sample child theme

When and How to Use a Child Theme?

If you need to make any styling or functional changes to the theme, please use the WordPress native child theme functionality. This way you can continue updating the parent (original) Mustang theme without any worry of your changes being overwritten as all your custom styles and functionality are kept in a child theme. You can read more about child themes on WordPress Codex pages.

You can put all your custom CSS styles into YOUR_WORDPRESS_INSTALLATION/wp-content/themes/YOUR_CHILD_THEME/style.css file. (You can alternatively use a plugin, such as Jetpack, to insert a custom CSS.)

If you also want to change the functionality of the original Mustang theme, do so in YOUR_WORDPRESS_INSTALLATION/wp-content/themes/YOUR_CHILD_THEME/functions.php file. You can freely modify any theme's function or class method there by hooking onto the specific "pre" filter (see WordPress codex for more info on hot to use filter and action hooks).

Resources:

Please note that we do not provide support for custom theme modifications, though. You are responsible for all the changes you apply to the theme on your website. If you are not comfortable coding, please, consider hiring someone who could help.

FAQ and Tips and Tricks Frequently Asked Questions and Additional tips for the theme

List of Frequently Asked Questions:

  1. How to restyle elements with ease? (Using special predefined CSS classes.)
  2. How to set up and use a custom font?
  3. How to set up custom icons set?
  4. How to set up cookies notification?
  5. How to customize error 404 page?
  6. How to customize WordPress admin?
  7. How to create tables easily?
  8. My images are blurry/small/of bad quality, what can I do?
  9. How to edit the CSS or add your own?
  10. How to use action and filter hooks?

How to restyle elements with ease? (Using special predefined CSS classes.) Back to FAQ list ↑

As you can apply a custom CSS classes almost on all shortcodes used by the theme, there are some special classes that will style the content for you or add a specific layout. You can use these predefined CSS classes (plus you can easily define your own ones):

CSS3 Animation classes
The theme applies CSS3 animation of Animate.css library. Please apply these animation with animation- class prefix (so, the full class would look like animation-ANYMATION_TYPE). This way the animation will be applied only when the element becomes visible on the screen. Example: animation-sectionFlip.
Use in menu:
megamenu, columns-2, columns-3, columns-4, columns-5
These classes set up the megamenu.
Frame classes:
frame, frame-items
Applies a border and a small padding around the item or items. With multi item shortcodes please apply the frame-items class on the shortcode itself to style its items (like posts or, testimonials, for example).
Shadow classes:
drop-shadow, drop-shadow-items, inner-shadow, inner-shadow-items, bottom-shadow, bottom-shadow-items
Applies different kind of shadows on item or items. With multi item shortcodes please apply the SHADOW-items class on the shortcode itself to style its items (like posts or, testimonials, for example).
Text classes:
uppercase
Make the text uppercase.
Text align classes:
text-left, text-center, text-right, mobile-text-left, mobile-text-right
Align the text with these classes. If you apply mobile classes, you can control the text alignment on both desktops and mobiles.
Apply on posts lists shortcodes:
masonry
Enables masonry layout on Content Modules, Posts or Testimonial shortcodes.
Apply on Content Modules:
text-center, small-icons, no-icon-background
These classes are useful for icon modules: text-center will apply centered layout on content module with icon above the module text. small-icons make the content module icon smaller. no-icon-background will remove the background from the content module icon.
Apply on tabs:
center-tabs
Use on top tabs to center them out.
Apply on testimonials:
text-center
Creates large text-centered testimonials.
Apply on widget areas:
widget-columns
Puts the widgets in the widget area in a row.
Selecting custom predefined CSS class easily in Beaver Builder page builder

How to set up and use a custom font? Back to FAQ list ↑

The theme comes pre-packed with the selection of the most popular Google Fonts. You can set up fonts in Appearance » Customize » Theme » Fonts.

To preview the entire set of pre-packed fonts please check out the Google Fonts collection.

You can extend the list with your own selection by hooking onto wmhook_wm_helper_var_output filter hook (found in wm_helper_var function of the mustang/setup/setup.php file) in your child theme's functions.php file. Info on adding filter hooks: WordPress add_filter() function.

How to set up custom icons set? Back to FAQ list ↑

The theme uses Fontello - icon fonts generator to insert custom icons font. All the icons in such icon fonts are high DPI / Retina screen ready, so they will look awesome on any device. There are hundreds of icons already prepacked with the theme, however, if you want to change them, follow the instructions below to upload your own icons selection.

Important:

If you've aplied predefined theme icons in your website's content previously and you've changed the icon font to custom one, you might need to go through the previously applied icons and change their classes to new ones.

  1. Go to Fontello - icon fonts generator website.
  2. Select the icons you want to use on your website by clicking on them (or click and drag for multiple selection). Deselect the icon by clicking the highlighted ones.
    Please don't forget to check the information about the specific icon font group licencing.
    Once you choose your icons, you can optionally tweak their class names and codes on "Customize Names" and "Customize Codes" tab.
  3. Once you choose your icons click the red Download webfont (##) button in the upper right corner.
  4. Save the ZIP file on your computer (the name of the folder should look something like fontello-46ca5140 for example).
  5. Navigate to Appearance » Icon Font and upload the new icon font ZIP file.
  6. Press [Save changes] button and your new icon set will be installed.
    You can check if your new icon set was applied by clicking Appearance » Icon Font » Click to display recent available icon classes for preview (you might need to flush your browser's cache first).

How to set up cookies notification? Back to FAQ list ↑

Every European website has to conform European Union guidelines on privacy and data protection and inform users about cookies being set by the website. There are multiple ways to go about this with WordPress, you can use a plugin for that, or set the notification with Silktide Cookie Consent script (there is also a plugin for this script).

How to customize error 404 page? Back to FAQ list ↑

In case you would like to customize the theme's error 404 page and you do not want to touch a line of code, you can do so easily with a help of a 404page plugin.

How to customize WordPress admin? Back to FAQ list ↑

If you are building a website for a client using WordPress (and Mustang theme), you might want to adapt the WordPress admin area a bit to remove unnecessary things and maybe even rename some post types. In this case we provide some useful resources you would want to check out:

How to create tables easily? Back to FAQ list ↑

There are times you need to display tabular data in your posts and/or pages. This is not an easy task in WordPress if you are not familiar with HTML coding as there is no out-of-the-box tool to create HTML tables in post editor. But, there is an easy fix for the issue: try using a great TablePress plugin.

My images are blurry/small/of bad quality, what can I do? Back to FAQ list ↑

During the theme setup it is highly recommended to choose which image aspect ratios will be used in various website sections. You can find this setting in Appearance » Customize » Theme » Images. This setting will also affect the minimal image size that you upload into WordPress.

As the theme scales and reorganizes the content depending on the screen resolution it is viewed on (the responsive design feature), it requires images of minimal width of 520 pixels. The best and recommended upload image width would, however, be at least equal to the width of the website which can be set in Appearance » Customize » Theme » Layout.

The height of the image depends on previously mentioned image formats selected. As an example, if you choose a blog list image to be displayed in 3:2 aspect ratio, you should upload images of minimal size of YOUR_WEBSITE_WIDTH × ( YOUR_WEBSITE_WIDTH / 3 * 2 ) pixels for post featured images.

WordPress will rescale and crop the images to selected formats (aspect ratios) automatically during the image upload process.

The rule of thumb here: the bigger the image, the better (although, keep the actual storage size of the files to minimum).

High DPI / Retina display support

If you want your website to be fully high DPI (also called Retina) screen compatible, just double the sizes of uploaded images (you can lower the quality of JPEG images a bit to reduce the storage size of the image file). The theme itself is already optimized for high DPI screens.

To make sure your content images are high DPI screen ready you can read a tutorial and use a specialized WordPress plugin.

If you want to dive more into high DPI screen problematics, I recommend reading Retinafy your web sites & apps book.

How to edit the CSS or add your own? Back to FAQ list ↑

If you need to apply a custom CSS to override theme styles, please use a child theme or custom CSS plugin (such as Jetpack's Custom CSS or Reaktiv CSS Builder or Theme Junkie Custom CSS).

How to use action and filter hooks? Theme development and modifications Back to FAQ list ↑

This topic is dedicated to WordPress developers who would like to modify the theme and alter or expand its functionality.
Please note that we do not provide support for custom theme modifications, though.

The theme is coded according to WordPress coding standards and is full of action and filter hooks. You can easily hook onto these to alter functions outputs or alter parameters and variables, to add your own meta data, theme or design options, layouts and much more!

Please check the theme's source code for which hook to use, or contact WebMan Design Support Forum for more details and tips.

Mustang itself uses the Theme Hook Alliance hooks too. This is useful to entirely rebuild the theme structure or add your own sections anywhere in the theme. The whole theme front-end structure setup can be found in files inside the mustang/includes/front folder.

You can also watch an instructional video on how to use WordPress hooks.

Sources and Credits