Linking your site to the South African Covid-19 page

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.

Comments

Leave a Reply

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

Blog at WordPress.com.

%d bloggers like this: