Installing and Securing WordPress

Installing WordPress

If you need help installing WordPress, follow the instructions on http://codex.wordpress.org/Installing_WordPress.

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 installation.
  • Keep your WordPress installation up to date.

For additional security steps, tips and settings check Security section of theme's admin panel.

Installing, Updating JazzMaster Theme

Installing JazzMaster theme

To install JazzMaster WordPress theme please follow these steps:

  1. Download a theme package file from ThemeForest. Unzipp the package file on your computer - theme package folder will be created.
  2. In WordPress admin navigate to Appearance » Themes » Install Themes » Upload and select the zipped theme file inside install subfolder of the previously unzipped theme package folder.
  3. Now press [Install Now] button and wait until theme is uploaded and installed.
  4. Once installation is done, activate the theme in Appearance » Themes.
  5. Quickstart guide will appear to guide you through basic theme settings.

Updating JazzMaster theme

To update the theme, login to ThemeForest, head over to your downloads section and re-download the theme like you did when you bought it.

To install the new updated theme unzipp the downloaded zipped theme package file on your computer. Open the theme package folder and head over to install subfolder where you will find a theme installation ZIP file.

Now use one of these options to update the theme:

  • Easier, but might take longer time:
    Unzip the theme installation ZIP file on your computer. Upload the unzipped theme folder using FTP client to your server (into YOUR_WORDPRESS_INSTALLATION/wp-content/themes/) overwriting all the current theme files.

    Note: If you didn't make any changes to the theme files, you are free to overwrite files with the new ones without the risk of loosing theme settings, pages, posts, etc, and backwards compatibility is guaranteed. In case you have made changes to the theme files, make sure you have a backup copy of your changes before you overwrite theme files.
  • More advanced:
    Upload the theme installation ZIP file using FTP client to your server (into YOUR_WORDPRESS_INSTALLATION/wp-content/themes/). Using your FTP client, rename the old theme folder (for example from jazzmaster to jazzmaster-old). When the old theme folder is renamed, unzip the theme installation zip file on the server. After checking if the theme works fine, delete the renamed old theme folder from server (or keep it as a backup, but it will unnecessary take space on your server...).

Envato WordPress Toolkit - automatic theme update

The theme supports automatic updates via Envato WordPress Toolkit plugin and offers the plugin for installation immediately after the theme is activated (or you can find it in plugins folder inside the package you've downloaded from ThemeForest). To use the plugin you will need a ThemeForest API key. The plugin will then check for all your purchased WordPress items updates and offer you an automatic update installation (it is possible to backup your old theme version too, so you won't loose your custom changes of theme source files).

Please read more on how to use the plugin in Envato WordPress Toolkit – A ThemeForest Auto-Updater.
Please note that for WordPress network installation (multisite), the plugin admin menu can be found on network admin screen.

Installing Theme Demo Content

  1. Open demo-content folder inside the theme package folder downloaded from ThemeForest and unzipped in your computer.
  2. In WordPress admin navigate to Appearance » Options Export/Import. Open and copy the content of webman-admin-panel.txt file and paste it into "Import" field. Save the settings.
    Note: if the admin panel is not de-branded (should become gray), press the [Save changes] button in theme admin panel once again. This is due to local settings of branding images URLs.
  3. Make sure the permalinks structure is set to "Post name" (in Settings » Permalinks) - this is required for the right content displaying in some shortcodes.
  4. Then navigate to Tools » Import and choose the "WordPress" option. Note that you might need to install WordPress Import plugin (WordPress will offer you this option immediately).
  5. For "Choose a file from your computer:" field select a democontent.jazzmaster.xml file and press [Upload file and import] button to start the import procedure.
  6. For import settings choose the author, under whom the content is imported and check to download attachments (images in this case). Press [Submit] button.
  7. Set the "Homepage" page as your website's homepage (see the Homepage settings bellow).
  8. Now navigate to Appearance » Menus and select "Simple links" for Main navigation and Sitemap links select fields in Theme Locations section on the left. Press [Save] button.
  9. Finaly we need to set widget areas and widgets. Navigate to Appearance > Widgets and set the widgets according to widget area preview images in widgets subfolder.
    TIP
    You can install Widget Settings Importer/Exporter plugin that will help you set up widgets with ease. After the plugin is installed, go to Appearance » Widgets and remove all the widgets from all widget areas. Then import the demo widgets settings via the plugin using the demo-content/widgets/widgets-data-ALTERNATIVE.json file inside the package you've downloaded from ThemeForest.

Your demo website should be set now.

TIP
As a bonus, there is a revolution-slider.txt file available to set up a demo slider for Revolution Slider plugin. Please refer to slider's documentation (in documentation/revolution-slider-documentation subfolder of the theme package folder downloaded from Mojo Themes) for instructions on how to import the demo slider content.
Note that demo content contains sample images only (no video or audio files) and they will be downloaded from theme demo server during the installation process.
Please delete the content of "Custom CSS" textarea in Appearance » Theme Options » Design » Stylesheet once you install the demo content and no longer use the styled "Sections" home page. This code loads sections background images from WebMan demo server and can cause unnecessary traffic to the servers. It might also slow down your website. Thank you.

Installing Revolution Slider

Installing Slider Revolution plugin

  1. Navigate to Plugins » Add New.
  2. Click the Upload link below "Install Plugins" heading.
  3. Choose the revslider.zip file (found in plugins folder inside unzipped theme download package folder) to upload and press the [Install Now] button.
  4. Wait until the plugin is installed and then click the Activate Plugin to activate it.
  5. Once the plugin is activated a new "Revolution Slider" menu item is displayed at the bottom of WordPress admin area menu on the left. You can manage all Revolution sliders here (please refer to Revolution Slider documentation for more info). For the instructions on how to display certain Revolution slider on a page, follow the instructions in Set and Display Revolution Slider section of this User Manual.
For additional instructions on how to install WordPress plugins please refer to Managing Plugins article in WordPress Codex.
Revolution Slider documentation is included in the theme download package. Please check the documentation/revolution-slider-documentation folder inside your theme package folder.
You can find the instructions on how to create and add new slides to Revolution slider there.
IMPORTANT: 3rd party plugin licence keys

Please note that I can not reveal the licence keys I've purchased for the premium plugins included with this theme. All the plugins use developer licence, which allows me to use them on any number of single theme purchases.

Even though the plugin might ask you for the licence key, this is purely for automatic plugin update purposes. You do not need to insert any licence key number. All the plugins get frequently updated with the theme updates, so, just keep your theme up to date and you'll always get the latest plugins versions with the theme.

In case you still need the plugin licence key, you have to purchase a licence from the plugin developer.

Setting Up Homepage

Set up a WordPress Front Page (Homepage)

  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.

The theme doesn't contain any special "Homepage" page template. You can set any page as a homepage, however, probably the most suitable ones are those with these page templates assigned: Default Template, Blog, Portfolio, Sections and during the website building process also Under construction.

Page Templates

Assigning 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 settings metabox tabs changed to offer you only the options related to specific page template.
    Please note that since theme version 2.5 the new, improved page/post settings interface was introduced. You can find the "Page settings" section actually wrapped around the WordPress visual editor (the page settings tabs are located above the visual editor).

Page Excerpt and Page Settings Metaboxes Preview:

You can set several different page options for each page template. Options in Page settings metabox will be displayed specificaly for selected page template. You can also set Page Excerpt content which can be displayed on some page templates.

Page layout structure link will display schematic layout of website elements on selected page template.
Disable page templates
You can disable unnecessary page templates in theme admin panel. Just navigate to Appearance » Theme Options » General » Page templates and set appropriate options.
Available page templates:

Default page template Page layout and how can the template be used

As you can see in the scheme left, even a default WordPress page template can display a lot of information in JazzMaster theme.

You can set a page excerpt for this page.

