Mustang WordPress Theme

How to Install the Theme?

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.

Automatic Theme Update

• Have you obtained the theme from WordPress.org themes repository?

  The WordPress itself will notify you about a new theme update. The only thing you need to do now is to proceed with update procedure suggested in your WordPress dashboard.

• Have you obtained the theme from ThemeForest?

  You can obtain automatic theme updates with help of Envato Market or Envato WordPress Toolkit plugin.

Manual Theme Update

• 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.

Required and Recommended Plugins

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

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!

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:

What Are They and How to Use Them?

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.

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

What Are They and How to Use Them?

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.

What Are They and How to Use Them?

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.

What Are They and How to Use Them?

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.

What Are They and How to Use Them?

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.

WordPress [gallery] shortcode enhancements

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.

How to Translate 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.

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:

• Download a sample child theme
• Child Theme Check plugin (how it works?)
• WordPress Codex on child themes
• Why child themes are so important
• How To Make A Child Theme for WordPress (Includes Video & Downloads)
• Child Theme Configurator plugin

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.

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

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.

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:

• WordPress Admin Customization video course
• Use Custom Post Type Editor plugin to rename any post type
• Use Rename Taxonomies plugin to rename any taxonomy
• For easier pages/post advanced settings use Advanced Custom Fields plugin. Once you activate this plugin, the theme will automatically creates a metaboxes for all the custom fields it uses for you.

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 ↑

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 ↑

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.