The Ignition Framework comes in the form of a standard WordPress plugin. This singular plugin carries all needed functionality to help users create beautiful and flexible WordPress-based sites using our themes. Each theme now only handles one thing, the site’s appearance by providing the necessary styling. In the list below you can find a few key aspects handled by the plugin.

• Global layout styles, leaving just color scheme & typography to the theme.
• Global block editor styling, the theme just overrides block styling where needed to match its specific design.
• Header and footer layouts.
• Post, page and custom post type templates.
• All the customization options found in the Customizer such as color options, typography options, header & blog layout options and more.
• Custom post types and their taxonomies, for example the Accommodation post type in Aegean Resort.
• WooCommerce structural styling, leaving appearance related overrides to the theme.
• All third party plugin integrations needed by our themes.
• In future updates, the framework will also handle the global configuration for the full site editing experience.

The fact that the plugin handles pretty much everything apart from styling makes it very easy to incorporate new features, fix bugs and update compatibility with third party plugins easily and very quickly due to the fact that changes need to be made in just one place and then deployed to all framework based themes with a single update.

Getting started

To get started with the Ignition Framework and the themes based on it, you need to first get them installed.

Install the Ignition Framework Plugin.

Install an Ignition Framework Theme.

You can install the plugin and a theme in any order you like, just make sure both are installed and activated.

To get a solid base to build your site upon you can easily import the theme’s sample content.

If you plan to modify templates, add functionality and modify the theme’s styling install a child theme to preserve your modifications across updates.

You can find a list with all the Ignition Framework based themes here.

Customizing a theme

Framework based themes feature dozens of customization options built in the WordPress Customizer. Customize the theme’s layout, colors, typography and many more to create the perfect website according to your needs.

Apart from global customization the appearance of single items can be tailored to your needs by changing their header, hero, breadcrumbs and more.

WooCommerce compatibility

All framework based themes are compatible with WooCommerce out of the box. The appearance of the store can also be modified via the theme’s Customizer Options.

Custom post types

Seven custom post types are built in the Ignition Framework. Six of them are used in various combinations in each theme to help with data categorization. These are: Accommodation, discography, event, portfolio, service and team. By default each theme has only the custom post types needed to provide its functionality enabled, all other are disabled. However users can enable or disable custom post types at will.

The seventh custom post type is global sections which is enabled by default on all themes. With global sections users can create reusable content using the block editor or their favorite page builder.

Other features

All themes feature  RTL compatibility with custom styles which can be extended via child themes.

Finally, a feature very handy for developers, framework themes come with dozens of action hooks which can be used to display content on a multitude of theme locations.

The post The Ignition Framework appeared first on CSSIgniter.

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.

Site Options

This panel houses options that affect the entire site. It is split in three sections presented below.

Layout

Through this section users can customize the appearance of the site and blog by moving or entirely disabling the sidebar, furthermore the entire site’s, theme’s content and sidebar’s width can be changed using the respective sliders.

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 Summary 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.

Themes with a side header

On themes with a side header the General Layout tab is a bit different. Here we have the Site Layout drop down which offer four layout options for the entire site, these are: Boxed site – centered which will restrict the width of your site to the set site width, Full width site – Boxed content which will make the site full width and apply the site width to the content area, Full width site – Left aligned content same as before but aligns the content to the left and finally Full width site – Full width content which makes both the site and content full width. The Content, Blog & Single blog post Layout drop downs allow you to configure the appearance of inner pages, the blog, posts and custom post types, they affect only the area next to the sidebar and not the entire site. Available options are Content/Sidebar, Sidebar/Content, Full width & Full width narrow. The last two options will remove the widgetized sidebar entirely.

Colors

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.

Typography

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).

Top Bar

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 or set to be visible only on specific devices.

The top bar is not available on themes with a Side Header.

Header

Header customization is split into six sections as presented below.

Layout

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, you can also choose to make the mobile menu slide in from the left instead of slowly fading in, and finally users can choose the viewport width below which the mobile menu will be displayed.

Side Header Layout

