Search Results

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

• PHP version 7.4 or greater.
• MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
• HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard > Plugins > Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure to install both in order to get the whole functionality.

Here you can find an overview of how to download and install the plugin.

Theme installation

nstalling the theme is a very simple process. Go to your dashboard under Appearance > Themes > Add new, click Upload Theme and upload the zip file. Once uploaded click Install Now and then the Activate Theme link. Here is a detailed overview on how to download and install the theme.

Once the theme is installed and activated you will be forwarded to the theme’s onboarding page.

Here you will be prompted to install and activate the Ignition Framework plugin if you haven’t done so already. Here you can also install our free custom blocks plugin, GutenBee. Through the onboarding page you have access to many useful links, such as the theme’s documentation, our knowledge base articles and direct links to our support hub.

In the Sample Content tab of the onboarding page you can install and activate all the plugins required to import the sample content and proceed with its installation. More info on that on the next section.

How to import the sample content

If you like what you see on our demo website you can simply import the sample content. This means that a close approximation of our demo website will be imported in your WordPress installation. Now all you have to do is replace the content of these pages with yours. Importing the sample content can help serve as a basis on which you can continue to build and expand your site, however keep in mind that this procedure is entirely optional.

Check out a generic overview of the sample content import procedure.

The procedure:

• In your WordPress dashboard visit Appearance > Theme Options > Sample Content.
• Click Install and then Activate for each of the required plugins.
• Click the Get Started button and in the next screen the Import Demo Data button.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

• Main post thumbnail: 750x500px
• Item: 615x410px
• Large Item: 1170x780px
• Article Media: 510x510px
• Mini-cart items: 160x160px

Setting up site-wide sections

It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the general site layout, the header, footer and some secondary functionality.

General Site Options

You can change your general site options under Customize > Site Options. Under the Layout section you can control your site’s, blog’s and single blog post’s layout, as well as the site width and content/sidebar column ratio. The layout can then be overridden in each post/page individually. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select the ideal font pairing from a full list of Google Fonts and customize font properties for key elements on desktop and mobile devices alike. You also have the option to disable Google Fonts altogether.

Read this knowledge base article for more information regarding the site options.

Header

The header on the theme consists of three key elements, the top bar, logo and the main menu.

The layout of the header can be set globally under Customize > Header > Layout.

On the theme’s demo the header layout is set to Normal, the menu is set to right and the sticky menu is revealed on scroll up on.

Top Bar

Under Customize > Top Bar you can toggle the top bar entirely and fill the 3 content areas with simple text, plain HTML, or shortcodes. Refer to the shortcodes section below for information regarding the shortcodes. The top bar on the theme’s demo contains some social icons with the ignition custom menu shortcode in the left content area and some text and a link in the right one.

[ignition-custom-menu name="social"]

Logo

The recommended maximum width of your logo is 200px (or 400px  if you need a retina ready logo). To upload your logo navigate to Customize > Site Identity. You can upload 2 logos, the main and the alternative one. The alternative logo can be used if you want a different logo to appear when the header layout is set to Transparent under Customize > Header > Layout.

Main Menu

If you are not familiar with WordPress menus here is a detailed guide.

Navigate to Customize > Menus. Enter a menu name (It can be anything you like) and click on the Create Menu button. In the next page click the Add Items button and start adding items to the menu. Now all you have to do is assign this menu to a location through the Menu Locations section, check the Main menu location (right), then repeat the process for the left menu and you are done. Your navigation menu should be now visible on your website.

Create a menu button

You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance > Menus for the item you want. First enable this section from Screen Options.

The page title section

The page title section can be modified under Customize > Page title. You can choose to disable the page title with background section entirely, change its height, alignment, content and toggle the site’s breadcrumbs. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary and the secondary text colors.

In some cases you might want to have different background images on different posts, pages and custom post types.

To achieve that create or edit a page. On the right sidebar locate the Page title image field. Upload a new image and preview this page. This will override the image set in the Customizer settings.

The Show Page Title with Background option is disabled on the theme’s demo. The Normal Page Title & Subtitle are enabled and the breadcrumbs toggled off.

In our Knowledge Base you can find more info about the page title section, the breadcrumbs and the page template overrides.

Footer

The footer area is a widgetized area that can be populated with widgets through Customize > Widgets. You can also remove the credits at the very bottom of this area by visiting Customize > Footer > Credits content. You can also adjust the colors by setting a background color & image and modify the border, title and text colors.

Utilities

In the utilities section you will configuration options for various small theme features, such as the built in weather display capability, toggle for the theme’s lightbox, the block editor dark theme, back to top button, social sharing and block widget support.

Read here for more information regarding the theme’s utilities.

Custom post types

Creating a new Event

Create a new Event item from Events > Add New. Then under the Event tab start adding basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. Read more about post attributes options..
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc. Demo items inherit options from the Customizer.  Read more about page template configuration options.
• Event Settings: Set your Event Date, Time and Location.

Creating a new Team Member post

Create a new Team item under Team > Add New. Under the Team Member tab on the right hand sidebar you can control some of the post’s basic attributes. These are:

• Summary: Control the location and appearance of the sidebar.
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc.

Create a Sermon

Create a Sermon under Sermons > Add New. Under the Sermon tab on the right hand sidebar you can control some of the post’s basic attributes. These are:

• Summary: Control the location and appearance of the sidebar.
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc.
• Sermon Settings: You can set the audio file, video URL and transcript for each sermon. You can also select to allow users to download the sermon’s audio (please keep in mind that the file needs to be uploaded through WordPress’ media manager for this to work).

Setting up the pages

Home

The homepage has the full width boxed template applied to it with the normal page title & subtitle hidden.

The page starts with a Container block with a single column containing a MaxSlider block with the Theme Slider block style selected displaying our home slider.

Below it we have another Container with its bottom margin set to 20px containing a single column. Inside there is a Core Heading with the Underlined Heading block style and a Post Types block displaying four sermon items in a four column layout.

Next up is yet another Container with two equal columns. Each column contains a Banner block with the Theme Border block style applied, its content centered both vertically and horizontally, a background image & overlay applied. Inside the banner we have a Heading block.

Below we have a Core Heading with the Underlined Heading block style applied followed by a Post Types block displaying three events in a single column layout, closing this section is a horizontally centered button block.

Closing out the homepage is a final Container with a single column containing a Heading and a Post Types block displaying three posts in a three column layout.

Sermons

The sermons page has the default template applied to it.

The page’s content consists of a single Post Types block displaying eight sermons in a two column layout.

Sermons Alternative

In the alternative sermons listing page the Post Types block displays eight sermons in a single column layout.

Events

The events listing page has the default template applied to it.

The page’s content is a single Post Types block displaying our events in a single column layout.

People

This page has the default template applied to it.

In the content area we have a Post Types block displaying all Team members in a single column layout.

Gallery

The gallery page has the full width boxed template applied to it with an excerpt set as the page’s subtitle.

Content-wise we have a Paragraph block followed by a Core Gallery block with the Theme border block style applied to it.

News

This is your main posts listing page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Contact

The contact page has the full width boxed template applied to it.

In the content we have a 350px tall Google Maps block followed by a Container block with two columns in a 66/33 layout. The left column houses a Contact Form 7 block while the right one has a Heading with the Underlined heading block style, a Core List with the Theme List block style, another Heading and finally a Core Social Icons block.

Common Features

Shortcodes

The Ignition Framework offers a multitude of custom shortcodes these are:

Custom menu: [ignition-custom-menu name="your menu name"]

Site search: [ignition-site-search]

Date: [ignition-date]

Weather: [ignition-current-weather id="your-location-id(optional)"]

Minicart button: [ignition-minicart-button]

Language switcher: [ignition-language-switcher]

Icon link: [ignition-icon-link]

Instagram Feed: [ignition-instagram-feed]

WooCommerce search: [ignition-wc-search]

For more information have a look at this knowledge base article about shortcodes and their usage.

Page options

All themes offer six different templates which modify the location and appearance of the sidebar and the main content’s width.

Additionally pages have a common set of options which allow you to customize the appearance of the page title section, toggle breadcrumbs and more.

All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behavior.

Read the following article for a detailed explanation of the available templates and their options.

WooCommerce

Ignition Framework based themes are compatible with WooCommerce giving you the ability to create awesome online stores which perfectly match the appearance of the rest of your site.

WooCommerce is an optional plugin. You don’t need to install it if you are not looking to build an online store.

After activating WooCommerce it will create and set some default pages. These will serve as your Shop, Cart, Checkout and My Account pages.

The framework offers various customization options both for the main product listing page under Customize > WooCommerce > Product Catalog and for single products under Customize > WooCommerce > Single Products.

Learn more about the WooCommerce integration and the options offered.

Global Sections

With the Global Sections custom post type included in all Ignition Framework based themes users can create content which can be easily reused in more than 15 key theme locations. For example users can create a newsletter subscription call to action box and immediately display it above the footer on all (or some) posts and pages, or create a banner ad an easily add it between posts in post listings etc.

Learn more about Global Sections here.

Blog page

This is your main blog page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Widget areas

The theme provides special widget areas for your posts listings, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages, posts or products.

Page builder support

Ignition Framework based themes work seamlessly with popular page builders like Elementor, Divi, Beaver builder and more to cater to the needs of those who like to build things visually.

Support

If you need help during the initial installation and setup of this theme feel free to get in touch and we will get back to you within 24 hours to help.

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

• PHP version 7.4 or greater.
• MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
• HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard > Plugins > Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure to install both in order to get the whole functionality.

Here you can find an overview of how to download and install the plugin.

Theme installation

nstalling the theme is a very simple process. Go to your dashboard under Appearance > Themes > Add new, click Upload Theme and upload the zip file. Once uploaded click Install Now and then the Activate Theme link. Here is a detailed overview on how to download and install the theme.

Once the theme is installed and activated you will be forwarded to the theme’s onboarding page.

Here you will be prompted to install and activate the Ignition Framework plugin if you haven’t done so already. Here you can also install our free custom blocks plugin, GutenBee. Through the onboarding page you have access to many useful links, such as the theme’s documentation, our knowledge base articles and direct links to our support hub.

In the Sample Content tab of the onboarding page you can install and activate all the plugins required to import the sample content and proceed with its installation. More info on that on the next section.

How to import the sample content

If you like what you see in our demo website you can simply import the sample content. This means that a close approximation of our demo website will be imported in your WordPress installation. Now all you have to do is replace the content of these pages with yours. Importing the sample content can help serve as a basis on which you can continue to build and expand your site, however keep in mind that this procedure is entirely optional.

Check out a generic overview of the sample content import procedure.

The procedure:

• In your WordPress dashboard visit Appearance > Theme Options > Sample Content.
• Click Install and then Activate for each of the required plugins.
• Click the Get Started button and in the next screen the Import Demo Data button.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

• Main post thumbnail: 870x580px
• Item: 615x410px
• Large Item: 1240x827px
• Article Media: 510x510px
• Mini-cart items: 160x160px

Setting up site-wide sections

It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the general site layout, the header, footer and some secondary functionality.

General Site Options

You can change your general site options under Customize > Site Options. Under the Layout section you can control your site’s, blog’s and single blog post’s layout, as well as the site width and content/sidebar column ratio. The layout can then be overridden in each post/page individually. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select the ideal font pairing from a full list of Google Fonts and customize font properties for key elements on desktop and mobile devices alike. You also have the option to disable Google Fonts altogether.

Read this knowledge base article for more information regarding the site options.

Header

The header on the theme consists of two key elements, the logo and the main menu.

The layout of the header can be set globally under Customize > Header > Layout.

On the theme’s demo the header layout is set to Transparent, the menu is set to split and the sticky menu is revealed on scroll up on.

Top Bar

