It allows you to easily add images to your menu items and customize their appearance. In this article, we will show you how to use the Menu Image plugin to add images to your WordPress menu items using the Astra theme. By following these step-by-step instructions, you’ll be able to create a more engaging and attractive website for your visitors. Let’s get started!

Step 1: Download the Menu Image plugin and Install it on your Website

You can easily download the Menu Image plugin from here. Once you have downloaded the plugin, navigate to your WordPress dashboard, click on the Plugins, and Add New. Click on Upload New Plugin and upload the ZIP file and click on Install. Once the plugin is installed, click on Activate to activate the plugin.

Step 2: Settings

Navigate to the plugin settings by clicking the Menu Image option.

Image Sizes

Upon accessing the plugin’s settings, you will be presented with a range of sizing options for the image icons. In case you opt for icons from Font Awesome or Dashicons, Menu Image will take care of resizing them automatically.

However, if you choose to utilize images from your media library, you will need to manually select the desired size. The plugin caters to the standard image sizes provided by WordPress, including thumbnail, image, and large. Additionally, it includes three distinctive sizes set by default to 24×24, 36×36, and 48×48 pixels.

Menu Image Hover

It’s important to note that this particular setting is solely applicable when using custom images. In case you intend to utilize dash icons or Font Awesome icons, there is no need to concern yourself with the ‘image on hover’ functionality.

Incorporating a distinct icon can assist users in identifying their current position in the navigation menu. This is especially beneficial when the menu comprises a multitude of items. To illustrate, you can employ diverse colors or icon sizes to emphasize the presently-selected menu item.

If you wish to experiment with various hover effects, don’t forget to enable the ‘Enable the image on hover field’ option.

Save Changes

Once you are done choosing the size and menu image hover option, please don’t forget to save the changes at the bottom of the page.

Step 3: Adding the images to the Navigation Menu

• Navigate to Appearance > Menus from the WordPress dashboard.
• Create a new menu or select an existing one.

• Select the menu from the drop-down that you would like to add images to
• Click on Select to select the menu
• Click on the Menu Image button to choose the image

• Choose the position of the image
• Choose whether you would like to add an image or an icon

• Click on the set image button to choose the image from your media file
• You can also choose an image for the menu when it is being hovered over
• If you would like to just show the images instead of the Title, choose Hide in the Title Position

In the next step choose the image size and click on Save Changes to make this permanent.

Here is how it is going to look at the front end of your website:

Tips and Tricks

Here are some additional tips to keep in mind when using the Menu Image plugin:

• Make sure the images you use are of the appropriate size and aspect ratio for your menu. Images that are too large or too small can look distorted or pixelated.
• Consider using images that are relevant to the menu item they represent. This can help users quickly identify the content they’re looking for.
• If you’re using the Astra theme, you can further customize the appearance of your menu items using the theme’s built-in options or with custom CSS.

Summing It Up

In conclusion, adding images to your WordPress menu items using the Menu Image plugin can significantly enhance the user experience and make your website more visually engaging. By following the steps outlined in this article, you can easily add custom images to your menu items and adjust their appearance using the Astra theme’s built-in options or with custom CSS.

Remember to choose images that are appropriate in size and aspect ratio for your menu, and consider using relevant images that can help users quickly identify the content they’re looking for. With these tips and tricks in mind, you can create an impressive and user-friendly menu that will keep your visitors coming back for more.

• Clickable elements too close together
• Text too small to read
• Content wider than screen

What’s causing the issue?

The origin of the issue is two-fold:

1. Sometimes Googlebot is in a hurry and will not fetch all page resources when it loads your page for indexing.
2. One or several HTML elements on the page are wider than the mobile viewport but only so when your CSS fails to load.

Things go out of the box when Googlebot skips your CSS file on a page where some content forces the viewport to scale or scroll if it doesn’t receive a CSS style.

How to fix the issue?

