Please or Register to create posts and topics.

Change available reactions

Asgaros Forum v1.14.9 introduces the new asgarosforum_reactions filter which can be used to change the available reactions inside of posts.

 

Add Reaction

The following example (code must be added to the themes functions.php file) shows how a new heart-reaction can be added to the reaction-area:

function add_reactions($reactions) {
  $reactions['heart'] = array(
    'icon' => 'fas fa-heart',
    'screen_reader_text' => __('Click for heart.', 'asgaros-forum')
  );

  return $reactions;
}
add_filter('asgarosforum_reactions', 'add_reactions');
  • hearth: This is the unique slug which is used as an identifier for the added reaction
  • fas fa-heart: This is the icon-class of one of the available FontAwesome icons

To add a color-styling for the added reaction, the following css-rule can be added to Forum -> Appearance -> Custom CSS based on the unique slug of the reaction:

#af-wrapper .post-reactions a:hover .heart,
#af-wrapper .post-reactions .heart .reaction-number,
#af-wrapper .post-reactions .heart .reaction-active {
    color: rgba(233, 30, 197, 1);
}

 

Remove Reaction

The following example (code must be added to the themes functions.php file) shows how the dislike-reaction can be removed from the reaction-area:

function remove_reactions($reactions) {
  unset($reactions['down']);

  return $reactions;
}
add_filter('asgarosforum_reactions', 'remove_reactions');

 

N3k0, RUSev and 2 other users have reacted to this post.
N3k0RUSevtehnicusheavietnam
If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

Love this function, add more personality for each forum 😀

A suggest, how about add a toolbox hover in each icon and display “I Liked”, “I Dislike”, “Loved!”, “custom text for each icon you add”

And i want to add some nice hover effect, something like facebook, but i can make this works :P, example

#af-wrapper .post-reactions .heart,
#af-wrapper .post-reactions .heart .reaction-active {
  	transition: transform .5s; /* Animation */
}

#af-wrapper .post-reactions a:hover .heart {
  transform: scale(1.5);
}

Cheers!

Hi @asgaros

Pardon me!

I hope this is due to errors on my site?

Or I should pay attention to this.

Hello @rusev

What you actually mean? Does the example-code produce errors on your site?

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

This is a great option! Thanks for sharing. Is there a way to add these reactions to the recent topics widget so people can like/dislike them from there instead of having to go all the way into the post?

SolarFlare has reacted to this post.
SolarFlare

I was able to mimic the Facebook reaction icons as closely as possible. Would be nice to actually be able to use an image instead of the font awesome icons, but this is the next best thing:

Here is the PHP I used:

function add_reactions($reactions) {
      $reactions['heart'] = array(
        'icon' => 'fas fa-heart',
        'screen_reader_text' => __('Love', 'asgaros-forum')
      );
      $reactions['laugh'] = array(
        'icon' => 'fas fa-grin-tears',
        'screen_reader_text' => __('Haha', 'asgaros-forum')
      );
      $reactions['surprise'] = array(
        'icon' => 'fas fa-surprise',
        'screen_reader_text' => __('Wow', 'asgaros-forum')
      );
      $reactions['sad'] = array(
        'icon' => 'fas fa-sad-tear',
        'screen_reader_text' => __('Sad', 'asgaros-forum')
      );
      $reactions['angry'] = array(
        'icon' => 'fas fa-angry',
        'screen_reader_text' => __('Angry', 'asgaros-forum')
      );
      return $reactions;
}
add_filter('asgarosforum_reactions', 'add_reactions');

 

And the CSS:

#af-wrapper .post-reactions .reaction-icon::before,
#af-wrapper .post-reactions a:hover,
#af-wrapper .post-reactions .reaction-active {
    font-size: 30px !important;
    text-shadow: 1px 1px #000000;
    transition: transform 2s;
}
#af-wrapper .post-reactions .reaction-number {
    font-size: 10px;
}
#af-wrapper .post-reactions a:hover .down,
#af-wrapper .post-reactions .down .reaction-icon::before,
#af-wrapper .post-reactions .down .reaction-number,
#af-wrapper .post-reactions .down .reaction-active {
    color: #D5234C;
}
#af-wrapper .post-reactions a:hover .up,
#af-wrapper .post-reactions .up .reaction-icon::before,
#af-wrapper .post-reactions .up .reaction-number,
#af-wrapper .post-reactions .up .reaction-active {
    color: #548DFF;
}
#af-wrapper .post-reactions a:hover .heart,
#af-wrapper .post-reactions .heart .reaction-icon::before,
#af-wrapper .post-reactions .heart .reaction-number,
#af-wrapper .post-reactions .heart .reaction-active {
    color: #F55064;
}
#af-wrapper .post-reactions a:hover .laugh,
#af-wrapper .post-reactions .laugh .reaction-icon::before,
#af-wrapper .post-reactions .laugh .reaction-number,
#af-wrapper .post-reactions .laugh .reaction-active {
    color: #FFDA6A;
}
#af-wrapper .post-reactions a:hover .surprise,
#af-wrapper .post-reactions .surprise .reaction-icon::before,
#af-wrapper .post-reactions .surprise .reaction-number,
#af-wrapper .post-reactions .surprise .reaction-active {
    color: #FFDA6A;
}
#af-wrapper .post-reactions a:hover .sad,
#af-wrapper .post-reactions .sad .reaction-icon::before,
#af-wrapper .post-reactions .sad .reaction-number,
#af-wrapper .post-reactions .sad .reaction-active {
    color: #FFDA6A;
}
#af-wrapper .post-reactions a:hover .angry,
#af-wrapper .post-reactions .angry .reaction-icon::before,
#af-wrapper .post-reactions .angry .reaction-number,
#af-wrapper .post-reactions .angry .reaction-active {
    color: #D5234C;
}

 

Uploaded files:
  • Capture.PNG
Asgaros, Andreas and Thierry have reacted to this post.
AsgarosAndreasThierry

I know this topic is quite old, but I have question regarding this topic.

How can I display the number of heart reactions in a user’s profile? By default, only the number of thumbs up is displayed here.

Hello @jan-1988

For this you probably have to use the asgarosforum_custom_profile_content hook to add your custom logic (displaying and calculation).

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

@asgaros When I post just the heart code it works fine, but if I post multiple reactions I get a website critical errors.

function add_reactions($reactions) {
$reactions[‘amar’] = array(
‘icon’ => ‘fas fa-heart’,
‘screen_reader_text’ => __(‘Amar’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘divertido’] = array(
‘icon’ => ‘fas fa-laugh’,
‘screen_reader_text’ => __(‘Divertido’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘triste’] = array(
‘icon’ => ‘fas fa-sad-tear’,
‘screen_reader_text’ => __(‘Triste’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘enojado’] = array(
‘icon’ => ‘fas fa-angry’,
‘screen_reader_text’ => __(‘Enojado’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘sorprendido’] = array(
‘icon’ => ‘fas fa-surprise’,
‘screen_reader_text’ => __(‘Sorprendido’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘genialidad’] = array(
‘icon’ => ‘fas fa-fire’,
‘screen_reader_text’ => __(‘Genialidad’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘elegante’] = array(
‘icon’ => ‘fas fa-lightbulb’,
‘screen_reader_text’ => __(‘Elegante’, ‘asgaros-forum’)
);
return $reactions;
}

add_filter(‘asgarosforum_reactions’, ‘add_reactions’);

Figured it out, you only need one “return $reactions;”

https://stackoverflow.com/questions/78215621/wordpress-coding-critical-error-asgaros-forum-reactions-to-posts