Under Customize > Top Bar you can toggle the top bar entirely and fill the 3 content areas with simple text, plain HTML, or shortcodes. Refer to the shortcodes section below for information regarding the shortcodes. The top bar is disabled on the theme’s demo.

Logo

The recommended maximum width of your logo is 200px (or 400px  if you need a retina ready logo). To upload your logo navigate to Customize > Site Identity. You can upload 2 logos, the main and the alternative one. The alternative logo can be used if you want a different logo to appear when the header layout is set to Transparent under Customize > Header > Layout. On the demo we use just the main logo.

Main Menu

If you are not familiar with WordPress menus here is a detailed guide.

Navigate to Customize > Menus. Enter a menu name (It can be anything you like) and click on the Create Menu button. In the next page click the Add Items button and start adding items to the menu. Now all you have to do is assign this menu to a location through the Menu Locations section, check the Main menu location (right), then repeat the process for the left menu and you are done. Your navigation menu should be now visible on your website.

Create a menu button

You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance > Menus for the item you want. First enable this section from Screen Options.

The page title section

The page title section can be modified under Customize > Page title. You can choose to disable the page title with background section entirely, change its height, alignment, content and toggle the site’s breadcrumbs. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary and the secondary text colors.

In some cases you might want to have different background images on different posts, pages and custom post types.

To achieve that create or edit a page. On the right sidebar locate the Page title image field. Upload a new image and preview this page. This will override the image set in the Customizer settings.

The Show Page Title with Background option is enabled on the theme’s demo with its height set to 545px the Normal Page Title & Subtitle enabled and the breadcrumbs toggled off. We also have a background color, image set and overlay color set.

In our Knowledge Base you can find more info about the page title section, the breadcrumbs and the page template overrides.

Footer

The footer area is a widgetized area that can be populated with widgets through Customize > Widgets. You can also remove the credits at the very bottom of this area by visiting Customize > Footer > Credits content. You can also adjust the colors by setting a background color & image and modify the border, title and text colors.

Utilities

In the utilities section you will configuration options for various small theme features, such as the built in weather display capability, toggle for the theme’s lightbox, the block editor dark theme, back to top button, social sharing and block widget support.

Read here for more information regarding the theme’s utilities.

Custom post types

Creating a new Trainer

Create a new Trainer under Trainer > Add New. Then under the Trainer tab start adding basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. More info about these options can be found here.
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc.

With each Trainer you create a new taxonomy term will be created with the Trainer’s name under the Trainers taxonomy of the Classes post type, this allows you to easily attach trainers to your classes.

Creating a new Class

Create a new Class under Classes > Add New. Then under the Class tab start adding basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. More info about these options can be found here.
• Categories: Set a category for the class if needed.
• Time Slots: Select the time of the class.
• Trainers: Attach trainers to the class.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc. More info about these options can be found here.

To create a schedule for your classes you will need to use the days as parent Time Slot terms and the hours as child terms to each parent category, as shown in the image below.

When setting time slots for a session make sure to select both the day and the time, for example to set a class for the Monday at 10:00 check both Monday and 10:00.

You will most likely need to reorder the terms to achieve a proper order, for that you can use the Category Order and Taxonomy Terms Order plugin.

Setting up the pages

Home

The homepage has the full width boxed template applied to it. Under Page Settings > Content Area, the top/bottom padding is removed, under Page Settings > Header the header type is set to transparent and finally, under Page Settings > Page Title all options are set to hide.

The homepage starts with a fully aligned Container block with its margin bottom set to 0. Inside we have a single column with a Core Shortcode block. We use the shortcode provided by our free MaxSlider plugin to create a 100vh tall slider with the Home slider template applied to it. All slide buttons are centered vertically and to the left horizontally.

Below we have another Container block with -50/100px top/bottom margin containing two equal columns. The left column contains an Image block. The right one has 50px padding set all around and its vertical content alignment to middle. Inside it contains a Heading, a Paragraph, another Heading and a final Paragraph.

The yoga classes section consists of a Container block with a single column containing a Paragraph, a Heading and a Post Types block displaying six classes in a three column layout.

The testimonials section starts up with a Paragraph and a Heading followed by a Container block with a single column. Its contents are the same as the one we’ve created earlier, just below the slider with the difference that this container only has 30px of bottom margin.

Below we have another container with two equal columns. Each column contains a testimonial block with the Theme Testimonial style applied to it.

The video section consists of a Container block with 100px bottom margin. Inside is a single column with a Paragraph, a Heading and a Core YouTube embed.

Closing the homepage we have the news & updates section made up by a Container block containing a single column. Inside we have a Paragraph, a Heading and a Post Types block displaying three posts in a three column layout. Finally we have a 60px tall spacer.

The Studio

The studio page has the full width boxed template applied to it, the top/bottom padding removed, the header type set to transparent, and under Page Settings > Page Title, all options set to hide.

The page’s content consists of a fully aligned container block with the theme grid enabled, its height set to -1 and its content aligned to bottom left. Under block appearance it has a background image, and overlay color and a background video set. It also has 110px top/bottom padding and 50px bottom margin. Below we have another container with two equal columns each containing a Core Paragraph block.

Following is another Container with a single column containing a Gallery block with its layout set to Justified. Finally the content closes with a Core Paragraph followed by an 80px tall Spacer block.

Classes

The classes page has the full width boxed template applied to it.

Its content consists of a single Post Types block displaying six items from the Classes post type in a two column layout.

Instructors

The instructor page has the full width boxed template applied to it.

Its content consists of a single Post Types block displaying six items from the Trainers post type in a three column layout.

Schedule

The schedule page has the full width boxed template applied to it.

Its content consists of a single Core Shortcode block with the timetable shortcode. The shortcode accepts either the name or slug attribute which correspond to the name or slug of the Time Slots taxonomy term you want to display, for example if you want to display classes taking place on Monday you can use:

[timetable name="Monday"]

If you choose not to use any attributes it will display the full timetable.

Pricing

The pricing page has the full width boxed template applied to it.

The page’s content consists of a single Core Table block with the Pricing Table block style applied to it and the Header Section enabled under Table settings.

Shop

The shop page is automatically created upon WooCommerce’s activation. On the theme’s demo we have set the page’s layout to Content/Sidebar and opted for our products to display an alternate image when hovered under Customize > WooCommerce > Product Catalog. Read here for more info on WooCommerce related options available on the theme.

News

This is your main posts listing page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Contact

The contact page has the full width boxed template applied to it.

The page’s content starts with a Google Maps block with its height set to 400px and the Blue Water style applied.

Below we have a Container block with a 2/3 – 1/3 column layout. The left column contains a Contact Form 7 block and the right one contains a Heading and a Paragraph.

Common Features

Shortcodes

The Ignition Framework offers a multitude of custom shortcodes these are:

Custom menu: [ignition-custom-menu name="your menu name"]

Site search: [ignition-site-search]

Date: [ignition-date]

Weather: [ignition-current-weather id="your-location-id(optional)"]

Minicart button: [ignition-minicart-button]

Language switcher: [ignition-language-switcher]

Icon link: [ignition-icon-link]

Instagram Feed: [ignition-instagram-feed]

WooCommerce search: [ignition-wc-search]

For more information have a look at this knowledge base article about shortcodes and their usage.

Page options

All themes offer six different templates which modify the location and appearance of the sidebar and the main content’s width.

Additionally pages have a common set of options which allow you to customize the appearance of the page title section, toggle breadcrumbs and more.

All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behavior.

Read the following article for a detailed explanation of the available templates and their options.

WooCommerce

Ignition Framework based themes are compatible with WooCommerce giving you the ability to create awesome online stores which perfectly match the appearance of the rest of your site.

WooCommerce is an optional plugin. You don’t need to install it if you are not looking to build an online store.

After activating WooCommerce it will create and set some default pages. These will serve as your Shop, Cart, Checkout and My Account pages.

The framework offers various customization options both for the main product listing page under Customize > WooCommerce > Product Catalog and for single products under Customize > WooCommerce > Single Products.

Learn more about the WooCommerce integration and the options offered.

Global Sections

With the Global Sections custom post type included in all Ignition Framework based themes users can create content which can be easily reused in more than 15 key theme locations. For example users can create a newsletter subscription call to action box and immediately display it above the footer on all (or some) posts and pages, or create a banner ad an easily add it between posts in post listings etc.

Learn more about Global Sections here.

Blog page

This is your main blog page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Widget areas

The theme provides special widget areas for your posts listings, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages, posts or products.

Page builder support

Ignition Framework based themes work seamlessly with popular page builders like Elementor, Divi, Beaver builder and more to cater to the needs of those who like to build things visually.

Support

If you need help during the initial installation and setup of this theme feel free to get in touch and we will get back to you within 24 hours to help.

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

• PHP version 7.4 or greater.
• MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
• HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard > Plugins > Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure to install both in order to get the whole functionality.

Read the Ignition Framework plugin’s installation instructions.

Theme installation

Installing the theme is a very simple process. Go to your dashboard under Appearance > Themes > Add new, click Upload Theme and upload the zip file. Once uploaded click Install Now and then the Activate Theme link. Read a more detailed overview on how to download and install the theme.

Once the theme is installed and activated you will be forwarded to the theme’s onboarding page.

You will be prompted to install and activate the Ignition Framework plugin if you haven’t done so already. Here you can also install our free custom blocks plugin, GutenBee. Through the onboarding page you have access to many useful links, such as the theme’s documentation, our knowledge base articles, direct links to our support hub and access to our theme installation service.

In the Sample Content tab of the onboarding page you can install and activate all the plugins required to import the sample content and proceed with its installation. More info on that on the next section.

How to import the sample content

If you like what you see in our demo website you can simply import the sample content. This means that a close approximation of our demo website will be imported in your WordPress installation. Now all you have to do is replace the content of these pages with yours. Importing the sample content can help serve as a basis on which you can continue to build and expand your site, however keep in mind that this procedure is entirely optional.

Here is a generic video guide on how to import the sample content.

The procedure:

• In your WordPress dashboard visit Appearance > Theme Options > Sample Content.
• Click Install and then Activate for each of the required plugins.
• Click the Get Started button and in the next screen the Import Demo Data button.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

• Main post thumbnail: 870x580px
• Item:  615x410px
• Large Item: 1170x780px
• Article Media 620x620px
• Mini-cart items 160x160px

Setting up site-wide sections

It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the general site layout, the header, footer and some secondary functionality.

General Site Options

You can change your general site options under Customize > Site Options. Under the Layout section you can control your site’s, blog’s and single blog post’s layout, as well as the site width and content/sidebar column ratio. The layout can then be overridden in each post/page individually. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select the ideal font pairing from a full list of Google Fonts and customize font properties for key elements on desktop and mobile devices alike. You also have the option to disable Google Fonts altogether.

Header

On the theme’s demo we use a normal header which can be split into three distinct sections.

1. Top Bar
2. Logo
3. Main Menu

The layout of the header can be set globally under Customize > Header > Layout.

The demo features a normal header with the menu positioned to the right. The sticky menu is enabled and reveals itself when a user scrolls up.

Top Bar

To edit the top bar go to Customize > Top Bar. Here you can toggle the top bar entirely and fill the 3 content areas with simple text, plain HTML, or shortcodes. Refer to the shortcodes section below for information regarding the shortcodes. TODO: ADD DEMO INFO On the theme’s demo we use the

[ignition-custom-menu name="social"]

custom menu shortcode on the right content area to display the social icons.

Logo

The recommended maximum width of your logo is 200px (or 400px if you require retina ready logos). To upload your logo visit the Customizer through your WordPress dashboard Customize > Site Identity. You can see you can upload 2 logos. The main and the alternative one. The alternative logo can be used if you want a different logo to appear when the header layout is set to Transparent under Customize > Header > Layout. On the theme we use the main logo.

