Why font-display property is added to Astra?

Why font-display property is added to Astra?

With Astra Version 1.8.3 and above, improvement is added with property font-display: fallback; for loading Astra Font.

@font-face {
font-family: "Astra";
src: url( https://wpastra.com/wp-content/themes/astra/assets/fonts/astra.woff) format("woff"),url(
https://wpastra.com/wp-content/themes/astra/assets/fonts/astra.ttf) format("truetype"),url( https://wpastra.com/wp-content/themes/astra/assets/fonts/astra.svg#astra) format("svg");
font-weight: normal;
font-style: normal;
font-display: fallback;
}

While loading a website, there is a very short period of time (100ms according to Google) for which text will not display in a font applied to it. That means custom fonts ( Astra fonts ) will be invisible for a small period of time. Once your website is fully loaded text will display with a font set from the customizer.

For this short period of time browsers have introduced new property font-display which adds a fallback font until custom font is loaded.

For more information, please refer to the doc below – https://developers.google.com/web/updates/2016/02/font-display

How to Add RTL CSS via Child Theme?

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.

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

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 Switch From Existing Breadcrumb to New Trail?

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.

Astra Options that won』t work with 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.

Configure AMP Plugin

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.

Premium Starter Templates – Install and Activate License

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?

White Label Constants to Change Strings Permanently

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' );

Manually Install Astra via FTP

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

How to Change the Direction for Submenu Opening?

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 –