How to add a lock icon to restricted links using Ultimate Members

The Ultimate Members plugin allows you to restrict content to logged in users.

If you want to put a lock icon () on links directing to a restricted page, simply add the following JavaScript code to your site:

				
					/**
 * Restricted Posts
 */
( function( $ ) {
	$( 'a' ).each( function() {
		if (
			( $.inArray( $( this ).attr( 'href' ), RESTRICTED_POSTS ) !== -1 )
			|| $( this ).is( 'a[href*="tmstv"], .download-link' )
		) {
			$( this ).addClass( 'restricted-post' );
			$( this ).html( '<span>' + $( this ).html().trim() + '</span>' );
			$( this ).prepend( '<i class="restricted-post-icon fa-sharp fa-regular fa-lock"></i>' );
		}
	} );
} )( jQuery );

And also add the following code to your functions.php:

				
					/**
 * Restricted Posts
 */

/**
 * Get restricted posts.
 */
function mm_get_restricted_posts() {
	global $wpdb;

	$restricted_posts = $wpdb->get_results(
		$wpdb->prepare( "SELECT `post_id` AS `ID` FROM `{$wpdb->prefix}postmeta` WHERE `meta_key` = 'um_content_restriction' AND `meta_value` LIKE %s", '%s:26:"_um_custom_access_settings";b:1;%' )
	);

	$permalinks = array();
	foreach ( $restricted_posts as $restricted_post ) {
		$permalinks[] = get_permalink( $restricted_post->ID );
	}
	
	return $permalinks;
}

/**
 * Pass restricted posts to javascript.
 */
add_action( 'wp_enqueue_scripts', function() {
	wp_localize_script(
		'hello-elementor-child',
		'RESTRICTED_POSTS',
		mm_get_restricted_posts(),
	);
}, 21 );

Note 1: Be sure to replace hello-elementor-child with the handle of your script.

Note 2: We are assuming that you are already loading Font Awesome on your site.