Documentation

Installation & Updates One-click Demo Import Customizer Templates Helper Classes Shortcodes Widget Area Plugins Image Sizes

Installation & Updates Top


NOTE:

In this documentation, you will find instructions on how to install and work with the Aero theme specifically.

If you are not familiar with WordPress, and don’t know where to start, here are some resources for you:


INSTALLATION:

To install Aero, first you have to extract the aero-package.zip file.
After you extract the zip file, you can upload the theme in two ways:

  • Go to WordPress Dashboard > Appearance > Themes > Add New > Upload and select the zip file named aero-theme.zip
  • The second way to upload the theme is manually, using an FTP client ( i.e. FileZilla, Cyberduck etc ). Extract the aero-theme.zip file, and upload the aero-theme folder to the location of your WordPress installation and in the /wp-content/themes/ folder.

To activate the theme go to WordPress Dashboard > Appearance > Themes and click the Activate button under the Aero theme.

PLUGINS:

After you activate the theme, there will be a message prompting you to install several plugins. The only required plugin is our own free FP Foundation Assistant that has 19 shortcodes available and would allow you to easily switch themes in the future, if you wish so, keeping the functionality of the shortcodes. For more information on the plugins, go the Plugin section of the documentation.

UPDATE:

To update the theme, download the latest version for the theme and repeat the steps in the installation process. Backup all the information before the update.

IMPORTANT NOTE:
If you need to make customizations to the theme, you have to use a child theme. This will allow you to update the theme without losing your customizations. The package contains a child theme folder. For it to work, you need to have both the child theme folder aero-child and the theme folder aero-theme on your server. If you update the aero-theme folder, the customization changes you have made in the child theme will remain. For more information, read the WordPress codex entry on child themes: Child Themes.

One-click Demo Import Top


After you install and activate the plugin One Click Demo Import, go to WordPress Dashboard > Appearance > Import Demo Data and click on the ‘Import Demo Data’ button.


WordPress Customizer Top


Aero options are controlled from the WordPress Customizer menu. WordPress Dashboard > Appearance > Customize

GENERAL SETTINGS


LOGO IMAGE

Upload the logo image for the site.

BACKGROUND IMAGE

Upload background image for the site.

BACKGROUND POSITION

Position for the background image.

LOADING ICON

You can choose to have a loading icon on the page. The default option is disabled.


STYLING SETTINGS


FONT FAMILY OPTIONS

FONT FAMILY

The theme provides 200+ Google fonts and the option to change the font size for the different elements – header, body, footer and h-tags.


FONT SUBSET OPTIONS

FONT SUBSETS

Depending on the font, different subsets can be added to the font. For more information on the available subsets for each font visit https://fonts.google.com/


COLOR OPTIONS

The theme has two accent colors that you need to choose – dark and light.

HEADER BACKGROUND AND FONT COLOR

Sets the colors for the header section.

MAIN CONTENT BACKGROUND AND FONT COLOR

Sets the colors for the main area of the site content.

FOOTER BACKGROUND AND FONT COLOR

Sets the colors for the footer section.


HEADER SETTINGS


HEADER LAYOUT

You can choose between standard, center and left header.

SEARCH AREA

You can enable / disable the search icon in the header. The default option is enabled.

STICKY HEADER

You can enable / disable the sticky header. The default option is disabled.


FOOTER SETTINGS


You can choose for the footer to have one, two, three or four columns. Depending on your choice, widget areas will appear in WordPress Dashboard > Appearance > Widgets.


BLOG SETTINGS


BLOG SIDEBAR

You can choose for the blog to have a right, left or no sidebar.

ARTICLE ELEMENTS

You can choose to hide / show elements from the blog page – blog title, categories, date, author, excerpt and tags.

BREADCRUMBS

You can enable the use of breadcrumbs. The Breadcrumbs NavXT plugin needs to be activated for the breadcrumbs to work.


SOCIAL MEDIA SETTINGS


You can disable / enable the option to have a share button on pages, posts, products and projects. By default, only pages have the share button disabled. You can also choose which of the following social medias to share content on – Twitter, Facebook and Mail. By default all of them are enabled.


PORTFOLIO SETTINGS


PORTFOLIO COLUMNS

You can choose for the portfolio to have two, three or four columns.

PORTFOLIO LAYOUT

There are two layout options for the portfolio – fluid or paginated. The fluid option is recommended for smaller number of projects, as all of them are loaded on the same page. For larger number of projects, choose the paginated layout.


SHOP SETTINGS


SHOP LAYOUT

You can choose for the shop to have one, two, three, four, five or six columns.

SHOP SIDEBAR

You can choose for the shop to have a right, left or no sidebar.

RELATED PRODUCT / UPSELLS

You can choose the number of columns for the related products / upsells on the product page.

SHOP CART ICON

You can choose whether a shop cart icon to appear in the header, once products are added to the cart. The default option is enabled.


Templates Top


PAGE TEMPLATES


IMPORTANT: If you can’t see the Custom Fields option, once you are on the Add New page/post you need to click on the Screen Options button in the upper right corner and choose to show the option.


CONTACT TEMPLATE

