CSS Flags library for WordPress

The CSS Flags plugin / library for WordPress loads a dynamicly created CSS. It has the following responsive Scalable Vector Graphics (SVG) flags:

[cssflag countries="all"]

Usage

The total CSS file size is 4 MB, and you don't want to send all that data back to the users, so you must use one of the following filters in your plugin or theme.

css-flags-countries: Load flags for one or more countries

add_filter('css-flags-countries', function() {
    return array('no'); // Array with ISO_3166-1_alpha-2 country codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
});

css-flags-regions: Load the flags for one or more regions. You can choose between europe, oceania, africa, asia, northamerica, southamerica and middleeast.

add_filter('css-flags-regions', function() {
    return array('europe'); //europe, oceania, africa, asia, northamerica, southamerica, middleeast
});

add_filter('css-flags-exclude', function() {
    return array('eu');
});

add_filter('css-flags-cachetime', function() {
    return 172800; // 2 days
});

add_filter('css-flags-countries', function() {
    return array('all'); // load all country flags (don't it's 4MB)
});

Example 1

Using this filter in your (child) theme functions.php

add_action( 'init', function() {
    add_filter('css-flags-countries', function() {
        return array('no');
    });
});

/* CSS generated in 0.002 seconds. */
.css-flag.no {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTAwIDgwMCI+DQo8cGF0aCBmaWxsPSIjZWYyYjJkIiBkPSJtMCwwaDExMDB2ODAwaC0xMTAweiIvPg0KPGcgZmlsbD0iI2ZmZiI+DQo8cGF0aCBkPSJtMzAwLDBoMjAwdjgwMGgtMjAweiIvPg0KPHBhdGggZD0ibTAsMzAwaDExMDB2MjAwaC0xMTAweiIvPg0KPC9nPg0KPGcgZmlsbD0iIzAwMjg2OCI+DQo8cGF0aCBkPSJtMzUwLDBoMTAwdjgwMGgtMTAweiIvPg0KPHBhdGggZD0ibTAsMzUwaDExMDB2MTAwaC0xMTAweiIvPg0KPC9nPg0KPC9zdmc+DQo=');
    height: 100%;
    width: 137.5%;
    background-size: 100% 100%;
}
.css-flag.no-landscape {
    height: 100%;
    width: 137.5%;
}
.css-flag.no-portrait {
    height: 72.727272727273%;
    width: 100%;
}

<style type="text/css">
    .box {
        width: 32%;
        /*float: left;*/
    }
    .flagbox {
        width: 120px;
        height: 120px;
        display: inline-block;
        vertical-align: middle;
    }
    .flag {
        margin: auto;
        display: inline-block;
        vertical-align: middle;

        border: 1px solid #e5e5e5;
        box-shadow: inset 0px 0px 0px 2px #fff;

    }
</style>

<div class="box">
    <div class="flagbox"><span class="flag css-flag no no-portrait"></span></div>
</div>

Example 2

Load the CSS Flags for the five Nordic countries and their autonomous regions: Norway (no), Sweden (se), Denmark (dk), Findland (fi), Iceland (is), the Faroe Islands (fo), Greenland (gl) and Aaland (ax)

add_action( 'init', function() {
    add_filter('css-flags-countries', function() {
        return array('no','se','dk','fi','is', 'fo', 'gl','ax'); // ISO_3166-1_alpha-2 codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
    });
});

add_action( 'init', function() {
    add_filter('css-flags-exclude', function() {
        return array('fi','is', 'fo', 'gl','ax'); // ISO_3166-1_alpha-2 codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
    });
});

Installation

Plugin

1. Download the latest stable release,
2. Add and activate it. This will load the CSS (4 MB) and cache it using the WordPress Transients API. The default cache time is 7200. The cache time can be changed using the css-flags-cachetime filter.
3. Add one of the filters, above, to your plugin or (child) themes functions.php

Theme

1. In your (child) theme folder, clone the repo:git clone https://github.com/soderlind/css-flags.git
2. Add the following to your (child) theme functions.php

   //load the CSS Flags library
   require_once(dirname(__FILE__) . '/css-flags/css-flags.php');

3. Add one of the filters, above, to your (child) themes functions.php, eg:

   add_action( 'init', function() {
       add_filter('css-flags-countries', function() {
           return array('no','se','dk'); // ISO_3166-1_alpha-2 codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
       });
       // add_filter('css-flags-countries', function() {
       //  return array('all'); // ISO_3166-1_alpha-2 codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
       // });
       // add_filter('css-flags-regions', function() {
       //  return array('europe'); //europe, oceania, africa, asia, northamerica, southamerica, middleeast
       // });
       // add_filter('css-flags-exclude', function() {
       //  return array('gb','se');
       // });
   });

To get you started, here'a a sample theme functions.php

Changelog

See the CHANGELOG.md

Credits

The original CSS file is from https://www.phoca.cz/cssflags/. If you only need the CSS file, grab it there.

Copyright and License

CSS Flags plugin for WordPress is copyright 2015 Per Soderlind

CSS Flags plugin for WordPress is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version.

CSS Flags plugin for WordPress is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU Lesser General Public License along with the Extension. If not, see https://www.gnu.org/licenses/.