Astra 文档

How to Download Older Version of Astra Theme or Astra Pro Addon plugin?

Astra is a free WordPress theme. The development for the theme is going on with GitHub on the link here. Sometimes you may need an older version of the theme. previous version zip for Astra theme can be downloaded from WordPress repository.

Below is the URL that allows direct downloading zip for required version –

https://downloads.wordpress.org/theme/astra.required_version.zip

Note: In place of required_version enter version number of the theme.

For Example –

If you wish to download zip for theme version 1.0.2 then URL will be –

https://downloads.wordpress.org/theme/astra.1.0.2.zip

You can find the changelog for a theme here.

In case you need the previous version for Astra Pro Addon, write to Astra Support on the link here.

How to Add Google Tag Manager Code to Astra?

Custom Layouts module available with Astra Pro Addon plugin allows adding Google Tag Manager code to the website. It provides hooks so that you can insert custom code at various locations on the website without editing theme』s core files.

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Google Tag Manager code has two code snippets. One to be added as close to the opening tag as possible and other immediately after the opening tag. To add both code snippets, add two different Custom Layouts. Below are the steps to create Custom Layout and add code using hooks.

1. Custom Layout to add code to  tag – 

Activate the Custom Layouts module from Astra Pro.Add a new Custom Layout. Insert the code in the Code Editor.Select Hooks layout and add wp_head action.Choose to display it on Entire Website.Publish the layout.

2. Custom Layout to add code to  tag – 

Add a new Custom Layout. Insert the code in the Code Editor.Select Hooks layout and add body_top action.Choose to display it on Entire Website.Publish the layout.

LearnDash Shortcode to Add Profile Link

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

You can achieve displaying a Profile Link using a LearnDash shortcode using LearnDash module available with Astra Pro. Please refer document, to begin with, LearnDash module.

Astra Pro Addon plugin provides a shortcode for LearnDash that allows displaying profile link. The shortcode can be used anywhere on the website. It will display a profile picture for logged-in students. Clicking on it will display student profile details.

The LearnDash addon in the Astra Pro Addon plugin provides a shortcode [astra_learndash_profile_link] This can be used on various locations like header, footer, sidebar, widgets, page builders, etc.

To use the shortcode, activate the LearnDash addon from Astra Options. (screenshot)

[astra_learndash_profile_link] has an attribute 『link』 that will open on click of the profile picture.

For Example – [astra_learndash_profile_link link="https://www.google.com"] This shortcode will display a profile picture for the logged-in student. On click, it will be redirected to inserted link i.e. to https://www.google.com

Below is the example that shows how can this shortcode be used –

How to Display Learndash Profile Link in the Primary Header?

Below are the detailed steps –

Step 1 – Make sure to activate the LearnDash and Astra Pro plugin. Activate LearnDash Addon from Astra Options. (screenshot)

Step 2 – From the WordPress dashboard navigate to Appearance > Customize >  Header > Primary Menu.

Step 3 – From the Last Item in Menu drop-down, select Text / HTML.

Step 4 – Paste the code in the input area. Profile link will appear in the header as shown below –

LifterLMS Shortcode to Add Profile Link

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Also, make sure that you have the LifterLMS plugin installed and activated.

Astra Pro plugin provides a shortcode for LifterLMS that allows displaying a profile link. The shortcode can be used anywhere on the website. It will display a profile picture for logged-in students. Clicking on it will display student profile details.

The LifterLMS addon in the Astra Pro provides a shortcode [astra_lifterlms_profile_link] This can be used on various locations like header, footer, sidebar, widgets, page builders, etc.

To use the shortcode, activate the LifterLMS addon from Astra Options. (screenshot)

Below is the example that shows how can this shortcode be used –

How to Display Lifterlms Profile Link in the Primary Header?

Below are the detailed steps –

Step 1 – Make sure to activate LifterLMS and Astra Pro plugin. Activate LifterLMS addon from Astra Options. (screenshot)

Step 2 – From the WordPress dashboard navigate to Appearance > Customize > Header >  Primary Menu.