In Page settings metabox you can set these options:

  • General tab
    You can tweak the page main heading area (the main title), disable several website elements, choose to display page attachments in a downloadable list (except attached images), set website header position, set layout and set a restricted access (Client Area functionality must be enabled).
  • Slider tab
    You can enable (choose) and set a slider that will be displayed on the page. Slider area can display single static image (page featured image), single video, animated slideshow (either from Slides custom post or images from page image gallery). You can even display a classic image gallery in slider area - this can be set on Gallery tab.
    Each animated slider can be tweaked or even disabled in theme admin panel. Navigate to Appearance » Theme Options » Sliders to set these options.
  • Gallery tab
    Set a page gallery options. Simply create a page gallery and select its images and action, what you want to do with them:
    • You can simply remove selected images from gallery included directly into page content (using [gallery /] shortcode - check the WordPress contextual help for more info on shortcode)
    • Remove images from gallery in content and create a new gallery at the bottom of the page
    • Simply create a gallery at the bottom of the page from selected images
    • Display seleted images in gallery in slider area
    To create a page image gallery you have to upload images directly via the [Add Media] button above visual editor on page edit screen. You don't have to insert all uploaded image into page content, simply upload images and press [Save all changes] button in media uploader - this will create a gallery. After the gallery is created, you will have to update or save the page for the images to be selectable on Gallery tab of "Page settings" metabox.
  • Sidebar tab
    You can set whether there will be a sidebar displayed on the page, which widget area will be used as sidebar and where the sidebar will be displayed.
    You can create as many widget areas as you want in theme admin panel. Just navigate to Appearance » Theme Options » Widget Areas and add some widget areas.
  • Background tab
    You can set a page background color and image here.

Blog page template Page layout and how can the template be used

Blog page template displays blog posts. You can also set page excerpt, slider and even page content that will be displayed above posts list.

You can set a page excerpt for this page.

In Page settings metabox you can set these options:

  • Blog tab
    You can set the number of posts displayed on the page (pagination will be displayed automatically) and select posts categories - you can either hide posts from selected categories or display posts from those selected categories only.
  • General tab
    You can tweak the page main heading area (the main title), disable several website elements, choose to display page attachments in a downloadable list (except attached images), set website header position, set layout and set a restricted access (Client Area functionality must be enabled).
  • Slider tab
    You can enable (choose) and set a slider that will be displayed on the page. Slider area can display single static image (page featured image), single video, animated slideshow (either from Slides custom post or images from page image gallery).
    Each animated slider can be tweaked or even disabled in theme admin panel. Navigate to Appearance » Theme Options » Sliders to set these options.
  • Sidebar tab
    You can set whether there will be a sidebar displayed on the page, which widget area will be used as sidebar and where the sidebar will be displayed.
    You can create as many widget areas as you want in theme admin panel. Just navigate to Appearance » Theme Options » Widget Areas and add some widget areas.
  • Background tab
    You can set a page background color and image here.

Landing page template Page layout and how can the template be used

Setting up a Custom Landing Page Menu:

Please note that "Landing page" page template is not suitable to use as your website's homepage. It is more a marketing tool to promote your product or service. Read more info about landing pages on Wikipedia.

Landing page template is usually used to display direct sales action and is a great marketing tool. You can achieve a lot with great design and layout of landing page and JazzMaster offers a great flexibility in this matter.

As you can see from the scheme left, Landing page template doesn't display top bar and breadcrumbs and all other website elements can be customized (you can even change a layout - boxed or fullwidth).

For each Landing page template there will be a new menu location created in Appearance » Menus . This will allow you to set a custom menu for each Landing page individually or disable the menu on such page altogether.

You can set a page excerpt for this page.

In Page settings metabox you can set these options:

  • Landing page tab
    You can tweak the page main heading area (the main title), set a different website header text, choose or disable widget areas for Above Footer Widgets and both Footer Widgets rows. If required, credits text in the website footer can be changed too. You can even set a custom tracking code (like Google Analytics) specially for this page template and even change the website layout (boxed or fullwidth).
  • General tab
    You can tweak the page main heading area (the main title), set website header position, set layout.
  • Slider tab
    You can enable (choose) and set a slider that will be displayed on the page. Slider area can display single static image (page featured image), single video, animated slideshow (either from Slides custom post or images from page image gallery).
    Each animated slider can be tweaked or even disabled in theme admin panel. Navigate to Appearance » Theme Options » Sliders to set these options.
  • Sidebar tab
    You can set whether there will be a sidebar displayed on the page, which widget area will be used as sidebar and where the sidebar will be displayed.
    You can create as many widget areas as you want in theme admin panel. Just navigate to Appearance » Theme Options » Widget Areas and add some widget areas.
  • Background tab
    You can set the page background color and image here.

Map page template Page layout and how can the template be used

Map page template is suited best for contact pages where you need to display big map. Map will be displayed in slider area

The actual page content will be displayed below the map. If you need to display a contact form on your newly created contact page with Map page template set, use a plugin such as Contact Form 7, for example.

You can set a page excerpt for this page.

In Page settings metabox you can set these options:

  • Map tab
    You can set height of the map (the width can not be set as the map will stretch the whole website box width), zoom, info bubble text and map location. To set the location please use GPS coordinates of the place (i.e. latitude, longitude - separate them with a comma, such as "40.78414, -73.96614").
    You can click the link to external website where you can find the coordinates of the place. The link can be found in Page Settings metabox on Map tab.
  • General tab
    You can tweak the page main heading area (the main title), disable several website elements, choose to display page attachments in a downloadable list (except attached images), set website header position, set layout and set a restricted access (Client Area functionality must be enabled).
  • Sidebar tab
    You can set whether there will be a sidebar displayed on the page, which widget area will be used as sidebar and where the sidebar will be displayed.
    You can create as many widget areas as you want in theme admin panel. Just navigate to Appearance » Theme Options » Widget Areas and add some widget areas.
  • Background tab
    You can set the page background color and image here.

Portfolio page template Page layout and how can the template be used

Portfolio page template displays a list of Projects custom posts. You can choose from 4 different projects list layouts (2 - 6 columns) and set several projects list options.

The actual page content will be displayed above projects list.

You can set a page excerpt for this page.

In Page settings metabox you can set these options:

  • Portfolio tab
    You can tweak portfolio projects list settings here. If you set a projects main category and enable filter, the filter will be created from the specific main category subcategories. Otherwise, when all projects (regardless project category) are displayed and filter is enabled, filter will be created from all projects categories (main and sub-categories).
  • General tab
    You can tweak the page main heading area (the main title), disable several website elements, choose to display page attachments in a downloadable list (except attached images), set website header position, set layout and set a restricted access (Client Area functionality must be enabled).
  • Slider tab
    You can enable (choose) and set a slider that will be displayed on the page. Slider area can display single static image (page featured image), single video, animated slideshow (either from Slides custom post or images from page image gallery).
    Each animated slider can be tweaked or even disabled in theme admin panel. Navigate to Appearance » Theme Options » Sliders to set these options.
  • Sidebar tab
    You can set whether there will be a sidebar displayed on the page, which widget area will be used as sidebar and where the sidebar will be displayed.
    You can create as many widget areas as you want in theme admin panel. Just navigate to Appearance » Theme Options » Widget Areas and add some widget areas.
  • Background tab
    You can set the page background color and image here.

Redirect page template How can the template be used

Redirect page template will only redirect to specific URL. You can either set custom URL or redirect to other page. Redirect page template can be used for example on a parent page without any content, which you need to redirect to the first child page.

In Page settings metabox you can set these options:

  • Redirect tab
    There are not much settings for Redirect page template. Just set the custom URL link, or choose other page of your WordPress website and set the redirect status (temporary or permanent redirect).

Sections page template Page layout and how can the template be used

Sections page template is one of the perfect candidates for home page layout. The content of this page can be split into vertical sections that can be styled afterwards (using custom CSS).

You need to wrap each section content in [section class="CUSTOM_CSS_CLASS"] CONTENT [/section] shortcode. (The "class" parameter of the shortcode is optional, but helps when applying custom CSS styles on the section.)
The page is fullwidth with no sidebar and the [section] shortcode can be used on this page template only as otherwise it could break the website layout and design.

