Sign in

Theme installation

The theme can be installed through the WordPress Admin panel.

  1. Login into the WordPress Admin panel.
  2. Go to Appearance -> Themes.
  3. Click on 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 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 Millenio theme is used to extend galleries feature and protection. 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 quickly add a MailChimp signup form widget to your WordPress.

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.

Theme demo

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

Theme setup

Before starting 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 Shop page, and for Posts, page set 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 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 used product tags for different brands.
  6. Create several products and associate them with the product categories. Set featured image, enter description and price 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 setup 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 to 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 blog to display three columns, and enable both Category filter and Author box under the single post conent.
      • Shop Settings: Set shop layout to display four columns. Set 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.

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 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 logo set 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.


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

Widgets

Widgets section allows you to quickly manage widgets in widget areas. 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


WooCommerce panel 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. It’s 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: 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 input value, cropping will use that proportion; uncropped – image will be scaled down.

Checkout


The checkout section 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.

Additional CSS


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 Theme Options panel 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 active. 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 Header Settings you can set header behavior. Menu can be set to display as hamburger menu(hidden behind the icon). Also, header can be sticky, or naturally flowing with as the page scrolls.

Blog Settings


Blog Settings controls blog page layout and posts options. 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. Author box can be enabled or disabled on the single post page.

Portfolio Settings


Portfolio Settings controls portfolio page layout. 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. Author box can be enabled or disabled on the single portfolio page.

Shop Settings


Shop Settings controls shop page layout. Shop page can be set to display products in three or four columns. On shop page widget area can be displayed as classic sidebar or as a popup. Product navigation can be enabled or disabled here.

Paging Settings


Paging settings allows 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 new batch on scroll or on button click.

Front Page Slider Settings


In this panel are contained slider controls. You can easily enable or disable the slider, set number of slides and choose slider category which will be displayed.


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

Useful CSS Classes

Was this article helpful?
YesNo

We’re here to answer all your questions!

If, somehow, you haven’t found answers to your questions, feel free to contact our chatty & friendly support team.

Support request

Need help configuring your theme?

Don’t want to spend hours building your site from the ground up and perfecting its design? Let us do it 一 we like to get our hands dirty!

Services
New
Help