Astra WordPress theme tutorial

In my post, I show you how to install and customize the Astra WordPress theme step by step.

The Astra theme is a popular WordPress theme. It is light, loads fast and is mobile friendly.

Astra has been downloaded over 1 million times and has a review score of five out of five.

Astra downloads and review score

The Astra theme is suitable for a blog, personal portfolio, business website or WooCommerce storefront.

This post contains affiliate links. That means I earn a commission on purchases you make at no extra cost.

Let’s begin.

How To Install Astra

You can install Astra from the WordPress theme library. Type Astra into the search bar. Then install and activate the theme. Or, you can use the file upload option to install Astra.

How To Install Astra From The WordPress Theme Library

Hover your mouse over ‘Appearance’, and select ‘Themes’ from the menu.

Select themes

Next, select the ‘Add New’ link.

Add new

In the ‘Search Themes’ box, type ‘Astra’.

Search for Astra

After a short wait, the Astra theme appears.

Astra theme

Hover your mouse over the theme and select ‘Install’.

Select install

Once installed, you can activate the theme for your website or use the ‘Live Preview’ link to view your site content without going live.


How To Upload The Astra Theme To WordPress

Alternatively, you can download the Astra theme installation file from Astra’s homepage.

First, go to (*Paid link) and select the ‘Download Now’ link.

Astra homepage

Next are paid plan comparison tables. Below the tables is a download link for the free Astra WordPress theme.

Download free Astra

To get the installation files, you must give your name and email address to subscribe to newsletters. You can unsubscribe at any time.


You get the installation files after clicking on ‘Subscribe and Download’.

Download starts

Once the download is complete, you can upload the file to WordPress.

Return to your WordPress admin dashboard. Hover your mouse over ‘Appearance’ and select ‘Themes’ from the menu.

Select themes

Next, select ‘Add New’.

Add new

Then, ‘Upload Theme’.

Upload theme

To start, click on the ‘Choose File’ link.

Choose file

Select the installation file on your computer and click on ‘Open’.

Astra file

Once opened, click on ‘Install Now’.

Install now

After a short wait, you receive an installation complete confirmation.

Installation complete

After installation, you have three options. You can view your site’s content without going live. Activate Astra immediately. Or return to your installed themes list.

Astra installed

Now you have Astra installed on your WordPress blog. It is time to start customizing.

How To Install The Astra WordPress Theme YouTube Video Tutorial

How To Customize Astra

You can customize WordPress themes before you activate them. To start, hover your mouse over the Astra theme and select ‘Live Preview’.

Live preview

All the customizing options are on the left. On the right, a preview window shows you your changes.

Customizing mode

The first option on the list is a link to upgrade to Astra Pro.

For a price check and comparison of the free versus pro version, go to (*Paid link).



Global allows you to determine default settings across your website. All pages and posts update after making changes to these settings. You can edit typography, colours, layout, and buttons.

If you use a page builder, some of these settings are disabled.


In typography, there are options for base typography and headings.

Base typography and headings

Base Typography

Base typography

Base typography is to set the default text for your blog posts and pages.

You can change the default font.

Default font

The default size for the text is 16. Use the up and down arrows to change the size.


Use the weight option to change the thickness of the letters.


Text transform is for you to set capitalization.

Text transform

Line-height is the space between lines in your paragraphs.

Line height

The ‘Paragraph Margin Bottom’ is the space between paragraphs.

Paragraph margin bottom


The headings option allows you to set the default for all headings on your website.


You can have the same font, weight, text transform, and line height for all headings. Or set them individually.

For individual headings, scroll down. Heading 1 is the blog title, and headings 2 to 6 are your sub-headings.


Once you select ‘Colours’, you come to ‘Base Colours’.

Base colours

‘Base Colours’ allows you to set the default colours for your text, links, heading text colours, background colour, and background image.

Theme colour is for Astra WordPress theme elements like buttons.

Base colours

Select the colour box to change.

Select colour


The container option is to set width and blog post layout.


