Thank you and congratulations for using Mustang theme by WebMan Design!
This user manual will teach you how to set up and use the theme. In case you have any questions that are beyond the scope of this documentation, please join WebMan Design support forum.
WordPress is free open source CMS software for creating websites. It can scale with your needs when you're ready to grow and is easy to learn with many free and low-cost tutorials. You can learn more about WordPress at wordpress.org.
What is a theme?
A WordPress theme changes the way your site looks and affects the style of the content displayed on it. WordPress themes are built so you can change your site's design without losing content. As you are reading a user manual for a WordPress theme and it requires WordPress to run, let's install it first.
In WordPress dashboard navigate to Appearance → Themes and click the Add New button next to "Themes" page title.
On "Add Themes" screen click the Upload Theme button next to page title.
On the next screen choose the theme ZIP file you've downloaded in step 1 above and click the Install Now button.
When the theme is installed, activate it by clicking the "Activate" link.
Now you can go to Appearance → Welcome page for information on how to set up your website and the theme. Also, please pay special attention to your website image sizes setup.
Tip:Welcome page
Don't forget to check the theme welcome page at Appearance → Welcome. It contains everything you need to start.
Tip:Get info about updates
Get fast information about new theme updates by subscribing to WebMan Design on Facebook and X (Twitter).
Download the theme ZIP package from where you've obtained it originally. Then follow the steps below:
Updating via WordPress dashboard
A simple way of doing a manual theme update is 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 more advanced manual update procedure and you will need an FTP client (such as FileZilla) to connect to your server:
Download the newest theme ZIP file from where you've obtained it and unpack the ZIP file on your computer.
Now you will need an FTP client to connect to your server.
On your server navigate to WORDPRESS_FOLDER/wp-content/themes/ folder.
Delete the existing mustang folder (or create a backup just in case - you can do this simply by renaming the folder name by appending .backup to its name so it becomes mustang.backup, for example).
Copy the unpacked theme mustang folder from your computer (from step 1 above) into WORDPRESS_FOLDER/wp-content/themes/ folder on your server.
Log into your WordPress admin area and check the version of the theme in Appearance → Themes. Your theme should be updated now. (And you can delete the mustang.backup folder from step 4 above.)
The theme allows you to import a demo content, which matches theme demo website. Then you can simply change the imported demo content to your needs and build your website faster that way.
Before you import the theme demo content, please check these important notes:
Tip:Delete leftovers
Theme demo contains a lot of pages. You will certainly end up not using most of them. In that case it is strongly recommended to delete the leftover demo content you no longer need from your website. It improves your website performance and relevance.
Important:Install on fresh WordPress
It is recommended to install demo content on empty, fresh WordPress site. (If you are testing the theme on a computer and not your live website, you can always reset WordPress to a fresh state.
Warning:Images and media quality
Please understand that demo images, audio and video files are of low quality. This is to prevent any copyright infringement. You should replace them with your own, properly licensed media that fit your website project.
Recommended:Classic widgets interface
WordPress 5.8 introduced a new block-based interface to widgets and sidebars management screen. Theme demo content was built using the classic widgets interface, so it is highly recommended to install and activate Classic Widgets plugin to retrieve the classic WordPress widgets interface again.
Warning:Page builder compatibility
If you want to use a page builder, please understand that if the theme demo content was not built with your page builder, you will not be able to edit the imported demo pages.
Navigate to Appearance → Customize → Homepage Settings (or you can also do this at Settings → Reading).
For "Your homepage displays" option set "A static page".
Select your homepage and posts page from the dropdown lists. Posts page becomes your blog page.
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.
Setting a general page options
Illustrative image. May not represent this actual theme.
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
On page edit screen choose one of predefined page templates in Page attributes metabox on the right.
Once you set the page template, notice how page options tabs changed to offer you only the options related to specific page template.
Setting a page template
Illustrative image. May not represent this actual theme.
"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.
"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.
"Blog"
With this theme you can set several blogs. Just use this page template and set its options:
Setting a blog page options
Illustrative image. May not represent this actual theme.
"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:
Setting a one page options
Illustrative image. May not represent this actual theme.
Setting up an anchor in website menu
Illustrative image. May not represent this actual theme.
By default WordPress displays a caption in the archive page title (such as "Category:" in front of a category name). Use Archive Title plugin to hide these labels.
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.
On the post edit screen you can choose a post format supported in the theme:
Standard post
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
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.
Gallery post
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.
Link post
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
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
A short status update, similar to an X/Twitter status update. Please place the actual status text directly into post content area. Post title will not be displayed.
Video post
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 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.
Each project can be categorized and tagged and you can use these taxonomies for animated on-page filtering in a dedicated Beaver Builder "Posts (custom posts)" module.
Use "WM Posts (custom posts)" module in Beaver Builder page builder and set the "Post type" option to "Projects".
Tip:Renaming the post type
If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.
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 dedicated 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.
Use "WM Posts (custom posts)" module in Beaver Builder page builder and set the "Post type" option to "Logos".
Tip:Renaming the post type
If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.
Use "WM Testimonials" module in Beaver Builder page builder.
Tip:Renaming the post type
If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.
With staff custom post you can easily manage your company 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.
Use "WM Posts (custom posts)" module in Beaver Builder page builder and set the "Post type" option to "Staff".
Tip:Renaming the post type
If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.
Content Modules can be used as a reusable content injection to various website areas. They can be styled as icon boxes, so they are perfect for your services, features 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.
It is also possible to conveniently group Content Modules using dedicated tags.
Use "WM Content Module" module in Beaver Builder page builder.
Tip:Renaming the post type
If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.
Navigational menus for your website can be created at Appearance → Menus. They may contain links to pages, categories, custom links or other content. You can specify a custom menu item label, as well as other attributes.
Display menus on your website by assigning them to a predefined theme menu location. The theme defines these menu locations for you:
Primary Menu
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.
WordPress 5.8 introduced a new block-based interface to widgets and sidebars management screen. As this may be confusing and possibly even cause incompatibility issues in some cases, you can consider reverting back the interface with Classic Widgets plugin.
Predefined Widget Areas
Widget areas can be used as sidebars, displayed using a shortcode or displayed in predefined website areas, such as footer. Their content can be customized in Appearance → Widgets or Appearance → Customize → Widgets.
Mustang seamlessly integrates its options into live preview customizer. You can set up your site's title, tagline and logo, home and blog page, manage menus and widgets, customize colors, layout, typography and others.
Customizer can be accessed at Appearance → Customize. All the changes you make in Customizer will be immediately displayed in the preview, but they will be made live only after you press the Publish button.
At Appearance → Customize → Theme Options panel you'll find theme-specific options. Check them out to get familiar with theme customization capabilities.
Every WordPress theme contains some texts that need to be translated into your language if you are building a non-English website. This theme if fully translation ready.
Make a copy of the original mustang/languages/mustang.pot file.
Rename the copied file now: add hyphen followed with your language code locale, and change the file extension to "po". For example, the British English file would be named mustang-en_GB.po.
Use Poedit to translate the file and export (save) translation in "mo" file format.
Upload translated mustang-en_GB.mo and mustang-en_GB.po file into your WordPress languages directory, into themes folder (such as /wp-content/languages/themes/mustang-en_GB.mo (if the themes folder does not exist in your WordPress languages directory, create it).
Warning:Don't lose your files!
When you update the theme, all custom translation files will be deleted from /wp-content/themes/mustang/languages folder. Do not put your custom translation files into that folder! Basically, you should never modify the actual theme files and folders.
Methos 2: Translating in WordPress admin
If you would like to translate the theme directly in your WordPress dashboard you need to use a specialized plugin. Check out Loco Translate plugin and instructions on how to use it at beginner's guide and technical overview.
Translate Plugins Too!
Your website is built with WordPress system itself, a theme and some plugins.
There is a high chance that WordPress itself is already translated into your language. So, you don't have to translate it on your own. You have also learned how to translate the theme above. But what about plugins and their texts?
If you are lucky, your plugin contains your language translations already and you don't have to do anything. But if you need to translate a plugin, the best advice is to check the plugin's documentation for the best approach.
Alternatively you can also use Loco Translate plugin (again) to translate your plugins directly in your WordPress admin area.
Share Your Translation
If you would like to help out translating the theme, please contribute your translations at WebMan Design support forum by submitting a ZIP package of your .po and .mo translation files in a new support ticket attachment. Thank you!
Why do you need to use plugins when you expected the theme to have all the functionality in it? Well, according to WordPress guidelines and generally the best practice: themes are meant for presentational purpose only, while plugins provide website functionality.
The reason for this is that when you decide to update your website looks you simply change a theme without loosing your website content and additional functionality such as eCommerce or portfolio.
This theme follows this WordPress philosophy and you can rest assured your site is as future-proof as possible. No lock-in effect with WebMan Design themes!
Info:Compatibility
The theme does not need any plugin to work properly. It is coded responsibly and flexibly enough so it should be compatible with any decently coded 3rd party plugin.
However, please understand there are thousands of plugins available for WordPress and it is not humanly possible to test them all. Feel free to use your plugin and in case of an issue contact support for help.
Theme provides code and/or design integration for certain plugins. You will find these plugins in recommendations list below. They provide additional functionality for your website or improve your and your visitor's experience.
Please note that these are only recommended, suggested plugins, they are not required for the theme to work. Always read the plugin description before installing a plugin and install only those plugins you will use on your website.
Plugins recommendation page example: Recommended, not required
Illustrative image. May not represent this actual theme.
Warning:Demo content required plugins
List of plugins the theme recommends may differ from plugins that are required when installing demo content. Check the demo content information for more details.
Here is a list of plugins that were successfully tested with the theme and the theme even provides additional integration layer for them:
By purchasing premium Beaver Builder products via our link we receive a share of your purchase. That way you can support WebMan Design for free! Thank you!
Restores the previous WordPress widgets settings screens. Sidebars and widgets are not going to be used in fully block themes in the future, so if your website still uses sidebars, it is better to use this plugin to enable classic user interface.
Jetpack plugin contains a lot of useful tools and functionality for your website. Among others, there are portfolio and testimonials management, extra editor blocks, social network sharing functionality, content delivery network to speed up your website, site verification functionality, and others.
For more info about the plugin features and functionality please visit the plugin website and documentation.
(Please note that you will need to connect your Jetpack powered website with your WordPress.com user account so the plugin can provide all its functionality.)
Add custom fields, content types (custom post types) and taxonomies to your website. With paid version of the plugin you can also create custom blocks.
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):
Selecting custom predefined CSS class easily in Beaver Builder page builder
Illustrative image. May not represent this actual theme.
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.
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).
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.
Having a performant website is a must. It makes your website more SEO friendly and most importantly pleasing for your visitors, more accessible. This theme was coded with performance in mind but we can always take things even further:
Use a good host
A good hosting for your website is very important choice you can make towards a speedy website. Depending on your location it is also advised to use a host that has servers in your country or at least on the same continent.
You should always keep the file size of your website media as low as possible. Prepare images before you upload them to your website: compress them, reduce their dimensions, maybe even crop them. Use plugins to optimize further more.
In case of video and audio files set the optimal compression and formats before uploading them to your site. Consider also using services such as Vimeo, YouTube or SoundCloud to host your files off your servers.
But you will get better results using a dedicated solutions such as WP Rocket or WP Super Cache or SiteGround Optimizer. Or maybe your hosting provider applies some sort of caching already? Check with them.
Warning:Minify & combine
Your caching solution may provide CSS and JS files minification and combination. Be cautious though: these are complex processes which may cause errors on your website. Test thoroughly!
Tip:Measure performance
For measuring your website performance and tips on how to improve it use services such as GTmetrix, Pingdom Tools and WebPageTest.
If you need to make coding changes to the theme or WordPress itself, use child theming functionality, or even more flexible"child theme" plugin solution.
This way you can update the parent (original) Mustang theme without worrying about your custom code getting overwritten and lost. Your code is kept safe in your child theme/plugin.
For more flexible approach that works with any type of theme (classic or FSE block theme), or for cases when you can't use a child theme, we have created a free "Child Theme" Plugin for you.
Info:Is using a "child theme" plugin better?
Using "child theme" plugin is mostly beneficial when you use a block theme (full site editing theme) for some time already and then you decide you need to modify something with code.
If you plan to provide means for future code modifications right from the start use a child theme, even with a block parent theme.
More technical details
Full site editing block theme compatibility with WordPress child themes concept is limited. This is due to Site Editor user-modifications being stored in WordPress database. It causes issues when you decide to use a child theme afterwards, because all of these database records are bound to a specific (parent) theme name.
Copying modified Site Editor options and layouts so they work with a child theme is more complicated process. Though, this complication is solved elegantly using a "child theme" plugin.
The plugin works the same way as classic child theme would - you can use it anytime, even after you've already made custom changes in Site Editor, and it involves less code in comparison to a child theme.
A downside of the plugin may be overriding parent theme templates with code:
With WebMan Design themes this should not be an issue as they are very flexible and contain useful action and filter hooks you can use instead.
Download a free child theme or plugin from WebMan Design GitHub repository. Don't forget to check the information in the repository for how to set them up.
Tip:Theme from Envato Market?
If you've obtained the theme from Envato Market, there is a high chance that a dedicated child theme is already included in the package you've downloaded from the marketplace.
Check out your files. Or download a sample child theme from the aforementioned repository.
The theme provides multiple useful action and filter hooks, which can alter its functionality. Check the theme's source code for hook references: simply search for do_action and/or apply_filters. Or contact support for help.
Mustang theme uses Theme Hook Alliance (THA) hooks too. This is useful to rebuild theme structure or add your custom sections anywhere.
