分類： 入門

Overview of LearnDash Integration in Astra Theme

UPDATE — This article only applies to the Legacy theme that LearnDash offers. If you wish to use LearnDash 3.0, we have an update, you can read the announcement post to know the changes we』ve done in the Astra theme and also go through the knowledge base article to use Astra with LearnDash 3.0.

In this article, we』re going to take a look at the key highlights and options you will find for LearnDash in the free version of Astra. To see extra options and features you can get with Astra Pro, please refer this article.

Integration Highlights:

Easily Customizable

Astra is fast, flexible starter theme which means you can use it to build any kind of website. Out of the box, it comes with simple, minimalist design. Users can tweak it from intuitive settings in Live Customizer to achieve desired results.

Optimized UI

LearnDash is a great LMS Platform. But it』s UI leaves a lot to be desired on it』s own. So on popular demand, Astra theme has designed an integration with LearnDash to give it a modern, clean design and interface.

Uniform Design

Astra + LearnDash not only look great together; but uniformed as well. LearnDash takes colors, fonts and style set in the Customizer options of Astra theme.

Screenshots:

Because, a picture is a worth thousand words! Click on any image below to open a gallery of some screenshots:

Dedicated Settings for LearnDash

We have provided dedicated design options for LearnDash, so users can achieve make customizations easily without custom code. Some basic options are provided in the Astra free theme, where as more advanced customization options are available from Astra Pro Addon.

Options in Astra Theme

Container:For all single course pages, topics, lessons and quizzes — you can have a different container layout.

Sidebar:Astra provides you control so you can choose the position of sidebar on LearnDash pages.

Table of Contents:Beautify the LearnDash Table of Contents easily with dedicated options. The 「Display Serial Number」 option helps you enable or disable the serial numbers for the table rows; and 「Differentiate Rows」 option will style even odd rows a bit differently with different background colors for better UX.

More Options and Features with Astra Pro

Astra Pro extension for the free Astra theme takes the integration with LearnDash to the next step. It offers amazing options such as Distraction Free Learning, student』s Gravatar in header, more controls for design of course contents table and much more.

We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the LearnDash module of Astra Pro Addon.

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

Off Canvas Sidebar for WooCommerce Shop Page

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 manage the sidebar using the WooCommerce module available with Astra Pro. Please refer document, to begin with, WooCommerce module.

WooCommerce Addon provides Off Canvas Sidebar option for Shop page. Settings can be found under Appearance > Customize > WooCommerce > Product Catalog.

Off Canvas Sidebar is the part of navigation strategy. The sidebar is initially moved out off the screen and out of view as well. To make the sidebar appear you have to set trigger in the form a button, or a link is given. When you click on the trigger, Off Canvas Sidebar appears. This option works very well with all the responsive devices as well.

Since this is a sidebar, you need set the sidebar using various WordPress widgets. Or you can even add third-party widgets.

There are 3 ways to showcase the Off Canvas Sidebar trigger:

LinkAppears in the three line menu.

ButtonLike mentioned before, the default theme color & styling is applied to the button.

Custom ClassThis custom functionality helps you to set/place the Off Canvas Sidebar trigger anywhere you wish on the entire website.The trigger for Off Canvas Sidebar can be placed in the header, above header, footer or anywhere else as per the requirement.For example:A nice and simple button can be designed with the help of Custom Layout addon.Give some name in the advanced tab of HTML class of the button

Repeat the same class name in the Off Canvas Sidebar Custom Class option.

Note: Custom Class will trigger off-canvas sidebar only on the shop page. It will not trigger it on any other page. For example, if the button with custom class is added to the header. Then clicking on the button will trigger off-canvas sidebar only on the shop page and not on other pages.

After enabling the option, the off-canvas sidebar will not trigger until you add widgets in it.

For adding widgets got to Appearance > Widgets > Off-Canvas Filters. Simply drag-drop the widgets from the Available Widget option.

Once you add the widgets, you can manage the further customizations from the customizer

How to Refresh / Flush WordPress Permalinks?