You can set a page excerpt for this page.

In Page settings metabox you can set these options:

  • General tab
    You can tweak the page main heading area (the main title), disable several website elements, choose to display page attachments in a downloadable list (except attached images), set website header position, set layout and set a restricted access (Client Area functionality must be enabled).
  • Slider tab
    You can enable (choose) and set a slider that will be displayed on the page. Slider area can display single static image (page featured image), single video, animated slideshow (either from Slides custom post or images from page image gallery).
    Each animated slider can be tweaked or even disabled in theme admin panel. Navigate to Appearance » Theme Options » Sliders to set these options.
  • Background tab
    You can set a page background color and image here.

Sitemap page template Page layout and how can the template be used

Sitemap page can be used either as a website sitemap or as archives page (or both in one page ;) ). Sitemap page template is fullwidth so you can not set a sidebar for it. It will display most recent posts, most recent projects, custom menu, list of blog categories and monthly archives.

Notice, there is no pages list. This is replaced with custom menu (you can set it in Appearance » Menus) as you will have much greater control over such list of links.

The actual page content will be displayed above all sitemap links lists.

In Page settings metabox you can set these options:

  • General tab
    You can tweak the page main heading area (the main title), disable several website elements, choose to display page attachments in a downloadable list (except attached images), set website header position, set layout and set a restricted access (Client Area functionality must be enabled).
  • Slider tab
    You can enable (choose) and set a slider that will be displayed on the page. Slider area can display single static image (page featured image), single video, animated slideshow (either from Slides custom post or images from page image gallery).
    Each animated slider can be tweaked or even disabled in theme admin panel. Navigate to Appearance » Theme Options » Sliders to set these options.
  • Background tab
    You can set the page background color and image here.

Under Construction page template Page layout and how can the template be used

Under Construction page can be set as homepage while you are creating your website content. Your visitors will see only this page template while you can still check your pages and posts online (as only you will know the URL to those pages - there is no menu in Under Construction page template).

You can not set a sidebar for this page as its layout spreads full width of the website container. However, like on Landing page template, you can set whether to use boxed or fullwidth layout.

You can set a page excerpt for this page.

In Page settings metabox you can set these options:

  • Under construction tab
    You can set date and time when your website is due to go live. This setting will be used to display countdown timer on Under Construction page template. You can set a custom website header text for this template, set custom credits text and even choose a widget area that will be displayed below countdown timer (you can, for example, place a newsletter signup form widget into such widget area).
  • Slider tab
    You can enable (choose) and set a slider that will be displayed on the page. Slider area can display single static image (page featured image), single video, animated slideshow (either from Slides custom post or images from page image gallery).
    Each animated slider can be tweaked or even disabled in theme admin panel. Navigate to Appearance » Theme Options » Sliders to set these options.
  • Background tab
    You can set the page background color and image here.

Posts

Setting up a Post Format

  1. On post edit screen choose one of predefined post formats in Format metabox on the right.
  2. Once you set the post format, notice how Post settings options changed to offer you additional options for selected post format.

Post excerpt will be displayed in posts list (does not apply for Link, Quote and Status post formats). If no excerpt set, a portion of post content will take its place in posts list. 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" inside a 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.

The theme supports several post formats. Please read below for more details on each supported post format.

Disable post formats
You can disable unnecessary post formats in theme admin panel. Just navigate to Appearance » Theme Options » Blog » Post formats and set appropriate options.
Supported post formats:

Posts Settings metabox

General tab

You can tweak the post main heading area (the main title, subtitle), disable several website and post content elements and choose to display post attachments in a downloadable list (except attached images).


Sidebar tab

You can set whether there will be a sidebar displayed on the post, which widget area will be used as sidebar and where the sidebar will be displayed.

You can create as many widget areas as you want in theme admin panel. Just navigate to Appearance » Theme Options » Widget Areas and add some widget areas.

Background tab

You can set the post background color and image here.

Gallery tab

Set a post gallery options. Simply create a post gallery and select its images and action that you want to execute on those:

  • You can simply remove selected images from gallery included directly in post content (using [gallery /] shortcode - check the WordPress contextual help for more info on shortcode)
  • Remove images from gallery in content and create a new gallery at the bottom of the post
  • Simply create a gallery at the bottom of the post from selected images
  • Display seleted images in gallery in slider area
To create a post image gallery you have to upload images directly via the [Add Media] button above visual editor on post edit screen. You don't have to insert all uploaded image into post content, simply upload images and press [Save all changes] button in media uploader - this will create a gallery. After a gallery is created, you will have to update or save the post for the images to be selectable on Gallery tab of "Post settings" metabox.

Standard post How to use it?

This is basic standard blog post layout. It is recommended to set a featured image for this post format.

Featured image will be displayed in posts list alongside with post excerpt.

Special post settings:
None

Audio post How to use it?

Displays audio player to play the predefined audio file (self-hosted only, MP3 and OGG formats required). Could be used for Podcasting. You can place audio description into post content. Featured image will be used as artwork or album cover art. It is recommended to set a featured image for this post format.

Audio player (and featured image, if set) will be displayed in posts list alongside with post excerpt.

Special post settings:

  • MP3 file URL address
  • OGG file URL address

A gallery of images can be displayed in slideshow on this post format. It is recommended to set a featured image for this post format.

Image slideshow created from post image gallery will be displayed in posts list alongside with post excerpt.

Special post settings:

  • Slideshow on single post page option

Displays useful URL link. Insert a link URL address into specially provided input field. You can place link description into post content area. Optionally you can set a featured image for this post format.

Featured image and link URL will be displayed in posts list alongside with post excerpt.

Special post settings:

  • Link URL
  • Option to open the link in new browser window / tab

Quote post How to use it?

A quotation. Please place the actual quote directly into post content (use just simple stylings, do not use blockquotes as those will be applied automatically).

Quote with quoted author name will be displayed in posts list without any featured image, post excerpt or post title.

Note that this post format will populate the [testimonials /] shortcode - check the WordPress contextual help for more info on shortcode. If the post is used for testimonials, you can set a featured image and it will be used as a photo of quoted person.

You should also assign all the quote posts used as testimonials to a special category and if you need to hide them on your website's blog page, just exclude the category from displaying on a blog page.

Or, make all these posts "private" (in "Publish" metabox on post edit screen). Such posts should be normally displayed to post author only, but [testimonials /] shortcode is able to display them also for other website visitors while still keeping these posts hidden on blog page. You will need to set up a private parameter for the shortcode to 1 like so: [testimonials private="1" /].

Special post settings:

  • Quoted author name

Status post How to use it?

A short status update, similar to a Twitter status update. Place the actual status text directly into post content. Status posts can be displayed in various areas of the website (as shortcode or special custom widget).

Status text will be displayed in posts list without any featured image, post excerpt or post title.

Note that this post format will populate the [status /] shortcode - check the WordPress contextual help for more info on shortcode.

Special post settings:
None

Video post How to use it?

Displays video player to play the predefined video file (either video from external websites such as YouTube, Vimeo or Screenr or self-hosted video - MP4 and OGV formats required for self-hosted videos). You can place video description into post content. Featured image will be used as video preview image for self-hosted videos.

Video player will be displayed in posts list alongside with post excerpt.

Special post settings:

  • Video URL address (YouTube, Vimeo, Screenr or self-hosted MP4 video URL)
  • OGV video URL address if self-hosted option checked

Additional Content Types

JazzMaster theme comes packed with useful custom content types (custom post types). You can use default predefined Content Modules and Slides custom posts alongside optional FAQ, Logos, Prices, Projects and Staff custom posts.

Note
You can disable/enable or change privilegues for custom post types in theme admin panel in Appearance » Theme Options » General » Custom posts.

It is possible to set the same privilegues as WordPress Pages have or as Posts have (check the WordPress codex on how this privilegues/capabilities affect different user groups).

Content Modules What are they and how to use them?