Using a small set of CSS styles will fix this issue. You can add the custom code using either customizer settings or directly accessing the Astra child theme’s style.css file.

    :where(body, iframe, pre, img, svg, video, canvas, select) {
        max-width: 100%;
        overflow: auto;
        word-break: break-word;
    }

Using style.css:

You have to add the code to the Astra child theme’s style.css file, Preferably right before the element that references our stylesheet.

Have a glance at the below-attached screenshot for a better understanding.

Using Customizer Settings:

From the WordPress dashboard, navigate to Appearance > Customize > Additional CSS and place the code.

This snippet ensures that when Googlebot ignores your page resources, it at least applies these styles to the elements in the : where() selector list.

• max-width: 100% prevents the elements from being wider than the viewport.
• overflow: auto makes sure that content inside an element won’t push an element over its width limit.
• word-break: break-word ensures long words are wrapped to the next line when they extend beyond the viewport width.

To add custom CSS on specific WordPress pages, you will need to add your CSS code to the styles.css file accessible via your WordPress backend, generally by following this path:

Appearance > Theme Editor > Styles.css

How to apply CSS on Specific Page or Post

There are various ways with which you can add apply CSS on a specific page or a post. But, the most common one is

1. Using the HTML id or class

1. Using the HTML id or class

This is one of the most common approaches if you want to apply CSS on a specific page or post. All we need to do is grab a unique identifier that a page or post will have. Then, this HTML class or id allows us to target all our CSS scripts to the desired page or post.

1.1. Find the HTML class or id of the page

First, you must find the id or class used for the CSS script. This can be easily found with the help of the browser inspection tool.

Just open the page where you apply CSS and right-click on the element you want to edit. Then click on Inspect.

From the above screenshot, the home page’s unique identifier is the “home” class. Therefore, if you want to apply some CSS rules only to the home page, you must use this class in your selectors.

For example, let’s say we want to apply some style to the logo only on the home page. Then, besides the home class, we also need the logo image selector. Again, this can be obtained from the browser inspection tool.

In this case, we’ll use the “custom logo” class to apply our style to the logo. Let’s put them together with the class grabbed on the previous step. Finally, we can apply our script only on the home page using the following CSS selector:

.home .custom-logo{ /*your CSS here */}

1.2. Find the HTML class or id of the post

Similar to the pages, each post should have a unique HTML class. Again, just inspect the element on the post you want to apply CSS with the help of the browser developer tool. Then, you will see the unique identifier with the postid attribute.

For the following post with the Astra theme, the class that identifies this post is postid-130187.

Finally, create your own CSS selector that meets your requirement, just like the custom logo example. Then, you can apply the CSS on the specific page or post by adding it in Appearance > Customize > Additional CSS.

.postid-130187 .custom-logo{ /*your CSS here */}

Astra Pro Addon version 3.5.7 corrects this, but the fix is not applied automatically to existing websites. Learn how to solve this. 

Why Do I Need This Improvement?

Before the Astra theme’s version 3.0 and Header Footer Builder that came with it, the “Header Section” module as part of the Astra Pro was providing some advanced options for the old Astra Header (like Swapping section positions on mobile, some typo options, or color options, etc.). 

The reason for this is that the Header Footer Builder was still dependant on the “Header Section” module for the users who switched from the old header versions. Thus, when this module was not activated in Astra Options the mentioned issues were appearing.

Though Astra Pro 3.5.7 update removed this dependency completely, this change won’t be applied automatically to your website to avoid unwanted effects on your existing websites.

How To Fix This?

For all new websites, this fix will be applied automatically when you update the plugin (Astra Pro). 

For the existing website, this improvement needs to be activated by adding a filter after updating the plugin. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To apply the improvement to your existing website, you would need to add a filter 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. Please add the following filter:

add_filter( 'astra_remove_header_sections_dependency', '__return_true' );

If you are not sure how to add this code, please check this article.

By default, WordPress does not support the SVG images. If you would like to know how to upload an SVG image onto your website, please refer to this document. While creating a logo, you will need to understand the basic concept of the copyright laws and restrictions on using reusable content. In this document, we will explain just the same.