Move the sliding scale to change the width of your website.

Use the ‘Layout’ option to set the default for your blog. You can change the layouts for pages and blog posts, too.

Use the menu to change.

Page layout options


The buttons option allows you to set colour, borders, typography, and spacing for buttons in your blog posts. Click the ‘Edit’ icon to change.


How To Use Global To Customize Your Website YouTube Video Tutorial

Next on the customization option list is ‘Header’.


With ‘Header’, you can upload your logo, add a header image, and customize your menu.

Header options

Site Identity

Site identity allows you to add your logo and a site icon to your website.

Site identity

Select the ‘Select Logo’ link to choose your file. Once uploaded, your logo appears on the top of your blog.


Use the ‘Logo Width’ sliding scale to change logo size.

Logo width

A site icon is an image in browser tabs.

Site icon

Once uploaded and published, your icon and tagline appear in browser tabs.

Browser tab

Primary Header

‘Primary Header’ is to position your logo. You have three options, left of your menu, above, or to the right of your menu.


‘Width’ allows you to have the header section in line with your content or full width.

Header width

Next, you can have a border between your header and body content.


Lastly, decide how you want your logo to show on mobile devices.

Mobile header

Primary Menu

‘Primary menu’ allows you to customize the menu in your header.

Primary menu

The first option allows you to add an extra item to your menu.

Last item in menu

The next option is for sub-menus.

Sub menu

Sub-menus appear when a visitor hovers their mouse over your main menu.

Sub menu

The next option is ‘Mobile Menu’.


Use this option to change the menu style for mobiles users.

Mobile menu

Transparent Header

The ‘Transparent Header’ option allows you to set a background image not blocked by the header section.

Transparent header

If you plan to use an image as your background, this is an excellent option to use.

Transparent header

You can enable this feature on all devices or select it from the menu.

Enable on complete website

This feature helps you create an excellent homepage for your website.

Transparent header example

How To Use Header To Customize Your Website YouTube Video Tutorial


Breadcrumbs allow your visitors to track their path to the current page.

Your visitors see top-level pages and categories.

The default position for breadcrumbs is ‘None’. Use the menu to change this.


In my example, I chose ‘After Header’. Visitors can see they came here from the homepage. They are viewing a post in the ‘Attractions in Loei’ category. The last item is the blog post name.

After header

After you enable ‘Breadcrumb’, you have extra options. You can set a separator icon and disable it on certain pages.


Next is ‘Alignment’. Use the menu to set the breadcrumb to align to the left, centre, or right.


Use ‘Spacing’ to set how much space you want around the breadcrumb. Use the link option to keep all four boxes the same value.


‘Colours’ allows you to set the colour for the background, text, link, and separator.


Finally, use ‘Typography’ to set breadcrumb text defaults.


How To Use Breadcrumb To Customize Your Website YouTube Video Tutorial


The ‘Blog’ option is to set defaults for your blog posts.


In ‘Blog’, you have options for archived blog posts. Archives are published blog posts appearing on lists such as on your homepage, blog, or category pages.

Blog and Archive

Blog / Archive

Customising Blog Archive

The first option is to set the content width on blog post list pages.

The default is 1200 use ‘Custom’ to change.

Content width

Next, ‘Post Structure’ and ‘Meta’ allow you to set the default for what is displayed.

Post structure

You can move the blocks to change the order. Clicking on the eye icon removes that item.

Featured image

‘Post content shows a few sentences of your post content or all of the post.

Post content

Finally, ‘Typography’ is for the text size of your category title and blog post title.


Single Post

The ‘Single Post’ option is to set the information on your blog posts.

Single post options

Content width default is 1200 pixels. Use the up and down arrows or enter a new setting.

Content width

The ‘Structure blocks’ can be moved up or down. To hide, click on the eye icon.


Finally, typography allows you to set the size of your post title text.


How To Use Blog To Customize Your Website YouTube Video Tutorial


‘Sidebar’ is to set defaults for the sidebar on your website.