On themes with a Side Header, such as Coastline for example, the layout tab is much leaner because some of the options available on the normal header are not necessary. In such cases under the layout tab you will find an option to make the side header fixed, which means it will not scroll along with the content and stay in view the entire time, you can also choose to make the mobile menu slide in from the left instead of slowly fading in, and finally set the maximum width below which the mobile menu will show up.

Content

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.

Colors

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.

For themes with a Side Header the transparent and sticky color tabs will not show up since these functions do not exist on these themes.

Page Title

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.

Blog

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.

Footer

Through the footer settings panel users can configure the footer section or disable it entirely. You can also choose the number of equal widget areas. 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 Credits 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.

Utilities

Weather

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.

Lightbox

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.

Block Editor

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

Here you can toggle the appearance of social sharing icons on standard posts and WooCommerce products. You can also select on which networks you want your visitors to be able to share to.

Back to Top button

Toggle the appearance of a back to top button which will allow users to easily return to the page’s top once they have scrolled towards its end.

Widgets

Toggling this option allows you to use blocks as widgets in any of the theme’s widgetized areas.

The post Customizer options appeared first on CSSIgniter.

Page configuration

Configuration takes place in the Page tab on the right hand sidebar when editing a post or page.

The Summary metabox houses the available template options these override the layout selected in the Customizer. These are:

• Default template: When this template is selected the item gets a content/sidebar layout, or whatever is set under Site Options > Layout in the Customizer.
• Content / Sidebar: Items with this template will always display the content on the left and the sidebar on the right.
• Sidebar / Content: Items with this template will always display the sidebar on the left and the content on the right.
• Canvas: This is a completely blank (no header, menu or footer) template to be used with page builders and full site editors.
• Full width: The content area on items with this template will span from one edge of the screen to the other. No sidebar is available on this template.
• Full width boxed: The content area on items with this template will span the entire content width as set under Site Options > Layout in the Customizer. No sidebar is available on this template.
• Full width narrow: Like the full width boxed template, but the content is a bit narrower. No sidebar is available on this template.

The Excerpt metabox can be used to display a custom subtitle on the Page Title section on pages (area just below the logo/menu – example).

Page settings

Using the Page Settings metabox, users can fine tune the appearance of individual pages. Many of these options will override ones set in the respective sections in the Customizer, allowing users to create unique page appearance for each item. Options are either disabled by default or set to respect global values set in the Customizer. Let’s take a closer look at the options.

Top Bar

• Layout
  • Show top bar: Enable/disable top bar. can be entirely disabled if needed via the provided checkbox or set to be visible only on specific devices.
  • Top bar visibility: Select on which devices will the top bar be visible.
• Content
  • Left content area: can accept plain text, HTML or any of the framework’s built in shortcodes.
  • Middle content area: can accept plain text, HTML or any of the framework’s built in shortcodes.
  • Right content area: can accept plain text, HTML or any of the framework’s built in shortcodes.
• Normal Colors: choose the colors of the top bar when the header is set to the normal layout.
• Transparent Colors: choose the colors of the top bar when the header is set to the transparent layout.

Header

• Layout
  • Header Type: By default the item respects the layout set in the Customizer. Users can override it and choose to display either a transparent or a normal header.
  • Full width header: The header can be also made fullwidth, which means it won’t be restricted to the width set in the Customizer but will span the entire viewport.
  • Menu layout: 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.
  • Sticky menu: Enables/disables Sticky menu and its behavior.
  • Mobile menu slides in from the left: Toggles the way mobile menu appears.
  • Display mobile menu when viewport size is less than (px): set the viewport width below which the mobile menu will be displayed.
• Content
  •  Content area: can accept plain text, HTML or any of the framework’s built in shortcodes.
• Normal Colors: choose the colors and the background image of the header when is set to the normal layout.
• Transparent Colors: choose the colors and the background image of the header when is set to the transparent layout.
• Sticky Colors: choose the colors and the background image of the header when Sticky menu is enabled.
• Mobile Nav Colors: choose the mobile menu colors.

Page Title

