Skip to content
Docs

Theme Overrides & CSS Customization

The plugin renders through standard BuddyPress activity hooks — bp_activity_entry_meta, bp_before_activity_entry_comments, and the bp_get_activity_css_class filter — so most themes display pinned posts without extra configuration. When you need to change the look, you have three layers to work with.

Layer 1 — CSS classes

Section titled “Layer 1 — CSS classes”

The plugin enqueues a public stylesheet with predictable class names. Override them from your theme stylesheet (or a custom CSS plugin) without touching plugin code.

Class Element
.bpsp-pinned-post Container <li> of a pinned activity
.bpsp-pinned-post-tag The “Pinned” ribbon/badge element
.bpsp-pinned-post-label The text inside the badge
.bpsp-pin-tool The wrapper for the pin / unpin button
.bpsp-pin-post The button in “not yet pinned” state
.bpsp-unpin-post The button in “currently pinned” state
.bpsp-dark Added to <body> when a dark-mode theme is active

Example — use brand colours for the pinned badge:

.bpsp-pinned-post-tag span {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

Layer 2 — Theme support declaration

Section titled “Layer 2 — Theme support declaration”

Themes that ship their own pinned-activity styling can declare it once in functions.php:

add_theme_support( 'buddypress-sticky-post' );

When the theme sets this flag, the plugin:

  • Uses bp_activity_entry_dropdown_toggle_meta and bp_activity_entry_top_meta as pin-button hook positions instead of the default bp_activity_entry_meta.
  • Lets the theme control badge placement without interference.

Reign Theme and BuddyX Pro are the built-in theme names that trigger the same alternate hook positions automatically. To add another theme by name (without touching functions.php):

add_filter(
    'buddypress_sticky_post_theme_support',
    function ( $themes ) {
        $themes[] = 'my-custom-theme';
        return $themes;
    }
);

For full control over pin-button placement, declare theme support and supply a custom activity_meta_position:

add_theme_support( 'buddypress-sticky-post', array(
    'activity_meta_position' => array( 'my_theme_activity_actions' ),
) );

The plugin attaches bpsp_activity_pin_toggle_icon to every hook in the activity_meta_position array.

Layer 3 — Filter hooks

Section titled “Layer 3 — Filter hooks”

For deeper changes, replace the badge HTML or swap the button labels.

Replace the “Pinned” badge HTML

Section titled “Replace the “Pinned” badge HTML”
add_filter( 'bpsp_activity_pinned_tag', function () {
    return '<span class="custom-pinned-badge">Featured</span>';
} );

The returned value is output via wp_kses_post(), so standard HTML tags are safe to use.

Swap the pin and unpin button labels

Section titled “Swap the pin and unpin button labels”
add_filter( 'alter_bpsp_get_pin_post_label',   fn() => __( 'Feature',   'mytd' ) );
add_filter( 'alter_bpsp_get_unpin_post_label', fn() => __( 'Unfeature', 'mytd' ) );

The same values can be set without code in Appearance → Button Labels. Use the filter when you need conditional logic (e.g., different labels per user role).

Change the pin badge ribbon colour

Section titled “Change the pin badge ribbon colour”
// Overrides the colour picker on the Appearance tab.
add_filter( 'bpsp_activity_pinned_tag', function ( $html ) {
    return str_replace(
        'style="background:',
        'style="background: #e67e22; /* original: ',
        $html
    );
} );

Or simply target .bpsp-pinned-post-tag span in CSS (see Layer 1 above), which is cleaner for static brand colours.

RTL support

Section titled “RTL support”

The plugin ships separate RTL stylesheets (public/css-rtl/buddypress-sticky-post-public.css and public/css-rtl/bp-sticky-post-bb.css). They are enqueued automatically when the site uses an RTL locale. No theme work required.

Dark-mode notes

Section titled “Dark-mode notes”

v2.3.8 introduced a JavaScript MutationObserver that monitors the <html> and <body> elements and mirrors any active dark-mode class onto body.bpsp-dark. The following theme-specific class names are watched:

  • Reign: html.dark-mode
  • BuddyX: body.buddyx-dark-theme / body.buddyx-dark-mode / body.bx-dark-theme
  • BuddyBoss: body.bb-dark-mode / body.bb-dark-mode-on
  • WP Dark Mode plugin: html.wp-dark-mode-active

The plugin’s stylesheet then uses body.bpsp-dark .bpsp-pinned-post-tag to adjust badge contrast. If your theme uses a different class, you can either target it directly in your theme’s CSS or use the filter in Layer 3 to inject a class attribute into the badge element.

Section titled “Related”