Customizing the Astra WordPress Theme: SEO, User Experience

Unveiling Your Unique Digital Persona by Customizing the Astra WordPress Theme ∞

The digital world is saturated with numerous websites striving to catch the viewer’s attention. To carve out a unique space for yourself, your website must effectively reflect your distinctiveness. One of the ways to achieve this is by customizing the Astra theme on WordPress, which provides a broad canvas for creating a unique online identity. We installed the Astra Theme in our Complete SEO Guide Box. You can check the Astra homepage.

The current article is "6.4. Customizing Astra Theme" of our Complete SEO Guide Box.
Previous Article: 6.3. Removing WP Themes. Next Article: 6.5. Astra Full Reset

Navigating the Customizer: A Guide Beyond Customizing the Astra WordPress Theme

When it comes to personalizing your website, customizing the Astra WordPress theme provides an excellent illustration of the versatility and user-friendliness typical across most WordPress themes. The Customizer, a core feature in WordPress, is the central hub for these adjustments and operates similarly across various themes. Even though our guide focuses on customizing the Astra WordPress theme, the principles and steps outlined also broadly apply to other WordPress themes. So, whether you’re tweaking Astra or any other theme, our guide is a valuable resource, helping you navigate the customization process easily and confidently.

Brand Reflection: Showcasing Your Identity with Astra

Each brand has its distinctive qualities that set it apart from the rest. Customizing the Astra WordPress theme helps you convey your brand’s uniqueness via your website’s appearance. The colors, typography, and layout elements can all be customized to match your brand’s personality. In the virtual arena, where branding is critical, this customization can help your site set itself apart.

Optimal User Experience: Tuning the Astra to Your Users

The user’s experience while navigating your site can significantly affect the success of your website. Astra provides a multitude of customization options that help in enhancing your users’ experience. With easy-to-use navigation menus and responsive designs, customizing the Astra WordPress theme offers the tools to mold your site’s user experience according to your audience’s needs, thus driving engagement and conversions.

Boosting Visibility: SEO and Astra

Increasing the visibility of your website is vital. This is what search engine optimization (SEO) stands for. How you customize your site impacts your SEO. Astra is renowned for its neat, SEO-friendly coding, which boosts your site’s visibility on search engines. By customizing the Astra WordPress theme, you can effectively use SEO elements such as header tags, meta tags, and content enriched with keywords, leading to better search rankings.

Achieving Speedy Performance with Astra

Slow-loading websites are a deterrent for users. Being one of the most lightweight WordPress themes, Astra is excellent for ensuring your website performs quickly. By customizing the Astra WordPress theme, you can further optimize your site’s elements to load faster, providing a smooth user experience and positively contributing to SEO.

Making the Most of Plugin Compatibility with Astra

Astra is compatible with a range of popular WordPress plugins. Whether you plan to set up an online store with WooCommerce, design beautiful pages with Elementor, or create engaging forms with Contact Form 7, Astra can handle it all. Customizing the Astra WordPress theme helps you fully utilize these plugin integrations to make your website feature-rich.

Growing with Your Business: Scalability and Astra

Your website should grow with your business, and Astra’s customization features are designed to offer this scalability. You can begin with basic customizations and expand as your needs grow. Thus, customizing the Astra WordPress theme ensures your website aligns with your business expansion.

Crafting Unique Designs: Astra and Innovation

Astra offers numerous pre-built templates, but customizing the Astra WordPress theme unlocks the potential for unique designs. With various layout settings, header options, and blog layouts, you can design a one-of-a-kind website that breaks away from generic templates.

Customizing the Astra theme on your WordPress site isn’t just about aesthetic appeal; it’s also about enhancing performance, user experience, SEO, and functionality. Whether you’re a business owner, blogger, or creative, investing time in customization can significantly benefit your online presence. With the proper customization, your website becomes more than just an online space – it becomes a true reflection of your brand.

Getting to Customization Options ∞

Login to your WordPress Dashboard.
On the left side menu bar, hover with the mouse cursor over [Appearance], then click on [Customize].

You can review all the Astra settings to tailor your custom visual experience here.
Though there are some settings you should consider from this guide.

Note: Some option changes will be visible only if you have some content and posts on your site. You may return to this guide after you have at least five posts for certain features to be visible.

Let’s start customizing the Astra WordPress theme.

Separate Widgets and All the Sections Visually

By default, the widgets are in a separate visual box from the main post, and all the widgets are blended in their one-piece box, which can confuse users when distinguishing between the widgets. We can separate all the widgets into separate visual boxes.

In the Customization mode, on the left menu side, click on [Global], then [Container].
On the left menu bar under “Container Layout,” select the first option, “Boxed.”
Click [Publish] on top of the left menu bar.