• Layout
  • Show Page Title with Background: This option allows users to toggle the appearance of the Page Title section individually. A custom background image can be set via the Page Title > Colors section (see below). By default will follow the Customizer setting.
  • Page Title Height (px): Set the section’s height on various devices.
  • Page Title Horizontal alignment: Change page title’s horizontal alignment.
  • Show Normal Page Title: This option toggles the appearance of the default page title. Useful if you have enabled the Page Title with Background and do not want the title to appear twice, or if you have disabled them globally and want to show it on the particular post or page.
  • Show Normal Page Subtitle: Similarly with the title before, this option can individually toggle the page subtitle. By default the Customizer setting is respected.
  • Show Breadcrumbs: Toggles the appearance of the breadcrumbs. Needs one of the supported breadcrumb plugins installed and activated. Single posts and post listings inherit the settings from the blog page and similarly single products and product archives follow the option set in the Shop page.
• Colors: Choose the colors and the background image/video of the page title.

Content Area

• Remove top/bottom content padding: Enabling this option will remove the padding around the main content (after the Page title section and before the footer). Useful when utilizing page builders and want to handle spacing with greater accuracy.
• Disable featured image for this item: Enabling this option will hide the featured image from the item’s single view, the featured image will still appear in listings.

Custom Post Type settings

Some themes have custom post types (e.g. services, portfolio, accommodations, etc). On those pages, the Page Title Image metabox and the Page Settings are located in the right sidebar. Let’s take a closer look at the options.

• Remove top/bottom content padding: Enabling this option will remove the padding around the main content (after the Page title section and before the footer). Useful when utilizing page builders and want to handle spacing with greater accuracy.
• Disable featured image for this item: Enabling this option will hide the featured image from the item’s single view, the featured image will still appear in listings.
• Header Type: By default the item respects the layout set in the Customizer. Users can override it and choose to display either a transparent or a normal header.
• Show Page Title with Background: This option allows users to toggle the appearance of the Page Title section individually. A custom background image can be set via the Page Title Image metabox as described above. By default will follow the Customizer setting.
• Show Normal Page Title: This option toggles the appearance of the default page title. Useful if you have enabled the Page Title with Background and do not want the title to appear twice, or if you have disabled them globally and want to show it on the particular post or page.
• Show Normal Page Subtitle: Similarly with the title before, this option can individually toggle the page subtitle. By default the Customizer setting is respected.
• Show Breadcrumbs: Toggles the appearance of the breadcrumbs. Needs one of the supported breadcrumb plugins installed and activated. Single posts and post listings inherit the settings from the blog page and similarly single products and product archives follow the option set in the Shop page.

The Page Title Image metabox can be used to set a custom background image for the Page Title section of the particular item. This will override the default background image set under Page Title in the Customizer.

The post Page template and configuration options appeared first on CSSIgniter.

1. Accommodation: Used to display accommodation related information, such as rooms in hospitality themes like Aegean Resort.
2. Discography: Used to display albums, singles etc on music related themes, such as Beat.
3. Event: Used to display events, such as upcoming concerts or conferences on any theme that supports events, for example Convert.
4. Global Sections: Global Sections are used to easily display the same content on multiple locations, available on all themes.
5. Portfolio: Portfolio items are ideal to showcase one’s work on any portfolio related theme, for example Technico.
6. Service: The service post type is ideal to create presentations for services offered by your business on business related themes, such as BlockChain.
7. Team: With team items you can create listings for the talent working for your company. Can be found on business related themes like Convert.

Not all custom post types are enabled on all themes. Each theme only uses post types it needs based on the niche it was designed to serve. For example you will not find accommodation post types in business themes, nor will you find portfolio post types in hotel themes.

Custom post type listings

Listing pages for posts belonging to a custom post type can be created using the Post Types block from the GutenBee custom blocks free plugin, or the Post Types element from the Ignition Widgets for Elementor plugin (for Elementor users). Both of them can display posts from any custom post type, pull from individual categories/taxonomies, support category filtering (example), pagination and the multiple listing item layouts provided by the themes (for example the different layouts of the post categories presented in the front page of Public Opinion).