Step 3 – From the Last Item in Menu drop-down, select Text / HTML.

Step 4 – Paste the code in the input area. Profile link will appear in the header as shown below –

Color for Anchor Tag Inside Heading Tag

Previously with Astra, link added with the anchor tag set to inherit color from the heading tag. You might have observed this if you have tried adding an anchor tag inside the heading tag ( h1 – h6).

For example –

If the following code is used to add a link in the heading –

Learn from Yesterday Live for Today Hope for Tomorrow

Then link 「Live for Today」 will have the same color as rest of the heading.

But this scenario is updated with Astra theme version 1.4.9 and Astra Pro version 1.5.0 Below is the information for existing installs and fresh installs.

For Fresh Installs – If you are installing freshly Astra theme with version 1.4.9 and above/ installing Astra Pro Addon plugin with version 1.5.0 and above.

Color for the link inside the heading tag will be different from rest of the heading.For example – consider following code

Learn from Yesterday Live for Today Hope for Tomorrow

In the above code, color set for the heading will not be inherited by the link.Color settings that are set with the theme ( customizer: Colors & Background > Base Colors > Link Color) will be applied to the link text i.e. 「Live for Today」

For Existing Installs – If you already have installed the theme, plugin and are updating Astra theme to version 1.4.9 and above/ updating Astra Pro Addon plugin to version 1.5.0 and above.

After updating the theme and the plugin the existing scenario will not change.That means link inside the heading will inherit color from the heading tag.If you wish to set theme link color to link text inside the heading tag use following filter.

Filter to manually enable/disable the different link and heading color –

add_filter('astra_include_achors_in_headings_typography','__return_false');

Above filter will not allow link text to inherit color from the heading tag. Link text will display color that is set from the theme.

Note: Add above filter code to child theme』s functions.php file.

Search Shortcode to Add Search Box in Astra

Astra Pro Addon plugin version 1.5.0 and above provides a shortcode to display a search box. This shortcode can be used anywhere on the website i.e header, footer, page builder, sidebar widgets, etc. to display the search box.[astra_search] will display the search icon anywhere you want. Following styles are available for search box –

The Slide search – It slides open a search box when you click on the search icon.The Full-screen search – It covers the entire screenThe Header cover search – It covers the headerThe Search box – A default search box if you would like to keep it as it is.

[astra_search] had an attribute 『direction『 for the direction this should open the search box on click and attribute 『style『 that allows select style from the above list.

Available shortcodes are listed below –

1. The Slide searchLeft: [astra_search]Right:[astra_search direction="right"]

2. The Full-screen search[astra_search style="full-screen"]

3. The Header cover search[astra_search style="cover"]Note: This shortcode will display a search box with respect to its parent class.

4. The Search box[astra_search style="inline"]

Note: This shortcode is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

How to Add Font Awesome Icons in Astra?

Astra does not come with Font Awesome Icons but uses a custom font icon. The library we have used is lightweight and contains only the necessary icons required for the theme.

But Font Awesome Icons can be easily added with the external plugin. Below are the steps to add Font Awesome Icons to Astra:

Step 1: Choose a plugin from WordPress repository that allows loading a Font Awesome library to site. For Example – Better Font Awesome.Step 2: Install the plugin on the site.Step 3: You can now use shortcode for font awesome icons anywhere on site including header, footer, sidebar, etc.Step 4: For example – [icon name=user] will display the user icon from Font Awesome. [icon name=user class=」fa-2x」] will display bigger icon. It depends on the plugin methods. You can enter the shortcode in the Text/HTML field on site.

That』s it!

Following similar steps, you can add any font icon library on your website such as Entypo, etc.

Google Fonts Not Loading with Astra

When you navigate to Typography tab in the customizer and choose to set font-family for text/heading or other content. You might see a blank list under the title Google Fonts. This means the Google Fonts available with astra are not loading on your site.
This can happen because of several reasons. One of them is described below-

Reason:

Astra includes a file with a list of all the Google fonts. This file is read when displaying all google fonts in the customizer. Some of the hosting providers have incorrect file permissions which do not allow reading the file. And so the Google Fonts list display empty.

