Astra 文档

Native AMP Support in Astra

Astra integrates beautifully with AMP (Accelerated Mobile Pages). AMP allows loading web pages faster on mobile devices than their usual speed. This document will help to understand AMP in detail and how Astra works with AMP. Let』s take a look! 

What is AMP (Accelerated Mobile Pages)?

AMP gives faster page loading experience on the mobile web. Your website pages will load on mobile devices without delay. AMP allows restricted HTML and JS to render on mobile devices and so the speed of the pages will be increased.

AMP is an open-source project for the betterment of future web on mobile devices. It is an initiative by Google. It is recommended to use AMP pages as most of your website viewers will be using smaller devices.

What is mean by Native AMP Support in Astra?

As mentioned earlier AMP restricts HTML, CSS, and JS to load on mobile devices. It does not allow more than 50KB CSS to load on mobile. Because of this, you can not see the exact Non-AMP pages design on AMP pages.

Astra』s native AMP support takes care of allowed CSS size and manages the design of the mobile pages accordingly. Astra tries to retain the original design of the pages in AMP mode. So that your AMP pages look much similar to Non-AMP/ original design.

How AMP can be enabled on the website?

To start using AMP, you need to enable it on the site with a plugin. Install the following plugin on your website just like any other WordPress plugin.

AMP: This plugin is freely available on WordPress.org

Read how the AMP plugin can be configured with recommended settings.

Important Note: Due to JS and CSS restrictions by AMP some of the Astra theme and Astra Pro settings will not work. Here is the complete list for the options that won』t work with AMP.

How to Change the Direction for Submenu Opening?

By default, submenus will open to the right side. Sometimes if the submenu structure is long, it might open out of the viewport in the right and user will not able to see it. 

To fix this add a below-mentioned CSS class to the parent menu who』s submenu is displaying out of the viewport.

ast-left-align-sub-menu 

For example:  If following is the menu structure:About> About Team>> Team Members>>> Team Responsibilities>>>> Team ContactsThen add a CSS class ast-left-align-sub-menu to the parent menu – About Team  So that their sub-menus will open to the left instead of right. 

Detailed steps to add CSS class – 

Step 1: From the dashboard navigate to Appearance > Menus.

Step 2: At the top right corner click on Screen Options and enable the CSS Classes option.

Step 3: From the menu structure click on the menu whos submenu needs to be opened at the left.

Step 4: Add CSS class ast-left-align-sub-menu and click on save. 

Now the submenus will open like –

Manually Install Astra via FTP

Sometimes you might not able to install the Astra theme via the WordPress dashboard. In such a case, try installing the theme via FTP.

Below are the detailed steps –

Step 1 – Download Astra theme』s zip from WordPress repository Step 2 – Unzip the Astra theme zip fileStep 3 – Open your WordPress site via FTP. We would recommend you to use FileZilla Step 4 – From FTP, visit the root of the WordPress install Step 5 – Now visit wp-content folder > themes Step 6 – Upload Astra unzipped file from step 2

Step 7 – Now the Astra is installed on your site. Go to WordPress Dashboard and activate it from Appearance > Themes

White Label Constants to Change Strings Permanently

We all know how to White Label Astra? It is also known that the white label settings page can be hidden from the dashboard. However, it reappears when the plugin is re-activated on the website.

We were asked whether these white label settings can be hidden permanently. Especially agencies who serve many clients would not want them to know that the plugin or theme used to build their website is a third party white labeled plugin.

Therefore, we』ve introduced a method that will allow you to White Label the Astra and hide the White Label settings – and keep them hidden, no matter what activity the user performs with the plugin or on the website. This means that you can white label the Astra permanently from the wp-config.php file and these settings will not be changed from the WordPress dashboard settings.

To achieve the above scenario we have added a White Label Constants to Astra. Along with Astra theme and Astra Pro plugin, you get contact for Astra related plugins as well.

Below is the list for the White Label Settings and their respective White Label Constants

# Astra Theme and Astra Pro Plugin

White Label Settings
White Label Constants

Agency Author Name
AST_WL_ASTRA_AGENCY_AUTHOR

Agency Author URL
AST_WL_ASTRA_AGENCY_AUTHOR_URL

Agency License URL
AST_WL_ASTRA_AGENCY_LICENCE

Astra Theme Name
AST_WL_ASTRA_NAME

Astra Theme Description
AST_WL_ASTRA_DESCRIPTION

Astra Theme Screenshot
AST_WL_ASTRA_SCREENSHOT

Astra Pro Name
AST_WL_ASTRA_PRO_NAME

Astra Pro Description
AST_WL_ASTRA_PRO_DESCRIPTION

# Starter Templates plugin or Astra Premium Sites plugin (available with Astra Essential Bundle and Growth Bundle)

White Label Settings
White Label Constants

Astra Sites Name
AST_WL_ASTRA_SITES_NAME

Astra Sites Description
AST_WL_ASTRA_SITES_DESCRIPTION