Enable a disabled custom post type in your theme

Let’s say you have created the perfect website with Aegean Resort for your hotel, but would like to create a page for your staff so visitors can get an idea of the service they’ll be getting from qualified professionals. The process is very simple. Edit the functions.php file of your child theme and add this line

add_theme_support( 'ignition-team' );

inside the

ignition_aegean_child_after_setup

function. Next in your dashboard navigate to Settings > Permalinks to refresh your sites permalinks. That’s it, you now have access to the team post type on your Aegean Resort based site.

The slugs of the rest of the available post types are:

• Accommodation: ignition-accommodati
• Discography: ignition-discography
• Event: ignition-event
• Portfolio: ignition-portfolio
• Service: ignition-service

Of course you can still use a plugin or manually register custom post types not available in the framework.

Disable an enabled custom post type in your theme

Similarly to enabling a custom post type, you can disable one of the existing ones. To do that just add

remove_theme_support( 'ignition-accommodati' );

in the same place in your child theme to remove the accommodation post type from the Aegean Resort theme.

The post Custom post types in the Ignition Framework appeared first on CSSIgniter.

In the screenshot above we can see all the available global sections and their location on our site. To check out where each global section is located on your site you can append ?show_hooks to your site’s URL (you need to be logged in as an administrator).

Creating content for global sections is the same as any other post or page. Use the block editor with your favorite blocks to create it or even your preferred page builder. Then from the Global Section Settings metabox below choose where you would like your global section to appear. If you decide to hook more than one global sections in the same location you can take advantage of the hook priority to modify their order.

The global section in our example is the Newsletter Section just above the footer on our Decorist theme. We chose the Before Footer location, and since it’s a newsletter subscription box we want it to appear site-wide so we select Global in the Inclusions section. However, we would like to exclude it from the checkout process; to do that we select the Cart and Checkout pages in the Exclusions section. Now we can publish the global section and we’re good to go, the newsletter will appear on its designated place.

Apart from the available hooks from the drop down, global sections can be used with any other front facing action hook whether it is a core WordPress hook, an Ignition Framework hook, a third party plugin hook etc. To do that select Custom hook from the drop down, fill in the hook’s name in the text box, select the priority and you are good to go.

Global Section shortcode

If you wish to display the content of a Global Section you created, inside the content or in a sidebar with the help of the text widget, you can do that by using the provided shortcode. Go to the Shortcode tab in the Global Section Settings metabox and copy one of the two provided shortcodes, paste it in a Shortcode block in the content of any post/page or in a text widget and you are good to go.

The post Global Sections appeared first on CSSIgniter.

Shortcodes are a valuable way of keeping content clean and semantic while allowing end users some ability to programmatically alter the presentation of their content.

Advantages:

• No markup is added to the post content, which means that markup and styling can easily be manipulated on the fly or at a later state.
• Shortcodes can also accept parameters, allowing users to modify how the shortcode behaves on an instance by instance basis.

The Shortcodes

The Ignition Framework includes several shortcodes you can use in any content area field in the Customizer, inside your content using the shortcode block, or in a text widget.

Custom menu

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

Create a Custom menu under Appearance > Menus, then use this shortcode to display it in any location you want. Primarily used to display Social icons in the top bar.

• Create a New Menu under Appearance > Customize > Menus.
• To add a social media link to the menu, click + Add Items.
• Next, select the Custom Links menu item type.
• Add the address for one of your social media profiles in the URL field. For example, if the link to your Facebook profile is https://www.facebook.com/cssigniter, you would copy that into the URL field.
• You can also enter a name for the social media profile in the Link Text field. Once you’re ready, click Add to Menu.
• Repeat the above steps until all the social media profiles you wish to use have been added to the menu.
• Finally, click Publish.

We strongly suggest checking out this article on using menus in WordPress.

Site search

[ignition-site-search]

Simple site search field, you can use it under any content area in the Customizer.

[ignition-site-search post_type="product"]