Threshold of Originality

This is a principle in copyright law that is applied to determine whether a certain work, or a portion of it, can be protected by copyright. It is employed to separate the latter from the former when determining whether a work is sufficiently unique to be protected by a copyright. While creating a SVG logo, you need to ensure that the logo is unique and contains no copyright protected items. If the logo is not a unique one and does not meet the minimum threshold of originality, it should not be uploaded to your website.

Non-Copyright restrictions

While some of the common items may not be protected by the copyright laws, other non-copyright restrictions may apply to them. While all content on Commons must either be in the public domain or be permissible to use under the applicable license(s), some content may be subject to extra legal restrictions depending on the situation or the manner it is used. 

These restrictions may be brought about by laws governing trademarks, patents, personality rights, moral rights of writers, political censorship, or any other number of legal issues that are unrelated to the work’s copyright conditions. 

Commons views non-copyright restrictions as matters for photographers/uploaders or reusers and does not consider them to be grounds for the removal of works from Commons, with the exception of some restrictions relating to photographs of identifiable people and some restrictions that make it illegal for Commons to host certain works.

Re-using an open content

It is possible to reuse content covered by open content license without having to get in touch with the licensor(s), but bear in mind that some licenses demand that the original creator’s credit be given; others demand that the specific license be acknowledged when utilizing (which, in some circumstances, includes declaring or linking to the license’s conditions). Finally, some licenses demand that any modifications you make to the work be equally freely licensed.

Trademark

A trademark is a type of intellectual property that consists of a recognisable sign, design, or expression used to distinguish a source’s products or services from those provided by other individuals or companies.

A trademark may be owned by a person, a business, or another sort of legal entity. A trademark may appear on the actual product, a label, a coupon, or a box. Service marks are a term that is occasionally used to describe trademarks that distinguish services.

Patent

In return for publishing an enabling disclosure of the invention, the owner of a patent is granted the legal right to prevent others from creating, using, or selling the invention for a set amount of time.

In the majority of nations, patent rights are governed by private law, and in order to enforce them, the patent holder must file a lawsuit against a third party who violates the patent. Patents are an important source of competitive advantage in some industries, but they are irrelevant in others.

Personality rights

Personality rights, sometimes known as the right of publicity, allow an individual to limit how their name, image, likeness, or other unmistakable identifiers are used for commercial usage. According to the jurisdiction, the validity of personality rights of publicity may continue to some extent after the death of the individual since they are typically regarded as property rights rather than personal rights.

Moral Rights

Generally recognised in civil law states and, to a lesser extent, in some common law jurisdictions, moral rights are those of authors of copyrighted works.

Privacy Rights

The right to privacy is a component of many legal systems that aims to regulate public and private actions that jeopardize people’s privacy.

Format

The most common pixel format of a SVG logo is 783*359 Pixels; however, there are other pixel sizes that can also be used. Such pixels are 320 × 147 pixels | 640 × 293 pixels | 1,024 × 469 pixels | 1,280 × 587 pixels | 2,560 × 1,174 pixels.

Add fields on demand: Our field builder allows you to quickly and easily add fields to WP edit screens with only the click of a few buttons!

Add them anywhere: Fields can be added all over WP including posts, users, taxonomy terms, media, comments, and even custom options pages!

Show them everywhere: Load and display your custom field values in any theme template file with our hassle-free developer-friendly functions!

Features

• Simple & Intuitive
• Powerful Functions
• Over 30 Field Types
• Extensive Documentation
• Millions of Users

Installation

The Advanced Custom Fields plugin does not come pre-installed with WordPress so you will need to install plugin before using its awesome features! WordPress makes this a very easy process!

If you are familiar with WordPress, From your WordPress dashboard

1. Visit Plugins > Add New
2. Search for “Advanced Custom Fields”
3. Install and Activate Advanced Custom Fields from your Plugins page
4. Click on the new menu item “Custom Fields” and create your first Custom Field Group!

How to Use