You may not like the looks, so it’s up to you if you want to revert this. Also, if it is your new site, you don’t have any posts, and you will need to configure widgets first to understand how the sidebar with widgets will look. Widget configuration will be near the end of this article, so you may return to this setting later to check how it will look.

Scroll to Top Button

There is an option to add a “Scroll to Top” button. If the user clicks, it will navigate the browsing window to the top of the page. This feature is off by default, but enabling it will add extra code to your final page, making it slightly heavier. Take that into consideration when customizing the Astra WordPress theme.

On the left menu side of the Customization mode, click on [Global], then [Scroll To Top].
Enable Scroll to Top: Off
Click [Publish] on top of the left menu bar.

Site Accessibility Feature

The Site Accessibility feature improves accessibility, though it adds weight to the final code as with other features you enable. This feature is off by default.

On the left menu side of the Customization mode, click on [Global], then [Accessibility].
Site Accessibility: Off
[Publish].

Smooth Scroll to ID Feature

If you’re unfamiliar with this feature, chances are high that you don’t use it on a regular content site. For example, suppose you have several anchors on your page, like “#about” and “#contact.” In that case, by clicking on the link, this feature will scroll smoothly and visually more appealing to that section on the page. If you turn off the feature, it will simply jump to the section. There is nothing wrong with jumping to the section; enabling this feature adds more code to the final page size. To optimize it, we can turn off the feature when customizing the Astra WordPress theme.

In the Customization mode, on the left menu side, click on [Global], then [Misc].
Enable Smooth Scroll to ID: Off
[Publish].

Adding Breadcrumbs Navigation Bar

Breadcrumbs is an important feature to add to your site navigation for users. Astra has two options: to add its default Breadcrumbs solution and Yoast SEO Breadcrumbs if you have the Yoast SEO plugin installed. Since we did install Yoast SEO in the WordPress Recommended Plugins of our Complete SEO Guide Box, we will use it here.

In Theme Customization mode, on the left menu side, click on [Breadcrumb].
You should be in the [General] tab.

Set:
Header Position: [After]
Breadcrumb Source: [Yoast SEO Breadcrumbs]
Note: You may set more visual settings here to suit your liking.
Click [Publish].

This will place Yoast SEO Breadcrumbs under the header of your site. You will see it only when you have at least one post on your website.

Older versions of Astra Theme had a bug in Yoast SEO Breadcrumbs implementation. You could get an indexing error in Google Search Console:

Missing field "itemListElement"

Should you get this error any time in the future, set:
Header Position: [None]
And click [Publish].

Then, you can add the Yoast SEO Breadcrumbs implementation through the “functions.php” of the child theme – more on that in later articles in our Complete SEO Guide Box.

Remove Default Featured Images on Archive Pages

Archive pages are all the pages with a list of posts. For example, you have a category named “Guides” containing five posts. When a user clicks on that category, an archive page will show the user five posts on the page. Suppose you decided to use the Default Featured Image plugin. In that case, you may remove the image from the Archive pages when customizing the Astra WordPress theme since it will show the same image five times on the archive page.

In Theme Customization mode, on the left menu side, click on [Blog].
Then click on [Blog / Archive].
Scroll down to the “Post Structure” section.
Set “Featured Image” to “invisible mode” by clicking on the “eye” icon.
Click [Publish].

Change Default Meta Line Under Post Title on Archive Pages

The default meta line under the post title in Archive pages in Astra shows Comments, Category, and Author.

While Comments and Categories are helpful, Author makes no sense if you’re the only author on your site. And what about date? Your viewers would like to see when the article was last time updated. Finally, you would want to show the users what tags the article has so they better understand what the content will be about.

In Theme Customization mode, on the left menu side, click on [Blog].
Then click on [Blog / Archive].
Scroll down to the “Post Structure” section and find “Meta”.

These are the visible features by default: [Comments][Category][Author]
These are invisible: [Date][Tag]
So, make [Author] invisible and [Date] and [Tag] visible.
Now, you would want to change their order so the user can navigate the meta line more easily. You can drag the blocks up or down to change the order. Set it to:

[Date]
[Category]
[Tag]
[Comments]

If you look closer, [Date] has a “down arrow” icon near the “eye” icon. Click it to expand more options.
Set “Type” to [Last Updated].
Since that is what users will want to see and not when the article was published.
You can also change the Date “Format” if you like.
Click [Publish].

Changing Default Behavior of Page Visual Settings

If you set a Sidebar, you may want all the pages (not just posts) to have the same sidebar. Also, suppose you changed the visual behavior to “Boxed” or anything else. In that case, you may want pages with the same visual behavior when customizing the Astra WordPress theme. Or maybe not. Any way to set the page visual behavior to default:

