Making an Alert bar in WP Astra

Making a COVID19 Notification Bar with Astra Pro

Due to recent events with the COVID outbreak many websites need an alert bar to direct users. The often directs to a latest blog post or information page.

As with all WordPress developers the temptation can be to get a plugin for that.

In the case of Astra Pro I decided to do this with a couple of simple code snippets.

In this tutorial – I will show you how I created a solution for one of my customers to have an Alert Bar at the top of a site for the latest COVID19 news with the organisation.

Video Tutorial

Notification Bar Tutorial with Astra Pro

This is a brief write up of the Youtube Tutorial I created. Its best to watch the video first and then follow along in the blog article for additional assistance.

Pre Requisite

To complete this turotial you need to be using the WP Astra Theme and have the Astra Pro Plugin Enabled.

We will be using the Custom Layouts Feature.

Make sure you have this enabled in the Astra Theme Settings.

Downloads

I have added all the required code to a gist. Check it our here: https://gist.github.com/mrkdevelopment/6d8bd459775bd6ce9bc82c9cb9be0042

What exactly are we making?

In the before shot you will see a standard site. After however we have a clear orange alert at the top of the page using the clients branding colours.

Before Alert Bar is created we have a standard WP Astra Header
Before Alert Bar Created
After the Alert Bar is created we have a clear notification in the latest news area.
After Alert Bar created.

Adding the HTML Snippet

The first step is to add the HTML snippet to your Astra Custom Layouts.

Go to the Appearance -> Astra Options -> Custom Layouts tools.

If this is not available in your site go to the Astra Pro website and learn how to enable it.

Once on this screen add a new item.

Select the code view in the custom layout editor.

Copy the GIST linked below. You are going to want to use the second snippet.

Save the item with the following settings in the hooks options panel.

Custom HTML Snippet settings for Custom Layout.
Custom HTML Snippet settings for Custom Layout.

Adding the CSS Snippet

Now that you have the HTML added to the site we need to make sure it is styled.

From the GIST linked earlier in the article copy the style content.

Create a new layout and paste the code into a new custom layout post.

Once this is created save with the following settings.

CSS Snippet needs to be saved with these settings.
CSS Snippet needs to be saved with these settings.

Save the Style content.

You will now have an alert bar in the top of your site.

Final Points

This custom implementation has added minimal overhead to the site. Its a simple solution for a simple requirement.

You can use this method to inject anything in your header without installing yet another plugin.

Of course, you do need to be using WP Astra for this to work.

Remember – Just because there is a plugin for it, doesn’t always mean you should use a plugin for it. Sometimes you already have a simple solution with a small amount of effort. This can save a lot of time and money because you wont need to maintain another plugin on your site.

Scroll to Top