Creating an Icon Module

  1. Navigate to Content Modules » Add new module to create a new Content Module.
  2. Set the module title and content. Additionally, you can assign a tag for the Content Module . Tags can be used in [content_module /] shortcode to randomly display a module from certain tag group - check the WordPress contextual help for more info on shotcodes or navigate to Content Modules » Tags for basic shortcode tag.
  3. Scroll down to "Content Module settings metabox and set "Icon box" checkbox. Additionally you can tweak the icon settings options revealed. (If required, you can also set a custom module link .)
  4. Set your custom icon as a featured image.
  5. Publish the Content Module. Now you can use [content_module /] shortcode to place the module anywhere on the website (or use dedicated JazzMaster Content Module widget in widget areas).

Content Modules can be used as a content injection to various website areas. You can display it in a page or post content or in any widget area (custom widget included). Content Modules can be styled as icon boxes, so they are perfect for your services presentation (for example). You can even conveniently group them using tags and then have a module generated randomly just by choosing the Content Module tag group.

Display it on website:

Use [content_module /] shortcode to display specific Content Module (or to randomize it from specific tag group) on the page/post. Please check the WordPress contextual help for more info on shortcode.

Or use JazzMaster Content Module widget to display any module in any widget area.

Content Module types:

"Content module"
This is the default layout of Content Modules. When featured image set for the Content Module, it will be displayed first, then the module title and then the content. You can surely hide the image and the title.

"Icon box"
If Icon box option is selected, you can upload your own icon as a Content Module featured image (several icon packs are packed with the theme). Icon boxes can be displayed in 2 layouts: normal one will display an icon on the left (24×24 px size) and title and content on the right, while centered layout displays icon (64×64 px size) on the top and title and content below, all text and icon centered.

Change privilegues
You can change privilegues for this custom post type in theme admin panel in Appearance » Theme Options » General » Custom posts.

It is possible to set the same privilegues as WordPress Pages have or as Posts have (check the WordPress codex on how this privilegues/capabilities affect different user groups).
This custom post can not be disabled.

FAQ - Frequently Asked Questions What are they and how to use them?

Adding a New FAQ (Question + Answer)

  1. Navigate to FAQ » Add new answer to create a new FAQ.
  2. Type the question inside the post title area and the answer inside post content.
  3. Choose existing or assign a new FAQ category.
  4. Publish the FAQ. You can then use [faq /] shortcode to display FAQ list on the page/post - please check the WordPress contextual help for more info on shortcode. Or go directly to FAQ » FAQ categories and grab a shortcode to display FAQ from specific category.

The theme offers a handy FAQ (Frequently Asked Questions) management where you can easily add and edit questions (answers, actually ;) ) just like posts. FAQ can be grouped into categories that will be used to filter through them or to organize them.

Display it on website:

Use [faq /] shortcode to display FAQ list on the page/post. You can display FAQ even in filterable list. Please check the WordPress contextual help for more info on shortcode.

Disable this custom post type
You can disable or change privilegues for this custom post type in theme admin panel in Appearance » Theme Options » General » Custom posts.

It is possible to set the same privilegues as WordPress Pages have or as Posts have (check the WordPress codex on how this privilegues/capabilities affect different user groups).

Logos What are they and how to use them?

Adding a New Client/Partner Logo

  1. Navigate to Logos » Add new to create a new logo.
  2. Type the client/partner/company name into the title area.
  3. Upload a logo image (make sure all the logo images - at least in the same category - are the same dimensions as this will make sure they will be displayed nicely in logo list) and set a custom URL link if required.
  4. Set the optional logo category.
  5. Publish the logo. You can then use [logos /] shortcode to display logos list on the page/post - please check the WordPress contextual help for more info on shortcode. Or go directly to Logos » Categories and grab a shortcode to display logos from specific category.

Logos custom post can be used to easily manage logos of your clients or partners.

They can be grouped into categories, so you can create a separate category for clients and separate category for partners and then display them on the website individually.

Display it on website:

Use [logos /] shortcode to display logos list on the page/post. You can display even a short description left or right from logos list. Please check the WordPress contextual help for more info on shortcode.

Disable this custom post type
You can disable or change privilegues for this custom post type in theme admin panel in Appearance » Theme Options » General » Custom posts.

It is possible to set the same privilegues as WordPress Pages have or as Posts have (check the WordPress codex on how this privilegues/capabilities affect different user groups).

Prices What are they and how to use them?

Adding a New Price Column/Package

  1. Navigate to Prices » Add new price to create a new price column.
  2. Type the price column (package) title into the title area. Add a price package features into unordered list in the post content. You can use [yes /] and [no /] shortcodes to add a check or cross icon to the feature (check the WordPress contextual help for more info on shortcodes).
  3. Scroll down to "Price settings" metabox and set appropriate options:
    • Price set up tab
      Here you can set the price cost (including the currency sign) and note text displayed below the price cost.
    • Button set up tab
      You can set a button text, link and color here.
    • Styling tab
      You can choose the styling of this price column in the pricing table - whether it is a standard price column, featured price column or pricing table legend. Additionally you can set a custom column background color here.
  4. Assign a price to a price table.
  5. Publish the price. You can then use [prices /] shortcode to display pricing table on the page/post - please check the WordPress contextual help for more info on shortcode. Or go directly to Prices » Tables and grab a shortcode there.

Prices are used to create a pricing tables. Each price post is basically a price package - a column - in a pricing table.

Display it on website:

Use [prices /] shortcode to display pricing table on the page/post. Please check the WordPress contextual help for more info on shortcode.

Disable this custom post type
You can disable or change privilegues for this custom post type in theme admin panel in Appearance » Theme Options » General » Custom posts.

It is possible to set the same privilegues as WordPress Pages have or as Posts have (check the WordPress codex on how this privilegues/capabilities affect different user groups).

Projects What are they and how to use them?

Adding a New Project

  1. Navigate to Projects » Add new project to create a new project.
  2. Type in the project title and set the excerpt text. Optionally you can set the post content (check the "General and layout" tab of "Project settings" metabox for info about project layout).
  3. Set the featured image. The image is required as it will be used as project preview image in projects list on portfolio pages.
  4. Scroll down to "Project settings" metabox and set appropriate options:
    • Media tab
      Here you can set project main media, like images, video and audio. First set preffered Project media type option as other settings will be revealed according to this selection.
    • Attributes tab
      You can set a project attributes here (any number of attributes, you can even create a predefined group of attribute names in theme admin panel in Appearance » Theme Options » General » Custom posts) and custom project URL link. If you check the Apply link directly on project in portfolio list option, when visitor clicks the project in projects list, it will take him directly to this URL link. You can display project attributes with [project_attributes /] shortcode (check the WordPress contextual help for more info on shortcode) anywhere in project excerpt or content - by default they are displayed on top of project excerpt.
    • Background tab
      You can set a custom background color and image for this project page.
    • Sidebar tab
      Choose a widget area and position of the sidebar on the project page. By default, project page is displayed in fullwidth without any sidebar.
    • General and layout tab
      You can set a project page layout here (basically, each project can have a different layout if you want), set a project title (and subtitle) and optionally disable related projects list and sharing buttons for this project.
  5. Optionally assign a project to a project category. Project categories will be used to filter through the projects or to display multiple portfolios.
  6. Publish the project. Set up a Portfolio page template to display a list of projects on the page or use a [projects /] shortcode to display the projects list anywhere on the website - please check the WordPress contextual help for more info on shortcode.

Projects custom post can be used to showcase your work. You can add single image, image slideshow, audio or video projects.

If you don't need certain project types, just navigate to Appearance » Theme Options » General » Custom posts » "Projects (portfolio)" and disable unnecessary ones. You can even set a default project layout here and predefine constantly used attribute names.

Display it on website:

Use Portfolio page template to display a list of projects on the page.

Or use [projects /] shortcode to display projects list anywhere on the website (even with filter and short description left or right from the projects list). Please check the WordPress contextual help for more info on shortcode.

There is also dedicated custom JazzMaster Projects widget to display projects list easily in widget areas.

