Introduction to Accelerate AMP
Fortunately the Accelerate theme used in conjunction with the AMP plugin from Automatic gives you the ability to create beautiful modern websites with all the functionality you need while maintaining full AMP compliance.
Installation of Accelerate AMP
- Login into wp-admin and open Appearance ~ Themes.
- Select “Add New”
- Select “Upload Theme”
- Drag into or browse for the zip file you downloaded from the site.
- Click “Install Now”
- When the theme is finished installing, click the “Activate” link.
- Primary Theme Settings
- General Layout / Styles
- Header / Footer
- Navigation Bars
- Archives / Posts Lists
- Title Bar / Hero Banner
- Social Button Bars
- Gutenberg Blocks
- WP Theme Feature Support
Primary Theme Settings
- Copyright Text : Enter text to be used as your site’s copyright statement. The Copyright symbol is included automatically. If left blank the theme uses the current Site Title and year.
- Default Missing Image : When a post has no featured image, a default image is used instead. You may assign a different image from the Media Library. Choose a default image to use in place of our theme default image when an image is required but none is assigned or found. Each post should have a Featured Image assigned to make your website more engaging and impressive.
- GDPR Consent (EU) : Check this box to serve a cookie usage notification to users in the EU per GDPR requirements. It will not affect site behavior for non-EU visitors.
- Consent Text : Enter/edit the text you want to display when the user is promted for GDPR consent.
- Consent Link Button Text : Enter text for the added link button. If left blank, the button defaults to More Info.
General Layout / Styles
- Content Max Width : Set a maximum width for the header, nav and page contents. Banner/section colors still extend to the browser edges.
- No Limit : The site content fills the width of the browser with a small margin on each side.
- 900px to 1600px : The site content fills the browser up to this width then remains centered while the margins increase on both sides as the browser gets wider. This is useful if you wish to retain a certain look or just want to stretch the page
- Standard Padding : Choose a standard padding size for a number of elements that use it. (IE: margins, body, image, post separation) This setting can be accessed, utilized and overridden by the stylesheet shortcode and other individual settings.
- Font Family : You can enter a comma delimited list of standard system fonts (IE: Verdana, Arial,Arial Narrow). Or you can enter the name of any Google Web Font, and the theme will load the appropriate font file from Google’s API. If using a Google Font, you must check the box below to load the font’s stylesheet.
- Google Font : This box must be checked if you wish to load a Google Font for your Font Family.
- Font Styling
- Font Sizes : You have settings for choosing the font size you wish to use for the site and all H1-6 header tags, breadcrumbs, and post bylines.
- Base Font Weight : Choose the font weight to use in all non-bolded text. If you choose a weight larger than 700 Bold, then bolded text will actually display thinner than non-bolded text. Most fonts do not support all available font weights, they will default either Normal or Bold if the chosen weight is not supported.
- Body Line Height Multiplier : You can adjust the line-height (spacing between lines in a paragraph) using a multiplier of the font size for the font’s location
- Font Colors : Choose color for your site’s text, links and link hover. These settings require refresh to view all potential changes accurately.
- Accent Color : This color is used in a number of ways including shadows, accent lines, and title block patterns.
- Button Colors : Choose the colors for the button used in content by the theme and plugins.
- Image Border Color & Width : You can add a border to the images found in content and posts lists. Choose 0px to leave them out.
- Site Background
- Background Color : The site background color can be set in the “Colors” section of the Customizer.
- Background Image : An image may be assigned and setup as your site background. This is managed in the “Background Image” section of the Customizer.
- Breadcrumbs : Include the breadcrumb links on archives (category) and posts.
- Display Breadcrumbs : Uncheck this box to hide the built-in breadcrumbs. If using Yoast WPSEO, those breadcrumbs and their settings will be used instead.
- Display Last Breadcrumb : Uncheck this box to leave out the last breadcrumb (page/post title).
- Bold Last Breadcrumb : Check this box to bold the last breadcrumb (page/post title).
- Breacrumb Separator : You can enter text or a character code to choose the separator between crumbs. You may also enter a Fontawesome icon code (IE: fa-arrow-right).
Header / Footer
- Site Logo, Title & Tagline : Controls for managing the logo, title & tagline are found within the “Site Identity” section of the Customizer.
- Text Color : Choose the header text color in the “Colors” section of the Customizer.
- Background Image : You may assign an image to use as the background for the header instead of a solid color. This is managed in the “Header Image” section of the Customizer.
- Background Color : Choose the background color for the header, this is overrided if a Background Image is assigned.
- Maximum Height : Specify a maximum height for the banner/logo. (plus padding)
- Vertical Padding : Choose how much space to put above and below the logo/banner text.
- Text Alignment : Set the text alignment for Site Title and Site Tagline.
- Background Color : Choose a background color for the footer bar.
- Text Colors : Choose the colors to use for the footer menu and copyright text.
- Display Navigation Bar : The navigation bar below the header has it’s own set of styles. It includes the Main Menu (one level) and a Search Box. You can also add a secondary Navbar below it popluated with links for WordPress and WooCommerce categories. You may choose wehther or not to include the bar on the Home and Blog pages.
- Display Child Category Bar : Add a second Navigation bar on category pages with child categories. You can choose whic page types will include the bar: Home, Blog, and Category (children).
- WooCommerce Product Category Bar : When you have WooCommerce installed, the category navbar can include the product categories on the store page and each category’s children on their respective product category pages.
- Display Search Box : You may choose which page types to include a standard sitewide search box in the site’s Navigation Bar. (home, blog, categories, pages, posts) The search box will not be diaplyed on custom post types or WooCommerce pages.
- Text Size : Choose the font size you wish to use for the menu (Main Menu) in the Navigation Bar.
- Text Case : Choose to capitalize words, force upper/lower case, or just leave it unmodified.
- Nav Menu Hover Effect : Add a little motion to your menu by choosing one of these CSS animations.
- Colors & Styles
- Navigation Bar Colors : Choose background and font colors for the Navigation Bar. The mobile menu also uses these settings for color.
- Category Bar Colors : The child category bar is styled separately from the Navigation Bar. It is only displayed on archive/category pages that have non-empty child categories.
- Sidebar Width : Choose a static width for the sidebar on pages that display it.
- Sidebar Display : Choose which page types will include the sidebar (widget area) from Home, Blog, Page, Post and Category.
- The “Slide-Bar” : The Slide-Bar is toggled by a button you anchor with a content location that slides in/out from the sides of the browser.
- Slide-Bar Orientation (horizontal) : Choose which side of the screen to anchor the slide-bar (left, right).
- Slide-Bar Orientation (vertical) : Choose where (vertically) to anchor the slide-bar button (top, middle, bottom).
- Slide-Bar Width : Choose a static or responsive width for the slide-bar on pages that display it.
- Slide-Bar Styling : Set the padding between the edges of the slide-bar and it’s content, as well as the background and base font color for the slide-bar.
- Slide-Bar Display : Choose which page types on which to display the slide-bar (home, blog, page, post, category).
Archives / Posts Lists
- These options apply to anything that displays a list of posts. (IE: category landing pages, search results, post list shotcodes, recent posts when displayed on the home page)
- Posts Page / Archives Display Mode
- Display Modes :
- Article : The article display mode morphs as the browser width decreases eventually removing the image and content as it gets smaller. Title, author info, date and content left aligned with the featured image on the right.
- Image Grid : The image grid places image blocks in a row with consitent heights, then drops the row count as the browser size decreases. The image box has a drop shadow and the cat/tag buttons float above the top of the image also with a shadow. The text overlay has a white semi-transparent background.
- Image & Article : A combination of styles, displaying posts in rows with images above the post text.
- Home & Blog Page Display Modes : You can choose separate settings for the posts lists that show on the home page and blog page (per assignemnt in Admin/Settings/Reading).
- Display Modes :
- General Options
- Excerpt Trim Word Count : Choose how many words to include (trim to) in the posts excerpts when trimmed by wordpress. Custom excerpts entered in the Post Editor will not be trimmed.
- Display Byline (Date/Author) : Uncheck this box to hide the author name and post date in posts lists.
- Display Comment Count Flags : Uncheck this box to remove the comment count flags from posts lists. The flags are only included in the Article Modes and the “Image Grid – V3” mode.
- Image Grid Max-Height : Choose the height of the image box, the width is responsive.
- Post Images as Links : Choose whether to add a link to the post image when it is clicked in a posts list. This only applies to wider screens, the links are disabled in mobile mode (width 900px or less).
- Posts List [acc_posts] : You can include a posts list on any page using a WordPress shortcode. You may limit the number of posts by adding the “limit” attribute (4 by default). You may also designate a display mode for each shortcode instance using the “display” attribute with one of the following values: “article”, “image”, or “both”. example: [acc_posts limit="3" display="image"]
- Categories List [acc_cats] : You can include an ID list of term IDs for the catgeories you wish to include. If no ID list is used then it will disply all top level categories for your site. Use the “id” attribute in your shortcode as shown in this example: [acc_cats id="128,475,1223"]
Title Bar / Hero Banner
Pages and posts have a page title bar that falls below the header/nav bars. You choose the default colors/style for the bar, then add Hero Banner image support as desired.
- Hero Banner Display : Pages and posts have a page title bar that falls below the header/nav bars. You choose the default colors/style for the bar, then add Hero Shot image support as desired. Choose which page types to include the Default Hero Image if one is available (home, blog, page, post, category). You may assign hero shots to individual pages, posts and categories which will be displayed while ignoring the default image and page type settings.
- Default Hero Image : If you wish to fill all Hero Banners with an image when one is not assigned to the particular page or post, you may do so by choosing one as the site’s default Hero Banner image.
- Maximum Height : Set the height to use for Hero Banners.
- Text and Background Colors : Choose the colors to use the the title bar when not in “Hero Shot” mode. When using a hero shot, the font color is always white with a text shadow to allow for better readability.
- Text & Button Alignment : Choose to align the title and buttons in the banner.
- Title Bar Display : Choose which page types to display the Hero Banner from Home, Blog, Pages, Posts and Categories.
Social Button Bars
Enter a URL for your social network pages, and choose the location(s) to display the bar. A button/link with the site’s icon will be included in the bar for each URL you enter.
- Display Social Button Bar : You may add links to your page on popular social websites as icons in their own header and/or footer bar. To include an icon/button enter a URL into the associated Social Provider field. Choose between header, footer, both or none to inlcude/exclude bar locations.
- Social Providers : Choose to buttonize links to your pages on Facebook, Instagram, Pinterest, Reddit and Twitter.
- Social Bar Text : Enter text you wish to display before the icons in the Footer Social Bar.
- Font Size, Bar Colors & Padding : Choose the typical aspects for styling your bar. These settings are separate from the Footer Bar.
- Button Shape No Button : Just the icon in the chosen color.
Square : Same as circle but centered in a square.
Rounded Square : Same as circle but centered in a square with rounded corners.
Circle : The icon is centered in a circle, with color options for the icon, hover and border. The background is a black/gray gradient that is black on hover.
- Button Size : Choose from 4 preset sizes to display the icons. (normal… to biggest : 40px… to 120px)
- Icon Color : Choose a color for the icon’s static state as well as it’s hover state.
- Button Color : Choose a color the the button’s static state as well as it’s hoer state and border. These settings only apply when you have chosen either Circle, Square Rounded Square for the button style.
- Social Share Bar : Appends a button bar after page/post content that is used to share it on a variety of social networking sites (IE: Facebook, Pinterest… etc.). Chose whether or not to include it on pages and/or posts and which proividers to include within it.
- Gutenberg Header Block Style : Add styling to the Gutenberg Heading Blocks in page or post content with bars using the site font, background and accent colors you have chosen in the Customizer. Individual Heading Block style and alignment settings will override these settings.
- Style H1 – H6 Tags : You may choose which H-Tags to style using this setting. (1-3 on, 4-6 off by default)
- Text Alignment : Set the default text alignment for styled Heading Blocks.
- Analytics Providers : Support is currently limited through AMP: Google Analytics, Google Tag Manager, Facebook Remarketing Code. Enter an account or membership ID/code to include the analytics module in the page footer.
- AMP Pixel : Use this at your own discretion. This AMP tag is provided to allow a broad number of analytics/tracking services by entering a Pixel URL. This is an experimental module, it may not work for all pixel providers.
WP Theme Feature Support
This theme supports the WordPress “custom-logo”, “custom-header” and “custom-background” features. They can be accessed in the Site Identity, Colors, Header Image and Background Image sections of the Customizer respectively. They offer advanced usage of the images in those areas.