Visual Customization: I Recommend This plugin

Built-in Style Options

Default thumbs-up style: Clean, recognizable thumbs-up icon that most users instantly understand
Heart style alternative: More emotionally engaging heart icon, popular for personal blogs and lifestyle sites
Selecting a style: Change in Settings > I Recommend This > Choose a style

Text Label Customization

All text elements can be customized in the plugin settings:

Button text options:
- Text for new recommendations (default: “Recommend this”)
- Text for removing recommendations (default: “Unrecommend this”)
Count text options:
- Zero count text (e.g., “Be the first to recommend”)
- Single recommendation text (e.g., “Recommendation”)
- Multiple recommendations text (e.g., “Recommendations”)
Visibility options:
- “Hide Zero Count” setting to only show numbers when greater than zero

CSS Control

Disabling Plugin CSS

To completely customize the appearance, check “Disable CSS” in plugin settings. This removes all plugin styles, allowing you to define your own.

Common Customization Examples

Add these to your theme’s stylesheet after disabling plugin CSS:

Basic Button Styling

/* Custom recommendation button */
.irecommendthis {
    background: none;
    padding: 0 0 0 10px;
    border: 0 !important;
    margin-bottom: 10px;
    display: inline-block;
    text-decoration: none;
    color: #333;
}

/* Hover and active states */
.irecommendthis:hover,
.irecommendthis.active {
    color: #F56559 !important;
}

Customizing the Counter

/* Counter style */
.irecommendthis-count {
    font-weight: bold;
    font-size: 18px;
    color: #555;
}

/* Text after the counter */
.irecommendthis-suffix {
    font-style: italic;
    font-size: 14px;
    color: #777;
}

Custom Icon Example

/* Replace with custom SVG or icon font */
.irecommendthis::before {
    content: '\f004'; /* Font Awesome heart icon */
    font-family: 'FontAwesome';
    margin-right: 5px;
    color: #ccc;
}

.irecommendthis:hover::before,
.irecommendthis.active::before {
    color: #F56559;
}

Button States

The plugin uses these states that you can target with CSS:

.irecommendthis – Default state
.irecommendthis:hover – Mouse hover state
.irecommendthis.active – Already recommended state
.irecommendthis.processing – During AJAX processing
.irecommendthis-count.count-zero – When count is zero

HTML Output Structure

Understanding the plugin’s HTML structure is crucial for effective customization. Here’s the exact HTML output generated by the plugin:

Basic Button Output

<div class="irecommendthis-wrapper">
    <a href="#" class="irecommendthis" data-post-id="123" data-like="Recommend this" data-unlike="Unrecommend this" aria-label="Recommend this" title="Recommend this">
        <span class="irecommendthis-count">15</span> 
        <span class="irecommendthis-suffix">Recommendations</span>
    </a>
</div>

Element Breakdown

Wrapper div: .irecommendthis-wrapper – Container element (can be disabled)
Button anchor: .irecommendthis – The clickable element with states:
- .active – Added when user has already recommended
- .processing – Added during AJAX processing
- .irecommendthis-post-123 – Class with post ID
Count element: .irecommendthis-count – Displays the number of recommendations
- .count-zero – Added when count is zero
Suffix element: .irecommendthis-suffix – Text displayed after the count

Data Attributes

The button includes several data attributes that control its behavior:

data-post-id – The ID of the post being recommended
data-like – Text for recommendation action
data-unlike – Text for unrecommendation action

Accessibility Attributes

For better accessibility, the plugin includes:

aria-label – Screen reader text describing the button’s action
title – Tooltip text on hover

Variation: Heart Style

When the Heart style is selected, the same HTML structure is used, but different CSS is applied to show a heart icon instead of a thumb.

Variation: Without Wrapper

When the wrapper parameter is set to false:

<a href="#" class="irecommendthis" data-post-id="123" data-like="Recommend this" data-unlike="Unrecommend this" aria-label="Recommend this" title="Recommend this">
    <span class="irecommendthis-count">15</span> 
    <span class="irecommendthis-suffix">Recommendations</span>
</a>