To make the process easier to understand, I have come up with a concrete use case for the demonstration. For this tutorial, I will create a group of custom fields for a post type called Mobile.

In particular, I want to add the following data:

• Mobile Name
• Mobile launch date
• Mobile Price

Let’s get started.

Step 1: Create A New Field Group

A Field Group is a group of custom fields that topically belong together. For example, all the information I want to add to my mobile launch logically correlates and can therefore all go in one group. Creating field groups is the main function of Advanced Custom Fields.

To create one, click Custom Fields in the WordPress admin area. The menu you are being taken to shows all the field groups you have created.

For now, it will be completely empty. To change that, find the Add New button at the top and click it. This will bring you to the following screen:

Step 2: Add And Configure Fields

To start adding fields to your group, just click the blue ‘Add Field’ button at the top. It will open this form:

Here’s what each of the fields in the form means and is used for:

• Field Label — The name that appears inside the advanced custom fields menu
• Field Name — Name used inside templates and code. Should automatically be populated with the label. No spaces are allowed between words, only hyphens, and underscores.
• Field Instructions — Leave instructions for using the field later
• Required — Determine whether or not this field is mandatory to fill in. If yes, authors won’t be able to save posts or pages associated with the custom field unless contains something.
• Default Value — This value will automatically populate the field when creating a post
• Placeholder Text — Appears within input fields on the editor screen
• Prepend & Append — Defines what appears before and after the input text
• Formatting — Check whether or not HTML input into a text field will be rendered on screen
• Character Limit — Optionally put a limit on how many characters can be typed in
• Conditional Logic — Rules for when fields are visible

Example: My own setup ends up looking like this:

• Field Label: Launch Date
• Field Name: launch_date
• Field Type: Number
• Required: Yes

• Field Label: Mobile
• Field Name: mobile
• Field Type: Text
• Required: Yes

• Field Label: Mobile Price
• Field Name: mobile_price
• Field Type: Number
• Required: Yes

Once you are done, you can close the fields to see the entire group. This also allows you to change the order of the items via drag and drop.

Step 3: Configure Custom Field Location And Options

Before we are done here, we need to configure where and how the newly created custom fields will show up and we do so with the Location and Options panel.

Under Location, you can add rules that determine under which circumstances the fields will be displayed. They can be included and excluded depending on:

• post type
• user type
• exact post
• post category
• post format
• post status
• post taxonomy
• exact page
• page type
• page parent
• page template
• attachment
• taxonomy term
• user

In my case, I want to limit my field group to my Mobile post type, so will choose Post type > is equal to > product.

After that, it’s on to Options. Here’s what each setting means:

• Order No — The order this field group will take if there are several on the same screen
• Position
  • Normal — After content
  • High — After title
  • Side — On the side of the editor
• Style
  • Seamless — Without a WordPress meta box
  • Standard — Placed inside a meta box
• Hide on-screen — Checkboxes that allow you to hide other panels you are not going to need like tags, categories, comments, and more

Pick whatever is right for your case. I leave the rest as is for now. When done, hit Publish. After that, you can head on over to your custom post type to see if the new meta fields show up. In my case, they are added.

How to display the data

You may now load and show the data in your theme after creating a field group and entering some data. Although you can use the native WP function get_post_meta( ), it is best to practice utilizing the appropriate ACF function, such as the get_field ( ). All values are saved as native post meta (when saved to a post). This is because ACF will format the value according to the field type and speed up and simplify development!

The get_field ( ) function can be used to get a field value as a variable. Being the most flexible function, it always provides value for every kind of field. Use the field( ) in a similar way to display a field. Below are the few examples:

Display a field:-

<p><?php the_field('field_name'); ?></p>

Retrieving a field as a variable:-

<?php

$variable = get_field('field_name');

// do something with $variable

?>

For more examples, please visit the ACF documentation page here.

Bonus Step: Translating the Custom Fields