Disable this custom post type
You can disable or change privilegues for this custom post type in theme admin panel in Appearance » Theme Options » General » Custom posts.

It is possible to set the same privilegues as WordPress Pages have or as Posts have (check the WordPress codex on how this privilegues/capabilities affect different user groups).

Slides What are they and how to use them?

Adding new Slides

Size of images in slider
Slider usually displays full size images but this depends on slider type chosen (you can get more information about slider types in theme admin panel in Appearance » Theme Options » Sliders). The theme allows for 2 main content widths: 1160 and 930 pixels. Please make sure to upload image of one of these widths for the slide if you want to match slide width to main website content width (navigate to Appearance » Theme Options » Layout to set the main website width and layout). Slide background will be stretched full website box width.
  1. Navigate to Slides » Add new slide to create a new slide for slider.
  2. Type in slide title (will not be displayed on the slide) and enter slide caption text into content area.
  3. Set featured image. The image is required as it will be used as main slide image.
  4. Scroll down to "Slide settings" metabox and set appropriate options:
    • Slide settings tab
      Here you can set a slide custom URL link (will be applied on the slide image).
    • Caption tab
      You can set a slide caption layout, background color (affects also caption text color) and opacity of caption background.
    • Background tab
      Here you can set the background color and image applied on the whole slider when this slide is dislayed. So it will become not just the background of the actual slide, but the background of the entire slider container.
  5. For better organization, group slides into Slide groups. You will be able to select a specific group to be displayed in slider on a page.
  6. Publish the slide.

Displaying Slider on Page

Size of images in slider
Slider usually displays full size images but this depends on slider type chosen (you can get more information about slider types in theme admin panel in Appearance » Theme Options » Sliders). The theme allows for 2 main content widths: 1160 and 930 pixels. Please make sure to upload image of one of these widths for the slide if you want to match slide width to main website content width (navigate to Appearance » Theme Options » Layout to set the main website width and layout). Slide background will be stretched full website box width.
  1. On page edit screen click the "Slider" tab of "Page settings" metabox.
  2. Choose a slider type from dropdown.
  3. Each slider type has different settings options. Please configure these. If you are displaying a video in slider area, you can also set a page featured image that will be used as video cover image (once the image is clicked, video will be played back).
  4. For certain slider types you will be able to select a slider content (whether you want Slides custom post or page gallery images to be displayed in slider).
    How to set up image caption when displaying gallery images in slider?
    1. Open the image where you want to apply the caption for editing (either clicking the [Add Media] button above the visual editor on page edit screen - see the illustration above - or go directly to Media section of WordPress admin).
    2. Optionally set the image Caption that will be used as slide caption title.
    3. Set the image Description text that will be displayed in slide caption. You can use HTML tags here.
    4. To set up a slide (image) link and slide caption layout and background color click the Slider [+] to reveal the options.
    5. After you set all required options, click the [Save all changes] button to apply settings for the image.
  5. If you are displaying Slides custom post in slider (like on illustration below), you can choose what slides group will be displayed.
  6. Once you publish / update the page, slider should appear.

Set and Display Revolution Slider

Please note that first you have to install the Slider Revolution plugin to be able to use and display the slider on your website.
Revolution Slider documentation is included in the theme download package. Please check the documentation/revolution-slider-documentation folder inside your theme package folder.
You can find the instructions on how to create and add new slides to Revolution slider here.
  1. To create a new Revolution slider please refer to "Slider", "Slides" and "Slide & Creative Layers" sections of the Revolution slider documentation found in documentation/revolution-slider-documentation folder of the theme package folder unzipped on your computer.
  2. After you create a Revolution slider, copy the slider shortcode (refer to "Include in your WP" section of the Revolution slider documentation).
  3. Open a page where you want the slider to appear for editing and scroll down until you see the "Page settings" metabox. Click the "Slider" tab here.
  4. Choose a "Custom slider" option from "Enable slider" dropdown. New options fields will be revealed.
  5. Insert Revolution slider shortcode copied in step 2 into "Custom slider shortcode" field. You can set additional options if required.
  6. Hit the [Publish] button (or save/update button) to publish the page. The Revolution slider will now be displayed in main slider area of the page.

JazzMaster allows you to populate page sliders with page gallery images (you can display slide caption also for these) or with special custom posts called "Slides" which will give you greater flexibility than displaying page gallery images.

Display it on website:

Slides custom post can be displayed in a page slider. Please follow the instructions below to set up a page slider.

You can even display simple slideshow from Slides custom post using [slideshow /] shortcode - please check the WordPress contextual help for more info on shortcode.

The theme offers variety of different slider animation effects which can be set (and even disabled) in theme admin panel in Appearance » Theme Options » Sliders.
Change privilegues
You can change privilegues for this custom post type in theme admin panel in Appearance » Theme Options » General » Custom posts.

It is possible to set the same privilegues as WordPress Pages have or as Posts have (check the WordPress codex on how this privilegues/capabilities affect different user groups).
This custom post can not be disabled.

Staff What is it and how to use it?

Adding Staff Members

  1. Navigate to Staff » Add new member to add a new staff.
  2. Type in person's name in title area and add some description text into content.
  3. Set the featured image - staff profile photo.
  4. If rich staff member profiles enabled in Appearance » Theme Options » General » Custom posts » "Staff" each staff will have own staff info page and additional fields will be displayed to set : excerpt text will be displayed in staff list as a short staff description (you can omit this), there will be also SEO settings available and you will be able to set a sidebar for single staff page.
  5. Scroll down to "Staff info" metabox and set appropriate options:
    • Position tab
      You can set a staff member position here.
    • Contact tab
      These contact information will be displayed also in staff list. You can set a phone, e-mail, LinkedIn and Skype contact here.
    • Sidebar tab
      This tab will be available only when rich staff member profiles enabled. You can set a staff profile page sidebar widget area and its position here.
    • Background tab
      This tab will be available only when rich staff member profiles enabled. You can set a staff profile page background color and image here.
  6. You can group staff members in departments and then display specific department staff with description on the page or post.
  7. Hit the [Publish] button. You can then use [staff /] shortcode to display staff list on the page/post - please check the WordPress contextual help for more info on shortcode.

With staff custom post you can easily manage your company's staff info. By default only basic information about staff memebers is displayed (and all of this information is displayed in staff list) but you can enable rich staff members profiles in Appearance » Theme Options » General » Custom posts » "Staff" and create a custom staff profile pages.

Display it on website:

Use [staff /] shortcode to display staff members list anywhere on the website (even with short description left or right from the staff list). Please check the WordPress contextual help for more info on shortcode.

Disable this custom post type
You can disable or change privilegues for this custom post type in theme admin panel in Appearance » Theme Options » General » Custom posts.

It is possible to set the same privilegues as WordPress Pages have or as Posts have (check the WordPress codex on how this privilegues/capabilities affect different user groups).

JazzMaster 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 ones to show on the screen). You can specify a different navigation label for a menu item as well as other attributes. You can create multiple menus. To display menus on website you need to assign them to 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 only into predefined locations (see the image). The main predefined menu locations are:

  • Main navigation
    This is main navigation area in the header of the website. The menu can be nested and hierarchically organised. Subtle animation is applied when revealing submenu items, but the menu will work even with JavaScript disabled.
  • Sitemap links
    Instead of placing a list of pages into sitemap page, this offers a greater control over links. Most of the time you would display a main navigation menu here. Please note that menu title will be used as section title on sitemap page.

Besides these predefined menu locations there will be new ones created for each landing page. This will allow you to completly disable menu on specific landing pages (simply by not assigning any menu to the location) or to use different menu on such pages.

  1. To create a new custom menu, click on the [+] tab, give the menu a name, and click Create Menu.
  2. Next, add menu items from the boxes on the left. You’ll be able to edit the information for each menu item, and can drag and drop to put them in order. You can also drag a menu item a little to the right to make it a submenu - to create menus with hierarchy. Drop the item into its new nested placement when the dotted rectangle target shifts over, also a little to the right.
  3. When the menu item is on place, you can edit its label and properties. Just click the down arrow in right corner of the menu item to reveal available menu item properties.
    For better SEO it is recommended to set up a menu item Title Attribute which will be displayed when mouse hovers the item in menu. Also, JazzMaster theme supports menu item description. If the Description menu item attribute is not displayed, click the [Screen Options] tab at the upper right corner of the screen and check the attribute in Show advanced menu properties section.
  4. Don’t forget to click [Save Menu] when you’re finished.
