Installation

WordPress themes can be installed either 1 of 2 ways. The first and recommended method is to upload the the theme’s zip file directly from the themes page of your WordPress dashboard. The second and slightly more difficult method is to manually upload the theme’s zip file to your server via FTP.

Adding New Themes using the Administration Panel

  1. Navigate to Appearance > Themes from your WordPress dashboard
  2. Press the “Add New” button found at the top of the screen
  3. Look just below the “Install Themes” headline, and press the “Upload” button
  4. Press “Choose File” and locate the installable zip file for the theme
  5. The theme should begin uploading once you have confirmed your selection

Front Page & Blog Page

Front Page

Setting up the front page for this theme is no different than the default WordPress theme, simply go to Appearance > Customize from your WordPress dashboard and locate the section titled “Static Front Page”. Under this section are the options for Front Page and Posts Page.

Blog Page

Setting up the blog page for this theme is no different than the default WordPress theme. If you would like for your blog posts to be displayed on a page other than the front page, you will first need to select a page to serve as your front page by following the above instructions. Then simply go to Settings > Reading from your WordPress dashboard and locate the option titled “Posts Page” and select the page that you would like to serve as your blog.

Demo Content

Before you Start

If you plan on using WooComerce, bbPress, or any other plugin featured in the demo for this theme they must be installed and activated before you install the demo content.

Uploading the Included Demo Content

  1. Navigate to Tools > Import from your WordPress dashboard
  2. Select “WordPress” from the list of available importers
  3. Upload the demo content xml using the form provided on that page
  4. On the next screen optionally select an author for the content to be assigned and make sure the option for “Download and import file attachments” is checked before pressing “Submit”.
  5. Please be patient the upload time may be lengthy, this is because of the high quality images.

Child Theme

Using a child theme is highly recommended if you are planning on modifying this theme. Below is an excerpt from the WordPress Codex explaining some of the benefits of using a child theme.

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

This theme includes an example child theme to get you started, the stylesheet of which has already been configured. It is recommended that you use this child theme to make modifications to this theme. Please refer to the Instillation Section in this document for instructions on how to install the included child theme.

Customization

This theme utilizes the native WordPress theme customizer for customization. The theme customizer can be accessed by navigating to Appearance > Customizer from your WordPress dashboard. Once there you will be able to customize the various aspects of the theme using the available sections in the panel on the side of your screen.

This theme allows you to upload a custom image to serve as your site’s logo. This image will be displayed at a height of 50px, with the width being proportional to the height. Any size image will work, but it is recommended that the image have a height of at least 100px in order to accommodate high definition screens.

Custom Menus

Mega Menus

Setting up a mega menu is nearly identical to setting up a traditional WordPress custom menu. The only difference is the hierarchical order of your menu items.

Mega menus in this theme can have up to 3 columns. Your custom menu should resemble the following example, in which the Shop menu item contains a 2 column mega menu.

  • Home
  • Contact
  • Shop (Mega menu)

    • Clothing (First Column)

      • Shirts
      • Shorts
      • jackets
    • Furniture (Second Column)

      • Chairs
      • Tables
      • Desks

Menu Locations

Primary Menu

The primary menu refers to the menu that is displayed immediately adjacent to the logo in the header. This menu location has a maximum depth of 2 items.

Secondary Menu

The secondary menu refers to the menu that is displayed on the opposite side of the logo in the header. This menu location has a maximum depth of 2 items.

Menu items in this location can be assigned a specific CSS class to be “highlighted” as seen in the demo. First make sure CSS classes have been enabled for menu items, then apply a class of catalyst-featured to any menu item that you would like to stand out from the rest.

Mobile Menu

The mobile menu refers to the menu that is displayed only on devices with smaller screens and can be accessed by pressing the “burger” menu in the header (it looks like three horizontal lines). This menu location has a maximum depth of 2 items.

Social Media Menu

The social media menu refers to the menu that is displayed in the footer on the opposite side of the copyright text. This menu location has a maximum depth of 1 item. An icon will automatically be assigned to each menu item depending on the site it has been linked to. For example, all items that link to Facebook will be displayed with a Facebook icon.

Footer Menu

The footer menu refers to the menu that is displayed in the footer on the opposite side of the copyright text. This menu location has a maximum depth of 1 items.

Widgets

Sidebar Widgets

This theme has been designed to accommodate a sidebar area which has been widgetized for easy customization. By default the widget area labeled “Sidebar” will always be used, however when certain plugins are installed and active (namely WooCommerce and Themefyre Portfolio) you will be able to override this widget area using the widget areas for each plugin respectively.

The footer area of this theme has been widgetized for easy customization. Simply add widgets to the “Footer” widget area and columns will be created to automatically accommodate the widgets you have added. The default maximum number of columns is 3, this can easily be increased or decreased from the Theme Customizer (Appearance > Customize > Footer).

General Usage

Floating Header

The floating header can be enabled for any page/post from the edit screen for each page/post respectively. “Floating Header” refers to when the background of the header is transparent, and all menu items as well as the textual logo are displayed as white instead of their normal colors. It is also possible to select an image to serve as the logo image while the floating header is enabled.

The floating header can be enabled/disabled from the “Catalyst Page Settings” meta box found on the edit screen for posts/pages.

Custom Banners

The banner area can be enabled and customized for any page/post from the edit screen for each page/post respectively. Each aspect of the banner area is briefly explained below.

Banner Title

This refers to the main title of the banner, it is centered by default and is larger than the tagline. The title is intended to serve as the title of the current page and is wrapped in an H1 tag.

Banner Tagline

This refers to the secondary title of the banner, it is centered by default and is smaller than the title. The tagline is intended to briefly describe the current page and is wrapped in an H2 tag.

Banner Menu

You can optionally select one of your custom menus to be displayed within the banner area, below the title and tagline.

Banner Background Image

Select any image you have uploaded to your media library to serve as the banner area background image. The background image will automatically scale to fill the banner area completely.

The banner area can be customized from the “Catalyst Page Settings” meta box found on the edit screen for posts/pages.