In Theme Customization mode, on the left menu side, click on [Page]. And set:
Container Layout: [Default]
Sidebar Layout: [Default]
Click [Publish].

Setting Sidebar

You can set the sidebar right, left, or turned off.
In Theme Customization mode, on the left menu side, click on [Sidebar].
Set the “Default Layout.”
As an example, for this guide, we will use the Sidebar on the Right side,

Removing Powered by Astra Theme String

Users knowing that you have the Asta theme installed will not benefit. On the other hand, potential adversaries may exploit known vulnerabilities to attack your site. This is why you should remove the “Powered by Astra Theme” string from your copyright on the bottom of your site.

In Theme Customization mode, on the left menu side, click on [Footer Builder].
Under the [ELEMENTS] tab, click on the [Copyright] button.
From the text box, remove this string:

| Powered by [theme_author]

Click [Publish].

Setting Site Title, Tagline, and Logo

In Theme Customization mode, on the left menu side, click on [Site Identity].

Note: “Site icon” in Astra Theme is the favicon we set earlier in our Complete SEO Guide Box. We used the native method and can implement the ICO file as is, while we can compress it as we like. The feature in Astra will not give you this much flexibility when customizing the Astra WordPress theme.

Click on [Site Title & Logo Settings].
Under the “Logo” section, you can either [Remove] Logo if you don’t need it in this section or [Change Logo].
Scroll down to “Site Title Visibility” if you want to enable it. You will need to click on each device type separately.
Also, a good idea is to set:
Inline Logo & Site Title: On
If you want to enable Tagline, you must also enable it on each device separately.

Click [Publish].

Adding Drop Down Menus to the Header While Customizing the Astra WordPress Theme ∞

Customizing the Astra WordPress theme by adding a dropdown menu enhances your website’s usability and appearance. Here is a step-by-step process to help you seamlessly integrate a dropdown menu into your Astra-themed website.

Create a Menu

We will cover how to create a menu in WordPress in a later section of our Complete SEO Guide Box. Here is a quick review of the process.

Login to your WordPress Dashboard.
Proceed to Appearance > Menus in the WordPress dashboard.
Here, you can either create a new menu or edit an existing one:
To create a new menu, click “Create a new menu,” name it, and hit [Create Menu].
To edit an existing menu, select it from the list.
Use the left-hand panels, like Pages, Posts, or Custom Links, to add items to your menu.
Select the items you need, then click the [Add to Menu] button.

Creating Dropdown Menus

Turn items into “child” items of a “parent” item to create a dropdown:
Drag and drop a menu item slightly right under a parent item.
This forms a sub-item and creates your dropdown.

Arrange your menu items and create multiple dropdown levels by dragging items right under sub-items.
Assign your menu to one of Astra’s theme locations, such as the primary or footer menu, by checking the appropriate location at the menu editor’s bottom.

Always click [Save Menu] after making changes to apply them.

Customizing Menu Appearance

Enter the Customizer to enhance your menu’s design by navigating to Appearance > Customize. Here, you can modify elements like colors and typography to align with your site’s aesthetic.

In the Customizer, click on [Header Builder] on the left menu bar.
On the bottom of the main page, with [+] in a place where you want to show the menu inside the header, select the menu you added in the previous step.
On the left menu bar, click on the “Element” you just added, Primary or Secondary Menu.
You can customize the drop-down menu under [General] and [Design] tabs.

Checking Your Site

Finally, visit your site to see the dropdown menu in action. Ensure everything appears as expected, and the menu is assigned correctly.

Additional Tips

Responsive Design: Verify how your menu looks on mobile devices.
Plugins: For advanced features like mega menus, consider compatible plugins.
Updates: Regularly update your Astra theme and WordPress for optimal performance.

These steps will enhance your website by customizing the Astra WordPress theme with an efficient and stylish dropdown menu.

Follow the Drop-Down Menu Visual Customization Guide from Astra Docs for more settings.

Optimization, Aggregation, Minification and Caching Plugins ∞

Don’t forget, when setting the Astra WordPress theme, you probably need to check if your theme loads fine if you’re using CSS, JS, HTML minification, CSS, or JS Aggregation plugins. If there are any issues, you should exclude the file:

astra/assets/css/minified/main.min.css

from aggregation and minification. Since we’re using the Clearfy Cache plugin, we already treated the problem in the plugin settings.

The current article is "6.4. Customizing Astra Theme" of our Complete SEO Guide Box.
Previous Article: 6.3. Removing WP Themes. Next Article: 6.5. Astra Full Reset

If you find any mistakes or have ideas for improvement, please follow the email on the Contact page.