# Lightweight Sidebar Manager Plugin

White Label Settings
White Label Constants

Sidebar Manager Name
AST_WL_BSF_LW_SB_NAME

Sidebar Manager Description
AST_WL_BSF_LW_SB_DESCRIPTION

# Astra Hooks Plugin

White Label Settings
White Label Constants

Astra Hooks Name
AST_WL_ASTRA_HOOKS_DESCRIPTION

Astra Hooks Description
WP_UAEL_WL

# Custom Fonts Plugin

White Label Settings
White Label Constants

Custom Fonts Name
AST_WL_BSF_CUSTOM_FONTS_NAME

Custom Fonts Description
AST_WL_BSF_CUSTOM_FONTS_DESCRIPTION

# Adobe Fonts (Custom Typekit Fonts)

White Label Settings
White Label Constants

Adobe Fonts Name
AST_WL_CUSTOM_TYPEKIT_FONTS_NAME

Adobe Fonts Description
AST_WL_CUSTOM_TYPEKIT_FONTS_DESCRIPTION

How to use White Label Constants?

Step 1 – Open and edit the wp-config.php file.Step 2 –  Find the line /* That』s all, stop editing! Happy blogging. */ and add White Label Constants code just before this line.Step  3 – Below is the sample code for the White Label Constants. You can update the strings as per your requirement.

define( 'AST_WL_ASTRA_AGENCY_AUTHOR', 'Agency Author' );
define( 'AST_WL_ASTRA_AGENCY_AUTHOR_URL', 'www.your-website-url.com' );
define( 'AST_WL_ASTRA_AGENCY_LICENCE', 'www.your-get-licence-url.com' );
define( 'AST_WL_ASTRA_NAME', 'Fastest WP Theme' );
define( 'AST_WL_ASTRA_DESCRIPTION', 'WordPress theme' );
define( 'AST_WL_ASTRA_SCREENSHOT', 'www.your-theme-screenshot-url.com' );
define( 'AST_WL_ASTRA_PRO_NAME', 'Pro Addon' );
define( 'AST_WL_ASTRA_PRO_DESCRIPTION', 'Pro Addon extends the features of theme' );
define( 'AST_WL_ASTRA_SITES_NAME', 'Ready Sites' );
define( 'AST_WL_ASTRA_SITES_DESCRIPTION', 'Library of Ready sites' );
define( 'AST_WL_BSF_LW_SB_NAME', 'Custom Sidebar Manager' );
define( 'AST_WL_BSF_LW_SB_DESCRIPTION', 'Manage your Sidebar' );
define( 'AST_WL_ASTRA_HOOKS_NAME', 'Hooks for theme' );
define( 'AST_WL_ASTRA_HOOKS_DESCRIPTION', 'Use hooks to put custom code' );
define( 'AST_WL_BSF_CUSTOM_FONTS_NAME', 'My Custom Fonts' );
define( 'AST_WL_BSF_CUSTOM_FONTS_DESCRIPTION', 'Add custom fonts' );
define( 'AST_WL_CUSTOM_TYPEKIT_FONTS_NAME', 'My fonts' );
define( 'AST_WL_CUSTOM_TYPEKIT_FONTS_DESCRIPTION', 'Add custom typekit font' );

Premium Starter Templates – Install and Activate License

In the Starter Templates library, templates with PREMIUM tags are accessible only to those who own the Essential Bundle or Growth Bundle.

Once you purchase Essential Bundle or Growth Bundle, follow the steps below to install the plugin and activate its license. Activating the license will allow you to import starter templates with the 『Premium』 tag.

Step 1 – Login to your store account.Step 2 – Visit Account > Downloads. Step 3 – Choose to download Premium Starter Templates plugin.

Step 4 – From your WordPress dashboard, navigate to Plugins > Add New > Upload Plugin and upload zip from the above step.

Once you activate the plugin you will have to activate the license key.

Step 1 – Visit store account and go to Account > Licenses and copy the license key.

Step 2- Navigate to WordPress dashboard > Plugins > Installed Plugins > Premium Starter Templates and click on Activate License. A popup window will appear where you need to enter the license key.

Note: The Premium Starter Templates is a different plugin than the Starter Templates plugin that is available for free on WordPress.org.

Once you are set with the plugin start importing your favorite template.

Related Docs –

How to Import Complete Site with Starter Templates?How to Import Single Page Starter Templates?

Configure AMP Plugin

AMP plugin needs to be installed in order to enable AMP for your web pages. Read about Astra-AMP Integration. After installing the plugin we recommend you follow the AMP』s Wizard to configure AMP.

Or you can choose from the below settings and that would be all –

From WordPress dashboard navigate to AMP > Settings. Below are the global settings that are recommended with the Astra theme –

Template Mode – Transitional: Enable this option. It will create a non-AMP and AMP versions of your content.Advanced Settings – Supported Templates: Disable the first option ( Serve all templates as AMP ) so it will give you a particular post type choice. Select post types where you wish to have AMP.

