Phenomena WordPress Theme Documentation

Phenomena is an outstanding e-commerce WordPress theme built for online interior design and lifestyle shops. This responsive theme will make all your products look sleek and polished.

Learn how you can get the most out of the theme with the Phenomena WordPress theme documentation.

Phenomena WordPress theme documentation, step 1: Theme installation

The theme can be installed through the WordPress Admin panel.

1. Log in to the WordPress Admin panel.
2. Go to Appearance -> Themes.
3. Click on the Add New button, at the top of the screen.
4. In Add Themes screen, click on Upload Theme.
5. Click on Choose theme, and then browse for theme file on your computer.
6. Click on Install Now to start the install process.
7. After the installation is done, click on Activate theme.

A detailed video for theme installation is available here: https://help.themeskingdom.com/how-to-install-and-setup-the-theme.

After activating the theme, you will be prompted to install the required plugins. Required plugins in the Phenomena WordPress theme documentation are:

1. Jetpack
2. Kirki
3. Ippo Shop Custom Post Type
4. MailChimp
5. WooCommerce

Jetpack

Jetpack is the world popular plugin that extends WordPress features. In the Phenomena theme, this plugin is used to extend galleries’ features and for protection. The official documentation is available here: https://help.themeskingdom.com/jetpack-plugin/

Kirki

Kirki is a plugin that enhances theme experience by adding useful elements in the Customizer, like image position picker, font settings and such.

Ippo Shop Custom Post Type

Slider Custom Post Type plugin adds Slider post type to the theme.

MailChimp

MailChimp plugin allows you to add a MailChimp signup form widget to your WordPress quickly.

WooCommerce

WooCommerce is a free eCommerce plugin that allows you to sell anything. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

Phenomena WordPress theme documentation, step 2: Theme demo

To set the theme as presented in our demo, you can import the demo file.

Phenomena WordPress theme documentation, step 3: Theme setup

Before starting the setup, please install and setup the WooCommerce plugin. During the setup process, you will need to set up store address, set payment methods and shipping methods. WooCommerce will also create all pages that are required for a shop – Shop, Cart, Checkout, and My Account.

To set up the theme, please follow the next steps:

1. First, go to Pages -> Add New, and create pages About, Blog, and Contact. All pages should use the Default template.
2. Go to Settings -> Reading. Select the homepage to display a static page. For Homepage set your Shop page, and for Posts page, set the Blog page.
3. Create some posts – go to Posts -> Add New and create several posts. Set featured images. All posts will be displayed on the Blog page.
4. Go to Slider and create several slides – enter the title, custom link and set the featured image. Slides are displayed on the top of the Shop page.
5. Go to Products -> Categories. Create several product categories – in our demo, we have created categories Accessories, Furniture, Kitchen, etc… Categories are used to group similar products – and to display product groups in the navigation. In our demo, we have also used product tags for different brands.
6. Create several products and associate them with the product categories. Set the featured images, enter descriptions and prices for each product. Add product tags to each product. As we have mentioned, to the homepage are displayed products that are marked as featured.
7. To set up the main navigation go to Appearance -> Menus. Create a new menu with title Main and add all pages to it. Create another menu – Social. Add links to your social profiles as Custom Link elements.
8. Now, it’s time you set the rest of the theme.
   Go to Appearance -> Customize and set the following options:
   1. Site Identity: Set site logo and favicon.
   2. Content Options: Enable author bio on a single post.
   3. Theme Options:
      • Blog layout: Set blog layout to standard.
      • Header Settings: Enable sticky header.
      • Blog Settings: Set the blog to display three columns, and enable both Category filter and Author box under the single post content.
      • Shop Settings: Set the Shop layout to display four columns. Set the number of products to 16. Shop widget area should be set to popup, and product navigation should be enabled.
      • Paging Settings: Archives paging type should be Infinite load, with loading on click.
      • Front Page Slider Settings: Enable the slider, and set the number of slides.

Phenomena WordPress theme documentation, step 4: The Customizer

The Customizer is a great WordPress feature that allows you to customize the theme and set theme options. Customization options available in the Customizer:

1. Site Identity
2. Background Image
3. Menus
4. Widgets
5. Homepage Settings
6. Color Settings
7. WooCommerce
8. Additional CSS
9. Theme Options

Site Identity

Site Identity in the Phenomena WordPress theme documentation allows you to set your site logo, title, tagline and icon. The Site Title is the name of your site and it’s displayed in the header, where the logo is displayed. The Tagline is a short description or your motto, and it’s displayed just under the title.