For this functionality you will need to set the menu item CSS Classes attributes. To enable this attribute, check it in [Screen Options] tab at the upper right corner of the screen, in Show advanced menu properties section.
  1. To convert a menu item into a button you need to assign one of the button classes to it. Please check the contextual help (click the [Help] tab in the upper right corner of the screen) for all available CSS classes you can assign to a menu.
  2. Once the help is revealed, click the "Advanced Menus" tab on the left and read the instructions in How to make the menu item a button? section.
For this functionality you will need to set the menu item CSS Classes attributes. To enable this attribute, check it in [Screen Options] tab at the upper right corner of the screen, in Show advanced menu properties section.
  1. To add an icon to menu item you need to assign one of the icon classes to it. Please check the contextual help (click the [Help] tab in the upper right corner of the screen) for all available CSS classes you can assign to a menu.
  2. Once the help is revealed, click the "Advanced Menus" tab on the left and read the instructions in How to insert an icon into menu item? section.
    TIP

    All the icon classes are listed in a table in contextual help. If you are editing a long menu it could be quite time consuming and awkward to go to the top of the screen to copy the icon class from table and then scroll down to menu item to insert it.

    That's why the table can be pinned to the right edge of the browser window and it will slide out when you hover over it. Just click the Stick table right link - see the image. Note, that you will still need to leave contextual help open.

Widgets and Widget Areas

Widget Areas

Widget areas can be used as sidebars, displayed using [widgets /] shortcode (check the WordPress contextual help for more info on shortcode) or displayed in predefined website areas, such as footer.

You can open the widget area just by clicking the arrow right from its title. Assign widgets to the area just by dragging them into open widget area below its description text. When no widget is assigned to the widget area, it will not be displayed.

JazzMaster creates 6 predefined widget areas :

  • Default Sidebar
    This area is displayed as default sidebar.
  • Top Bar Widgets
    Area will be displayed horizontally and can take maximum of 2 widgets (most suitable are Custom Menu, Text or Search widget).
  • Above Footer Widgets
    Will display up to 5 widgets horizontally above the website footer. This area can be disabled per page basis.
  • Footer Widgets Row 1
    Website footer is separated into 2 widget rows which takes up to 5 widgets and lets you create amazing website footers.
  • Footer Widgets Row 2
    Another footer widget area.
  • Clients Area Access Denied
    This widget area will be available only if Client Area functionality is enabled and will be displayed on "Access denied" pages.
If the widget area is displayed horizontally, it will take up to 5 widgets that will be automatically layed out into columns.

In addition to predefined widget areas you can create as many custom widget areas as you need. Just navigate to theme admin panel - Appearance » Theme Options » Widget Areas.

Custom Widgets

The theme also comes with these custom widgets :

  • JazzMaster Contact
    Displays custom specially styled contact information (including opening hours).
  • JazzMaster Content Module
    Displays specific Content Module custom post (in normal or centered layout).
  • JazzMaster Posts
    Advanced posts list. Can display recent, random, popular or upcoming posts from selected categories or from all posts. Displays also post featured image (post type icon if no featured image set).
  • JazzMaster Projects
    Displays a list of random or recent projects (their featured images only).
  • JazzMaster Status
    Displays status posts (as list or in animation).
  • JazzMaster Submenu
    Displays submenu of subpages (of the current page). Can display also page parents or just children pages. You can select how to order the pages.
  • JazzMaster Twitter
    Displays tweets and description from specific Twitter account.

Twitter Widget Setup

Twitter (www.twitter.com) has changed its API and it is only possible to display tweets on your website 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.

Widgets and Widget Areas:

Styles and Shortcodes

Shortcodes and Shortcode Generator How to use it?

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 complicated to create. Some shortcodes can be replaced with Styles in this theme, but with shortcode you have greater flexibility as you can edit them easily any time in the future (although they might not look good in content editor unlike Styles).

WordPress offers couple of shortcodes natively and one of them is [gallery /] shortcode. This theme even enhaces this shortcode's functionality, but as WordPress styles it in visual editor, you will have to switch to HTML editor to edit it.

Shortcode Generator

With integrated Shortcode Generator it is very easy to choose, tweak and insert any shortcode into the post or page content. Simply click the [S] button in visual editor, select a shortcode from dropdown on top, tweak its settings and press the [Insert into editor] button to insert the shortcode at the current position of the cursor in content area.

As you can't use Shortcode Generator everywhere (visual editor has to be present on the page) there is a complete shortcodes documentation in WordPress contextual help, feel free to check it out.

Please note that Shortcode Generator doesn't support Internet Explorer browsers.

[Styles] button How to use it?

[Styles] button can be found (the same like Shortcode Generator button) in second row of buttons in WordPress visual editor (please note that you might need to click the [Show/Hide Kitchen Sink] button at the end of the first button row to display the second row of buttons). It is basically a dropdown button with several styles groups and actual styles.

When you click the style it will be applied on selected text in content area. Actually, you should check the little question mark icon () right from style name (or style group name) for information on how to apply the specific style on content element.

The biggest advantage styles have over shortcodes is that they create instant visual feedback and degrades gracefully when you change the theme and use some other that doesn't support the styles. This is caused by creating direct HTML elements in WordPress visual editor.

However, this might not be desirable for non-HTML savvy person as to edit a style in the future you would have to switch to HTML editor or you would have to remove all styles from the selected content element (click the [Remove formatting] button - the rubber button - right from [Styles] button) and apply different styles afterwards. This could be more time-consuming solution in comparison to shortcodes where you just edit parameters.

Another drawback for styles might be inability to replace all shortcodes, so for some functionality you will have to use a shortcode anyway.

As you can see, JazzMaster gives you these two powerful but different approaches to create a content.
To choose the right approach is up to you, but as usually, probably the best result is achieved by fusion of both techniques.

Theme Options How to use theme admin panel?

Using Theme Admin Panel



  1. All the theme options can be set in theme admin panel. To display it navigate to Appearance » Theme Options in WordPress admin menu.

  2. After admin panel is displayed, choose the main options category from the admin panel left pane and click the tab at the top to display subcategory options group.

    Panel contains many different but intuitive input fields. Please, read the option description for more information on each option and how to set it up .

    Some options have preset values. To recall a preset value for an option click the option reset button far right from the option name .

  3. After you set all the required options, don't forget to save your changes by clicking the [Save changes] button.

This theme comes with beautiful WebMan Admin Panel where you can find all the theme settings. It is as easy to use as it gets and offers several different intuitive options fields and input types which help to set the right option value.

When you install the theme, you will be presented with Quickstart Guide. Please read through the steps in this guide carefully and set what is required for your website. The guide is branded by WebMan, but don't worry, as soon as you hit the [Save changes] button for the first time, the admin panel will be debranded. You can actually set your branding to it and brand the WordPress administration and login screen (the actual website frontend branding is sure thing ;) ).

Many, if not all, theme options are self-explanatory or are described well directly in admi panel, but this User Manual will guide you through some basic settings for each options group separately.

The REQUIRED SETTINGS! label will note you about required theme options that need to be set after you install the theme.

Exporting / importing the theme settings
You can export and save your theme settings and later import them back in Appearance » Options Export/Import section. Please read the available options description for more info on how to export or import theme settings.

