Display Styles

Overview

Simple Post Like ships with three display styles. Each style suits a different design context — from editorial blogs to tight card grids to minimal design-forward themes. Switch between them globally from Settings → Simple Post Like → Display Style, or override per-instance using the shortcode’s style attribute.

---

Button (Default)

Value: button_default

A full-width button with an icon on the left, a text label in the center, and the like count on the right. This is the most descriptive style — users immediately understand what the button does without any guesswork.

🤍  Like  ·  0

When liked:

❤️  Liked  ·  1

Best for: Blog posts, article pages, editorial sites, and any layout where the like button is a primary content action and has enough horizontal space to breathe.

---

Icon + Counter

Value: icon_counter

A compact icon with the like count displayed beside it. No text label. Takes up significantly less space than the full button style while still communicating the count clearly.

🤍 0

When liked:

❤️ 1

Best for: Card grids, post listing pages, magazine layouts, and any design where horizontal space is limited and a full button would feel heavy.

---

Icon Only

Value: icon_only

A minimal circle icon button with no label and no visible count. The count is still tracked and stored — it just isn’t displayed inline. Hovering the button shows the count in a tooltip.

🤍

When liked:

❤️

Best for: Design-forward themes where every pixel matters, minimal layouts, and cases where like counts are displayed elsewhere — for example, in a statistics section or a custom template.

---

Changing the Global Style

1. Go to Settings → Simple Post Like
2. Under the Button section, select your preferred style
3. Click Save Settings

The new style applies immediately to all like buttons across your site — auto-injected and shortcode-placed.

---

Overriding Style Per Instance

The global style can be overridden for any individual like button using the style attribute on the shortcode:

[simple_post_like style="button_default"]
[simple_post_like style="icon_counter"]
[simple_post_like style="icon_only"]

This is useful when you want a full button on single post pages but a compact icon on archive cards, without changing the global setting.

See Shortcode Reference for the full list of shortcode attributes.

---

Styling with CSS Custom Properties

All three styles share the same CSS custom properties for color, radius, font size, and transition. Overriding them from your theme affects all styles consistently:

css

:root {
  --spl-color:      #e03e52;
  --spl-btn-radius: 4px;
  --spl-font-size:  14px;
}

For the full list of available properties see CSS Custom Properties.

---

Next Steps

• Auto Injection — control where the button is placed automatically
• Shortcode Reference — override style per instance
• CSS Custom Properties — restyle the button from your theme