Whenever a new Custom Post is added through a plugin or code; usually WordPress permalinks needs to be flushed.

Step 1: In the WordPress admin area, go to 「Settings > Permalinks」Step 2: Click 「Save Changes」Step 3: Permalinks and rewrite rules are flushed.

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.

Quick View for WooCommerce Products

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 manage the Quick view which shows product details in a lightbox using the WooCommerce module available with Astra Pro under Shop page settings. Please refer document, to begin with, WooCommerce module.

After activating the addon, the setting can be found under Appearance > Customize > WooCommerce > Product Catalog.

Below are the available settings –

On ImageOn Image ClickAfter Summary

On Image

A strip appears across the image on hover when you choose this option.Once you click on the Quick View option a lightbox opens with the product』s description.

On Image Click

Unlike 「On Image」, no Quick View strip appears on the image hover.When you click on the image for an instance lightbox opens with the product』s description.

After Summary

A summary is the details of the product like title, price, short description and so on.When you choose this option, Quick View button appears at the end of the above-mentioned summary.

Stick Add to Cart Button

Enabling this option will stick Add to Cart button and other variables at the bottom of quick view window. If you have long description and number of variables, this option can be used to stick and highlight Add to Cart button. 

Note: Whatever appears in the lightbox comes from the Single Product settings.So if you wish to show/hide the settings like title, description, add to cart button etc you need to predefine those setting. All these settings will be displayed on Single Product Page as well.

Path for the setting in customizer is Appearance > Customize > WooCommerce > Single Product.

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 Social Media Icons to Header?

Social Media is becoming an integral part of the website to promote brands. It plays an important role in growing social media followers.

Astra allows adding social icons in the header with the help of widgets. You can use any external plugin to customize the social icon widget and append it to Astra header.

To add the widget to the primary header follow the steps –

Step 1 – From the WordPress dashboard navigate to Appearance > Customize > Header > Primary Menu and select the Last Item in Menu > Widget. 

Step 2 – After selecting widget option as a custom menu item, set a widget from Appearance > Customize > Widgets > Header. All widgets will be available here in the list. You can add more widgets with any plugin.

The plugin that works best with the theme and provides easiest way to add widgets is – Astra Widgets. You can add –

Astra : AddressAstra : List IconsAstra : Social Profiles

In case you need other widgets than above, you can try using external plugins like –

Social Icons Widget by WPZOOM

Here is a video that shows how to add WordPress widget in Astra theme header –

<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

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.

Know More about Astra Beta Versions? How to Download and Use?

While working on a major update for the Astra, we make it a point to release a few beta versions before the final stable product. You can try the new features, test and share feedback, with the beta version.

We strongly recommend you to use the beta version of the theme and plugin in a test environment only. Do not use it on a live site. This will let you try new features without worrying what breaks.

The beta version may further come in multiple minor updates until we are perfectly sure of releasing the final version.

Things You Should Know Before Using the Beta Version –

Beta releases contain the early versions of a major update. They might be released a couple of weeks or a few days before the final version. Although we make sure every version offered to you is tested, there might be some minor bugs that need to be worked on.

During the beta phase, there is a freeze on a code. This means that only the present errors and bugs will be fixed. Apart from these, any feedback requesting for a new feature will be considered only in the next major update.

Where Can You Download the Beta Version?

When beta versions are available, you can download them from your Store Account. You will find zip files for the theme and plugin beta version.

How Can I Install a Beta Version?

You can install and get going with a Beta version in 3 easy steps.

Deactivate & uninstall current theme or plugin from your website. Don』t worry, nothing will be lost.Download beta version from your Store Account.Now install downloaded beta version like any other theme and plugin.

How Can I Update the Plugin?

Auto-updates are not sent for Beta releases. Therefore, in order to switch from a beta version to the updated version of a theme and plugin, you will have to download the updated file from your Store Account and install the plugin manually.

Share Your Feedback!

If you have something to share; whether it is a good experience working on the new features or errors and bugs you come across, please do share them with us in our support center?