Same as above but will limit the search to products. This is quite helpful if you have an online shop or if you want to search for a certain post type.

Date

[ignition-date]

Supported attributes are:

• format (optional): The date format, by default follows the one set under Settings > General.

Use this shortcode in any Customizer content area to display today’s date.

Weather

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

Supported attributes are:

• id (optional): The id of the location to display the weather from, default is the one set under the Customizer Weather options.
• units (optional): C or F units to display.

This will display the weather inside any content area in the Customizer. You will need to setup the API access first under Customize > Utilities > Weather. The location ID number can be found by visiting OpenWeatherMap.org and searching for your city. Leave this blank and the default ID from Customize > Utilities > Weather will appear.

Minicart button

[ignition-minicart-button]

This shortcode will display the minicart. Use it under Customize > Top Bar in any content field you wish. You will need to have WooCommerce installed and activated in order for this to work.

Language switcher

[ignition-language-switcher display="value"(optional) type="value"(optional) untranslated="value"(optional)]

Supported attributes are:

• display (optional): accepted values are flags, text or both
• type (optional): accepted values are dropdown or menu
• untranslated (optional): accepted values are hide or home

We support WPML and Polylang. You can either use their default language switcher or our shortcode one.

Use it in any content area in the theme’s Top Bar or Header to display a language switcher.

Icon link

[ignition-icon-link link="target-link" icon="icon-slug" text="your-text"]

Supported attributes are:

• icon (optional if text exists): one of the available icon slugs. For a list of the available icon slugs see here.
• text (optional if icon exists): wording for your link.
• link: the URL you want your link to point to.

Easily create and display an icon which points to a certain link.

Instagram feed

[ignition-instagram-feed]

Supported attributes are:

• username: The username you wish to display on the feed.
• limit (optional): The maximum number of images to display. Default 12
• videos (optional): Whether to display video thumbnails. Accepts 1 (true – show video thumbnails) or 0 (false – don’t show video thumbnails). Default 0.
• resolution (optional): The default image resolution. Accepts ‘default‘ (automatic selection), ‘thumbnail‘ (150x150px), ‘low‘ (320x320px), ‘standard‘ (640x640px). Default ‘default’.
• width (optional): The desired width of each image, when $resolution is ‘default’. Accepts any positive integer. Default 250.
• carousel (optional): Whether to enable the slick slider carousel. Accepts 1 (true – carousel is enabled) or 0 (false – carousel disabled). Default 1.
• autoplay (optional): Whether the carousel will auto slide. Requires carousel to be enabled. Accepts 1 (true – the carousel will autoslide) or 0 (false – the carousel won’t autoslide). Default 0.
• slides (optional): The number of visible images. Requires carousel to be enabled. Accepts any positive integer, must be smaller than limit. Default 8.
• arrows (optional): Whether to show the navigation arrows. Requires carousel to be enabled. Accepts 1 (true – navigation arrows will appear) or 0 (false – no navigation arrows). Default 0.
• speed (optional): The auto slide timeout in milliseconds. Requires carousel and autoplay to be enabled. Accepts any positive integer. Default 3000.

Requires the WPZOOM Social Feed Widget plugin to work.

WooCommerce login

[ignition-wc-login]

This shortcode will display a “My account” link (in case the user is already logged in) or a “Login” link. Use it under Customize > Top Bar in any content field you wish. You will need to have WooCommerce installed and activated in order for this to work.

WooCommerce search

[ignition-wc-search]

Displays a WooCommerce products AJAX search box.
Supported attributes are:

• categories (optional): Whether to show the categories dropdown. Accepts 1 or 0. Default 1
• ajax (optional): Whether to enable AJAX. Accepts 1 or 0. Default 1
• image (optional): Whether to show the images of products. Accepts 1 or 0. Default 1
• excerpt (optional): Whether to show the excerpts of products. Accepts 1 or 0. Default 1
• price (optional): Whether to show the prices of products. Accepts 1 or 0. Default 1

Booking bar

[ignition-booking-form]

Displays a booking request bar with from/to dates, number of persons and selected room.
Supported attributes are:

• url: The URL to the booking form page.
• layout: The layout of the booking form. Accepts ‘vertical’, ‘horizontal’, ‘button-below’. Default ‘vertical’.
• arrive_name: The name attribute of the arrival date field in the target form. Default ‘arrive’.
• depart_name: The name attribute of the departure date field in the target form. Default ‘depart’.
• persons_name: The name attribute of the number of persons field in the target form. Default ‘persons’.
• accommodation_name: The name attribute of the accommodation field in the target form. Default ‘accommodation’.
• values: The accommodation’s field that will be used as the dropdown’s value. Accepts ‘title’, ‘slug’, ‘id’. Default ‘title’.

To utilize the booking bar with Contact Form 7 you need to configure the fields to get their data from HTTP GET variables as described here, also make sure each field’s name attribute is the same on both the booking bar and the field. To create dynamic drop downs for accommodation items on the Contact Form 7 form you can use a plugin like Contact Form 7 – Post Fields

The post Shortcodes in the Ignition Framework appeared first on CSSIgniter.

• Breadcrumb NavXT: One of the most popular breadcrumb plugins for WordPress.
• Yoast: The popular SEO plugin also offers breadcrumbs for your site.
• Rank Math SEO: Another popular SEO plugin which offers breadcrumbs.
• WooCommerce: The popular eCommerce plugin also bundles breadcrumb functionality.

Breadcrumbs can be enabled or disabled globally under the Page Title panel in the Customizer.

Additionally breadcrumbs can be enabled or disabled on a per-page basis under the Page Settings metabox.

Please note that if none of the above plugins is installed and activated breadcrumb related options will not appear under the Customizer or on individual pages and custom post types.

The post Breadcrumbs appeared first on CSSIgniter.

Polylang

Polylang is the most popular free WordPress plugin which helps you create multilingual sites. There is a pro version available which offers some advanced features, but the free one should be enough for most users.

Start by installing and activating the plugin. Navigate to Plugins > Add New and search for Polylang. Click the Install button and then the Activate one.

Onboarding

Once the plugin is activated you will be presented with its onboarding page. We recommend to go through with it because it makes the initial setup very easy.

In the first page of the onboarding page you need to select the languages you want to translate your site in. To do that, select a language from the dropdown (1) and click the Add new language button (2) to add it. Repeat for as many languages as you want and once done click Continue (3) to go to the next page.

In the next page you can configure if the plugin will handle media translations. If you want to be able to translate captions, alternative text, descriptions and image titles, you should leave this on and continue.

In this step we will set the language for any existing content, so if you have any content, pick the language it’s written in from the drop down and continue.

This step will create a copy of your static home page for each available language. Of course you will need to translate its content later.

This final step of the onboarding process provides very useful links to the plugin’s documentation. It’s recommended that you take a look at them since they will be very helpful if you get stuck anywhere while translating your site.

Translating items

Now we’re ready to start translating our content. Let’s start with a post. Go to your Posts in the dashboard.

You will notice that a languages column has been added. The flag you see in each post is the configured language for that post. Under the other flags you will see a plus sign, which means that there is no translation for that language. Click the plus sign to start adding a translation for the selected language.

Adding the translation is just like creating a post. Add the title, content and any meta required and publish it.

Translating categories

Our post had the offers post category applied to it. When translating we added a new category to our post which will be the translation of the offers category, now we need to let the plugin know that this is in fact the translation of the offers category. To do that go to Posts > Categories and edit the new category.

Set the language the category is written in and from the translations section select the original category, save it and you are done.

As you can see now we have the post translated in two languages, with its category also translated. Notice that now in the languages column, instead of the plus button to add a new translation we have the edit one, which means that the item is translated and we can edit the translation at any time.

The procedure for translating pages and custom post types is the same as with normal posts.

Enabling translation for custom post types

By default custom post types will not appear as translatable, however you can easily enable this feature.

