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.
Astra Pro Addon plugin adds support for some WP-CLI commands.
Activate your license of Astra Pro Addon using WP-CLI:
wp brainstormforce license activate astra-addon your-license-key-here
This article will be updated as we add support for more WP CLI Commands. Keep coming back!
Global Color Palette is a feature that allows you to set one or more color palettes. This way you can control colors across your entire website from one place. Also, you can change the colors for your entire website by simply switching to another color palette.
The Global Color Palette feature is available with the Astra theme since version 3.7.0. You can find these settings under Appearance > Customize > Global > Colors.
Setting Palettes
There are three palettes available, each of them containing nine colors in total. These colors are connected throughout the palettes. This means, that when you switch between the palettes, colors will be replaced with their matching colors in the currently activated palettes.
For example, let』s say that the 「Color 1」 is set blue in Palette 1, and set to green in Palette 2. Switching from Palette 1 to Palette 2 will change all settings linked to 「Color 1」 from blue to green.
Let』s start by editing palettes, following these steps:
Step 1 – Click on one of the three available palettes to start editing. This will show you available color slots;
Step 2 – You can set each of these colors by clicking on the color slot. This will open a color picker.
Step 3 – Choose the color you want to apply to this slot;
Step 4 – In the same way, you can set all other colors;
Step 5 – Click the 「Publish」 button to save changes.
You can repeat these steps for each of the three color palettes.
Also, the Astra Theme is one of the first default themes to implement theme.json for Gutenberg Color Palette, so the palette colors can be edited this way too.
Notice Title
Though theme.json enables template editor, since the feature is still in development, we have disabled it until WordPress 5.9 is out.
Linking Global Colors
Each palette color can be used for any of the color settings on your website. You just need to link the global palette color to your settings and you』re done.
Let』s show you how to link the global colors. For this example, we』ll be linking the button colors:
Step 1 – Let』s say we have a button in the header. To link its background color with global color, just edit the setting and from the global color palette select the color you want. Clicking on any color from the palette will link it to the current color.
Step 2- Now if you navigate to navigate Appearance > Customize > Global > Colors and try to change the color that you linked in the above step, you will observe the linked color will change automatically.
Step 3 – Click the 「Publish」 button to save changes.
Though you set your Global Color Palettes, you can still use your static colors, as you did previously, for any color settings in your customizer.
Keep in mind that changing any color settings to some other static color will disconnect the palette colors for these settings. This means that the palette colors will not be automatically applied to these settings anymore.
To use palette colors for these options again, you need to link them again.
Switching Between Palettes
Now that you have all the color settings linked to Global colors, you can switch between your three palettes to completely change the way your website looks.
You only need to activate another Global Color Palette and all colors will be replaced on your entire website with the matching color set for this palette:
Let』s say that we set the 「Color 1」 in our 「Palette 1」 to orange color. In our 「Palette 2」 the 「Color 1」 is set to purple color. This means, that when our Palette 1 is active, all website elements linked to the 「Color 1」 are orange. Switching to 「Palette 2」 will automatically change all of these elements to purple color.
Let』s show you how we did this in our example:
Step 1 – Navigate to the Global Palette option (Appearance > Customize > Global > Colors);
Step 2 – Click on 「Palette 1」 to activate and set the 「Color 1」 to the orange color;
Step 3 – Click on 「Palette 2」 and set the 「Color 7」 to the purple color;
Step 4 – Navigate to Appearance > Customize > Global > Buttons
Step 5 – Here, click on the 「Border Color」 and link it to the 「Color 1」. This will make the button border white orange when Palette 1 is active, and purple when you switch to Palette 2.
Step 6 – Click the 「Publish」 button to save changes.
This way, you can easily switch all of your website colors with just one click. For example, this way you could use your standard website color palette most of the time, and switch to the remaining two palettes for special occasions. Thus, you could make adjustments to your whole website for the New Year holidays, St. Valentine』s day, Winter or Summer season, etc. in just one click.
Global Color Palette for Your Content
Global Color Palette is compatible with both Gutenberg and Elementor.
Your active palette colors will be available with your page builder color options out of the box – just set your palette colors and use them for your content too. Check it out:
Gutenberg Blocks:
Elementor Widgets:
Same as with Customizer options, these colors will adjust to your palette selection. Thus, when you change your color palette, your content colors will change accordingly.
You can create a Mega Menu with the Astra Theme and Astra Pro Addon. Furthermore, you can also use Templates for your mega menu instead or in combination with your textual menu items (links).
This document will show you how to add a template with WooCommerce product categories to your mega menu, using Elementor (free) and the Astra Pro Nav Menu module.
Note:
This solution is used for adding the Elementor template to the default header provided by the Astra theme. Please remember that this works only with Astra』s default header and Astra Pro Nav Menu module. If you are using the Elementor header instead, this solution will not be applicable.
Please follow these steps:
Step 1 – Make sure that you have the Elementor plugin and Astra Pro Addon installed and active. Also, make sure Nav Menu Module is activated in Astra Settings.
Step 2 – Navigate to Dashboard > Templates > Add New.
Step 3 – In the dropdown menu, choose 「Section」, name your template (this can be any name; we used 「Mega Menu Item 1」), and click 「Create Template」. This will create your new template and open an Elementor editor.
Step 4 – In Elementor editor, add a 「Section」 and the 「Shortcode」 widget. Add the following WooCommerce code to the shortcode widget:
[product_categories number=」4″ columns=」4″ hide_empty=」0″ orderby=」name」 order=」desc」]
This is the WooCommerce shortcode. You can find out more about it and possible variations in this article.
Using the Elementor Pro, you can use the Elementor 「Product Categories」 widget instead of the Shortcode widget.
Click 「Publish」 to save your template.
Step 5 – Now, it』s time to create a mega menu. To do this, navigate to Appearance > Menus. Expand the menu item under which you want to add a mega menu by clicking on it (we named this item 「Background Image」).
Step 6 – Click on the 「Astra Menu Settings」 button, and tick the checkbox for the Enable mega menu option. This will create a mega menu under this item. You can also style your mega menu in this step (width, padding, etc.)
Step 7 – Next, add a new menu item (we named it 「Shop by Categories」) under the mega menu and click on the 「Astra Menu Settings」 button.
Step 8 – In the Content Source dropdown menu, select the 「Template」 option. In the Template field, type in the name of your template and select it from the list. Click 「Save」 to add this template to your menu item.
And here』s how it』ll look on the front end.
Note:
We have provided Astra』s default CSS to fall back to Menu colors for all text in the template that doesn』t have color stylings assigned from the template. So we recommend applying styles from the template as per your design needs.
The astra_scroll_top_icon filter allows you to update the Scroll To Top icon class.
Usage
// Filter callback function
function example_callback( ) {
// Process you code here
return variable;
}
add_filter( 'astra_scroll_top_icon', 'example_callback', 10 );
Example
/**
* Add custom class to Scroll To Top
*
* @return string $classes
*/
function astra_scroll_top_icon_callback() {
$classes = 'fa fa-angle-double-up'; // 'fa fa-angle-double-up' replace with your class
return $classes;
}
add_filter( 'astra_scroll_top_icon', 'astra_scroll_top_icon_callback', 10 );
Note: To use 『fa fa-angle-double-up』 class you need to enqueue Font Awesome to your theme.
Check out the doc that explains how to add custom PHP code using the child theme』s functions.php file.
Refer – How to Add Font Awesome Icons in Astra?
The Astra Button Presets are premade sets combining different Customizer settings, which you can use to style your buttons. Furthermore, you can apply these presets to any of your website』s buttons with just one click. This feature is available with the Astra Theme version 3.7.0 and later.
You can find the Button Styles section at Appearance > Customize > Buttons.
What Are Button Presets?
Each preset contains different button settings like padding and border radius, text, background, and border color. These presets provide different button styles for you to choose from.
Once a preset is applied, it will automatically apply all settings for that button. Thus, you don』t need to do the settings over and over nor add CSS manually to design multiple buttons. Just choose a style you wish to apply, and that』s it.
How To Use Button Styles?
Follow these steps to apply your button styles:
Step 1 – Navigate to Appearance > Customize > Buttons
Step 2 – Click on the desired Button Style. You can try them all. Applying the new presets will change all button settings to adjust it to the selected style.
Step 3 – If needed, you can modify these buttons after the style is applied.
Step 4 – Click the 「Publish」 button to save the changes.
If you need to revert the button style, you can use the 「Reset」 button:
The Astra Typography presets are premade sets of font properties that you can apply to your website with one click. This feature is available with the Astra Theme version 3.7.0 and later.
You can find the typography presets for your website by navigating to Appearance > Customize > Global > Typography.
What Are Typography Presets?
Presets are created by our team of professional designers. Thus, this feature provides you with a great combination of font families packed together with other font properties. Combined, these make your website look just perfect. Further, when you apply any preset it will modify all text on your website to match its style.
Each typography preset includes the following font properties:
Font FamilyWeightSizeLine HeightText Transform
Trying out different combinations of these settings over and over, searching for the right combination of settings can be tiring. On the other hand, you can let the typography presets do all the work for you.
Moreover, all these settings will be applied to both your customizer typography options and your content, saving you time immensely.
How To Use Typography Presets?
Follow these steps to apply typography presets:
Step 1 – Navigate to Appearance > Customize > Global > Typography;
Step 2 – Click on the desired Preset to check it out. Immediately, click on the new preset will apply all typography settings to your Customizer options and your content.
Step 3 – After that, you can modify any of these settings even with the preset is applied.
Step 4 – Click the 「Publish」 button to save the changes.
If you need to revert the typography settings to your default settings (before using presets), you can use the 「Reset」 button:
Description
Hooks allow you to add extra functionality at various areas inside the theme. For example, you might want to display some promotional message below all of your blog posts. Hooks make such dynamic things possible.
Astra uses WordPress Hooks API to insert various hooks throughout the theme.
Usage
add_action( 'hook_name','callback_function_name' );
function callback_function_name () { ?>
// Insert your hook contents in here.
<?php }
In the example above, replace hook_name with the name of the hook you』re wanting to use, like astra_header_before or astra_header_after. Then replace callback_function_name with a unique meaningful function name, something specific to you.
To see the list of hooks available in Astra Visually, check out this site we』ve set.
Example
The astra_header_before hook is executed right before the Site Header.
Note: Site Header –
Add PHP to your header
// Add scripts to astra_header_before()
add_action( 'astra_header_before', 'add_script_before_header' );
function add_script_before_header() {
// Your PHP goes here
}
or…
Add HTML to your header
// Add content to astra_header_before()
add_action( 'astra_header_before', 'add_content_before_header' );
function add_content_before_header() { ?>
<?php }
If you are adding PHP to astra_header_before(), use the first method. Use the second method for anything else you may be adding.
Check out the doc that explains how to add custom PHP code using the child theme』s functions.php file.
Since the Astra Theme version 3.6.4, you can underline the links in your content using the 「Underline Content Links」 option. This is a useful option especially from the point of your website』s accessibility for visually impaired users. Yet, you might not need to have all of your links underlined.
This document will help you remove underlined links on specific classes and buttons.
Why Is This Important?
The Underline Content Links option allows you to accent all links on your website with just one click. You can find this option in the Customizer, under Global > Typography > Base Typography. Activating this option automatically adds underline text-decoration to your links.
At the same time, some page builder buttons or anchors don』t have an option for overriding the text-decoration. This can interfere with your design and influence the user experience on parts of your website.
Thus, this document provides two codes that will help you remove the underline text-decoration on certain classes and buttons while keeping the 「Underline Content Links」 option active for the rest of your website.
How To Change This?
The two available codes will let you remove the underline setting for anchor links or remove it from just some specific elements.
To do this, you need to add one of the following custom codes to the functions.php file of your Child Theme.If you don』t have your Child Theme installed, please check this article on how to do it.
If you are not sure how to add this code, please check this article.
1. Code To Remove the Underline Settings for Following Custom Anchor Links:
add_filter( 'astra_unset_builder_elements_underline', '__return_true' );
2. Exclude Specific Anchor Links From Underline Settings:
add_filter( 'astra_remove_underline_anchor_links', 'update_selectors_to_remove_underline', 10, 1 );
function update_selectors_to_remove_underline( $selectors ) {
$selectors = $selectors . ', a.my-first-anchor-tag, a.my-second-anchor-tag';
//.my-first-anchor-tag is an example class assigned to anchor link - add your selectors in this manner.
return $selectors;
}
You need to update the above code by replacing the example selectors with the ones from which you want to remove the text-decoration.
To create your selectors add 「a.」 in front of the class name you wish to exclude from the underline setting. For example, if your element』s class is 「test」, the selector for these elements would be 「a.test」
If you weren』t already aware, Astra adds what is called 「Schema」 markup to your posts, pages, and the rest of your website.
Adding Schema is an SEO friendly practice that helps search engines better understand your content, including the search intent.
How does Schema help? Schema tells the search engine more about what is on your page and what the page itself is about. Because search engines can better understand the search intent, this helps boost your rankings in search.
Removing Schema Generated by Astra
There are various reasons you may want to remove the Astra generated schema markup. Perhaps you already have a Schema setup on your website that you are happy with, or maybe Schema isn』t something you want to use. Whatever reason, it』s quick and easy to remove.
Table Of Contents
Disable all Astra Generated Schema Disable Schema on a Type by Type BasisWrapping Up
Disable all Astra Generated Schema
If you don』t want any of the Schema types on your site, add the following code to your child themes functions.php. Not sure what a child theme is? Have a look at our handy child theme guide; and build your own child theme in under 5 minutes using our child theme generator.
add_filter( 'astra_schema_enabled', '__return_false' );
Disable Schema on a Type by Type Basis
If you only want to disable certain schema types, you can do so with the useful code snippets below.
Note:
Copy the required code from the following list and add it to the child theme』s functions.php file.
Organization Schema
add_filter( 'astra_organization_schema_enabled', '__return_false' );
Person Schema
add_filter( 'astra_person_schema_enabled', '__return_false' );
SiteNavigationElement Schema
add_filter( 'astra_site_navigation_schema_enabled', '__return_false' );
WPHeader Schema
add_filter( 'astra_wpheader_schema_enabled', '__return_false' );
WPFooter Schema
add_filter( 'astra_wpfooter_schema_enabled', '__return_false' );
WPSideBar Schema
add_filter( 'astra_wpsidebar_schema_enabled', '__return_false' );
BreadcrumbList Schema
add_filter( 'astra_breadcrumb_schema_enabled', '__return_false' );
CreativeWork Schema
add_filter( 'astra_creativework_schema_enabled', '__return_false' );
Wrapping Up
Schema type not listed here? Don』t worry! It can still be disabled; however, you』ll need to disable all Astra schema globally with the code snippet further up the article.
Having a great featured image is a must, not only for your home page but also for every page and post. Furthermore, if you』re running an online shop, all your products must have great-looking product (featured) images to sell well. Therefore, using proper featured image size is greatly beneficial.
This document will help you avoid blurry and cut-off images. Learn how to get your images perfectly sized every time. Also, for more details, please check our Blog article on featured images.
Why Is Featured Image Important?
Featured Image is most often the first point of contact between your content and users. Whether we』re talking about social media, browsing through your website, or any other search, the task of the featured image is to attract the user』s attention.
This image most often shows on the top of your posts, your website』s Blog Page, and related posts. Also, a featured image is often displayed when your content is shared on social media or as a message.
The featured image gives a glimpse of the content in your post or page. Furthermore, it creates user expectations regarding the quality of your content as well as the offer.
Also, with a bit of effort when designing your featured images, this becomes a chance to raise your brand awareness and stand out from the crowd.
Having said that, it』s clear why is it is crucial to make your featured image perfect every time.
Social Sharing
When your website content is shared on social media, your featured image will take a central role in attracting traffic, as it is shown together with the title whenever shared.
Here, your images will be scaled proportionally. Thus, failing to set them properly may result in cropping, thus making parts of your image not visible.
SEO plugins like Yoast SEO or RankMath will provide you with options like adding a custom title and description for your posts, pages, and other content. Also, you could choose a different featured image, title, and description for sharing on Facebook or Twitter.
Set Featured Image
We explained the importance of featured images and how these are used. Now, let』s talk about featured image size and how to set things up.
To add a featured image to a page or a post, you will need to edit it. Once you start editing, choose a featured image in the page/post settings. As an example, we will explain how to add a featured image to a new post:
Step 1 – Navigate to Dashboard > Post > Add New;
Step 2 – On the right side of the screen, check the post settings, and scroll down to the 「Featured Image」 section;
Step 3 – Click on the 「Set Featured Image」 field, and select or upload your featured image;
Step 4 – Publish/Update doc to save featured image.
Featured Image Size
Featured image size may vary depending on the theme being used. With Astra Theme, we recommend uploading the image size of 1200 pixels (width) by 628 pixels (height):
Once you upload the image, WordPress will automatically create several versions of your original image, used for different screen sizes.
Setting your original image to 1200 x 628 pixels will also help avoid some cropping issues on your website and social media both.
Uploading Right-Sized Image vs. Resizing
It is vital to have all of your images optimized as the size of the images impacts your loading times and overall website performance. Some great tools will do this for you. You can check our blog article to compare different image optimization plugins and choose the best tool for you.
On the other hand, though these tools are a great help, only up to a certain point. To achieve the best results, the image files should be already formatted the right way before uploading them to your website.
