web_counter Shortcode
The web_counter shortcode renders the counter component.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_counter counter_number="1250" counter_title="Completed projects" counter_number_color="2"]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
counter_number |
Empty, rendered as 0 | Whole number | Final value. Decimals truncate; values are bounded to ±9,007,199,254,740,991. |
counter_number_color |
Inherit | Palette slot 1–15 | Existing number text-color helper. |
counter_title |
Empty | Text with safe inline markup | Optional visible title. |
counter_title_color |
Inherit | Palette slot 1–15 | Existing title text-color helper. |
counter_title_position |
Above | above, below |
Position relative to the number. |
counter_title_tag |
h3 |
p, div, h1–h6 |
Semantic element; retains H4 visual sizing. |
counter_animation |
yes |
yes, no |
Animate once when visible, respecting reduced motion. |
counter_bg_color |
Transparent | Palette slot 1–15 | Existing background helper. |
counter_icon |
Empty | Theme icon picker value | Decorative icon above the counter, using Color 2. |
counter_bg_opacity |
100 |
0–100 in steps of 10 | Opacity of the entire inner wrapper, including text and icon. The historical attribute name is preserved. |
device_visibility |
All visible | Space-separated web-hide-on-xs, web-hide-on-sm, web-hide-on-md, web-hide-on-lg |
Hide independently at the theme's screen ranges. |
el_id |
Empty | Unique HTML ID | Optional counter anchor. |
el_class |
Empty | Space-separated CSS classes | Reuse existing theme helpers, including rem spacing. |
The final value is readable without JavaScript. Numeric animation preserves the existing one-second circular easing, runs once when visible and supports content inserted through the theme AJAX lifecycle. It does not announce each frame as a live alert. The component stylesheet is required for every counter; the script is requested only when an animated counter is present. Both shortcode rendering and asset discovery work with Page Builder administration disabled.
Customize the stylesheet
Administrators can replace the complete Counter stylesheet under Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Counter. Saving publishes an optimized per-site copy without adding the stylesheet to unrelated pages. Reverting restores the existing web-counter handle's bundled stylesheet. The effective component CSS also applies to the Gutenberg Counter preview.
Verification
Verify positive, zero and negative values, title placement, icon, palette, opacity and each enabled screen range. Check the animation switch and reduced-motion behavior. For new block-editor content, see Counter in Gutenberg.