This document will guide you through on how to create a wishlist option for your customers while using the Astra theme. Adding a wishlist button not only boosts up sales but it also lets you know about the products that are wanted by the customers and might be overpriced. In this doc, we will explain how to add a wishlist button to your website using a plugin called wishlist.

Step 1: Installation and Activation

Navigate to your WordPress dashboard and click on plugins. Click on add new and search for Wishlist. You will find the plugin named “Tl WooCommerce Wishlist”. Click on Install button next to the plugin to install it and click on activate once the plugin is installed.

Step 2: Introduction page

Once you activate the plugin, you will automatically be redirected to the introduction page. Click on the “Let’s Go” button to continue the setup.

Step 3: Page SetUp

In this step, the plugin will ask you to select a page where you want to display the wishlist. If you do not have a page created already, you can select it as “Create automatically”. It will also ask you to select a name for the Wishlist. You can choose the name of the wishlist as per your requirement. Once you are done with the settings, click on continue to got the next page.

Step 4: Button

In this step, you will need to set up the wishlist button. The following are the set of settings that you can choose from.

Button Position: This particular setting lets you choose where the “Add To Wishlist” button appears. By default, you can select whether you would like the button to appear after or before the “Add to Cart” button. You can also use custom codes to change the position of the Wishlist button.

Add to WishList text: This option lets you change the default text of the Add to Wishlist to any custom text as per your requirement.

Product Listing : You can also show the “Add to Wishlist” button in Product listing and change the text of the “Add to Wishlist” button in the product listing as well.

Step 5: Processing

Once the customer has purchased the product which was added in the Wishlist, it should be automatically removed from the Wishlist. The processing step lets you choose the option of how you would like it to be removed from the customer’s wishlist.You can either choose automatically and the plugin will remove it for the users or you can select manual and the product will be added to the wishlist until the user removes it manually.

Step 6: Share

This option lets your customers share the wishlist on various social media platforms such as Facebook, Twitter , whatsapp etc. You can simply turn the buttons off, if in case you would like to remove any of these options.

That’s it, the basic settings are done. Here is how this is going to be displayed on your product listing page and also on the individual product pages.

When users install an SSL certificate on their site, the entire content should automatically move to HTTPS instead of HTTP; however, sometimes the site still runs on HTTP/HTTPS instead of only HTTPS. This might result in loading the asset properly on the site. This is one of the most common SSL certificate errors while working with WordPress sites. In this document, you will find the most common ways to fix this issue.

Contact the Hosting Providers

The very first option is to contact your hosting providers and inquire about the SSL if it was properly installed. In most of the cases, the hosting provider fails to install the SSL certificate properly which results in this issue. If the hosting provider confirms that the SSL certificate is properly installed, you can follow the steps below to perform a quick fix.

Take a backup

Before you make any changes to your website, it is recommended to take a backup of the site; so that if things go south, you can always restore the settings from the backup. Here is an article that will guide you through on taking a backup of your website.

Next Step

Once you have successfully taken a backup of your website, please follow these steps.

• Step 1 : Login at your WordPress Dashboard
• Step 2: Download and install the plugin called Better Search & Replace

Step 3: Run Better Search by navigating to Tools>Better Search and Replace

Step 4: Replace on the old site URL for the new site URL

• Step 5: Delete the site_url constant you may have added to wp-config.php
• Step 6: You may also need to regenerate your .htaccess by going to Settings > Permalinks and saving the settings

Note: It is also recommended that you run the plugin at first as a Dry Run, to then Live.

Enhanced block editor user experience

A study says that the usage of CSS on your website is directly proportional to the speed of your website. The more CSS you use, the slower your website will load. With the speed of the website being one of the major ranking factors, it is very important to minimize the usage of CSS. That’s what we have done with the block editor. We have used the built-in CSS of WordPress and reduced the usage of CSS in the theme.

Let’s take a closer look at all the major changes:

Latest Posts block

In the new version, we designed the latest posts block in such a way that it automatically highlights the headings, changes the color of the link and meta tags, changes the font size based on the theme, and many other features. 

