SVG Flags Documentation

Last updated by David on September 7, 2020 12:20

This page contains information on the installation and usage of the SVG Flags WordPress plugin. It also contains a reference of all the available editor blocks, shortcodes (and associated attributes). If you didn’t find what you were looking for then please contact us so we can get you the help you need straight away. We’re just an email away!

Take a look at the SVG Flags demo for example usage.

Plugin Installation

After purchase you can download the plugin zip file from your WPGO Plugins account area. Then, complete the following steps to install SVG Flags on your site:

  1. On the site you wish to install the plugin go to the WordPress admin dashboard and click the Plugins link in the left-hand menu.
  2. At the top of the WordPress plugins page click the Add New button, and then on the next page click the Upload Plugin button.
  3. You’ll now see a Choose File button. Click it and select the plugin zip file you downloaded to your computer earlier.
  4. Once the plugin has been selected click the Install Now button to begin the installation process.
  5. In a few seconds you should see a plugin installed successfully message. Click the Activate Plugin link underneath to make the plugin ready for use.

Once installed and activated you can start adding SVG flags to your site! See the plugin usage instructions below for more details.

Basic Plugin Usage

This section covers basic information on how to get started adding SVG flags to your site.

Adding Flags to Your Content

Note: The SVG flags shortcode works in the latest version of WordPress and can also be used in the new block editor added to WordPress 5.0.

You can add flags anywhere on your site via the [svg-flag] shortcode. Add the the two letter country to the flag shortcode attribute. If ommitted this attribute defaults to the United Kingdom flag. The size of the displayed flag is defined by a 4:3 ratio and inherits the height from it’s location context (e.g. the line-height of paragraph text) but you can add custom styles to make the flag any width/height you want.

Click here for the full list of available flags. Make a note of the unique two-letter country code next to the flag you want to display.

See below for full details on all available shortcodes and attributes.

SVG Flags Shortcodes

There are currently two SVG Flags shortcodes available:

  • [svg-flag] – Displays a single flag as an SVG background image.
  • [svg-flag-image] – Displays a single flag as an SVG image element.
  • [svg-flag-heading] – Displays a single flag next to an HTML heading element (H1, H2 etc.).

[svg-flag] Shortcode

Use this shortcode to display a single flag as an SVG background.

Note: There’s an alias of the [svg-flag] shortcode available for legacy purposes, which is [svg-flags]. This may be removed in a future version so it’s highly recommended to switch existing instances to [svg-flag] as soon as possible.

[svg-flag-image] Shortcode

Use this shortcode to display a single flag as an SVG image element.

[svg-flag-heading] Shortcode

Use this shortcode to display a single flag next to an HTML heading element.

License and Support

Click on the License & Support tab for links to your WPGO Plugins account page, plugin support, and documentation. You can also enter your plugin license key for access to future plugin updates and support directly from the WordPress admin.

Still Have Questions?

We want to hear from you! If there’s any aspect of the plugin that you still need help with or have any questions or comments then please get in touch. We’re here to help. Do you think the documentation needs additional information or screenshots etc? If so you can contact us directly here.

First published December 31, 2019