Main Menu

If you are not familiar with WordPress menus here is a detailed guide.

Navigate to Customize > Menus. Enter a menu name (It can be anything you like) and click on the Create Menu button. In the next page click the Add Items button and start adding items to the menu. Now all you have to do is assign this menu to a location through the Menu Locations section, check the Main menu location and you are done. Your navigation menu should be now visible on your website.

Create a menu button

You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance > Menus for the item you want. First enable this section from Screen Options.

This is a predefined class you can use for your menu items

The page title section

This section allows you to create an area just below the menu which can display the page’s title & subtitle along with a background image or color.

The page title section can be modified under Customize > Page title. You can choose to disable the page title with background section entirely, change its height, alignment, content and toggle the site’s breadcrumbs. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary and the secondary text colors. On the theme’s demo we do not utilize the page title section globally.

In some cases, you might want to have different background images on different posts, pages and custom post types.

To achieve that create or edit a page. On the right sidebar locate the Page title image field. Upload a new image and preview this page. As you can see we have successfully overridden the image set in the Customizer settings.

On the theme’s demo the page title with background section is enabled, the section’s height is set to 320px and its content is center aligned. The normal page title & subtitle are left enabled and it will be shown on pages where the page title with background section is manually disabled.

In our Knowledge Base you can find more info about the page title section, the breadcrumbs and the page template overrides.

Footer

The footer area is a widgetized area that can be populated with widgets through Customize > Widgets. You can also remove the credits at the very bottom of this area by visiting Customize > Footer > Credits content. You can also adjust the colors by setting a background color & image and modify the border, title and text colors.

Utilities

Lightbox

The theme offers a lightbox for your images which is by default disabled to avoid conflicts with third party plugins which offer lightboxes. If you want to use it you can enable it under Customize > Utilities > Lightbox.

Weather

You can choose to show the weather for a chosen location using the weather shortcode anywhere inside your installation. First you will need to set it up by providing an API key and location under Customize > Utilities > Weather.

Block editor Dark Mode

Some themes might have a dark color scheme which is reflected in the block editor, this can make working with certain blocks a bit harder. Enabling the editor dark mode using the provided checkbox will apply certain styles to the editor in order to improve the content creation experience.

Social Sharing

Via the social sharing panel you can allow users to share your posts & products to Twitter, Facebook & Pinterest with a single click.

Back to Top button

Use the checkbox to enable or disable the back to top button.

Widgets

Enable block widgets support to be able to use blocks as widgets.

Google Maps

Add your Google Maps API key needed for the theme’s property maps to function. More information on how to get the API key here.

Properties

In this Customizer tab you can set your property search page needed for the property search functionality to work and set the price currency format.

For more information check out this knowledge base article about available customization options.

Custom post types

Create a new Property

Navigate to Property > Add New. Then under the Property tab start adding the basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. Read more about post attributes options.
• Taxonomies: Set the property types, statuses, amenities, locations and agents for each property item.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc. All our demo items respect the Customizer options. Read more about Page Settings.

Property meta

Under the Property Settings metabox users can fill in all related information regarding each property. The metabox has four tabs, one for important attributes, one for address and location related information, one for pricing info and one for other useful data. Once these information are filled in you can display them using the custom shortcodes documented below.

Property taxonomies

Oikia has seven custom taxonomies:

1. Types: this taxonomy helps users categorize the properties into apartments, condos, villas and more.
2. Statuses: here users can set the property status i.e. for sale or rent.
3. Amenities: fill in all available amenities, attach them to each property and display them using the available custom shortcode.
4. Locations: a taxonomy useful for location based categorization and search.
5. Attributes: attributes created here will appear below the default ones in the Property Settings → Attributes tab described above. Using the Field type drop down you can select the type of attribute you need (text, HTML, number, percentage or progress bar).
6. Useful data: just like with the attributes, any additional items created here will appear under the Property Settings → Useful data tab in the single property and can be used to provide more info for a particular property.
7. Agents: when creating an agent their name will be automatically added as a taxonomy term here, this way you can easily attach the managing agent to their respective property.

Create a new Agent

Navigate to Agent > Add New. Then under the Document tab start adding the basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. Read more about post attributes options.
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc. All our demo items respect the Customizer options. Read more about Page Settings.

Agent meta

The agent settings metabox contains two tabs one for agent contact info and one for links to their social profiles. Each agent has a bespoke contact form which can be displayed in their own single agent page and on any property they manage. To associate that form to the agent simply create a custom contact form for the particular agent with your preferred contact form plugin (in the demo we use Contact Form 7) and place the shortcode in the Contact form shortcode box under Agent Settings → Contact Info. The form will automatically appear in the agent’s single view and can be easily placed in any property using the agent shortcode.

Custom shortcodes

Oikia offers many custom shortcodes to allow for maximum flexibility when it comes to layout creation. The theme’s custom shortcodes are listed below.

Loan Calculator

[loan-calculator duration="10" interest="2.7"]

The loan calculator shortcode will display a loan calculator to help visitors get a rough idea regarding house financing. The two parameters can be used to change the default values for interest and loan duration. Check out the loan calculator here.

Property Search Form

[property-search-form layout="horizontal"]

Displays the property search form (seen here below the slider). The layout can be either horizontal (default) or vertical for usage in sidebars.

Property Search Page

[property-search-page per_page="10" columns="2"]

This shortcode can be placed in the content area of the property search page. The number of columns and properties displayed per page are customizable.

Agent

[agent]

The agent shortcode will display an agent profile, this shortcode is mainly used in the single property page where it automatically pulls the information of the managing agent (agent taxonomy term attached to the property). It also accepts the slug parameter if you wish to display the agent info on any other place.

Agent Contact Form

[agent-contact-form]

The shortcode displays the contact form attached to the agent (via the Contact Form option in the agent settings metabox). Its primary usage is to display the contact form in the agent’s managed properties. It also accepts the slug parameter if you wish to display the agent contact form on any other place.

Property Address

[property-address]

Displays the address, as seen under Location here.

Property Open House

[property-open-house]

Displays the open house dates, as seen under Open House here.

Property Map

[property-map]

Displays the property’s map, as seen under map here.

Property Amenities

[property-amenities]

Displays the property’s amenities (taxonomy terms attached to the property), as seen amenities map here.

Property Attributes

[property-attributes]

Displays the property’s attributes, as seen attribures map here.

Property Useful Data

[property-useful-data]

Displays the property’s useful data, as seen under useful data here.

Properties Map

[properties-map]

Displays a map listing all properties, as seen towards the bottom of the homepage.

Setting up the pages

Home

The home page has the Full width boxed template applied to it. Under Page Settings > Content Area we have the top/bottom padding & the featured image disabled. The header type is left at its default setting and everything under Page Settings > Page Title is set to hide.

The page’s content starts with a fully aligned Container block with a single column. Inside there is a MaxSlider block with the homepage slider selected and its template set to Home. Below we have another fully aligned Container block with the theme grid enabled. It has a white background 55/45px top/bottom padding and 70px bottom margin. Inside we have the [property-search-form] shortcode.

The Latest Properties section consists of a Container block with a single column and 70px bottom margin. Inside we find a Core Heading and a Post Types block displaying four properties in a two column layout.

The banner is made up from a fully aligned Container block with two equal columns, the theme grid enabled and its content middle/center aligned. It features a semi transparent overlay, a background image, 90/150px top/bottom padding and 70px bottom margin. The left column contains a Heading block, two Buttons, a Core Paragraph and another button.

The featured properties section is a Container block with a single column and 70px bottom padding. Inside we have a Core Heading and a Post Types block displaying four hand picked properties.

Closing the page we have another Container block with a single column and 70px bottom margin. Inside we have a Core Heading and a Post Types block displaying three agents in a three column layout.

Below it we have a fully aligned Container with a height of 500px. Inside is a single column with the [properties-map] shortcode displaying all our properties on a map.

Properties

For Rent/Sale

These pages are property status taxonomy archives and can be added to the menu by activating the Property Types screen option under Appearance > Menus.

Property Listings

The property listing pages contain a single Post Types block which displays the site’s properties in a user defined column layout.

Single Property

To make creating single properties easily we have integrated block patterns (opinion article about block patterns) into Oikia. Users can recreate the theme’s demo layout with a couple of clicks with the Single Property Template block pattern or create their own layouts using bits and pieces of info they need with the individual Overview, Location, Video, Amenities, Useful Data, Attachments, Floorplans and Agent block patterns.

All available block patterns can be found under the Patterns tab in the block inserter sidebar, under the Property pattern category.

In order to replicate the layout of the theme’s single property simply add a Slideshow block with the property’s photos and then insert the Property Single Template block pattern, fill in your description, video, any attachments and floorplans you might have and you are done, that simple. Each of the content sections has its own block pattern if you wish to use them individually.

Agents

Agent Listings

The agent listings are pages containing a single Post Types block displaying the available agents in variable column layouts.

Blog

This is your main posts listing page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Contact

The Contact page has the full width boxed template applied to it.

The page’s content consists of a 450px tall Google Maps block followed by a Container block with two columns. The left column takes up 2/3 of the available space and contains a Core Paragraph and a Contact Form 7 block. The right one contains a Core Heading and a Shortcode block with the [property-search-form layout=’vertical’] shortcode which displays the property search form in a vertical layout.

Common features

This section offers information on features common on all Ignition Framework based themes.

Shortcodes

The Ignition Framework offers a multitude of custom shortcodes these are:

Custom menu: [ignition-custom-menu name="your menu name"]

Site search: [ignition-site-search]

Date: [ignition-date]

Weather: [ignition-current-weather id="your-location-id(optional)"]

Minicart button: [ignition-minicart-button]

Language switcher: [ignition-language-switcher]

Icon link: [ignition-icon-link]

Instagram Feed: [ignition-instagram-feed]

WooCommerce search: [ignition-wc-search]

Booking bar: [ignition-booking-bar]

For more information have a look at this knowledge base article about shortcodes and their usage.

Page options

All themes offer six different templates which modify the location and appearance of the sidebar and the main content’s width.

Additionally pages have a common set of options which allow you to customize the appearance of the page title section, toggle breadcrumbs and more.

All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behavior.

Read the following article for a detailed explanation of the available templates and their options.

WooCommerce

Ignition Framework based themes are compatible with WooCommerce giving you the ability to create awesome online stores which perfectly match the appearance of the rest of your site.

WooCommerce is an optional plugin. You don’t need to install it if you are not looking to build an online store.

After activating WooCommerce it will create and set some default pages. These will serve as your Shop, Cart, Checkout and My Account pages.

The framework offers various customization options both for the main product listing page under Customize > WooCommerce > Product Catalog and for single products under Customize > WooCommerce > Single Products.

Learn more about the WooCommerce integration and the options offered here.

Global Sections

With the Global Sections custom post type included in all Ignition Framework based themes users can create content which can be easily reused in more than 15 key theme locations. For example users can create a newsletter subscription call to action box and immediately display it above the footer on all (or some) posts and pages, or create a banner ad an easily add it between posts in post listings etc.

Check out our knowledge base article for more information about Global Sections.

Blog page

This is your main blog page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Widget areas

The theme provides special widget areas for your posts listings, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages, posts or products.

Page builder support

Ignition Framework based themes work seamlessly with popular page builders like Elementor, Divi, Beaver builder and more to cater to the needs of those who like to build things visually.

Support

If you need help during the initial installation and setup of this theme feel free to get in touch and we will get back to you within 24 hours to help.

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

• PHP version 7.4 or greater.
• MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
• HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard > Plugins > Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure to install both in order to get the whole functionality.

Read the Ignition Framework plugin’s installation instructions.

Theme installation

