Apply CSS for certain Membership

I have 2 standard membership groups (made with membership 2 pro), group A and B. I have an event (Events+) that I want both groups to be able to view but only for group B to RSVP. I understand that I will be able to achieve this by adding

".wpmudevevents-buttons{ display:none; }

However, I do not know how to apply it in a way where it would only hide the RSVP for group A.

  • Oguz

    Hey Yasmine ,

    Hope you're doing well today.

    Membership 2 Pro adds CSS classes to body tag based on current user membership type. It's like ms prefix and membership type ID, for example, ms-99. If you want to add some CSS codes for specific membership you can use that. To find the membership ID you can go to Membership 2 > Memberships and hover over Shortcodes show button like this;

    Then you can add your styles like this;

    .ms-99 .wpmudevevents-buttons{ display:none; }

    Please don't forget to update number 99, it should be different number for your situation.

    Cheers!
    Oguz

    • Yasmine

      Hi Oguz,

      Thanks for the reply. Is there anyway I can make this more dynamic? In my case scenario I've only listed 2 groups but in the real system we intend to have multiple groups with different access levels. What I am trying to do is to be able to set a couple of approved groups that are allowed to RSVP and the rest only be able to view the event. These groups will vary with every new event added, hence I don't think that hard coding the membership ID will be suitable however please advise me otherwise.

      Sorry I didn't make myself clearer before. Thanks.

  • Oguz

    Hey Yasmine ,

    Hope you're well today.

    Thanks for the information. I think I understand what you are trying to do. For every event, you need to add CSS code for different membership. So maybe you can try WP Add Custom CSS plugin. It allows you to add custom CSS for specific post/page. Just activate it, go Add Custom CSS panel then activate Events from post types section. Now, you should be able to add custom CSS while creating/editing Event. Is this what you trying to solve?

    Cheers!
    Oguz

  • Yasmine

    Hi Oguz,

    I've been thinking of some methods to the issue and came up with something like this:
    1) use custom fields on event to enable admin to select which type of member can view the event (have to query the membership table)

    2) create a function - if user is on the event page, check their membership type, and compare it against the values in event page custom field

    3) if no access, inject display:none to the CSS

    Please let me know if this method is feasible.

    Thanks!

  • Oguz

    Hey Yasmine ,

    Hope you're well today.

    Yes, you can achieve that but you need custom coding. I think hundreds of membership type is a rare thing. I am sharing basic codes for what you want and you can modify it as you want. You can put these codes to your theme's functions.php which is located at wp-content/themes/your-theme.

    /* Membership based CSS */
    function membership_id_metabox_build($post){
    	$current_ids = get_post_meta( $post->ID, 'membership_ids', true );
    	?>
    	<div class='inside'>
    		<h3>ID's</h3>
    		<p>
    			<input type="text" name="membership_ids" value="<?php echo $current_ids; ?>" placeholder="separate with ," />
    		</p>
    	</div>
    	<?php
    }
    
    function add_membershipID_metabox(){
    	add_meta_box( 'membership_id_metabox', 'Membership ID\'s Can Register', 'membership_id_metabox_build', 'incsub_event', 'side', 'low' );
    }
    add_action('add_meta_boxes_incsub_event', 'add_membershipID_metabox');
    
    function event_save_meta_boxes_data($post_id)
    {
    	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
    		return;
    	}
    
    	if ( ! current_user_can( 'edit_post', $post_id ) ){
    		return;
    	}
    
    	if ( isset( $_REQUEST['membership_ids'] ) ) {
    		update_post_meta( $post_id, 'membership_ids', sanitize_text_field( $_POST['membership_ids'] ) );
    	}
    }
    add_action( 'save_post_incsub_event', 'event_save_meta_boxes_data', 10, 2 );
    
    function set_post_class_for_events($classes, $class, $post_id){
    	if(is_singular('incsub_event')){
    		$member = MS_Model_Member::get_current_member();
    		$membershipIDS = $member->get_membership_ids();
    		$current_ids = get_post_meta($post_id, 'membership_ids', true);
    		$current_ids_arr = explode(',', $current_ids);
    		$intersect = array_intersect($membershipIDS, $current_ids_arr);
    		if(count($intersect)){
    			$classes[] = 'remove-buttons';
    		}
    	}
    
    	return $classes;
    }
    add_filter('post_class', 'set_post_class_for_events', 10, 3);

    It adds a new meta box to event edit page and you can specify membership ids in there. At the single event page, it adds a remove-buttons class to post classes if current member's membership not allowed in the event metabox. And you can use .remove-buttons class to hide with CSS.

    I hope that helps!
    Cheers!
    Oguz

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.