1. Logo: For the logo, set a JPG, JPEG, or PNG image.
2. Logo Size: Moving slider to the left or right will increase or decrease logo size. Changes in logo size will be displayed in the preview panel.
3. Site Title: Name of your site. The Site Title is displayed only if the logo is not set.
4. Tagline: Site punchline. The Tagline will be displayed together with the logo or site title.
5. Display Site Title and Tagline: If enabled, both title and tagline will be displayed in the header.
6. Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.

Menus

This option allows you to manage created menus quickly. You can select what menu will be displayed as a Primary Menu or Social Menu. If you need to manage actual menu items, you can do that in Appearance -> Menu.

Widgets

The Widgets section in the Phenomena WordPress theme documentation allows you to manage widgets in widget areas quickly. This option allows you the same possibility as the Widgets option in the WordPress admin panel.

Homepage Settings

This option works the same way as Settings -> Reading. It allows you to set them to read the latest post or to use static pages for landing and blog pages.

Color Settings

Theme colors are used to add a personal, artistic touch to the site. Lines color setting controls the color of lines on the homepage. The background color will define background color on the whole site, while other options are used for text color on the site.

WooCommerce

The WooCommerce panel in the Phenomena WordPress theme documentation keeps settings specific for the Shop – layout, what products and categories will be displayed, and theme-specific image sizes for the shop.

1. Store Notice
2. Product Catalog
3. Product Images
4. Checkout

Store Notice

Store notices will appear at the bottom of your site. They are used to display important information – e.g. delays in shipping, or discount promotions, etc. You can use HTML elements to style the notice.

Product Catalog

Product Catalog defines how WooCommerce pages – main store page and product category pages will display products, how many and in what layout.

1. Shop page display: Choose what to display on the main Shop page – products, categories, or both.
2. Category display: Choose what to display on Product category pages – products, subcategories, or both.
3. Default product sorting: Defines what parameter will be used for default product sorting.

Product Images

Settings related to image width on the Shop and single product page.

1. Main image width: The main product image width, which will be used on a single product page.
2. Thumbnail width: Width for the main product image on the Shop page.
3. Thumbnail cropping: How thumbnail will be cropped. There are three settings: 1:1 – the image will be cropped proportionally based on original dimensions; Custom – depending on the input value, cropping will use that proportion; Uncropped – image will be scaled down.

Checkout

The Checkout section in the Phenomena WordPress theme documentation contains settings related to the Checkout page. Here you can customize what optional fields are displayed and if they are required, and you can configure Privacy Policy and Terms and Conditions pages and notices.

Phenomena WordPress theme documentation, step 5: Additional CSS

The Additional CSS section is used for custom CSS classes, without interfering with theme original CSS files or creating a child theme. These classes are always loaded first, before other stylesheets. In the Useful CSS Classes section, you can find some most used classes.

Theme Options

In the Theme Options panel in the Phenomena WordPress theme documentation are displayed theme-specific settings.

1. Font Settings
2. Header Settings
3. Blog Settings
4. Portfolio Settings
5. Shop Settings
6. Paging Settings
7. Front Page Slider Settings
8. Footer Settings

Font Settings

The Font Settings panel is displayed only if the Kirki Framework plugin is installed and activated. Font Settings are used to set font families and weights for global text elements 一 content, headings, and navigation. Available fonts are from Google Fonts but without extended variants. If you need assistance on how to integrate additional variants, please submit a support ticket.

Header Settings

In the Header Settings, you can set header behavior. A Menu can be set to display a hamburger menu (hidden behind the icon). Also, a header can be sticky, or naturally flowing with as the page scrolls.

Blog Settings

Blog Settings in the Phenomena WordPress theme documentation control Blog page layout and post options. A Blog page can be set to display posts in three or four columns. Also, category filters can be enabled or disabled on the posts page. The Author box can be enabled or disabled on the single post page.

Portfolio Settings

Portfolio Settings control the Portfolio page layout. A Blog page can be set to display portfolio items in three or four columns. Also, category filters can be enabled or disabled on the portfolio page. The Author box can be enabled or disabled on the single portfolio page.

Shop Settings

Shop Settings control the Shop page layout. The Shop page can be set to display products in three or four columns. On the Shop page, a widget area can be displayed as a classic sidebar or as a popup. Product navigation can be enabled or disabled, as well.

Paging Settings

Paging settings in the Phenomena WordPress theme documentation allow you to set paging on archives pages. Paging can be set to infinite scroll or to classic pagination. Infinite scroll can be set to trigger a new batch on a scroll or on a button click.

Front Page Slider Settings

In this panel, you can find all the slider controls. You can enable or disable the slider easily, set the number of slides, and choose a slider category that will be displayed.

Footer Settings

Footer Settings have only text area. Add text to the footer copyright area. HTML elements can be used for formating.

Phenomena WordPress theme documentation, step 6: Useful CSS classes