Installing the theme is a very simple process. Go to your dashboard under Appearance > Themes > Add new, click Upload Theme and upload the zip file. Once uploaded click Install Now and then the Activate Theme link. Read a more detailed overview on how to download and install the theme.

Once the theme is installed and activated you will be forwarded to the theme’s onboarding page.

You will be prompted to install and activate the Ignition Framework plugin if you haven’t done so already. Here you can also install our free custom blocks plugin, GutenBee. Through the onboarding page you have access to many useful links, such as the theme’s documentation, our knowledge base articles and direct links to our support hub.

In the Sample Content tab of the onboarding page you can install and activate all the plugins required to import the sample content and proceed with its installation. More info on that on the next section.

Finally in the Theme Variations tab you have the ability to choose one of the available theme variations for the current theme. Zermatt offers one of the same name the Santorini Resort and the Sun Resort ones. Changing variations will change the color palette of your theme, it will also change Customizer options so be sure to back up your existing ones using the built in tool or another database backup plugin.

How to import the sample content

If you like what you see on the demo websites of Zermatt,  Santorini Resort or Sun Resort you can simply import their sample content. This means that a close approximation of your preferred demo will be imported in your WordPress installation. Now all you have to do is replace the content of these pages with yours. Importing the sample content can help serve as a basis on which you can continue to build and expand your site, however keep in mind that this procedure is entirely optional.

Here is a generic video guide on how to import the sample content.

The procedure:

• In your WordPress dashboard visit Appearance > Theme Options > Sample Content.
• Click Install and then Activate for each of the required plugins.
• Click the Get Started button
• Click the Get Started button and in the next screen, move over the screenshot of the builder/variation of your preference and click the Import Demo button.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

• Main post thumbnail: 790x527px
• Item:  615x410px
• Large Item: 1280x800px
• Article Media 510x510px
• Mini-cart items 160x160px

Setting up site-wide sections

It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the general site layout, the header, footer and some secondary functionality.

General Site Options

You can change your general site options under Customize > Site Options. Under the Layout section you can control your site’s, blog’s and single blog post’s layout, as well as the site width and content/sidebar column ratio. The layout can then be overridden in each post/page individually. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select the ideal font pairing from a full list of Google Fonts and customize font properties for key elements on desktop and mobile devices alike. You also have the option to disable Google Fonts altogether.

Header

On the theme’s demo we use a normal header which can be split into three distinct sections.

1. Top Bar
2. Logo
3. Main Menu

The layout of the header can be set globally under Customize > Header > Layout.

On the demo we have a transparent header, the sticky menu is set to On – Permanent and has the right menu layout applied.

Top Bar

To edit the top bar go to Customize > Top Bar. Here you can toggle the top bar entirely and fill the 3 content areas with simple text, plain HTML, or shortcodes. Refer to the shortcodes section below for information regarding the shortcodes. On the theme’s demo we use the

[ignition-custom-menu name="Top Menu"]

custom menu shortcode on the left content area and the weather and menu shortcodes on the right content area.

[ignition-current-weather][ignition-language-switcher]

Logo

The recommended maximum width of your logo is 200px (or 400px if you require retina ready logos). To upload your logo visit the Customizer through your WordPress dashboard Customize > Site Identity. You can see you can upload 2 logos. The main and the alternative one. The alternative logo can be used if you want a different logo to appear when the header layout is set to Transparent under Customize > Header > Layout. On the demo we use just the normal logo.

Main Menu

If you are not familiar with WordPress menus here is a detailed guide.

Navigate to Customize > Menus. Enter a menu name (It can be anything you like) and click on the Create Menu button. In the next page click the Add Items button and start adding items to the menu. Now all you have to do is assign this menu to a location through the Menu Locations section, check the Main menu location and you are done. Your navigation menu should be now visible on your website.

Create a menu button

You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance > Menus for the item you want. First enable this section from Screen Options.

This is a predefined class you can use for your menu items

The page title section

This section allows you to create an area just below the menu which can display the page’s title & subtitle along with a background image or color.

The page title section can be modified under Customize > Page title. You can choose to disable the page title with background section entirely, change its height, alignment, content and toggle the site’s breadcrumbs. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary and the secondary text colors. On the theme’s demo we do not utilize the page title section globally.

In some cases, you might want to have different background images on different posts, pages and custom post types.

To achieve that create or edit a page. On the right sidebar locate the Page title image field. Upload a new image and preview this page. As you can see we have successfully overridden the image set in the Customizer settings.

On the theme’s demo the page title with background section is set to display with a height of 370px, the page title is center aligned and the normal page title & subtitle are hidden.

In our Knowledge Base you can find more info about the page title section, the breadcrumbs and the page template overrides.

Footer

The footer area is a widgetized area that can be populated with widgets through Customize > Widgets. You can also remove the credits at the very bottom of this area by visiting Customize > Footer > Credits content. You can also adjust the colors by setting a background color & image and modify the border, title and text colors.

Utilities

Lightbox

The theme offers a lightbox for your images which is by default disabled to avoid conflicts with third party plugins which offer lightboxes. If you want to use it you can enable it under Customize > Utilities > Lightbox.

Weather

You can choose to show the weather for a chosen location using the weather shortcode anywhere inside your installation. First you will need to set it up by providing an API key and location under Customize > Utilities > Weather.

Block editor Dark Mode

Some themes might have a dark color scheme which is reflected in the block editor, this can make working with certain blocks a bit harder. Enabling the editor dark mode using the provided checkbox will apply certain styles to the editor in order to improve the content creation experience.

Social Sharing

Via the social sharing panel you can allow users to share your posts & products to Twitter, Facebook & Pinterest with a single click.

Back to Top button

Use the checkbox to enable or disable the back to top button.

Widgets

Enable block widgets support to be able to use blocks as widgets.

For more information check out this knowledge base article about available customization options.

Custom post types

Create a new Accommodation

Navigate to Accommodation > Add New. Then under the Accommodation tab start adding the basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. Read more about post attributes options.
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc. All our demo items respect the Customizer options. Read more about Page Settings.

Setting up the pages

Homepage

The homepage has the full width boxed template applied to it. Under Page Settings > Content Area the top/bottom padding is removed and under Page Settings > Page Title the page title with background section is set to hide.

The homepage’s content starts with a fully aligned Container block with its height set to -1 so it takes up the full viewport height. It has a background image & overlay color set along with 90px bottom margin.

Below we have another Container block with the theme grid enabled and 0/90px top/bottom margin set under block appearance. Inside we have a single column with an Image block, a Heading with the Theme Heading block style applied to it and a Paragraph block. All blocks are center aligned.

Next up we have a banner section consisting of a fully aligned Container block with the theme grid enabled, middle & center horizontal & vertical content alignment respectively, a background image set, 215px top/bottom padding and 90px bottom margin. Inside we have a single column with a Heading, a Core Paragraph and a Button, all center aligned.

The Rooms & Suites section consists of a Container block with a single column containing a Heading with the Theme Heading block style applied, a Paragraph and another Container with two equal columns. In the left column we have a 600px tall Banner block with the Theme Border style applied, its content aligned to middle/center, and a background image & overlay color set. Inside we have a Heading, a Paragraph and a Button. In the right column we have two more, almost identical Banner blocks one below the other with 285px height.

Next we have another hero banner area identical to the Our Family Suite one above with the parallax option enabled on the container.

The photo gallery section consists of a Heading with the Theme Heading block style applied to it and a Gallery block displaying a justified gallery with the Theme Border style applied to it and 90px bottom margin set.

The Spa & Wellness hero banner is identical to the Family Suite one above.

The restaurant section consists of a Container block with the theme grid enabled. Inside we find two equal columns. The left one contains an Image block with the Theme Border style applied to it. The right column contains two Core Paragraphs and a Button block.

Finally the Get in touch section starts with an Image block followed by a Heading with the Theme Heading block style applied. Following is a Container with two equal columns. The left column contains a Google Maps block with the Theme Border style applied. The right column contains another container with two equal columns, the left one houses a Heading and a Core Paragraph and the left one a Heading and the Core Social Icons block with the Theme Socials block style applied. After the container we have a Contact Form 7 block.

Rooms & suites

The page has the full width boxed template applied to it with a small excerpt which will appear as the theme’s subtitle.

The rooms listing page starts with an Image block followed by a Paragraph with a small description. Next up we have a 590px tall Banner block with the theme border style applied and its content middle/center aligned. Inside the banner we have a Heading, a Paragraph and a Button.

For the room listing we have a Container block with a single column containing a Post Types block with the overlay block style applied displaying three items from the Suites category of the Accommodation post  type in a three column layout. Below the Container we have a Core Pullquote block.

The page closes with another Container block containing a Heading block with the Theme Heading block style applied and another Post Types block this time displaying items from the Rooms category of the Accommodation post type.

Explore

The page has the full width boxed template applied to it with a small excerpt which will appear as the theme’s subtitle.

The page’s content starts with an Image Block followed by a Heading block with the Theme Heading style applied to it, next is a Paragraph followed by a Gallery block with the Theme Border style applied, displaying three images in a three column layout. After the gallery we have another Paragraph and a Divider block.

The activities section consists of three Container blocks, each with two equal columns. The one column contains a Heading and a Paragraph and the other an Image block with the Theme Border style applied. The column position is swapped in each Container block.

Finally we have a booking inquiry section consisting of a Divider block, an Image block, a Heading, a Paragraph and a Button.

Our restaurant

The page has the full width boxed template applied to it.

The page’s content consists of an Image block, a Heading with the Theme Heading block style applied followed by a Container with three equal colums each containing an Icon Box block. Next is a Paragraph followed by a Gallery block displaying three images in a three column layout followed by another paragraph.

Finally we have a restaurant reservation inquiry section consisting of a Divider block, an Image block, a Heading, a Paragraph and a Button.

Spa & Wellness

The page has the full width boxed template applied to it with a small excerpt which will appear as the theme’s subtitle.

The layout of the Spa & Wellness page is identical to the one of the Explore page presented above with different content.

Gallery

The page has the full width boxed template applied to it with a small excerpt which will appear as the theme’s subtitle.

The gallery page’s content consists of a single Gallery block with the Theme Border block style applied. It displays a few images with a justified gallery layout with a row height of 300px.

Blog

This is your main posts listing page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Book Now

The page has the full width boxed template applied to it.

The booking page’s content starts with a Container block with a single column containing a Google Maps block with the Theme Border style applied. Below we have a paragraph block with a background color set and 30px padding. Finally we have a Container block with a 66/33 column layout. The left column contains a Contact Form 7 block and the right one contains a Heading and a Core Paragraph.

Common features

This section offers information on features common on all Ignition Framework based themes.

Shortcodes

The Ignition Framework offers a multitude of custom shortcodes these are:

Custom menu: [ignition-custom-menu name="your menu name"]

Site search: [ignition-site-search]

Date: [ignition-date]

Weather: [ignition-current-weather id="your-location-id(optional)"]

Minicart button: [ignition-minicart-button]

Language switcher: [ignition-language-switcher]

Icon link: [ignition-icon-link]

Instagram Feed: [ignition-instagram-feed]

WooCommerce search: [ignition-wc-search]

Booking bar: [ignition-booking-bar]

For more information have a look at this knowledge base article about shortcodes and their usage.

Page options

All themes offer six different templates which modify the location and appearance of the sidebar and the main content’s width.

Additionally pages have a common set of options which allow you to customize the appearance of the page title section, toggle breadcrumbs and more.

All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behavior.

Read the following article for a detailed explanation of the available templates and their options.

WooCommerce

Ignition Framework based themes are compatible with WooCommerce giving you the ability to create awesome online stores which perfectly match the appearance of the rest of your site.

WooCommerce is an optional plugin. You don’t need to install it if you are not looking to build an online store.