Pullquote & Quote block

The pull-quote block can quickly and easily make short snippets look beautiful and also adds value when you try to attract the users to a particular portion of the website. We improved the User Experience with the new version of the Astra theme by updating the border and quote positions. Previously, when you moved the quote to the middle-centered or right-centered position, it still showed as left-aligned. This has now been changed and looks much better. We also fixed a few minor bugs in this section.

Default layout for Group block

When users adds a group block, by defualt it will inherit the layout from the default layout setting. The user can turn this off by using the slider next to the setting.

Full Width Layout update

For the Group and the Cover blocks “Full Width” layout will be set on drag-drop. By default, the content will be sticked within the Astra container width area.

Improvements on the theme.json

A website’s design influences how your target audience perceives your brand. The impression you make on them can either persuade them to stay on your page and learn more about your company, or it can persuade them to go to a competitor’s page. This is why we’ve added more weapons to the block editor, allowing you to design the block more creatively.

Link Color Change

We’ve added a new Link color option in the colors group to the latest version of the Astra theme, allowing you to change the color of the links that appear inside the block.

Margin Improvements

We’ve added a margin option to the dimension control to give you more control over the dimension.

Padding Improvement

The improved padding option will allow you to select the space in which your block will appear. Inner block spacing allows you to control the distance between inner blocks and the container block, elevating the overall user experience.

Border Control Improvement

We’ve also added border control options, which allow you to choose and change the width, style, color, and radius of the block.

Improved design settings of Meta tags

We’ve made significant changes to the meta tags and how they appear on your site. Meta settings have been redesigned, optimized, and made more elegant. Here are a few standouts.

Disable Header

Added a new meta option called “Disable Header” – Previously, we had three options for disabling header parts (disable above, disable primary, and disable below), but no global option to completely disable the header.)

The “Disable Page Title” meta toggle option has been renamed “Enable/Disable Eye Icon” and is now located alongside the title. You can hide or show the page title just by clicking on the eye icon next to the page title.

Other changes in the Meta Settings

Apart from these, now you have better control over the sidebar and the content layout with the visual layout designs to choose from right inside the block editor. Page Elements where the number of toggles has been reduced or will appear conditionally which in turn will load the page faster.

Advanced header setting

The advanced header setting will let you have better control over the header section. When you choose this option, a pop up will appear on the screen with more settings that will let you modify the following options

Performance improvement

With all the changes made, the overall performance has increased significantly. The new Astra theme editor now loads 1.21 seconds faster than the previous version and 0.26 seconds faster on the frontend. Below is the performance comparison of the older version and the new version.

New Block Editor Under Customizer

We have added a powerful option to the customizer to change the padding of the entire website. You can access this option by navigating to Appearance > Customize > Global > Block Editor. You can now set custom paddings to all the blocks on your website with this global option. This setting will be overwritten if any of the blocks have any custom dimension set.

Users now have two new padding preset options like “Compact” and “Comfort“. The compact option is preset with the padding of 2em and the comfort option is preset with 3em. These options will be application to Groups, Columns or a Cover block.

How to use the Block Editor to set the padding manually?

Improvement on the Featured Images of the Posts page

With the latest version of the Astra theme, you can now disable the featured image from the single post page; however, still, show it on the post list page. To access this option, simply click on the Settings button on the top right corner of any single post page and check the box just below the featured image option. Once checked, this option will enable the featured image on the post list page; however, it will be disabled on the single post page.

Change the default content width for the theme

With the latest version of the Astra theme, you can now change the default content width (910PX) to anything based on your requirement. Simply add the following filter to the child theme. To update the wide width for your layouts, please update Container Width from Customizer > Global > Container.

function astra_update_block_content_size( $content_size ) {
	return '840px'; // Default 910px overridden by 840px.
}
add_filter( 'astra_block_content_width', 'astra_update_block_content_size' );

Few more filters

In v3.8.3 we have released a more enhanced block editor experience with some new things, improvements, etc. Here is the short list for that –