General theme options

  • Basics tab
    Here you can set up comments separately for pages and posts, set the search field placeholder text, disable theme contextual help texts (if not needed), disable theme updater script.
  • Images tab
    REQUIRED SETTINGS! Here you can set up different image formats used in different website elements. Please make sure not to use many different image formats as this will increase the time to process images during their uploading.
    The theme uses WordPress image resizing engine.
  • Custom posts tab
    REQUIRED SETTINGS! Please go through these settings to set privilegues for custom posts, disable, if you don't need them, and set other specifics related to the custom posts.
  • Page templates tab
    If you don't require certain templates, just disable them here (this functionality is available only since WordPress version 3.4).
  • Client area tab
    By default the Client Area is disabled. Please read carefully the information provided here about the Client Area functionality and how to use it.

Blog theme options

  • Basics tab
    Here you can set up default excerpt length (in words), disable post featured image on single post pages, disable displaying author biography on single post pages (author has to fill in the information in his/her user profile), and disable several different post meta info (like date, tags, categories, comments count, post format icon and post author name).
  • Post formats tab
    Disable unnecessary post formats here.

Branding theme options

  • Logo, favicon tab
    REQUIRED SETTINGS! Please, set your logo (and its padding), favicon and touch icons here.
  • Footer credits tab
    REQUIRED SETTINGS! Please, set the footer credits text here (like copyright). The text will be displayed at the very bottom of the website on the left side. Right from this text there will be a footer menu displayed.
  • Login screen tab
    Optionally, you can brand even a WordPress login screen. This is mostly required for larger companies. You can set a logo and completly customize colors and background images.
  • Admin tab
    REQUIRED SETTINGS!

    This tab offers interesting advanced options. You can brand WordPress administration to your needs. The custom logo will be displayed in place of Dashboard menu item (the admin dashboard is still present though). If you don't want this, simply untick the option.

    You can even set a WordPress admin footer area text and credits and brand the theme admin panel.

    If required, you can disable WordPress admin menu items like Posts (if you don't use blog), Media (although this is recommended to keep), Links (if you don't use them) and Comments (again, if you don't use them).

    Finally you can disable unnecessary WordPress admin dashboard screen widgets. All of them if you want. Note that JazzMaster comes with custom dashboard widget called "Quick Access" that you can completely customize! Just check out the appropriate setting.

Widget Areas theme options

  • Widget areas tab
    You can create unlimited number of custom widget areas here. Just press the [+] button and enter the area title. That's it.

Sliders theme options

  • Basics tab
    You can set the maximum number of slides to display in sliders (this will just set the maximum number as the actual number can be set per slider (page) basis).
  • Other tabs contains options and information on different jQuery sliders used by the theme.
Note that all of these sliders are JavaScript based. Graceful degradation is provided if your website visitor has JavaScript turned off. Also note that some sliders use CSS3 transition effects that are not supported on some older (and some cutting edge transitions even on some modern) web browsers.

Sharing and Feed theme options

  • Social sharing tab
    You can enable sharing buttons for posts and projects here. These can be disabled also per post or project basis.
  • Feed tab
    You can disable WordPress generated feed links here and/or set your custom ones. This is advanced functionality and requires some knowledge of HTML (to determine feed links types). All feed links will be added to HTML head.

Layout theme options

  • Basics tab
    You can set the main website layout here (fullwidth or boxed), set the website content width, disable/enable responsive design, set the sidebar width or globally disable related projects list on single project pages.
  • Header tab
    These settings tweak website header area. You can set the header position, navigation position, text that will be displayed right from logo and set its padding.
  • Breadcrumbs tab
    Set the position of breadcrumbs navigation (or disable it completely, although, this is not recommended from SEO perspective), enable/disable it on archive pages and error 404 page, set your main portfolio page used in breadcrumbs (REQUIRED SETTINGS! if you are using portfolio functionality of the theme) and tweak the search field displayed in breadcrumbs area.

Design theme options

  • Skin tab

    REQUIRED SETTINGS! Please set your preffered theme skin here and tweak its basic attributes (like link color, predefined colors - blue, gray, green, orange, red - used on several different elements like buttons, for example).

  • Colors tab

    If you are familiar with webdesign, you can check first the website layers layout sheme (link provided in information box on top of this tab) on how the website sections containers are layed out for better understanding of the theme design and code structure.

    As you can see from the options available on this tab, you can set pretty much all the aspects of website design here. Design is separated into groups according to website sections (like top bar, header, navigation, slider, content, footer, ...). Just click the [+] button next to section name and available options will be revealed.

    Options are separated into 3 subtabs for each section:

    • Colors (and layout) tab is where you can set background, text, link, border, icons and other colors simply by using color picker. Also (if mentioned in tab title) this section can contain some layout settings (like header height, sticky topbar, main heading default text alingment).
    • Image tab lets you set the custom background image for the section (the actual website background has 2 layers).
    • On Pattern tab you can choose from predefined background patterns (some are transparent, so you can also set a background color; again, the actual website background has 2 layers).
    Note that background patterns takes prime over background images. So if you have background image set and also a pattern is set for the website section, the pattern will be displayed. Please set the empty pattern (first pattern option) to display set background image.
  • Fonts tab

    Due to clever JazzMaster theme functionality you can set any custom fonts here (any custom fonts, not just Google WebFonts).

    Then just define font stacks (these are basically values for font-family: CSS rule), assign a font stack to basic font and headings and set the default font size.

  • Stylesheet tab

    Here you can type in your custom CSS rules (into Custom CSS textarea). All those CSS rules will be added to a single main theme CSS file. This is due to HTTP requests optimization - the website will load faster. However, make sure you know what you're doing with your CSS rules not to break the main CSS file (although these custom CSS rules are being outputed at the end of file - so they will have the highes weight).

    REQUIRED SETTINGS! Please make sure when your website goes live to check the Minimize CSS option. This will make the main theme CSS file smaller and so your website will load faster.

Why are your changes not applied on the website?

Please note, that CSS styles are being cached (the theme sets this to 2 days interval). If your changes are not being applied, clean the browser cache first and reload the website.

Or you can put WordPress into debug mode where the cache interval decreases to 30 seconds only.

SEO Search Engine Optimization options

JazzMaster theme is fully SEO optimized and gives you great flexibility also in this field.

REQUIRED SETTINGS! The bare minimum that is required to set in terms of SEO optimization for the theme is to set main website meta description and keywords in theme admin panel in Appearance » Theme Options » SEO settings » Basics. Afterwards the theme will determine these specifically for each page or post automatically, however, you can set the custom SEO values individually per post/page in "SEO settings" metabox - see the picture on the right. This metabox can be found in right pane on post/page edit screen.

As you can see, you don't even have to use specialized SEO plugin with this theme, but if you still preffer to use one, you can disable theme SEO metabox in Appearance » Theme Options » SEO settings » Basics.

In Appearance » Theme Options » SEO settings » Tracking you can set custom analytics tracking code (like Google Analytics for example).

Note that H1 (Heading 1) HTML tag was removed from WordPress visual editor formatting dropdown button for SEO purposes as it is being used as main page title.
Inserting custom JavaScript
"Scripts" field in Appearance » Theme Options » SEO settings » Tracking will not only let you to insert a tracking codes, but you can actually use it to insert your own custom JavaScript codes. Please do not forget to enclose your scripts in <script> HTML tag.

Error 404 Page theme options

  • Error 404 page tab

    Here you can set the error 404 page content. The error 404 page will be displayed to visitors of your website when they type in the wrong link or you simply remove previously published post or page - basically, the content, visitor was looking for, doesn't exist.

Security theme options

  • Security settings tab
    The last - but probably the most important - section of theme admin panel is security section. To be really short here: it's not recommended to change these settings (they are all checked by default) unless you know what you're doing ;)

Localization How to translate the theme?

Translating the Theme

  1. Make a copy of the original .PO file in jazzmaster/langs/ folder.
  2. You need to rename the coppied file. The naming convention is based on the language code (e.g. "pt" for Portuguese) followed with underscore and the country code (e.g. "BR" for Brazil). So, the Brazilian Portuguese file would be named as pt_BR.po.
  3. Use Poedit to translate the file and export (save) it as MO translation file.
  4. Upload translated pt_BR.mo file into the folder of original PO file.
The theme is compatible with great WPML - The WordPress Multilingual Plugin.