After activating WooCommerce it will create and set some default pages. These will serve as your Shop, Cart, Checkout and My Account pages.

The framework offers various customization options both for the main product listing page under Customize > WooCommerce > Product Catalog and for single products under Customize > WooCommerce > Single Products.

Learn more about the WooCommerce integration and the options offered here.

Global Sections

With the Global Sections custom post type included in all Ignition Framework based themes users can create content which can be easily reused in more than 15 key theme locations. For example users can create a newsletter subscription call to action box and immediately display it above the footer on all (or some) posts and pages, or create a banner ad an easily add it between posts in post listings etc.

Check out our knowledge base article for more information about Global Sections.

Blog page

This is your main blog page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Widget areas

The theme provides special widget areas for your posts listings, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages, posts or products.

Page builder support

Ignition Framework based themes work seamlessly with popular page builders like Elementor, Divi, Beaver builder and more to cater to the needs of those who like to build things visually.

Support

If you need help during the initial installation and setup of this theme feel free to get in touch and we will get back to you within 24 hours to help.

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

• PHP version 7.4 or greater.
• MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
• HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard > Plugins > Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure to install both in order to get the whole functionality.

Here you can find an overview of how to download and install the plugin.

Theme installation

nstalling the theme is a very simple process. Go to your dashboard under Appearance > Themes > Add new, click Upload Theme and upload the zip file. Once uploaded click Install Now and then the Activate Theme link. Here is a detailed overview on how to download and install the theme.

Once the theme is installed and activated you will be forwarded to the theme’s onboarding page.

Here you will be prompted to install and activate the Ignition Framework plugin if you haven’t done so already. Here you can also install our free custom blocks plugin, GutenBee. Through the onboarding page you have access to many useful links, such as the theme’s documentation, our knowledge base articles and direct links to our support hub.

In the Sample Content tab of the onboarding page you can install and activate all the plugins required to import the sample content and proceed with its installation. More info on that on the next section.

How to import the sample content

If you like what you see in our demo website you can simply import the sample content. This means that a close approximation of our demo website will be imported in your WordPress installation. Now all you have to do is replace the content of these pages with yours. Importing the sample content can help serve as a basis on which you can continue to build and expand your site, however keep in mind that this procedure is entirely optional.

Check out a generic overview of the sample content import procedure.

The procedure:

• In your WordPress dashboard visit Appearance > Theme Options > Sample Content.
• Click Install and then Activate for each of the required plugins.
• Click the Get Started button and in the next screen, move over the screenshot of the builder/variation of your preference and click the Import Demo button.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

• Main post thumbnail: 938x625px
• Item: 645x430px
• Large Item: 1320x880px
• Article Media: 510x510px
• Mini-cart items: 160x160px

Setting up site-wide sections

It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the general site layout, the header, footer and some secondary functionality.

General Site Options

You can change your general site options under Customize > Site Options. Under the Layout section you can control your site’s, blog’s and single blog post’s layout, as well as the site width and content/sidebar column ratio. The layout can then be overridden in each post/page individually. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select the ideal font pairing from a full list of Google Fonts and customize font properties for key elements on desktop and mobile devices alike. You also have the option to disable Google Fonts altogether.

Read this knowledge base article for more information regarding the site options.

Header

The header on the theme consists of two key elements, the logo and the main menu.

The layout of the header can be set globally under Customize > Header > Layout.

On the theme’s demo the header layout is set to Transparent, the menu is positioned on the right and is made sticky.

Under the Header > Content we have added the [ignition-minicart-button] shortcode to display the minicart button next to the menu.

Top Bar

Under Customize > Top Bar you can toggle the top bar entirely and fill the 3 content areas with simple text, plain HTML, or shortcodes. Refer to the shortcodes section below for information regarding the shortcodes. The top bar is disabled by default in Projektor and thus not visible on the demo.

Logo

The recommended maximum width of your logo is 90px (or 180px  if you need a retina ready logo). To upload your logo navigate to Customize > Site Identity. You can upload 2 logos, the main and the alternative one. The alternative logo can be used if you want a different logo to appear when the header layout is set to Transparent under Customize > Header > Layout.

Main Menu

If you are not familiar with WordPress menus here is a detailed guide.

Navigate to Customize > Menus. Enter a menu name (It can be anything you like) and click on the Create Menu button. In the next page click the Add Items button and start adding items to the menu. Now all you have to do is assign this menu to a location through the Menu Locations section, check the Main menu location and you are done. Your navigation menu should be now visible on your website.

Create a menu button

You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance > Menus for the item you want. First enable this section from Screen Options.

The page title section

The page title section can be modified under Customize > Page title. You can choose to disable the page title with background section entirely, change its height, alignment, content and toggle the site’s breadcrumbs. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary and the secondary text colors.

In some cases you might want to have different background images on different posts, pages and custom post types.

To achieve that create or edit a page. On the right sidebar locate the Page title image field. Upload a new image and preview this page. This will override the image set in the Customizer settings.

The Show Page Title with Background option is enabled on the theme’s demo with its height set to 250px the Normal Page Title & Subtitle enabled and the breadcrumbs toggled off. We also have a background color and image set.

In our Knowledge Base you can find more info about the page title section, the breadcrumbs and the page template overrides.

Footer

The footer area is a widgetized area that can be populated with widgets through Customize > Widgets. You can also remove the credits at the very bottom of this area by visiting Customize > Footer > Credits content. You can also adjust the colors by setting a background color & image and modify the border, title and text colors.

Utilities

In the utilities section you will configuration options for various small theme features, such as the built in weather display capability, toggle for the theme’s lightbox, the block editor dark theme, back to top button, social sharing and block widget support.

Read here for more information regarding the theme’s utilities.

Custom post types

Creating a new Speaker

Create a new Speaker under Speaker > Add New. Then under the Speaker tab start adding basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. More info about these options can be found here.
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc.

With each Speaker you create a new taxonomy term will be created with the Speaker’s name under the Speakers taxonomy of the Sessions post type, this allows you to easily attach speakers to your sessions.

Creating a new Event

Create a new Event under Events > Add New. Then under the Event tab start adding basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. More info about these options can be found here.
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Tracks: Select the track under which this item will appear.
• Time Slots: Select the time of the event.
• Speakers: Attach speakers to the event.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc. More info about these options can be found here.

To create a schedule for your conference you will need to use the days as parent Time Slot terms and the hours as child terms to each parent category, as shown in the image below.

When setting time slots for an event make sure to select both the day and the time, for example to set an event for the first day at 10:00 check both Day 1 and 10:00.

To create a Header Event i.e. an event that spans multiple events of the same day (for example a lunch break), set one event to be on both tracks at the same day/time.

Setting up the pages

Home

The home page has the Full width boxed template applied. Under Page Settings > Content Area the top/bottom padding is removed and under Page Settings > Page Title the Page Title with Background, Normal Page Title and Subtitle are hidden.

The homepage’s content starts with a fully aligned Container block with the theme grid enabled, its height set to 800px and its vertical content alignment set to middle. Under block appearance it has a background color and image set and 100px bottom margin. Inside we find a Paragraph, a Heading and a Button.

The welcome section consists of an H2 Heading block with its bottom margin set to 0, a Paragraph with 50px bottom margin, a Core Image, another Paragraph and a Button.

The Speaker section consists of a 100px tall Spacer followed by a Heading and a Post Types block displaying two items from the speakers post type in a two column layout. Next is another 100px tall spacer, a Heading with 0px bottom margin, a Paragraph with 50px bottom margin and another Post Types block displaying three items from the speakers post type in a three column layout with an offset of 2.

The latest news section starts with a 100px tall Spacer followed by a Heading, a Post Types block displaying three posts in a three column layout. Below we have another Heading and a YouTube embed block, followed by another 100px tall Spacer.

The testimonials section starts with a Heading, followed by a Paragraph and a Container block with three equal columns. Each column contains a Testimonial block with its text aligned to the left and the avatar at the bottom.

The homepage closes with the Sponsors section. The section starts with a 100px tall Spacer followed by a Heading and a Core Columns block with two equal columns. Each column contains a Core Image block. The pattern repeats two more times for the Silver and Bronze sponsor sections which have three and four columns respectively.

Schedule

The page has the full width boxed layout applied, and an excerpt set which will appear as the page’s subtitle.

The page’s content consists of an H4 Heading, followed by an H2 Heading and a Core Shortcode block with the [conference-day name="Day 1"] shortcode which will create the schedule for the first day. The same three blocks are repeated below for the second day, the shortcode this time being [conference-day name="Day 2"].

The conference-day shortcode accepts only one argument and that is the name of the parent time slot category (i.e. day) you wish to display. See creating a new session above for info on Time Slot hierarchy.

Speakers

This page has the full width boxed template applied and a small excerpt which appears as the page’s overtitle in the page title section.

The content consists of a single Post Types block displaying all items of the Speakers post type in a three column layout with the category filters enabled.

Sponsors

The page has the full width boxed template applied and a small excerpt which appears as the page’s overtitle in the page title section.

Content wise we start with a Core Paragraph followed by a Heading block and a Core Column block with two equal columns. Each column contains an image block with the sponsor’s logo. The Heading/Core Column block combo repeats two more times for the Silver and Bronze sponsors with three and four columns respectively.

Workshops

The page has the full width boxed template applied and a small excerpt which appears as the page’s overtitle in the page title section.

The page’s content consists of a Heading and a Core Shortcode block with the [conference-day name="Workshops"] shortcode to display the schedule for the conference’s workshops.

News

This is your main posts listing page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Tickets

The shop page is automatically created upon WooCommerce’s activation. On the theme’s demo we have set the page’s layout to Content/Sidebar and opted for our products to display an alternate image when hovered under Customize > WooCommerce > Product Catalog. Read here for more info on WooCommerce related options available on the theme.

Common Features

Shortcodes

The Ignition Framework offers a multitude of custom shortcodes these are:

Custom menu: [ignition-custom-menu name="your menu name"]

Site search: [ignition-site-search]

Date: [ignition-date]

Weather: [ignition-current-weather id="your-location-id(optional)"]

Minicart button: [ignition-minicart-button]

Language switcher: [ignition-language-switcher]

Icon link: [ignition-icon-link]

Instagram Feed: [ignition-instagram-feed]

WooCommerce search: [ignition-wc-search]

For more information have a look at this knowledge base article about shortcodes and their usage.

Page options

All themes offer six different templates which modify the location and appearance of the sidebar and the main content’s width.

Additionally pages have a common set of options which allow you to customize the appearance of the page title section, toggle breadcrumbs and more.

All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behavior.

Read the following article for a detailed explanation of the available templates and their options.

WooCommerce

Ignition Framework based themes are compatible with WooCommerce giving you the ability to create awesome online stores which perfectly match the appearance of the rest of your site.

WooCommerce is an optional plugin. You don’t need to install it if you are not looking to build an online store.

After activating WooCommerce it will create and set some default pages. These will serve as your Shop, Cart, Checkout and My Account pages.

The framework offers various customization options both for the main product listing page under Customize > WooCommerce > Product Catalog and for single products under Customize > WooCommerce > Single Products.

Learn more about the WooCommerce integration and the options offered.

Global Sections

With the Global Sections custom post type included in all Ignition Framework based themes users can create content which can be easily reused in more than 15 key theme locations. For example users can create a newsletter subscription call to action box and immediately display it above the footer on all (or some) posts and pages, or create a banner ad an easily add it between posts in post listings etc.

Learn more about Global Sections here.

Blog page

This is your main blog page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Widget areas

The theme provides special widget areas for your posts listings, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages, posts or products.

Page builder support

Ignition Framework based themes work seamlessly with popular page builders like Elementor, Divi, Beaver builder and more to cater to the needs of those who like to build things visually.

Support