How to fix:

1. Contact your host provider and ask them to provide a necessary file permission.
2. If the above point does not help, you can force wp_filesystem to use file_get_* functions by adding a custom code. This will allow displaying all Google Fonts on your site. Add the following constant in your wp-config.php file.
define( 'FS_METHOD', 'direct' );

Adding Custom Sidebar to the Theme with Lightweight Sidebar Manager plugin

Sometimes it is required to display a suitable, separate sidebar on certain pages on the website. Apart from the default sidebar provided by the theme, you can create a custom sidebar and display it on particular pages with display rules.

To add custom sidebar you need to use Lightweight Sidebar Manager plugin, which is free and available on WordPress repository.

This plugin will replace the theme』s default sidebar with the custom sidebar. It also allows replacing widget areas in header or footer. If you have plugins that provide their own widget area like WooCommerce, this plugin allows replacing those widget areas as well.

Below are the steps to use Lightweight Sidebar Manager plugin –

1. Install and activate the plugin on a WordPress site.2. Settings can be found under Appearance > Sidebars.3. Add New sidebar and enter a title for your custom sidebar.4. Fill sidebar settings.

Sidebar To Replace: Select the sidebar or widget you wish to replace. All available sidebar and widget areas in the theme will be listed here.Description: Add description for your custom sidebar. This is optional.Display On: Choose whether to display the custom sidebar on the entire website or on specific pages/posts. You can even exclude a particular page/post by adding them to the Exclusion Rule.User Roles: You can decide a user role for which custom sidebar should be visible. For excluded users, the default sidebar set with the theme will be visible.

5. Above steps will register the custom sidebar on site. This custom sidebar will appear under Appearance > Widgets.6. Add widgets to this custom sidebar. Drag and drop the widgets you want to add to the custom sidebar.

7. That』s it! Your custom sidebar will appear on pages/post/widget areas you selected with display rules.

Check following things if you are not able to see custom sidebar –

1. Default sidebar is enabled from the theme. As custom sidebar replaces default sidebar, it needs to be enabled from the theme.2. If you have selected the sidebar to display on the header/ footer, check if the widget area is enabled for header/footer. Custom sidebar replaces the widget area in the header/footer so you need to enable it.

Using Lightweight Sidebar Manager plugin with Astra theme

Below is the example that shows how to add a custom sidebar to Astra primary header –

1. Install and activate the Astra theme and Lightweight Sidebar Manager plugin.2. As we need to set a custom sidebar in the primary header, we need to add the widget area in the header. To add widget area navigate to Appearance > Customize > Header > Primary Menu > Last Item in Menu and select Widget from the list.

3. Now follow the steps that are mentioned above to use Lightweight Sidebar Manager plugin.4. This will add a custom sidebar to Astra Header. For the demo, we have added image gallery widget to the custom sidebar as shown in the screenshot below –5. Similarly, you can add a sidebar to the footer and other sections of Astra header.

Display SubMenu Just Below the Header

If you have observed, whenever you hover the parent menu, the submenu opens just below the parent menu. No matter what your header height is. In this case, submenu cuts the header and display over it just below the parent menu.

In the Astra Theme version 1.5.0 and above we are introducing a filter that will open a submenu below the header without cropping it. You can enable this functionality by adding the following filter to the child theme』s function.php file.

add_action( 'wp', 'astra_open_submenu_below_header' );
function astra_open_submenu_below_header() {
if ( false === astra_get_option( 'submenu-below-header', true ) ) {
add_filter( 'astra_submenu_below_header_fix', '__return_true' );
}
add_filter( 'astra_submenu_open_below_header_fix', '__return_true' );
}

This filter introduces padding difference of ~5px in the header.

How this will work for existing sites –

For the existing sites, those will update to this version (1.5.0) the above change will be disabled by default. You can enable this by adding the above filter.

How this will work for new installations –

If you freshly installed Astra Theme with version 1.5.0 and above the above functionality will be enabled by default. You don』t need to add any snippet.

The functionality of the filter is shown below:

Before adding a filter:

After adding a filter: