Accelerate User Manual

The Accelerate theme acts more like software than your typical WordPress theme. We utilize the Customizer interface to offer a huge variety of options for styling and customizing how your website looks and acts. Installing and activating the theme works like any other, except you must also install the required plugins and register the software. We have made this as easy as possible, check out our Getting Started Guide for details on completing this step. Most of what Accelerate does to be AMP friendly is automatic, no need for interaction or instruction… just install, activate and go.

Theme Layout

The theme layout consists of a number of “bars” above and velow the page content. Each bar includes style and layout settings available in the Customizer. For a more complete list and granular detail on all customizer options check out our Accelerate Settings Guide.

  • Header : The header contains several items and options allowing you to make it suit your needs.
    • Site Logo : Your site logo is assigned in the Customizer Site Identiy Panel. It is included on the left side of the header if you have one assigned. You may adjust it’s display height. It is linked to the home page.
    • Corner Menu : This menu include an icon link to you home page, login/logout link, and a search field.
    • Menu Location : You may include a menu in the header in place of or addition to the menu in the Navigator bar. A menu assigned to this location allows one level of sub-menu to be displayed when you hover over their parent menu’s link.
    • Site Title & Tagline : The title and tagline are managed under the Site Identity panel. You may include/exclude them as you wish. They are displayed beside the logo, below the corner items, and above the menu.
    • Schema & Preload : Behind the scenes the theme preloads the Hero Banner image and Site Logo to improve page load time and adds schema markups for page data and primary images to improve SEO.
  • Navigator Bar : This is intended for the site’s main navigation menu, but you may exlude it if you wish.
    • Sticky Bar : The navigator bar can be “stuck” to the top of the browser when you scroll down.
    • Menu Location : A menu assigned to this location allows one level of sub-menu to be displayed when you hover over their parent menu’s link.
    • Category Bar : On category (archive) pages you may include a menu bar with links to the next level of child categories. This works for WooCommerce product categories as well.
  • Title Bar / Hero Banner : A title bar with the page/post title using a theme colored background or image.
    • Title Bar : Most pages on the site will display the title bar, you have options for excluding them sitewide by type or individually.
    • Hero Banner : Pages and posts have options for assigning a “Hero” image to be used as the background. You may also add a button to the hero banner if you wish.
      • Hero Shot : This image is not the same as the page/post featured image, but it can be if you wish. They are handled separately because short and wide images work best for the banner format.
      • Featured Image : Featured images are better formatted to standard image rations (square, rectangle).
    • Icon & Button : You may choose a page specific FontAwesome icon to accompany your page title, as well as a call-to-action link/button.
  • Social Buttons (top and/or bottom) : You may include links to your page on supported social networking sites.
    • You have two locations on the page (top / bottom), and may include the bar either location or both.
    • Manage links and styling options in the customizer under the Social Buttons Bars panel.
  • Breadcrumbs : Breadcrumbs are included on posts and categories, the bar has customizer options for styling and exclusion, as well as a page specific custom search box.
  • Widget Locations : You may place widgets on the page in various locations. Check out the Accelerate Widget Locations post for more information.
  • Content : The page/post content you create in the post editor is displayed here in the template structure.
  • Footer : The footer includes a menu location, site copyright, proprietary logo, and a widget location.
    • V1 Minimalist : The menu is one level (ignores sub-menus), the widget location and social button bar are located above the footer just like their associated top locations.
    • V2 Expanded : The menu is moved to the right and is expanded into columns with top-level menu items as the column header, them one level of sub-menu items below it. The left side of the footer displays the assigned logo (if any), social links as icons, and the widget location allows for smaller widgets (400px wide).

Mobile Mode

When the browser width is less than or equal to 900px, the site enters mobile mode. The header is hidden and replaced with a small bar including it’s own logo and a “burger” button for opening the menus. All menus on the page are included this mobile menu, which has styling options of it’s own.

In addition to the theme elements changing, mobile mode also handles image sizing, grid layouts and display modes with special rules for better visibility on smaller devices.

Admin Features

You can import demo content as pages or posts from the Accelerate page in the AMP Publisher admin setion. Open the AMP Publisher admin page from the WP-admin menu (left sidebar). Under the main menu node, you’ll notice a node for “Accelerate”. Open this to access admin features specific to the theme.