If you need help during the initial installation and setup of this theme feel free to get in touch and we will get back to you within 24 hours to help.

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

• PHP version 7.4 or greater.
• MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
• HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard > Plugins > Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure to install both in order to get the whole functionality.

Here you can find an overview of how to download and install the plugin.

Theme installation

nstalling the theme is a very simple process. Go to your dashboard under Appearance > Themes > Add new, click Upload Theme and upload the zip file. Once uploaded click Install Now and then the Activate Theme link. Here is a detailed overview on how to download and install the theme.

Once the theme is installed and activated you will be forwarded to the theme’s onboarding page.

Here you will be prompted to install and activate the Ignition Framework plugin if you haven’t done so already. Here you can also install our free custom blocks plugin, GutenBee. Through the onboarding page you have access to many useful links, such as the theme’s documentation, our knowledge base articles and direct links to our support hub.

In the Sample Content tab of the onboarding page you can install and activate all the plugins required to import the sample content and proceed with its installation. More info on that on the next section.

How to import the sample content

If you like what you see in our demo website you can simply import the sample content. This means that a close approximation of our demo website will be imported in your WordPress installation. Now all you have to do is replace the content of these pages with yours. Importing the sample content can help serve as a basis on which you can continue to build and expand your site, however keep in mind that this procedure is entirely optional.

Check out a generic overview of the sample content import procedure.

The procedure:

• In your WordPress dashboard visit Appearance > Theme Options > Sample Content.
• Click Install and then Activate for each of the required plugins.
• Click the Get Started button and in the next screen, move over the screenshot of the builder/variation of your preference and click the Import Demo button.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

• Main post thumbnail: 870x580px
• Item: 615x410px
• Large Item: 1170x780px
• Article Media: 510x510px
• Mini-cart items: 160x160px
• Sidebar tall item: 690px in width and unlimited in height

Setting up site-wide sections

It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the general site layout, the header, footer and some secondary functionality.

General Site Options

You can change your general site options under Appearance > Customize > Site Options. Under the Layout section you can control your site’s, blog’s and single blog post’s layout, as well as the site width and content/sidebar column ratio. The layout can then be overridden in each post/page individually. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select the ideal font pairing from a full list of Google Fonts and customize font properties for key elements on desktop and mobile devices alike. You also have the option to disable Google Fonts altogether.

Read this knowledge base article for more information regarding the site options.

Header

The header on the theme consists of two key elements, the logo and the main menu.

The layout of the header can be set globally under Customize > Header > Layout.

On the theme’s demo we have selected the centered layout for the menu and made it sticky.

Top Bar

Under Customize > Top Bar you can toggle the top bar entirely and fill the 3 content areas with simple text, plain HTML, or shortcodes. Refer to the shortcodes section below for information regarding the shortcodes. The top bar is disabled by default in Berliner and thus not visible on the demo.

Logo

The recommended maximum width of your logo is 90px (or 180px  if you need a retina ready logo). To upload your logo navigate to Customize > Site Identity. You can upload 2 logos, the main and the alternative one. The alternative logo can be used if you want a different logo to appear when the header layout is set to Transparent under Customize > Header > Layout. On the theme’s demo we use just the main logo.

Main Menu

If you are not familiar with WordPress menus here is a detailed guide.

Navigate to Customize > Menus. Enter a menu name (It can be anything you like) and click on the Create Menu button. In the next page click the Add Items button and start adding items to the menu. Now all you have to do is assign this menu to a location through the Menu Locations section, check the Main menu location and you are done. Your navigation menu should be now visible on your website.

Create a menu button

You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance > Menus for the item you want. First enable this section from Screen Options.

Before you start working with your menus check this article

The page title section

The page title section can be modified under Customize > Page title. You can choose to disable the page title with background section entirely, change its height, alignment, content and toggle the site’s breadcrumbs. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary and the secondary text colors.

In some cases you might want to have different background images on different posts, pages and custom post types.

To achieve that create or edit a page. On the right sidebar locate the Page title image field. Upload a new image and preview this page. This will override the image set in the Customizer settings.

The Show Page Title with Background option is enabled on Berliner’s demo with it’s height set to 150px the Normal Page Title & Subtitle and breadcrumbs toggled off. We also have a background color and image set along with a semi transparent overlay color.

In our Knowledge Base you can find more info about the page title section, the breadcrumbs and the page template overrides.

Footer

The footer area is a widgetized area that can be populated with widgets through Customize > Widgets. You can remove the credits at the very bottom of this area by visiting Customize > Footer > Credits Content section. You can also adjust the footer’s appearance by setting a background color & image and modify the border, title and text colors.

Utilities

In the utilities section you will configuration options for various small theme features, such as the built in weather display capability, toggle for the theme’s lightbox, the block editor dark theme, back to top button, social sharing and block widget support.

Read here for more information regarding the theme’s utilities.

Site Identity

Under this section you can set the site’s logo, toggle and modify the site’s title and tagline and site icon. On the theme’s demo we use an image logo and have set the site’s title and tagline to not appear.

Custom post types

Creating a new Discography Item

Create a new Discography item from Discography > Add New. Then under the Discography Item tab you can add some basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. More info about these options can be found here.
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc.
• Discography Info: Add the item release date, catalog number, label and producers

To display tracklists you can use AudioIgniter’s shortcode in any discography item. Learn more on how to create playlists and getting this shortcode here

Creating a new Event

Create a new Event item from Events > Add New. Then under the Event tab start adding basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. More info about these options can be found here.
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc. More info about these options can be found here.
• Event Settings: Select your Event Date, time and Location.

Creating a new Team Member

Create a new Team under Team > Add New. Then under the Team Member tab start adding basic item attributes. These are:

• Summary: Control the location and appearance of the sidebar. More info about these options can be found here.
• Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
• Featured image: Will appear on all related listings and on the item’s single page.
• Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
• Page Title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
• Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc.
• Team Member Info: Here you can select your team member information like the Location, Genre and booking notice.

Setting up the pages

Home

The home page has the Full width boxed template applied with the top/bottom padding removed under Page Settings > Content Area.

The page’s content starts off with a fully aligned Core Group block containing a MaxSlider block with out home page slider. Below it we have a fully aligned Container block with the theme grid enabled, a background color set, 20px top/bottom padding, -60px top and 0 bottom margin. Inside there is a single column containing a Core Shortcode block with an AudioIgniter playlist shortcode in it.

The upcoming events section starts with a fully aligned Container with the theme grid enabled, a background color set, 80px top/bottom padding and 0 bottom margin. Inside it has a single column with a Heading block with the Theme Heading block style applied to it, center-aligned text and 70px bottom margin. Below the heading we have a Post Types block displaying the latest 4 items from events post type in a 4 column layout.

The latest news section starts with a Container block with 80px top/bottom padding and 0 bottom margin. Inside there is a single column containing a Heading block with the Theme Heading block style applied to it, center-aligned text and 70px bottom margin, a Post Types block displaying 4 posts in a single column layout and a Button with its alignment set to center and 70px top margin.

The hero section is built with a fully aligned Container block with the theme grid enabled, 400px height, middle vertical content alignment, a background image with image position set to center & overlay color set and 0 bottom margin. Inside there is a single column containing a Heading block with the Theme Heading block style applied to it, text is center-aligned and its color is set to white, a core Paragraph block with text color set to white and a center-aligned Button, with its text and background colors set.

Finally the Latest Releases and Media sections consist of a fully aligned Container with the theme grid enabled, a background color set and 80px top/bottom padding. Inside we have a single column containing a center-aligned Heading with the theme heading block style applied and 70px bottom margin, a Post Types block displaying 4 discography items in a 4 column layout. Below it we find a 75px tall Spacer. The page closes with another Heading with the theme heading style and 70px bottom margin and a gallery block displaying 6 images in a 3 column layout with Theme Border style enabled.

Event listing pages

Events List

The page has the Full width boxed template applied to it and a small excerpt which serves as the page’s subtitle.

The content starts with a Core Heading followed by a Google Maps block with the theme border block style applied. Below it there is another Core Heading and a Post Types block displaying six items from the events post type in a single column layout.

Events Grid

This page also has the full width boxed layout applied to it.

The page’s content consists of a single Post Types block pulling six events and showing them in a three column layout.

Discography

The discography page has the full width boxed template applied to it.

The page’s content consists of a single Post Types block displaying items from the Discography post type with the category filters enabled.

Artists

The artists listing page has the full width boxed template applied to it.

The page’s content consists of a single Post Types block displaying items from the Team post type with the category filters enabled.

Shop

The shop page is automatically created upon WooCommerce’s activation. On the theme’s demo we have set the page’s layout to Content/Sidebar and opted for our products to display an alternate image when hovered under Customize > WooCommerce > Product Catalog. Read here for more info on WooCommerce related options available on the theme.

Blog

This is your main posts listing page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Bookings

The bookings page has the full width boxed template applied to it and a small excerpt set as the page’s subtitle.

The content for the bookings page starts with a Google Maps block with the theme border block style applied. The map is followed by a Core Columns block with three equal columns each containing a Heading and a Core Paragraph. The section ends with a Divider block.

The page closes with a Core Columns block with two columns. The left has a width of 33.33% and contains a Heading and a Core Paragraph and the right one houses our contact from provided by Contact Form 7.

Common Features

Shortcodes

The Ignition Framework offers a multitude of custom shortcodes these are:

Custom menu: [ignition-custom-menu name="your menu name"]

Site search: [ignition-site-search]

Date: [ignition-date]

Weather: [ignition-current-weather id="your-location-id(optional)"]

Minicart button: [ignition-minicart-button]

Language switcher: [ignition-language-switcher]

Icon link: [ignition-icon-link]

Instagram Feed: [ignition-instagram-feed]

WooCommerce search: [ignition-wc-search]

For more information about the shortcodes and their usage have a look at this Knowledge base article.

Page options

All themes offer six different templates which modify the location and appearance of the sidebar and the main content’s width.

Additionally pages have a common set of options which allow you to customize the appearance of the page title section, toggle breadcrumbs and more.

All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behavior.

Read the following article for a detailed explanation of the available templates and their options.

WooCommerce

Ignition Framework based themes are compatible with WooCommerce giving you the ability to create awesome online stores which perfectly match the appearance of the rest of your site.

WooCommerce is an optional plugin. You don’t need to install it if you are not looking to build an online store.

After activating WooCommerce it will create and set some default pages. These will serve as your Shop, Cart, Checkout and My Account pages.

The framework offers various customization options both for the main product listing page under Customize > WooCommerce > Product Catalog and for single products under Customize > WooCommerce > Single Products.

Learn more about the WooCommerce integration and the options offered.

Global Sections

With the Global Sections custom post type included in all Ignition Framework based themes users can create content which can be easily reused in more than 15 key theme locations. For example users can create a newsletter subscription call to action box and immediately display it above the footer on all (or some) posts and pages, or create a banner ad an easily add it between posts in post listings etc.

Learn more about Global Sections here.

Blog page

This is your main blog page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Widget areas

The theme provides special widget areas for your posts listings, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages, posts or products.

Page builder support

Ignition Framework based themes work seamlessly with popular page builders like Elementor, Divi, Beaver builder and more to cater to the needs of those who like to build things visually.

Support

If you need help during the initial installation and setup of this theme feel free to get in touch and we will get back to you within 24 hours to help.

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

• PHP version 7.4 or greater.
• MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
• HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard > Plugins > Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure to install both in order to get the whole functionality.

Here you can find an overview of how to download and install the plugin.

Theme installation

Installing the theme is a very simple process. Go to your dashboard under Appearance > Themes > Add new, click Upload Theme and upload the zip file. Once uploaded click Install Now and then the Activate Theme link. Here is a detailed overview on how to download and install the theme.