Sidebar option

Open the ‘Default Layout’ option to choose ‘No’, ‘Right’, or ‘Left’.

Default layout

You can also set default sidebar layouts for pages, blog posts, and archived pages.

Page post archives

Side width allows you to set the percentage of screen width for your sidebar.

Sidebar width

Use the up and down arrows to change or set a new value.

How To Use Sidebar To Customize Your Website YouTube Video Tutorial


The ‘Footer’ option is to customize the bottom section of your website.

The first option is ‘Footer Widgets’.

Under ‘Layout’, you can enable four widgets areas.

Footer widgets

You can also have a border between your content and the footer area. Select the border size and colour.

Top border

Next is ‘Colours & Background’. You can customize the footer area background and content. Click on the ‘Edit’ icon to change.

Colours and background

The second option is ‘Footer Bar’.

Footer bar

Select the layout icon to add two sections to your footer area. You can copyright your website here, as per my example.


In the footer bar, add text, widgets, or menus.

Section menu

Next, change the content width, border size and colour.

Width and border

Finally, change the colours and background for the footer bar.

Colours and background

You can customize all your websites menus with this option.

On my tutorial website, I have one ‘Main’ menu. You can create another menu by clicking on the ‘Create New Menu’ link.

Main menu

To customize your active menus, click on the arrow icon.

Arrow icon

You can modify the menu name, change the order, add more items to the menu, and select where you want this menu to appear on your website.

Menu name

To view all menu locations, click on the tab.

Menu locations

On Astra, you can place menus in the header or footer. To add a menu to a sidebar, create a menu widget.

View all locations

Use the dropdown to select a menu, or use the link to create a new menu.

How To Use Menus To Customize Your Website YouTube Video Tutorial



Widgets allow you to add extra functionality to your website.

Once you select ‘Widgets’, you can see where to add widgets. On my website, I can add them to my sidebar.

Customise widgets

Once I click through to the sidebar, I see my current widgets.

Main sidebar

To add a new widget, click on the plus icon.

Add widget

In the latest WordPress update, you can add any WordPress block in addition to widgets.

Add a block

Use the search function or scroll down the list. To add a block or widget, click on the icon.

The new one appears at the bottom.

New widget

Use the widget toolbar to customize, move, or delete the widget.

There is an additional plus icon at the bottom to add more.

Additional widgets

How To Use Widgets To Customize Your Website YouTube Video Tutorial

Homepage Settings

Homepage settings

This option is to choose what to display on your website homepage. You can show your latest blog posts or set a page you created.

Once selected, your latest blog posts publish to the posts page.


To select a published page, select the ‘A static page’ option and select the homepage and blog page from the menu.

Once selected, your latest blog posts publish to the posts page.

How To Use The HomePage Settings Option To Customize Your Website YouTube Video Tutorial

Additional CSS

Additional CSS

Additional CSS allows you to add code to change the style of your theme. For example, you can add code to change the default colour of links in your blog posts.

Paste your CSS code into the box on the left.

Additional CSS

Activate And Publish Your Customizations

Once you have got the theme the way you want it, it is time to activate it and make it live on your website. To do that, click on the ‘Activate & Publish’ link.


Astra Free And Astra Pro Feature Comparison Chart

Astra Pro has a lot more features than the free version. To view a comparison, visit (*Paid link).

Full comparison


The Astra WordPress theme is one of the most popular WordPress themes. It is simple to customize and has a lot of excellent features.

If you are new to blogging, then Astra is an excellent choice. It is simple to customize and loads fast. Astra is a responsive theme that smoothly adjusts its layout based on the screen size and resolution.

The Astra theme has been downloaded over a million times and has a review score of 5 out of 5.

Another theme I recommend is the Ashe WordPress theme. Check out my ‘How to install and customize the Ashe WordPress theme‘ guide. I also have a YouTube playlist on how to install and customize Ashe.

Should you have any questions or feedback about my blog post. Please comment below. I appreciate all feedback.

Similar Posts

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.