• New: Padding presets like Compact, and Comfort for core block sections
• Block layouts will sync with Astra container layouts, so as per the container layout-block layouts will work.
• Improved default spacing of Astra containers to look fresh theme setup UI elegant.

To avail these features please use the below filters in your child theme –

add_filter( 'astra_get_option_customizer-default-layout-update', '__return_true' );
add_filter( 'astra_get_option_wp-blocks-v2-ui', '__return_true' );

With Composer, you can add all of your standard themes and plugins to a new WordPress site from one place. Also, you can keep your websites updated the same way.

Using Astra Pro With Composer

You can use Composer to upgrade or downgrade Astra Pro. Before using Composer, you’ll need to have the Astra Pro plugin installed and your license activated. Thus, you’ll need to do this manually on any new website.

Follow these steps to prepare your new website before using Composer:

Step 1 – Install and activate the Astra Pro plugin. If you’re not sure how to do this, you can check out this document;

Step 2 – Next, copy your Astra Pro license from the Store, and activate the license on your website. Further, you can find more details about activating the license in this document.

Activating the plugin license on your new website will register the website URL with our Store. Now you can configure your Composer.json file and manage Astra Pro with Composer further on.

Configure The Composer.json File

The composer.json file is necessary for Composer to work on your website. To manage the Astra Pro with Composer, you’ll need to configure the composer.json file and add Astra Pro-related code. 

Here, we assume that you already have the file in your website’s root directory. Also, we are assuming that you have set your project. Check this article if you need help installing Composer, adding composer.json file, or setting up the project.

Let’s get started.

Code Example

You can check the example of the entire code:

{
    "name": "example/example",
    "type": "project",
    "description": "Project description",
    "require": {
        "brainstormforce/astra-addon": "^3.0"
    },
    "extra": {
        "installer-paths": {
            "wp-content/plugins/{$name}/": ["type:wordpress-plugin"]
        }
    },
    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "brainstormforce/astra-addon",
                "version": "3.6.3",
                "type": "wordpress-plugin",
                "dist": {
                    "type": "zip",
                    "url": "https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key={PURCHASE_KEY}&site_url={SITE_URL}"
                },
                "require": {
                    "composer/installers": "^1.11"
                }
            }
        }
    ]
}

Further below, we’ll show you how to make this work.

Add Astra Pro Package And Version Constraints

"require": {
        "brainstormforce/astra-addon": "^3.0"
    },

You need to add the following line to your composer.json file under the “require” key. This will tell Composer to add the Astra Pro package to the list of packages your project depends on. 

Also, this will set the Astra Pro plugin version constraints to any stable version above 3.0.0.

Repositories Arrey

"repositories": [
        {
            "type": "package",
            "package": {
                …
                }
            }
        }
    ]

Next, you need to register Astra Pro Package Repository in your composer.json file. To do this, you must first edit the Astra Pro Package object. 

repositories: Repository Arrey containing Astra Pro Package object

Astra Pro Package Object

The “package” object contains data on the Astra Pro package you are requesting. Here, you need to modify the version string for each update. Thus, to upgrade Astra Pro with Composer, add a version number higher than the one you have currently installed. Similarly, to downgrade Astra Pro, add an earlier plugin version number.

"package": {
  "name": "brainstormforce/astra-addon",
  "version": "3.6.3",
  "type": "wordpress-plugin",
  "dist": {
    "type": "zip",
    "url": "https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key={PURCHASE_KEY}&site_url={SITE_URL}"
   },
  "require": {
     "composer/installers": "^1.11"
   }
}

package: Astra Pro Package Description Object

Also, you need to update the url parameters by adding your Astra Pro license key and a domain of the website on which you’re updating the plugin.

url: URL parameters

URL example:

https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key=fdsi3h3iu4n22l344n4l2&site_url=example.com

Install or Update Astra Pro With Composer

Now that your composer.json is configured, you are ready to update or install Astra Pro on your website. You can install or update Astra Pro by running the following command in Composer:

composer update