Once the theme is installed and activated you will be forwarded to the theme’s onboarding page.

Here you will be prompted to install and activate the Ignition Framework plugin if you haven’t done so already. Here you can also install our free custom blocks plugin, GutenBee. Through the onboarding page you have access to many useful links, such as the theme’s documentation, our knowledge base articles, direct links to our support hub and access to our theme installation service.

In the Sample Content tab of the onboarding page you can install and activate all the plugins required to import the sample content and proceed with its installation. More info on that on the next section.

How to import the sample content

If you like what you see in our demo website you can simply import the sample content. This means that a close approximation of our demo website will be imported in your WordPress installation. Now all you have to do is replace the content of these pages with yours. Importing the sample content can help serve as a basis on which you can continue to build and expand your site, however keep in mind that this procedure is entirely optional.

Check out a generic overview of the sample content import procedure.

The procedure:

• In your WordPress dashboard visit Appearance > Theme Options > Sample Content.
• Click Install and then Activate for each of the required plugins.
• Click the Get Started button and in the next screen, move over the screenshot of the builder/variation of your preference and click the Import Demo button.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

• Main post thumbnail: 960x640px
• Item: 615x410px
• Large Item: 1290x860px
• Article Media: 510x510px
• Mini-cart items: 160x160px

Setting up site-wide sections

It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the general site layout, the header, footer and some secondary functionality.

General Site Options

You can change your general site options under Appearance > Customize > Site Options. Under the Layout section you can control your site’s, blog’s and single blog post’s layout, as well as the site width and content/sidebar column ratio. The layout can then be overridden in each post/page individually. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select the ideal font pairing from a full list of Google Fonts and customize font properties for key elements on desktop and mobile devices alike. You also have the option to disable Google Fonts altogether.

Read this knowledge base article for more information regarding the site options.

Header

The header on the theme consists of three key elements:

1. Top Bar
2. Logo
3. Main Menu

The layout of the header can be set globally under Customize > Header > Layout.

On the demo we have a transparent header, the menu is sticky and is aligned to the right.

Top Bar

To edit the top bar go to Customize > Top Bar. Here you can toggle the top bar entirely and fill the 3 content areas with simple text, plain HTML, or shortcodes.

The left content area on the theme’s demo contains the some simple HTML and text, the right one contains an HTML link to the my account page, and two shortcodes, one for the minicart and one for the site search. Refer to the shortcodes section below for information regarding the shortcodes.

[ignition-minicart-button][ignition-wc-search] 

Top bar colors can also be modified through this tab.

Logo

The recommended maximum width of your logo is 200px (or double that if you want a retina ready logo) while you can use any height you want. To upload your logo go to Customize > Site Identity. You can upload two logos. The normal and the alternative one. The alternative logo can be used if you want a different logo to appear when the header layout is set to Transparent under Customize > Header > Layout. In the theme’s demo we don’t use a logo.

Learn more about the header and its options.

Main Menu

If you are not familiar with WordPress menus here is a detailed guide.

Navigate to Customize > Menus. Enter a menu name (It can be anything you like) and click on the Create Menu button. In the next page click the Add Items button and start adding items to the menu. Now all you have to do is assign this menu to a location through the Menu Locations section, check the Main menu location and you are done. Your navigation menu should be now visible on your website.

Create a menu button

You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance > Menus for the item you want. First enable this section from Screen Options.

The page title section

The page title section can be modified under Customize > Page title. You can choose to disable the page title section entirely, change its height, alignment, content and toggle the site’s breadcrumbs. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary and the secondary text colors.

In some cases, you might want to have different background images on different posts, pages and custom post types. To achieve that set the section up globally and then create or edit a page. On the right sidebar locate the Page title image field. Upload a new image and preview this page. As you can see we have successfully overridden the image set in the Customizer settings.

On the theme’s demo the Page Title with Background option is disabled by default and the normal page title and subtitle are set to show.

In our Knowledge Base you can find more info about the page title section, the breadcrumbs and the page template overrides.

Footer

The footer area is a widgetized area that can be populated with widgets through Customize > Widgets. You can also remove the credits at the very bottom of this area by visiting Customize > Footer > Credits content section. You can also adjust the colors by setting a background color & image and modify the border, title and text colors.

Utilities

Lightbox

The theme offers a lightbox for your images which is by default disabled to avoid conflicts with third party plugins which offer lightboxes. If you want to use it you can enable it under Customize > Utilities > Lightbox.

Weather

You can choose to show the weather for a chosen location using the weather shortcode anywhere inside your installation. First you will need to set it up by providing an API key and location under Customize > Utilities > Weather.

Block editor Dark Mode

Some themes have dark color schemes which are reflected in the block editor, this can make working with certain blocks a bit harder. Enabling the editor dark mode using the provided checkbox will apply certain styles to the editor in order to improve the content creation experience.

Social Sharing

Via the social sharing panel you can allow users to share your posts & products to Twitter, Facebook & Pinterest with a single click.

Back to Top button

Use the checkbox to enable or disable the back to top button.

Widgets

Enable block widgets support to be able to use blocks as widgets.

For more information check out this knowledge base article about available customization options.

Custom post types

The theme does not utilize any of the Ignition Framework’s custom post types, except from the special global sections. The only custom post type used extensively is the product custom post type provided by WooCommerce.

Creating a new Product

Go to Products > Add Product then enter a product Title and Description.

Go to the Product Data panel and select a Simple product with a price and a sale price as shown below:

Set your Product featured image and image galleries.

Save the Product and you can start selling!

Learn all about creating and managing products here.

Product Categories

Product categories and tags work in much the same way as normal categories and tags you have when writing posts in WordPress. They can be created, edited, and selected at any time. This can be done when you first create a product or come back and edit it or the category/tag specifically. You can also control your thumbnail icon for that category as well as the hero page title background image.

Setting a Product category as a menu item is easy. Navigate to Appearance > Menus and enable Product Categories as menu items from Screen Options.

Setting up the pages

Home

The page has the full width box template applied to it. Under Page Settings we have the top/bottom content padding removed, the header set to transparent and everything else set to hide.

The home page’s content begins with a fully aligned Core Group block. Inside we find a MaxSlider block with the Frontpage slider selected.

Right after the slider we have a 70px tall Spacer, a Heading block with the Theme title style applied to it and a Container block. The Container has the background right style applied to it, and the theme grid enabled. Under Block appearance we have a background color set and 100px bottom padding. Inside we find two columns with 40% and 50% width respectively. The left columns contains a Core Image block. The right one has 70px left padding and contains a 100px tall Spacer, a Core Paragraph, a WooCommerce Newest Products block with the body background style applied, displaying 4 products in a 2 column layout from the home category, finally we have a 30px tall Spacer.

The For Her section consists of a 70px tall Spacer, a Heading with the theme title style applied, a Paragraph, a WooCommerce Hand-picked Products block displaying three products in a three column layout, and finally a 100px tall Spacer.

The newsletter section is built with a Container block with the background left style applied, the theme grid enabled, a background color applied and 100px top/bottom padding. Inside we find two columns with their width set to 50% and 40% respectively. The left column houses a Heading a Core Paragraph and a Core Shortcode with the Contact Form 7 shortcode. The right column contains a single Image block.

The For Him section is identical to the Newest Arrivals section above.

Finally the news section consists of an 80px tall Spacer, a Heading with the theme title applied, a Post Types block displaying the three latest post items in a three column layout and a 50px tall Spacer.

Shop

The shop page is automatically created upon WooCommerce’s activation. On the theme’s demo we have set the page’s layout to Full width boxed and opted for our products to display an alternate image when hovered under Customize > WooCommerce > Product Catalog. Read here for more info on WooCommerce related options available on the theme.

Blog

This is your main posts listing page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Contact

The page has the full width boxed template applied to it and under page settings the normal page title, subtitle and breadcrumbs are set to hide.

The page’s content starts with a fully aligned Container block with the background right style applied to it and the theme grid enabled. Under Block Appearance we have a background color applied. Inside we have a 500px tall Google Maps and another Container. The inner container has two columns with a 40/60 layout. The left is empty and the right one contains a 60px tall Spacer, a Heading, a Core Paragraph, a Core Shortcode with the Contact Form 7 shortcode and finally another 80px tall Spacer..

Common Features

Shortcodes

The Ignition Framework offers a multitude of custom shortcodes these are:

Custom menu: [ignition-custom-menu name="your menu name"]

Site search: [ignition-site-search]

Date: [ignition-date]

Weather: [ignition-current-weather id="your-location-id(optional)"]

Minicart button: [ignition-minicart-button]

Language switcher: [ignition-language-switcher]

Icon link: [ignition-icon-link]

Instagram Feed: [ignition-instagram-feed]

WooCommerce search: [ignition-wc-search]

For more information have a look at this knowledge base article about shortcodes and their usage.

Page options

All themes offer six different templates which modify the location and appearance of the sidebar and the main content’s width.

Additionally pages have a common set of options which allow you to customize the appearance of the page title section, toggle breadcrumbs and more.

All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behavior.

Read the following article for a detailed explanation of the available templates and their options.

WooCommerce

Ignition Framework based themes are compatible with WooCommerce giving you the ability to create awesome online stores which perfectly match the appearance of the rest of your site.

WooCommerce is an optional plugin. You don’t need to install it if you are not looking to build an online store.

After activating WooCommerce it will create and set some default pages. These will serve as your Shop, Cart, Checkout and My Account pages.

The framework offers various customization options both for the main product listing page under Customize > WooCommerce > Product Catalog and for single products under Customize > WooCommerce > Single Products.

Learn more about the WooCommerce integration and the options offered.

Global Sections

With the Global Sections custom post type included in all Ignition Framework based themes users can create content which can be easily reused in more than 15 key theme locations. For example users can create a newsletter subscription call to action box and immediately display it above the footer on all (or some) posts and pages, or create a banner ad an easily add it between posts in post listings etc.

Learn more about Global Sections here.

Blog page

This is your main blog page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Widget areas

The theme provides special widget areas for your posts listings, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages, posts or products.

Page builder support

Ignition Framework based themes work seamlessly with popular page builders like Elementor, Divi, Beaver builder and more to cater to the needs of those who like to build things visually.

Support

If you need help during the initial installation and setup of this theme feel free to get in touch and we will get back to you within 24 hours to help.

Theme installation service

If time is of essence, we offer a theme installation fee for an one-off low fee of $69. Contact us here.

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

• PHP version 7.4 or greater.
• MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
• HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard > Plugins > Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure to install both in order for things to function as intended.

Read the Ignition Framework plugin’s installation instructions.

Theme installation

Installing the theme is a very simple process. Go to your dashboard under Appearance > Themes > Add new, click Upload Theme and upload the zip file. Once uploaded click Install Now and then the Activate Theme link. Here is a detailed overview on how to download and install the theme.

Once the theme is installed and activated you will be forwarded to the theme’s onboarding page.

Here you will be prompted to install and activate the Ignition Framework plugin if you haven’t done so already. Here you can also install our free custom blocks plugin, GutenBee. Through the onboarding page you have access to many useful links, such as the theme’s documentation, our knowledge base articles and direct links to our support hub.

In the Sample Content tab of the onboarding page you can install and activate all the plugins required to import the sample content and proceed with its installation. More info on that on the next section.

How to import the sample content

If you like what you see in our demo website you can simply import the sample content. This means that a close approximation of our demo website will be imported in your WordPress installation. Now all you have to do is replace the content of these pages with yours. Importing the sample content can help serve as a basis on which you can continue to build and expand your site, however keep in mind that this procedure is entirely optional.

Here is a generic video on how to import the sample content.

The procedure:

• In your WordPress dashboard visit Appearance > Theme Options > Sample Content.
• Click Install and then Activate for each of the required plugins.
• Click the Get Started button and in the next screen the Import Demo Data button.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