The Customizer has an extensive variety of settings for each section of the theme, for the custom features used by the theme, and for setting a baseline color palette used as a fallback across all theme color settings. When you open the Customizer, you will see a number of standard WordPress panels with two AMP Publisher panels at the top. All AMP Publisher customizer settings have an info bubble you may toggle by clicking the question circle next to them in the customizer panels.

  • All granular theme settings are found in the AMP Publisher Accelerate Theme panel organized into sub-panels.
  • You will find settings for the Accelerate Color Palette in the Colors panel.
  • Site logo, title and copyright settings are found in the Site Identity panel.

The page/post editor has a Theme Settings panel with page level options for overriding site level settings and customizing the Title Bar / Hero Banner.

Posts & Categories – Display Modes

In places where a list of posts or categories are displayed (category pages, author boxes… etc) you may choose a style/layout for how those lists are displayed. Each display mode has options for customizing the look and content, and the theme includes blocks for displaying lists where and how you wish. Check out the Accelerate Display Modes post for more information.

Theme Blocks & Heading Block Styles

Accelerate includes a few of it’s own blocks, as well as enhancements to the Heading blocks.

  • The Accelerate Posts and Accelerate Categories blocks create styled lists of those items based on the parameters you choose.
  • The Accelerate Spacing Block adds space between sections of your page that is controlled by the Accelerate theme spacing setting allowing or uniformity across all pages and updates at any time. The WP core Spacer block is a static size, it must be set every time it is used, and it is not controlled accross the site from one setting.
  • Heading Block Styles : Change the way heading blocks look by including top/bottom borders in a variety of looks.
    • You may assign a style sitewide to all heading blocks, and choose which H-Tags will honor the style.
    • In the block editor you may assign one of the theme’s styles to each individual heading block. This will override the sitewide setting.

Child Theme Settings & Demo Content

If you are using a child theme, you will see a button for importing child theme settings. This only needs to be done once, it will import all child theme settings into the Customizer system for the child theme to give your site the look and layout of the child theme.

  • Pages and posts will import all content, settings and images to your site. Images will be created in your Media Library if they are not already present, then assigned to the page programatically.
  • One-Touch Import : If you wish to get your site started quickly you can use the One-Touch Import to populate your site with all of the pages, posts, menus and widgets from the demo site. You may then edit those items to suit your needs.
    • After you run the one-touch import you will see a list of actions (or inactions) taken during the import process.
    • Pages, posts and products will only be imported if the item does not alread exist.
      • You may run the import more than once or later on, but this is not recommended as this feature is only meant to get your site started and not designed for established sites.
    • If you are using a WooCommerce child theme, useful Woo widgets will be imported into the store sidebar.
    • Menus are created and assigned to the theme’s menu locations that suit your theme if they are not already assigned.
  • Individual Import : If you instead wish to only import specific pages, click the Imprt Content from API button. This will open an interface granting access to download individual demo content available to your theme.
    • Each import item is labeled for it’s type: page, post or WooCommerce product. It also has details on the page slug, # of images included, archive filename and featured image for the page if it has one.
    • Overwrite Existing Page : If a page that matches the import title exists on your site, it will tell you so an offer the option to overwrite that page. Be sure this is what you want as this will destroy any content an settings on that page.
    • Import as Template : You may import an item as a “template” instead. A window will open asking for the new page/post title, then create you page using that title.

Special AMP Features

  • Slide Bar : Instead of the classic sidebar that takes up room on the page (limiting) we have a “slide-bar”. You may place widgets in page specific locations to dynamically populate the Slide-Bar depending on the page type. Check out the Accelerate Widget Locations post for more information on these locations.
    • In the Widgets menu you have a number of widget locations applying to the type of page.
    • Anything placed in the “sitewide” location is included at the top of every page, with the page type specific location showing up on their respective pages.
    • The button for the slide-bar is stuck to the side of the page and may be clicked to toggle the bar open/closed.
  • Analytics : You may include codes and ID’s for supported analytics providers under the Analytics panel to include them on your site.
  • GDPR Compliance : Euro sites are required to include a consent window, options for it’s usage are found under the GDPR Compliance panel.
  • Advanced Stylesheet Handling : The base theme stylesheet is filtered using proprietary shortcodes to render CSS styles using the Customizer settings directly into the header for controlled AMP compliance. If you are using a child theme, you may add your own styles to the child theme stylesheet, any changes you make will be included in the header AMP CSS. Using the shortcodes found the the base theme is not recommended, use caution if you plan to do so.

Comments are closed.