The contact template adds Google Maps location in the beginning of the page. To do this, you need to add a custom field contact_page_map with the link from Google Maps. After that you can place the Contact Form 7 shortcode in the editor.


FULL HEADER BANNER TEMPLATE

This template has a full header background of the featured image.

In addition, you can load custom logo and choose custom color for the header. To load a custom logo, add a custom field custom_page_logo and the link to the image. To choose a custom color for the header, add a custom field custom_page_color with the hex value for the color. The default value is #ffffff.


FULL HEADER PAGE TEMPLATE

The template is the same as the FULL HEADER BANNER TEMPLATE, the only difference is that it is suitable when you want to load only a featured image. Otherwise, other elements, can add spacing to the screen. The same options apply for the template as well. To choose a custom color for the header, add a custom field custom_page_color with the hex value for the color. The default value is #ffffff.


NO TITLE TEMPLATE

Choose this template if you don’t want the title visible on the screen in the beginning of the page.


BANNER BEFORE TITLE TEMPLATE

If you want the featured image to load before the title, you need to choose this template. T


Helper Classes Top


BASIC CLASSES


Note:
The FP Foundation Assistant plugin has different options for the shortcodes and their size, color, style etc. Please read, the documentation for the plugin for more information here or in the file you can find in the documentation folder.

The Aero theme has a number of helper classes that will help you to change the style of the elements. You can do this by adding one of these classes – primary, secondary, success, alert, warning, accent – to the following elements: forms, button, label, callout, table, lists, progress bar and h-tags.


FULL SCREEN ROWS


You can also choose to override the grid options and force an element to have a full screen width. To do this, there are two classes you can use:

  • widerow – this class forces the background to the same width as the screen size, but the element’s content is the same width as the rest of page.


  • fullwiderow – this class forces both the background and the content to have full screen widths.

You can use the following classes to change the color scheme, similar to the basic classes – primary, secondary, success, alert, warning. For the theme’s accent colors you have two options – dark-accent, light-accent.


H-TAG CLASSES


You can change the styling of the h-tags by adding the following classes – line-heading, underlined-heading-heading, bar-heading, underlined-heading. You can see examples in the demo versions.


LOADING ANIMATION


You can add the class fade-in and then add a number from one to twenty to add loading animation to elements.


SUBHEADINGS


You can add the classes subheading-1, subheading-2, subheading-3, subheading-4, subheading-5, subheading-6 to style subheading elements.


SPACE CLASSES


You can add elements with the classes space-line, space-line-large, space-line-small to add spaces between elements.


SOCIAL MENU ICONS


If you want a menu to have the icons of the social media you are linking to, add the class – social-icons.


Shortcodes ( FP Foundation Assistant Plugin ) Top


The plugin provides 19 shortcodes – Grid, Visibility Classes, Float Classes, Tabs, Accordion, Orbit Carousel, OwlCarousel, Menu, Nested Menu, Buttons, Callout, Dropdown, Flex Video, Interchange, Label, Progress, Reveal, Tooltip, WP Query. For more information on the shortcodes follow the link or open the file in the documentation folder. You can use these shortcodes with other themes as well.


Widget Area Top


There are six main areas in the Aero theme, where you can add widgets.

BLOG SIDEBAR

You can add widgets to the blog sidebar area.

WOOCOMMERCE SIDEBAR

You can add widgets to the shop sidebar

FOOTER COLUMNS

Once you choose the number of columns for the footer in the FOOTER SETTINGS, you can add widgets to the columns.


Plugins Top


Once you activate the theme, you will receive a message with the required and recommended plugins to install.

FP Foundation Assistant
required

FP Foundation Assistant is our own plugin that includes 19 shortcodes for you to use. The plugin can be used on other themes as well, loading the Foundation framework allowing you to easily switch themes in the future, if you wish to do so. Keep in mind that the Foundation framework has its own css style, so you might have to add some custom css, if you change themes.

WooCommerce
optional

If you need e-commerce functionality, the theme is WooCommerce ready.

Projects by WooThemes
optional

Is a simple and clean portfolio plugin. If you need to use portfolio / projects for your site you need to have the plugin activated.

Contact Form 7
optional

For contact pages, you need to have the Contact Form 7 plugin activated.

Breadcrumb NavXT
optional

If you enable the breadcrumbs functionality from the WordPress Customizer, you need to have the plugin activated.

One Click Demo Import
optional

If you want to import the demo content for the theme you need to have this plugin activated. See One-click Demo Import.


Image Sizes Top


BLOG

The blog’s featured images need to be the same size.

PROJECTS

The portfolio’s featured images need to be the same size for every project. For example:

  • Projects Archive – 900 x 900
  • Project Single – 2000 x 2000
  • Project Thumbnail – 500 x 500

The Aero theme changes the settings of the Projects plugin to a higher resolution than the default values. If you want higher resolution for the portfolio / projects images, check the settings in WordPress Dashboard > Projects > Settings and change the values as you wish. You’d have to run the Regenerate Thumbnails plugin after that if you have already uploaded the images to the Media Library.

WOOCOMMERCE
  • Images – 600 x 600