JazzMaster theme is completely translation ready. You can translate the theme using a tool like Poedit. All the required PO translation files can be found in the theme's jazzmaster/langs/ folder and subsequent subfolders.

For easier translation the theme localization files are split into these sections:

  • Website frontend (jazzmaster/langs/jazzmaster_domain.po file) - this is the bare minimum to translate
  • Necessary WordPress admin options (/langs/admin/jazzmaster_domain_adm.po file) - recommended to translate for multilingual WordPress administration
  • Contextual help files (/langs/help/jazzmaster_domain_help.po file)
  • Theme admin panel translation (/langs/wm-admin-panel/jazzmaster_domain_panel.po file) - translate this only for administrators (if required)
Translating version differences only
To translate only the text differences between the different theme versions, please rename the .po extension of the file you need to translate into .pot (according to information on Differences Between POT and PO Files).

Contextual Help Documentation integrated into WordPress contextual help

This theme extends WordPress contextual help with many useful topics. You will also find a complete shortcodes documentation here. If you get stuck using the theme, please check this source first. If the topic is not displayed in contextual help, you will find a link to online version of this User Manual there.

To access contextual help simply click the [Help] button in the upper right corner of WordPress admin screens.

You can see the sample instructions on how to use contextual help in the image.

Tips and Tricks Additional tips for the theme

Using Custom Image Input Field Why there is no image applied?

  1. Click the [+] button of custom image input field. WordPress media uploader will appear. Either upload an image or choose it from Media Library - click the "Show" link right from image thumb and title to display image attributes.
  2. Choose the image size you want to use.
  3. Important step: make sure the actual image URL is set in Link URL field. You can set this by clicking the [File URL] button below the input field.
  4. Click the [Insert into post] button to insert image URL into custom image input field. The image preview should also appear below the input field.

Sometimes you may wonder why the image wasn't applied when you use JazzMaster's custom image input field. Please, make sure you use the custom input field according to instructions on the left.

Custom Fonts How to set up a different font for the theme?

  1. Navigate to Appearance » Theme Options » Design » Fonts.
  2. You can set up custom font from 3 different sources:
    • Using web safe fonts

      In this case just delete the content of "Custom font stylesheet link (HTML)" option field and continue to next step of this guide.

    • Using web based font repository, such as Google Fonts

      First you need to pick up your fonts to be used with the theme (usually just 2 fonts at max) from the font repository.
      Once you pick up the fonts, obtain the link HTML tag provided by your font repository to the customly generated fonts stylesheet file and insert it into "Custom font stylesheet link (HTML)" textarea.
      Also obtain a CSS font-family values for you custom fonts - you will need them in next step of this guide.

    • Uploading your own font files

      This is the most advanced technique. It requires you to upload all the font files onto your server and create a special CSS file. This CSS stylesheet file should contain a font definitions, something like this:

      @font-face {
       font-family: 'YourFontName';
       src: url("URL_TO_EOT_FONT_FILE.eot");
       src: url("URL_TO_EOT_FONT_FILE.eot?#iefix") format('embedded-opentype'), url("URL_TO_WOFF_FONT_FILE.woff") format('woff'), url("URL_TO_TTF_FONT_FILE.ttf") format ('truetype'), url("URL_TO_SVG_FONT_FILE.svg#fontello") format('svg');
       font-weight: normal;
       font-style: normal;
      }

      After you've created the CSS stylesheet file on your server, you need to link to it using the <link href='URL_TO_YOUR_STYLESHEET' rel='stylesheet' type='text/css' /> HTML tag in "Custom font stylesheet link (HTML)" textarea.

  3. Set up the "Primary font stack" and "Secondary font stack" option fields. These fields takes the same values as CSS font-family property.
  4. Choose the font stack to be used as basic website font and as a headings font.
  5. Finally just set the "Basic font size" option. All the other font sizes will be calculated from this single value.
    If you want to change the font sizes of different website elements separately, you will need to set this via custom CSS in your child theme. You can also use code inspector tools such as Firebug or Chrome Developer Tools to help you with this.

With this theme you can set up virtually any font for your website. It doesn't restrict you to use a Google Fonts only, for example, unlike other themes. The font setup might be a bit more complicated, but once you get it, you'll appreciate its flexibility.

Adding your custom CSS

  1. Navigate to Appearance » Theme Options » Design » Stylesheet.
  2. Insert your custom CSS code into "Custom CSS" textarea.
  3. Press the [Save changes] button. Your custom CSS styles will be added at the end of main theme stylesheet file (the style.css.php file).
    Please note that your custom styles may not apply immediatelly as the main theme stylesheet file is being cached by your browser. To empty the browser cache and load the new stylesheet please try to reload the website by pressing CTRL + R key combination several times.

In case you need to add your custom CSS code to JazzMaster theme, never edit the theme's source files. Instead follow the instructions left.

Change website header text

  1. Navigate to Appearance » Theme Options » Layout » Header.
  2. Insert your custom header text into "Right header area text" textarea. You can use shortcodes here (like [social] for example).
  3. Press the [Save changes] button to apply your changes of header text.
    This will set the global header text. However, you can change this for certain page templates individually - just check the "Page settings" metabox of Landing page template and Under construction template.

The instructions left will allow you to change the website header text displayed right from logo above the navigation.

Minimal image sizes

During the first theme setup (when Quickstart Guide is displayed) it is highly recommended to choose which image formats (aspect ratios) will be used in different website sections. 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 700px.

The height of the image depends on previously mentioned image formats selected. As an example, if you choose a blog posts featured image to be displayed in 2:1 aspect ratio, you should upload images of minimal size of 700×350px for post featured images.

However, the recommended size of uploaded images is at least 930px wide images (1160px respectivelly) - the actual width of website content (can be set in Layout section of theme admin panel). 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 size of the files at minimum).

Revolution slider "levitate" effect

  1. Open one of Revolution Slider slides for editation.
  2. Add a new layer/image to the slide.
  3. In "Layer parameters" metabox below slide visual editor on the left add a new class of levitate into "Style" input field.
    If you don't choose any predefined Revolution Slider classes from dropdown, just type in the levitate class. If you chose one of predefined class already, just add the levitate class separating existing classes with space (for an example: big_white levitate).
  4. Update the slide to apply the class. You can preview your changes now.

These instructions allow you to apply effect of levitation on an element of Revolution Slider slide. Please note that the effect is done using modern CSS3 animations effects and thus will not work on older browsers and browsers that doesn't support such animations (most of current web browsers support this).

Child Themes

  1. There is a sample child theme included with the theme. To install and activate it just navigate to Appearance » Themes » Install Themes » Upload and select the zipped child theme file (the jazzmaster-child-theme.zip file) inside install/child-theme subfolder of the previously downloaded and unzipped theme package folder on your computer.
  2. Once the child theme is installed, activate it.
  3. Now you can put all your custom CSS styles into YOUR_WORDPRESS_INSTALLATION/wp-content/themes/jazzmaster-child-theme/style.css file.

    Please note that with Clifden you don't have to include @import url("../PARENT_THEME/style.css"); stylesheet. Not only that it won't work ;) but also this method is a bit slow, so Clifden inserts your child theme stylesheet into a main generated stylesheet automatically.

    If you also want to change functionality of the original Clifden theme, copy the function you want to change from the original (parent) Clifden theme and place the function into YOUR_WORDPRESS_INSTALLATION/wp-content/themes/jazzmaster-child-theme/functions.php. You can freely modify any theme's function here.

    This way you can update the parent (original) Clifden theme without any worry as all your custom styles and functionality are kept in a child theme.

Please note I do not provide support on any custom CSS or custom PHP functions you create/change. However, I will do my best to offer you some useful tips on WebMan Support Forums.

If you need to make styling or functional changes to the theme, please use the WordPress native child theme functionality. You can read more about child themes on WordPress codex pages. A sample child theme (ready to work with) is packed with the theme, just intall and tweak it to your needs.

Sources and Credits Scripts, images, icons used to build JazzMaster