• Main post thumbnail: 870x580px
• Item: 615x410px
• Large Item: 1170x780px
• Article Media: 510x510px
• Mini-cart items: 160x160px
• Company logo: 200px wide, free height

WP Job Manager installation

Specialty uses the WP Job Manager plugin and its custom post types to control the Job Listings. This means some basic page setup as well as setting functionality comes directly from the WP Job Manager.

To install the job manager plugin, navigate to Plugins >Add New and search for WP Job Manager. Click the button to install and activate the plugin.

Initial configuration

The plugin’s configuration page can be found under Job Listings > Settings, there you can configure the plugin to match your needs. We would suggest enabling Listing Categories & Listing Types before importing sample content, you can also enable Multi-select Categories & Multi-select Listing Type selections, these will make your filtering system much more flexible. In the Job Submission tab you can configure the requirements for allowing users to submit job listings.

Under the Pages tab you will need to set the pages for the listing submission form (if you intend to use this functionality), the Dashboard page, the Listings page and the Terms and Conditions one.

NOTICE: Specifically for the job listings page you will need to set a page which contains our custom [jobs-directory] shortcode for the theme to work properly.

For more information the plugin’s extensive documentation can be found here.

Setting up site-wide sections

It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the general site layout, the header, footer and some secondary functionality.

General Site Options

You can change your general site options under Appearance > Customize > Site Options. Under the Layout section you can control your site’s, blog’s and single blog post’s layout, as well as the site width and content/sidebar column ratio. The layout can then be overridden in each post/page individually. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select the ideal font pairing from a full list of Google Fonts and customize font properties for key elements on desktop and mobile devices alike. You also have the option to disable Google Fonts altogether.

Read this knowledge base article for more information regarding the site options.

Header

On the theme’s demo the header layout type is set to be transparent by default under Customize > Header > Layout.

The header can be split into three key elements:

1. Top Bar
2. Logo
3. Main menu

Top Bar

To edit the top bar go to Customize > Top Bar. Here you can toggle the top bar entirely and fill the 3 content areas with plain text, HTML, or shortcodes. Refer to the shortcodes section below for information regarding the shortcodes. Here you can also customize the color scheme of the top bar, especially useful if you are using the normal header layout. On the theme’s demo the top bar is disabled.

Logo

You can use a logo image 200px wide (or double that if you prefer retina ready logos). To upload your logo go to Customize > Site Identity. You can upload two logos. The main and the alternative one. The alternative logo can be used if you want a different logo to appear when the header layout is set to Transparent under Customize > Header > Layout. On the theme’s demo we use both logos.

Learn more about the header and its options.

Main Menu

If you are not familiar with WordPress menus here is a detailed guide.

Navigate to Customize > Menus. Enter a menu name (It can be anything you like) and click on the Create Menu button. In the next page click the Add Items button and start adding items to the menu. Now all you have to do is assign this menu to a location through the Menu Locations section, check the Main menu location and you are done. Your navigation menu should be now visible on your website.

The demo’s menu is set to be sticky under Customize > Header > Layout.

Create a menu button

You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance > Menus for the item you want. First enable this section from Screen Options.

The page title section

This section allows you to create an area just below the menu which can display the page’s title & subtitle along with a background image or color.

The page title section can be modified under Customize > Page title.  You can choose to disable the page title with background section entirely, change its height, alignment, content and toggle the site’s breadcrumbs. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary and the secondary text colors.

In some cases, you might want to have different background images on different posts, pages and custom post types. To achieve that create or edit a page. On the right sidebar locate the Page title image field. Upload a new image and preview this page. This will override the image set in the Customizer settings.

On the theme’s demo the Page Title with Background is enabled by default and the normal page title & subtitle are hidden. Under colors we have a background image set along with a background overlay color.

Footer

The footer area is a widgetized area that can be populated with widgets through Customize > Widgets. You can also remove the credits at the very bottom of this area by visiting Customize > Footer > Credits content. You can also adjust the colors by setting a background color & image and modify the border, title and text colors.

Utilities

Lightbox

The theme bundles a lightbox for your images which is by default disabled to avoid conflicts with third party plugins which offer lightboxes. If you want to use it you can enable it under Customize > Utilities > Lightbox.

Weather

You can choose to show the weather for a chosen location using the weather shortcode anywhere inside your installation. First you will need to set it up by providing an API key and location under Customize > Utilities > Weather.

Block editor Dark Mode

Some themes might have a dark color scheme which is reflected in the block editor, this can make working with certain blocks a bit harder. Enabling the editor dark mode using the provided checkbox will apply certain styles to the editor in order to improve the content creation experience.

Social Sharing

Via the social sharing panel you can allow users to share your posts & products to Twitter, Facebook & Pinterest with a single click.

Back to Top button

Use the checkbox to enable or disable the back to top button.

Widgets

Enable block widgets support to be able to use blocks as widgets.

For more information check out this knowledge base article about available customization options.

Custom Post Types

Create a new Job Listing

The Job Listing custom post type is provided by the WP Job Manager plugin. Adding a job does not differ much from adding a post. The main difference is the Job Data metabox seen below which provides you with useful custom fields for key job information.

The fields are pretty self explanatory regarding the information you need to fill in them. Check out the plugin’s documentation for more info on business/job creation.

Custom Shortcodes

Specialty provides you with two custom shortcodes.

The [jobs-directory] shortcode allows you to easily list your jobs in any page. It accepts the following parameters:

• categories: (optional) – accepts a comma-separated list of category IDs to limit results to specific categories. Default empty.
• show_filters: (optional) – accepts truthy/falsy values to show or hide the filters ( e.g. true/false, 1/0 etc). Default true.

The [jobs-search] shortcode will give you a job search bar for your site.

The [recent-jobs] shortcode will display a list of recent jobs. It accepts the following parameters (all are optional):

• number: Number of maximum results. Default 10.
• featured: Show only featured items. Accepts any truthy value (‘1’, ‘true’, ‘on’, ‘yes’).
• keywords: Show jobs that match the specific keyword text.
• location: Show jobs that match the specific location text.
• orderby: Order results by: ‘date’, ‘title’, ‘author’, ‘rand_featured’. Default ‘date’.
• order: Order results in ascending (‘ASC’) or descending (‘DESC’) order. Default ‘DESC’.
• categories: Comma-separated list of job_category IDs.
• job_types: Comma-separated list of job_type slugs.

Setting up the pages

Home

The home page has the default template applied to it. The Header Type is set to transparent and the Page Title with Background, Normal Page Title & Subtitle are hidden.

The home page’s content is a single Core Shortcode block with the jobs-directory shortcode.

For the Home – Fullwidth we have the Full width boxed template applied to the page, all other aspects are identical. Similarly with the Home – Left Sidebar the Sidebar/Content template is applied to the page.

FAQ

The page has the default template applied to it with a small excerpt to serve as the page’s subtitle.

Content-wise we have two sets of Heading/Accordion blocks.

About

The about page has the default template applied to it. Under Page Settings > Header we have the header type set to transparent, under Page Settings > Page Title the Page Title with Background is shown and the Normal Page Title & Subtitle are hidden.

The page’s content is pretty simple with a YouTube embed, a couple of Paragraphs, a Gallery, a Core Blockquote and another Paragraph.

Landing Page

The landing page has the Full width boxed template applied to it. The top/bottom content padding is removed, the featured image is disabled, the header type is set to normal and everything else is set to hide.

The page starts with a fully aligned Container block with the theme grid enabled and its vertical content alignment set to middle. Under Block Appearance we have a background image & overlay color, parallax enabled and 200px top/bottom padding. Inside the container we have a single column with a Core Heading, a Core Paragraph and a Button.

The features section consists of a Container block with 200px top/bottom padding. Inside we find three equal columns, each containing an Icon Box block.

The inner hero section is built with a fully aligned Container block with the default block style set, the theme grid enabled and the vertical content alignment set to middle. Under Block Appearance we have a background image & overlay and 150px top/bottom padding. Inside we have two equal columns, the left one contains three Core Paragraphs. The right column is left empty.

The testimonial section is a Container block with 100px top/bottom padding. Inside there are 3 equal columns, each containing a Testimonial block.

Next up we have another fully aligned Container block with the default block style set, the theme grid enabled and the vertical content alignment set to middle. Under Block Appearance we have a background image & overlay and 100px top/bottom padding. Inside we have three equal columns. The outer ones contain a mix of Core Headings and Core Paragraphs, and the middle one a Core Image block.

Finally the Latest Jobs section is a Container block with 50px top padding and 70px bottom padding. Inside we find a Core Shortcode block with the [recent-jobs] shortcode.

Job Dashboard

This page is automatically created by WP Job Manager and will display the job dashboard.

Post a Job

This page is automatically created by WP Job Manager and allows for front-end job submission by your users.

News

This is your main posts listing page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Specialty’s Global Section

Specialty utilizes the global section custom post type to create the homepage’s hero section.

The global section is built with a fully aligned Container block with the default block style set, the theme grid enabled and the vertical content alignment set to middle. Under Block Attributes we have a background image & overlay and 200px top/bottom padding. Inside we have two equal columns, the left one contains a Core Heading, a Spacer and a Core Paragraph. The right column is left empty.

The job search bar consists of another fully aligned Container block with the default block style set and the theme grid enabled. Under Block Appearance we have an overlay color set. 30px top/bottom padding and -110px top margin in order to have it overlap the Container above it.

The Global Section is set to appear Before main and it is included in the Homepage location (this requires to have your home page set as your static front page under Customize > Homepage Settings).

Common Features

Shortcodes

The Ignition Framework offers a multitude of custom shortcodes these are:

Custom menu: [ignition-custom-menu name="your menu name"]

Site search: [ignition-site-search]

Date: [ignition-date]

Weather: [ignition-current-weather id="your-location-id(optional)"]

Minicart button: [ignition-minicart-button]

Language switcher: [ignition-language-switcher]

Icon link: [ignition-icon-link]

Instagram Feed: [ignition-instagram-feed]

WooCommerce search: [ignition-wc-search]

For more information have a look at this knowledge base article about shortcodes and their usage.

Page options

All themes offer six different templates which modify the location and appearance of the sidebar and the main content’s width.

Additionally pages have a common set of options which allow you to customize the appearance of the page title section, toggle breadcrumbs and more.

All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behavior.

Here is a more detailed explanation of the available templates and their options.

WooCommerce

Ignition Framework based themes are compatible with WooCommerce giving you the ability to create awesome online stores which perfectly match the appearance of the rest of your site.

WooCommerce is an optional plugin. You don’t need to install it if you are not looking to build an online store.

After activating WooCommerce it will create and set some default pages. These will serve as your Shop, Cart, Checkout and My Account pages.

The framework offers various customization options both for the main product listing page under Customize > WooCommerce > Product Catalog and for single products under Customize > WooCommerce > Single Products.

Learn more about the WooCommerce integration and the options offered.

Global Sections

With the Global Sections custom post type included in all Ignition Framework based themes users can create content which can be easily reused in more than 15 key theme locations. For example users can create a newsletter subscription call to action box and immediately display it above the footer on all (or some) posts and pages, or create a banner ad an easily add it between posts in post listings etc.

Learn more about Global Sections here.

Blog page

This is your main blog page. You can create a new page and set it as your posts page under Customize > Homepage Settings. You can customize it under Customize > Blog from the Archives section.

Widget areas

The theme provides special widget areas for your posts listings, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages, posts or products.

Page builder support

Ignition Framework based themes work seamlessly with popular page builders like Elementor, Divi, Beaver builder and more to cater to the needs of those who like to build things visually.

Support

If you need help during the initial installation and setup of this theme feel free to get in touch and we will get back to you within 24 hours to help.