Apart from the above global settings, you can enable/disable AMP on particular pages/posts.

Edit the page. In the right sidebar, you can see a toggle button to enable/disable AMP.If page builder is used to designing a page or post, it is recommended to turn off the AMP.

Astra Options that won』t work with AMP

As we know AMP does not allow JS to render on mobile devices. It also restricts the CSS size to 50 KB. Some advanced options from Astra theme and Astra Pro needs JS and extra CSS to work. With the restriction of JS and CSS, some Astra options will not work when AMP is enabled.

Though some Astra options will not work on AMP pages, switching to AMP with these options will not break anything on your website. These features will be replaced by alternative options from the Astra itself.

Below is the list for the Astra Pro addons that will not work with AMP –

Above and Below Header – If above/below header is designed with Astra Pro』s Header Sections addon then it will not appear on AMP pages.

Sticky Header – Header designed with Astra Pro』s Sticky Header addon will not work on AMP pages as it needs JS to work.Scroll To Top – If you have enabled Astra Pro』s Scroll To Top addon, it will not display on AMP pages.Mega Menu – The feature offered by Astra Pro』s Nav Menu addon will not work on AMP pages. All menu items will display as a normal drop-down. Template added from the page builder will not display, instead of the template a menu item text will display.Custom Layouts – Layouts designed with page builder in Custom Layouts addon will display without any style. If page builder used is not supported by AMP then only content from the layout will display and AMP will skip the style. So it is recommended to disable custom layout on AMP. You can find a setting on individual Custom Layout (Screenshot).

Apart from the above, some options from other Astra Pro addons will not work. They are as follows –

Search Style – Advanced search styles like Full-screen, Header cover search, the Search box will not work on AMP pages. Only slideMenu Style for Mobile Header – Astra Pro』s Mobile Header addon provide options for Menu Style – Flyout, Full-Screen, No Toggle style. These styles will not work on AMP pages. Instead of these styles, a simple drop-down menu will display.Toggle Button Style and color – For Mobile header, Toggle Button styles like outline, minimal and Toggle Button Color will not work. Instead of this a default Fill style will be applied with theme base color.Infinite Scroll on blog/archive page – Astra Pro』s Blog pro addon offers pagination option. If you select Infinite Scroll for blog/archive page, it will not work on AMP pages as it needs JS. Instead of the infinite scroll, pagination will be replaced with numbers.

How to Switch From Existing Breadcrumb to New Trail?

Astra version 1.8.0 introduces breadcrumbs that can be added from within a theme.

The Page header module of the Astra Pro addon already adds breadcrumbs. The ones that you already have will follow the previous way. However, the ones you add now on will follow the recent Breadcrumb trail.

If you want to switch from the existing breadcrumb to the new trail, you can use the following filter.

add_filter( 'astra_addon_advanced_headers_use_astra_breadcrumb_trail', '__return_true' );

Add this code to the child theme』s functions.php file.

How to Display a Breadcrumb Anywhere within a Page or Post with Shortcode?

From version 1.8.0, we have introduced a built-in breadcrumb feature into the Astra theme.

This allows you to display breadcrumbs and manage its styling through color and typography options.

Here is an article that will brief you on how you can add breadcrumbs using the Astra theme and document too.

The above method focuses on three default positions – viz. inside the header, below the header and above the title.

But, what if you want to display it anywhere on the page or post? All you need to do is paste a shortcode and you see it there!

This is the shortcode – [astra_breadcrumb]

Note: To use the Breadcrumb shortcode anywhere on the page, you will need the Astra Pro plugin installed and activated.

You can add this to any custom layout or just anywhere – maybe the header, the footer, sidebar widget, within a page builder widget, etc.

How to Add RTL CSS via Child Theme?

Need to add custom CSS for RTL site? Usually, many of us add .rtl CSS class while writing a custom CSS for RTL site. These CSS loads even if we view the LTR site. Well, this is not a recommended way. In this article, you can explore how custom CSS can be added to the RTL site.

It is recommended to add custom code via a child theme. So make sure you have the Astra child theme installed and activated. Login with FTP and edit Astra child theme Create a new file and name it as rtl.css and add all custom CSS in this fileEdit functions.php file in child theme and add the following code snippet

/**
* Load the parent rtl.css file
*/
function astra_child_enqueue_rtl_styles() {
if ( is_rtl() ) {
// Load RTL CSS.
wp_enqueue_style( 'astra-rtl', get_stylesheet_directory_uri() . '/rtl.css', array('astra-theme-css'), ASTRA_THEME_VERSION );
}
}
add_action( 'wp_enqueue_scripts', 'astra_child_enqueue_rtl_styles' );

Check out the doc that explains how to add custom PHP code using the child theme』s functions.php file. 

Above code snippet will load RTL CSS only when the site is viewed in RTL mode. CSS will not load in LTR mode.