Since yesterday, the South African government has required all websites with URLs ending in .za to link to the government site dedicated to Covid-19 management. (See here for the Government Gazette on that, section 5.1.4.)
If you’re using WordPress on your website, here are a few different options to do this.
Menu item
Adding a menu item
You can add an item to your menu. To do so,
- Go to Appearance > Customise, there continue to Menus
- Choose the menus that this should be added to. Note that if you’re handheld menu is different than your desktop one, you should add the link to both menus.
- Select + Add Items > Custom Links.
- Add
https://sacoronavirus.co.za/as the URL and SA Covid-19 as the Navigation Label. - Select Add to Menu.
- Publish.
Making it stand out
If you want to make this stand out a bit more,
- In the customiser, click on the item in the menu
- Add a CSS class, such as
covid(see image right) - Publish.
- Now go to Appearance > Customise > Additional CSS
- There add the code I’ve pasted below
- Publish.
.covid {
background: yellow;
}
.covid a {
color: black !important;
}Note that this won’t look that great but it’ll do the trick.
South African Covid-19 Banner plugin
This is a new plugin that was added after I published this post. It’s the easiest solution.
Developer Seagyn Davis created an easy to install and use.
- Install the South African Covid-19 Banner plugin and activate.
- If your homepage has a widget area, go to Appearance > Customise > Widgets. There add the South African Covid-19 widget to the widget area.
- If that’s not the case, edit the page and add the
[south-african-covid-19-banner]shortcode in a block.
Notice plugin
Install a notice plugin like Sitewide Notice WP (a plugin created by South Africa’s Andrew Lima). If you’re using that one, here’s how to continue.
Basic text
- Go to Sidewide Notice
- I would advise selecting “Show Banner On Top Of Screen”
- Choose a background and font colour
- As message use
<a href="https://sacoronavirus.co.za/">South African COVID-19 Portal</a> - Save Settings.
More advanced look
If you’re looking for a more advanced look, you can use this code by Xandor Schiefer:
The HTML code needs to go in the Sidewide Notice. The CSS under Appearance > Customise > Additional CSS.
Note that this will not work on WordPress.com.
More advanced look on WordPress.com sites
If you’re using WordPress.com, the Codepen.io help won’t work (the source is being blocked). You can add the following code in the Sitewide Notice WP plugin, or add an HTML widget or block to your homepage:
<div class="coronaBanner">
<div class="coronaBanner__content">
<a class="coronaBanner__websiteLink" href="https://sacoronavirus.co.za/" rel="noopener nofollow" title="SAcoronavirus.co.za"><img alt="SAcoronavirus.co.za" border="0" height="60" src="https://cldup.com/9k8x2Gpcxq.thumb.jpg" width="364"></a> <a class="coronaBanner__hotlineLink" href="tel:+27800029999">Emergency Hotline: 0800 029 999</a> <a class="coronaBanner__whatsappLink" href="https://wa.me/27600123456?text=Hi" rel="noopener nofollow">WhatsApp Support Line: 0600-123456</a>
</div>
</div>Thanks to my colleague Herman for flagging this and providing the fix.
If you use WooCommerce
If your site uses WooCommerce, the sitewide notice is already built in.
- Go to Appearance > Customise > WooCommerce > Store Notice
- There, add
<a href="https://sacoronavirus.co.za/">South African COVID-19 Portal</a>as the notice - Select Enable store notice
- Publish.
If you want to make it stand out more, insert class="covid" right after "https://sacoronavirus.co.za" but be sure to include a space. Then add the CSS I shared above.
Thanks to my colleagues Jeff Pearce and Hugh Lashbrooke for the quick ideas.
Leave a Reply