Tormod Seljenes

seljeVisitorsFlags lets you display country flags anywhere on your WordPress site using a simple shortcode. It’s ideal for showing the countries you’ve visited, highlighting where your visitors come from, or adding an international feel to landing pages, sidebars, and content sections.
After activation, go to Tools → seljeVisitorsFlags to choose which countries to show, arrange their order, and configure display defaults. Once saved, you can output the flags with the default shortcode:
[seljev_flags]
You can also build customized shortcodes using the built-in Shortcode Builder tab, which helps you generate variants for different pages without needing to remember every parameter.
Frontend display options include a normal static list/grid and a continuous scrolling ticker (scroller). Ticker mode is designed to look smooth and modern, while still being mindful of performance: the animation pauses when it’s off-screen or when the browser tab is hidden.
The plugin includes multiple visual options so the output can match your site: sizing, spacing, alignment, and optional names/tooltip labeling. Flag images include explicit dimensions to reduce layout shifts during loading for a more stable page layout.
Accessibility and admin usability are also considered: tooltip behavior supports keyboard focus, and the country picker provides clear feedback (including a live selected-count indicator). You can quickly select all countries, apply EU/EEA presets, clear your selection with confirmation, and undo a clear action if you clicked it by mistake.
Whether you want a clean row of flags, a polished animated scroller, or a simple “countries list” section, seljeVisitorsFlags keeps setup fast and output flexible—without requiring a page builder or custom code.
Find this free plugin useful? Please support my work on this plugin by sending me a <a href="https://buy.stripe.com/eVq14ncZGckd4xr2gibQY0i" rel="nofollow ugc">one-time donation</a> (50% of the proceeds go to Ukraine).
<h4>Key features</h4>
<ul>
<li>Choose countries from a searchable list</li>
<li>Drag-and-drop reorder of selected countries</li>
<li>Bulk actions: Select all, Select EU, Select EEA</li>
<li>Static display and continuous scrolling ticker/scroller mode</li>
<li>Shortcode Builder for easy customized shortcodes</li>
<li>Tooltip keyboard focus support</li>
<li>Performance-friendly scroller (pauses off-screen / tab hidden)</li>
<li>Reduced layout shift by setting explicit image dimensions</li>
</ul>
Find this free plugin useful? Please support my work on this plugin by <a href="https://buy.stripe.com/28EbJ1aRyfwp3tncUWbQY0h" rel="nofollow ugc">making a donation</a>.
<h3>Documentation</h3>
<h4>Getting started (admin page)</h4>
After activating the plugin, go to:
Tools -> seljeVisitorsFlags
You will see four tabs:
<ul>
<li>Countries</li>
<li>Settings</li>
<li>Shortcodes</li>
<li>Preview</li>
</ul>
<h4>Countries tab (choose which flags to show)</h4>
<ol>
<li>Use the Search box to find countries quickly.</li>
<li>Click a country to add it to Selected countries.</li>
<li>In Selected countries, drag to reorder the flags (this affects display order).</li>
<li>Use bulk actions if needed:
<ul>
<li>Select all</li>
<li>Select EU</li>
<li>Select EEA</li>
<li>Clear all</li>
</ul>
</li>
<li>Click Save Changes when you are done.</li>
</ol>
Tip: If you do not select any countries, the shortcode output may be empty.
<h4>Settings tab (display defaults)</h4>
These settings control the default output for the [seljev_flags] shortcode (unless you override them in a shortcode).
Common settings:
<ul>
<li>Flag size (px): controls how large each flag appears.</li>
<li>Flag source:
<ul>
<li>FlagCDN (SVG): load SVG flags from flagcdn.com</li>
<li>User flags folder: load flags from your own uploaded files</li>
</ul>
</li>
</ul>
If using User flags folder:
<ul>
<li>Upload your flag files into the plugin user flags folder (as shown in the Settings tab).</li>
<li>Use ISO 2-letter country codes as filenames, typically uppercase (example: NO.svg or NO.png).</li>
<li>The plugin will try .svg first, then .png.</li>
</ul>
Display mode:
<ul>
<li>Show all flags (static)</li>
<li>Continuous scroller (ticker)</li>
</ul>
If you choose Continuous scroller:
<ul>
<li>Scroller direction: choose the scroll direction.</li>
<li>Scroller speed (seconds per loop): lower = faster, higher = slower (allowed range: 5 to 120).</li>
<li>Edge fade: fades the flags near the edges of the scroller.</li>
<li>Bouncing flags: adds a subtle bounce animation while scrolling.</li>
</ul>
If you choose Show all flags (static):
<ul>
<li>Layout: row or grid</li>
<li>Columns (grid only)</li>
<li>Gap (px): spacing between flags</li>
<li>Align: left, center, or right</li>
<li>Names: none, tooltip, or caption</li>
<li>Entrance animation settings: animation, duration, stagger, trigger</li>
</ul>
<h4>Shortcodes tab (copy and paste)</h4>
The main shortcode is:
[seljev_flags]
This uses:
<ul>
<li>Your selected countries (from the Countries tab)</li>
<li>Your display defaults (from the Settings tab)</li>
</ul>
You can also generate a shortcode that includes specific countries, for example:
[seljev_flags countries=”NO,SE,DK”]
<h4>Shortcode Builder (recommended)</h4>
In the Shortcodes tab, use the Shortcode Builder to create a shortcode with options (toggles/selects) without memorizing attributes.
<ol>
<li>Choose whether to use saved selection or specify countries.</li>
<li>Choose a display mode (default/static/ticker).</li>
<li>Configure only the options relevant to that mode.</li>
<li>Copy the generated shortcode using the Copy button.</li>
</ol>
<h4>Preview tab (test before publishing)</h4>
Use Preview to test how the flags will look with your current settings before placing the shortcode on a live page.
If Preview is empty:
<ul>
<li>Make sure you selected at least one country and saved.</li>
</ul>
<h4>Troubleshooting</h4>
No flags show up:
<ul>
<li>Select at least one country in the Countries tab and click Save Changes.</li>
<li>If using countries=”…”, ensure you used valid ISO 2-letter codes (comma-separated, e.g. [seljev_flags countries=”NO,SE,DK”]).</li>
</ul>
Some flags missing when using User flags folder:
<ul>
<li>Confirm the file exists for that country code (SVG or PNG).</li>
<li>Check filename casing (some servers treat NO.svg and no.svg differently).</li>
</ul>
Scroller too fast/slow:
<ul>
<li>Adjust Scroller speed (seconds per loop). Lower is faster, higher is slower.</li>
</ul>
Copy button does not work:
<ul>
<li>Some browsers or security settings may block clipboard access. Try another browser if needed.</li>
</ul>
<h3>Plugin settings</h3>
All settings are found under Settings → seljeVisitorsFlags in the WordPress admin.
<h4>Countries tab</h4>
This is where you choose which country flags to display.
<ul>
<li>Search box — Filter the full list of 250+ countries by name or ISO code as you type.</li>
<li>All countries list — Click any country to move it to the Selected countries panel.</li>
<li>Bulk action buttons:
<ul>
<li>Select all — Adds every available country to the selection.</li>
<li>Select EU — Adds all 27 EU member states.</li>
<li>Select EEA — Adds all 30 EEA countries (EU + Norway, Iceland, Liechtenstein).</li>
<li>Clear all — Removes all selected countries (with undo support).</li>
</ul>
</li>
<li>Selected countries panel — Drag the handle (☰) to reorder flags. The display order on your site matches the order here. Click Remove on any item to deselect it.</li>
<li>Save Flags button — Saves the current selection. The shortcode will output nothing until at least one country is saved.</li>
</ul>
<h4>Display Defaults tab</h4>
These settings control the default appearance of <code>[seljev_flags]</code>. Any of them can be overridden per-shortcode via the Shortcode Builder.
Flag size (px) 
Width of each flag image in pixels. Applies to all display modes. Range: 8–256. Default: 48.
Flag source 
Where flag images are loaded from: 
* FlagCDN (SVG) — Scalable vector flags loaded from flagcdn.com (recommended, sharpest at any size). 
* FlagCDN (PNG 4:3) — Raster PNG flags from flagcdn.com; best for older browsers that don’t support SVG. 
* Circle Flags (SVG) — Round/circular-style flag SVGs, loaded from a GitHub CDN. 
* User flags folder — Load your own image files from <code>wp-content/plugins/seljevisitorsflags/assets/flags/userflags/</code>. Name files using uppercase ISO 2-letter codes (e.g. <code>NO.svg</code>, <code>SE.png</code>). The plugin tries <code>.svg</code> first, then <code>.png</code>.
Display mode 
* Show all flags (static) — Displays all selected flags at once in a grid or row. Use the layout, alignment, and entrance animation settings below. 
* Continuous scroller (animated ticker) — Loops the flags past continuously. Entrance animations are disabled in this mode. The scroller pauses when off-screen or when the browser tab is hidden.
Continuous scroller settings (only visible when Display mode = Continuous scroller)
<ul>
<li>Scroller direction — Which way the flags move: Right to left, Left to right, Top to bottom, or Bottom to top.</li>
<li>Scroller speed (seconds per loop) — How many seconds one full loop takes. Lower = faster. Range: 5–120 s. Default: 20.</li>
<li>Edge fade — Fades the flags near the edges of the scroller container for a polished look.</li>
<li>Bouncing flags — Adds a gentle up-and-down bounce animation to each flag while it scrolls.</li>
</ul>
Layout (static mode only) 
* Row — Flags wrap into a horizontal line, breaking onto new lines if the container is too narrow. 
* Grid — Flags are arranged in a fixed-column grid.
Grid columns (static mode, Grid layout only) 
Number of columns in the grid. Range: 1–20. Default: 6.
Gap (px) 
Space between individual flags. Range: 0–64 px. Default: 8.
Alignment (static mode only) 
Horizontal alignment of the flag group within its container: Left, Center, or Right.
Country names 
* None — Only the flag image is shown. 
* Tooltip on hover — The country name appears in a tooltip on mouse hover and keyboard focus. 
* Caption below flag — The country name is shown as a text label directly below each flag.
Text color 
* Follow theme — Caption and tooltip text inherits the color from surrounding page text. 
* Custom color — Pick a specific hex color for captions and tooltip text.
Entrance animation (static mode only) 
The animation played as each flag enters the viewport: 
* None — No animation; flags appear instantly. 
* Fade in — Flags fade in from transparent. 
* Fly in from left/right/bottom/top — Flags slide into position from the chosen direction. 
* Zoom in — Flags scale up from slightly smaller.
Animation duration (ms) 
How long each flag’s entrance animation takes. Range: 0–5000 ms. Default: 400.
Stagger delay (ms) 
Extra delay between each successive flag’s animation, creating a wave-like cascade effect. Set to 0 for all flags to animate simultaneously. Range: 0–2000 ms. Default: 50.
Animation trigger 
* On scroll into view — The animation fires only when the flags scroll into the visible viewport (recommended; saves performance). 
* On page load — The animation fires immediately when the page loads, regardless of scroll position.
<h4>Shortcode Builder tab</h4>
Generates a ready-to-paste shortcode with custom overrides. Every option here has a Default choice that falls back to the saved Display Defaults above.
Set a value only when you want that specific shortcode to behave differently from your defaults. Copy the generated shortcode with the Copy button and paste it into any page, post, block, or widget.
<h4>Preview tab</h4>
Shows a live render of your flags using the current Display Defaults. Save any changes on the Display Defaults tab first to see them reflected here.

seljeVisitorsFlags

Display visited countries as flags via shortcode.

julienvdg

hreflang Flag plugin uses <a href="http://www.w3.org/TR/css3-selectors/#attribute-selectors" title="W3C CSS3 Attribute selectors description" rel="nofollow ugc">css3 selectors</a> to add a flag icon to your links depending on their <a href="http://www.w3.org/TR/html401/struct/links.html#adef-hreflang" title="hreflang attribute description on W3C" rel="nofollow ugc">hreflang attribute</a>.
This is really useful if you regularly link to pages in other languages and you want to inform your visitors about the language of the link target.
It’s even more useful if your own blog is multilingual.

hreflang Flag

Add a flag icon to link corresponding to the hreflang attribute.

seljeVisitorsFlags vs hreflang Flag