Navigate to Languages > Settings and from the Custom post types and Taxonomies section check the Accommodation and Accommodation Categories (or any other custom post types and taxonomies you want to translate). Save Changes and you are good to go. Your final settings should look like the ones below.

Creating a menu

After you are done translating your content you will need to add a menu for the rest of the languages present on your site. Creating a menu for the translated section of your site is pretty straight forward. Navigate to Customize > Menus and click the create new menu button.

Start by giving your menu a proper name. Then notice that under menu locations there is a language attached to each of the registered menu locations. Select the correct location and the correct language for your menu and proceed to the next step to add menu items to your new menu. Of course you will need to add only items that correspond to the translation you are working with, don’t mix items of different languages in the same menu. Read this guide to get a primer with WordPress menus.

Add a language switcher to the top bar

The Ignition Framework bundles a shortcode specifically built to create a language switcher. To add one to the site’s top bar navigate to Customize > Top Bar  and add it to any content area.

In the example above we have use the following shortcode:

[ignition-language-switcher display="flags"]

Of course you can use the language switcher shortcode in any of the theme’s content areas in the top bar, header, footer, widgets or even in the content.

Translating widgets

Translating widgets is very easy. Navigate to Appearance > Widgets and notice the language drop down that appears in each widget.

From the drop down select in which language this particular widget will appear in and save it. Now create a new widget of the same type, add he same content but translated and select the proper language for it in the drop down. That’s it, now each widget will only appear on its set language.

Translate dynamic strings

Some strings, like for the site’s title and tagline or the title and content of text widgets, can be translated under Languages > Translations.

Each string has an input for each language, you can translate the string there and save the translation.

Translate static strings

Take a look at this knowledge base article for info on how to translate static strings.

The post Create a multilingual site with Polylang and an Ignition Framework based theme appeared first on CSSIgniter.

WPML

WPML is one of the most popular premium WordPress plugins for creating multilingual sites. Once you download, install and activate the plugin click the Configure WPML button to continue.

Onboarding

This will trigger the onboarding procedure.

In the first step you will need to set the language for any existing content as well as the languages you want to translate your site to.

In the second step select the preferred format of the website’s URL for each language.

In the third step you have to apply your registered site’s key in order to register your plugin to receive automatic updates.

In the fourth step you can choose the way you would like your content to be translated (automatically or manually).

After clicking on Continue, before moving to step 5, you will be prompted to customize your previous choice.

Automatic Translation

For more about the automatic translation options, please refer to this WPML documentation guide.

Manual Translation

If you selected to translate your content manually, here you can choose if you would like to manage your translations by yourself (1), set existing users as Translators (2), add a Professional Translation Service (3) and finally, set a Translation Manager (4). You can select an existing user or create a new one and delegate the setup of translators to him/her. Choose this option when you are building a website for a client, who will set up translator users or choose a translation service.

The 5th step allows you to share site’s data (active theme and plugins information) with WPML.

In step 6, WPML will check for the active theme and any active plugins on your site and recommend useful WPML components and compatible plugins.

That’s it! Hit Finish to start translating!

Once you are done with the onboarding you will be automatically transferred to the Translation Management screen.

Translating items

Now we’re ready to start translating our content. Let’s start with a post. Go to your Posts in the dashboard.

Notice that next to the title column we have the language column. Each post was a plus mark next to its title, this means that no translation exists for the particular language and we can add one.

Now press the plus button to proceed to the WMPL Translation Dashboard.

Here you can see the two columns, one with the original text (1) content of the selected post and one with the translation of that text (2).

To translate a string, click ok it and then add the translation to the translation textbox (3) and press the green tick button (4).

At the bottom of the page, you can see the current percentage of the translation completion (5).

When you have finished translating, press Complete (6) to return back to the WordPress Dashboard.

You can also use the same procedure to translate pages.

If you would like to learn more about the Advanced Translation Editor, please visit the WPML Documentation page.

Manual Translation

If a plugin is not compatible with the Advanced Translation Editor or if you want to create different designs for the same post/page in different languages, you can use manual translation.

While editing a post/page, locate the Language metabox in the sidebar and choose the WordPress Editor (1).

