Hi guys !!! How to add like button in media gallery item using Buddypress and rtMedia WordPress plugin? Please follow the steps below.
Step 1:
Override the “media-gallery-item.php” in your WordPress theme.
wp-content/themes/mytheme-folder-name/rtmedia/media/media-gallery-item.php
Step 2:
Place the code anywhere inside of your “li” tag.
<?php wdes_rtmedia_like( rtmedia_id(), bp_loggedin_user_id() ); ?>
Step 3:
Paste this code to your functions.php.
function wdes_rtmedia_like( $media_id, $user_id = false ){ ob_start(); global $bp; $main_class = new RTMediaLike; $label = __( 'Like', 'buddypress-media' ); $class = ''; if( $main_class->is_liked( $media_id, $user_id ) && $user_id ){ $label = __( 'Unlike', 'buddypress-media' ); $class = ' unlike'; } if ( ! is_user_logged_in() ) { return; } ?> <span id="media-like-<?php echo $media_id; ?>" class="wdes-rtmedia-like"> <form action="<?php echo trailingslashit( get_rtmedia_permalink( $media_id ) ); ?>like/"> <button type="submit" id="rtmedia-like-button-<?php echo $media_id; ?>" class="wdes-like-btn <?php echo $class; ?>"><span><?php echo $label; ?></span></button> <?php wp_nonce_field( 'rtm_media_like_nonce' . $media_id, 'rtm_media_like_nonce', true, true ); ?> </form> </span> <?php echo ob_get_clean(); }
Step 4:
Paste this code to your .js file. If you don’t have one, please create.
jQuery( document ).ready( function( $ ){ if( $( 'span.wdes-rtmedia-like' ).length ){ $( document ).on( 'click', '.wdes-like-btn', function( e ) { e.preventDefault(); var that = this; var like_nonce = $( this ).siblings( '#rtm_media_like_nonce' ).val(); rtmedia_like = $( this ).attr( 'id' ); $( this ).attr( 'disabled', 'disabled' ); var url = $( this ).parent().attr( 'action' ); $( that ).prepend( '<img class=\'rtm-like-loading\' src=\'' + rMedia_loading_file + '\' style=\'width:10px\' />' ); $.ajax( { url: url, type: 'post', data: { json: true, like_nonce: like_nonce }, success: function( data ) { try { data = JSON.parse( data ); } catch ( e ) { } $( '#' + rtmedia_like + ' span' ).html( data.next ); if( data.next == 'Unlike' ){ $( '#' + rtmedia_like ).addClass( 'unlike' ); }else{ $( '#' + rtmedia_like ).removeClass( 'unlike' ); } $( '.rtm-like-loading' ).remove(); $( that ).removeAttr( 'disabled' ); } }); }); } });
You have now the Like / Unlike button. Happy coding 🙂
Leave a Reply