All customization options for Ignition Framework based themes have been integrated in the WordPress Customizer to provide the user with an easy to use and familiar interface.
Customization options are split into seven distinct categories based on which aspect of the site they affect. Let’s take a brief look at each one.
This panel houses options that affect the entire site. It is split in three sections presented below.
Through this section users can customize the appearance of the site and blog by moving or entirely disabling the sidebar, furthermore the theme’s content width can be changed using the handy slider.
Themes are built on a column based grid, specifically they are built on a bootstrap inspired twelve column system. This means that the site’s width (set using the Site width slider above) is split in twelve columns which are then grouped in various configurations to make up the final layout. Using the Content/Sidebar width sliders or inputs users can adjust the number of columns each of the two main site sections take up. one can choose to make the content narrower in favor of a wider sidebar and vice-versa. When configuring these widths it is important to make sure their sum is always 12 since, as mentioned before, we’re working with a twelve column system.
These options are by default applied site-wide, however the layout can be overridden on a per-post (or page/custom post type) basis. This can be done using any of the available templates in the Page Attributes metabox, this way any item can bypass the default layout and have the sidebar moved or removed entirely. The fullwidth template will also override the content width and set it equal to the screen’s (viewport) width.
Through the colors section users can easily modify the theme’s background image and or color and change the theme’s color scheme using the provided color controls.
Finally the typography section gives control over the theme’s primary and secondary font family and properties. Additionally it allows for fine tuning of key font properties for headings and widgets. A vast font selection is available to users in the form of Google Fonts, plus a handful of standard/system fonts. Google Fonts can be entirely disabled via the provided checkbox if they are not needed (i.e. if using a custom font family, or favoring system fonts).
The top bar panel gives users access to customization options available for the area above the logo/menu. The Content section offers three content areas (left, middle and right) which can accept plain text, HTML or any of the framework’s built in shortcodes. Here users can also choose the colors of the top bar when the header is set to the normal or the transparent layout. The top bar can be entirely disabled if needed via the provided checkbox.
Header customization is split into six sections as presented below.
In this section users can modify the header type by choosing between a normal (example) or a transparent header (example), the transparent header layout essentially overlaps the Page Title section (if enabled) or the first few elements of the content to create layouts ideal for landing page hero sections/sliders. The header type can be overridden in each post/page/custom post type individually if needed. The header can be also made fullwidth, which means it won’t be restricted to the width set earlier but will span the entire viewport.
There are four available layouts for the menu/logo group. The menu can be to the left, right of the logo, centered (below the logo) or split to two separate menus with the logo between them (in this case you will need to set menu items for both the main menu left and main menu right under Customize > Menus > Menu Locations). The sticky menu option can be enabled here and finally users can choose the a viewport width below which the mobile menu will be displayed.
The header features a content area next to or opposite the menu (depending on which layout was selected above) which can host plain text, HTML or one of the framework’s built in shortcodes.
There are four distinct color sections for the header. Normal and transparent colors apply to their respective header layout types, sticky colors take care of the menu when it’s stuck and finally the mobile menu colors deal with the appearance of the menu on mobile devices.
The page title is the section located just below the header (example). It houses the page’s title and an optional subtitle. Here users can customize the section’s height on various devices, change its content alignment and choose if they want to show/hide the normal page title and subtitle globally in favor of the ones that appear in the page title section and toggle the appearance of the site’s breadcrumbs. Τhe appearance of the section can be configured by applying a background color or image and settings the color for the title and subtitle. The section can be globally disabled if not needed via the provided checkbox.
The appearance of the page title section, its background image, contents and breadcrumbs can be toggled individually for each page and custom post type using the item’s configuration options.
If you have set a certain page as your posts page under the Homepage Settings panel in the Customizer and set a custom background image, header layout, title appearance etc for it, all single posts and other post archives, such as category, tag and author listings will inherit these options from the blog page. If no page is set as your posts page in the Customizer posts and post listings will inherit the global options set under Page Title.
Similar to the blog, single products and product categories will inherit all layout options configured in the Shop page. Pages like the cart, checkout and my account will follow globally set options or their own if they are set.
The blog customization panel is split into two sections. The archives section allows users to choose how they want the posts displayed in listing pages (in a single column or in a grid like layout) such as the blog, category & tag listings, set the size of the excerpt, and choose which information they want visible on each post listing item. The single post’s section takes care of the meta displayed on single posts, also from here users can toggle the appearance of related posts.
Through the footer settings panel users can configure the footer section or disable it entirely. Through the colors section they can customize its color scheme by applying a background color or image and modifying colors for the borders and text. The content section offers two content areas, to the left and right of the bottom footer bar, which are ideal for copyright and contact info. These areas accept text, HTML or any of the framework’s shortcodes.
The themes have the ability to display current weather conditions in a selected location via the built in shortcode. These information are provided by OpenWeatherMap. For the integration to work you need to acquire an API key from OpenWeatherMap and also provide the location ID of the place. The location ID can be found by visiting OpenWeatherMap.org and searching for the desired location. Once on the location’s page, the location ID is the last numeric part of the URL. For example, the URL for London, UK is https://openweathermap.org/city/2643743 and the location ID is 2643743.
Ignition Framework based themes bundle a lightbox for featured images and image galleries. The lightbox can be toggled at will using the provided checkbox. This allows users to utilize lighboxes provided by third party gallery plugins, page builders etc without having to deal with double lightboxes or other issues that might arise from the existence of two lightboxes on the same site. Users going for a more streamlined and minimal site without a lot of third party plugins can opt to enable the theme’s lightbox in order to take advantage of this functionality.
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.