In the popup dialog choose This Post (or This Page) and press Apply.

Next, tick the Duplicate (2) checkbox of the language you would like to translate this post/page to and press Duplicate (3).

Click on the pencil icon to open the duplicated post/page in the page editor.

Press the Translate independently button to prevent WPML from synchronizing this duplicated post/page with the original post/page.

You are all set! You can now start translating this post/page manually.

For more information about Manual Translation consider consulting the WPML Documentation page.

Translating categories

You can translate categories, either by going to Posts > Categories and open the desired category for editing.

Press add to enter your translation and then Update.

Alternatively, you can go to the WMPL > Taxonomy translation (1), choose the desired taxonomy from the dropdown list (2) and press the plus sign (3) next to the category you would like to translate.

In the popup screen, enter you translated text and press Save.

Enabling translation for custom post types

By default custom post types will not appear as translatable, however you can easily enable this feature.

Navigate to WPML > Settings and from the Post Types Translation section set the Accommodation (or any other custom post type you want to translate) to Translatable. Save and then do the same for the Taxonomies Translation. Your final settings should look like the ones below.

Creating a menu

Navigate to Appearance > Menus and edit the current menu of your site.

In the menu structure section you will notice that the menu has a language assigned to it (this was done when we set the default language for any existing content during the onboarding procedure). To the right we have two options.

Adding a new menu

If you click the plus button next to the language you’re creating a translation for WPML will allow you to create a new menu for that language.

Give the menu a name, make sure the Language and Translation of options are correct, select the proper display location from Menu Settings and proceed to add the menu items to the menu just as you would normally do, once done click the Create Menu button to save the menu and you are good to go.

Menu sync

Another option WPML offers is menu sync, this can be activated if you click on the Synchronize menus between languages link shown in the second to last picture.

This will present you with the above screen. Essentially each time you translate an item that’s on the menu set for the default language, WPML will automatically add it to a menu created for the new language. This means that your menus will be identical, if this works for you you can choose the sync option and be done with it. If you need slightly different menus for each language you’ll have to go with the first option.

Add a language switcher to the top bar

The Ignition Framework bundles a shortcode specifically built to create a language switcher. To add one to the site’s top bar navigate to Customize > Top Bar  and add it to any content area.

In the example above we have use the following shortcode:

[ignition-language-switcher display="flags"]

Of course you can use the language switcher shortcode in any of the theme’s content areas in the top bar, header, footer, widgets or even in the content.

Translating widgets

Translating widgets is very easy. Navigate to Appearance > Widgets and notice the language drop down that appears in each widget.

From the drop down, select which language this particular widget will appear in and save it.. Now create a new widget of the same type, add the same content but translated and select the proper language for it in the drop down. That’s it, now each widget will only appear on its set language.

Translate static strings

Take a look at this knowledgebase article for info on how to translate static strings.

The post Create a multilingual site with WPML and an Ignition Framework based theme appeared first on CSSIgniter.

To help us with this task we will be using Loco Translate which is a string translation plugin. Install and activate the plugin and navigate to Loco Translate > Plugins > Ignition Framework.

Click the New language link to proceed.

From the choose language drop down select one of the available languages in your WordPress installation (or a custom one if the one you need is not installed). Choose the location you want the translations to be saved in. We recommend leaving it in Custom which is safe from being overwritten when the plugin or WordPress are updated. Click the Start translating button to continue.

In the next page use the search box to find the string you are aiming to translate. In our case we are looking for Read More which is the default button text. Fill in the translation in the translation box and click the Save button. That’s it, now the item is translated, when your site is displayed in the new language the button’s text will be the translated one.

Repeat this process for all required strings.

Most strings you’ll need to translate live in the Ignition Framework plugin, however if you need to translate any theme strings, the procedure is exactly the same, with the difference that instead of going to Loco Translate > Plugins > Ignition for the first step, you go to Loco Translate > Themes > Aegean Resort (or any other Ignition Framework based theme you might be using).

The post Translating Ignition Framework strings appeared first on CSSIgniter.