Skip to:
Content
Pages
Categories
Search
Top
Bottom

Adding classes to profile fields

  • @applegateian

    Participant

    Hi there

    I’m adding profile fields for members to add additional data to their profile.

    Some of these are checkboxes and the user can select more than one.

    What I want to do is give a unique class to each of the results that come back, to apply styles to these.

    There are four options for the user:

    And the markup returned is:

    I don’t seem to be able to add html to the profile fields or any other area. Is there a way to do this? I want to do something for each item like <div id="size500">£500K</div>

    Thanks,

    Ian

Viewing 25 replies - 1 through 25 (of 32 total)
  • @danbp

    Participant

    hi @applegateian,

    read here how to fetch checkbox,radio and multiselect datas

    1) give each check box a unique name
    2) create a filter function with your css items around the echo $data.
    3) add the filter to a profile action
    4) done

    @applegateian

    Participant

    Thanks @danbp – I’m not entirely sure how to create that filter function, can you expand on that?

    The four unique names are:

    • £0-£100k
    • £100k-£500k
    • £500k-£2m
    • £2m+

    thanks,

    Ian

    @danbp

    Participant

    @applegateian

    You create a new field on profile (ie. title=Amount)
    This field is a checkbox type field
    You have 4 items to check, so you need to create 4 checkboxes.

    The field name called by the function correspond to the title you give to your new field. So you actually have 1 field name and 4 checkbox values.

    The example above will output the checked value by the user on the member profile header (bp_before_member_header_meta)

    function my_moneytizer() {
    if ( $money = xprofile_get_field_data( 'Amount', bp_get_member_user_id() ) ) :
        foreach ( $money as $mon ) { 
    
    	echo '<br/><div class="checkit">';
                echo '<span>Earned today:&nbsp;</span>';
    		echo $data;
    	echo '</div>';
    	}
    endif;
    }
    add_filter ( 'bp_before_member_header_meta', 'my_moneytizer' );

    @applegateian

    Participant

    Hi @chouf1

    Thanks for this, but I don’t really follow. The moneytizer example has really confused me, can you let me know how I could do this if the title of my field is Budget and the four checkboxes are

    • £0-£100k
    • £100k-£500k
    • £500k-£2m
    • £2m+

    thanks,

    Ian

    @danbp

    Participant

    Try first and ask after when you receive some help ! 🙄

    in the example, simply replace Amount by Budget and give it a try

    The function checks for “Budget” and the “foreach” looks for the checked box. So you will finally only see the checked box value. This data can be styled by using this:

    div.checkit span {your css stuff}

    @applegateian

    Participant

    Thanks for the advice @danbp – I have given this a go but really can’t get the code correct.

    Sorry to ask again, but with my four check boxes being as follows, can you let me know what to put in that snipped of code for functions.php? These are the checkboxes I have with the title Budget:

    • £0-£100k
    • £100k-£500k
    • £500k-£2m
    • £2m+

    Thanks,

    Ian

    @applegateian

    Participant

    Can anyone help me with this one? I know it’s probably really simple but I’m struggling to get this to work.

    Thanks

    @modemlooper

    Moderator

    If you are referring to what the users see and not the admin like in your screenshot you can just target with CSS no need to use a function.

    The CSS is:

    #buddypress .standard-form .field_2 div.checkbox label

    field_2 could be different depending on where you placed the checkboxes in the admin.

    @applegateian

    Participant

    Thanks @modemlooper

    So the checkboxes for ‘budget’ fall under a third tab within admin:

    Would that need something different?

    @applegateian

    Participant

    Sorry to chase, can anybody help clarify this? Thanks again.

    @henrywright-1

    Member

    @applegateian each checkbox should have a unique ‘id’ which you can use to target specific checkboxes.

    Do you have a link to your page with the checkboxes on it?

    @applegateian

    Participant

    Hi @henrywright-1

    The site is behind a password, anywhere I can DM you?

    I just can’t see how to add a unique id to each checkbox.

    Thanks,

    Ian

    @bphelp

    Participant

    @applegateian
    Have you tried using firefox in conjunction with firebug to target those elements? You could also use google chromes or IE’s dev tools.

    @applegateian

    Participant

    Hi @bp-help yes I have, there is no id coming through on the checkboxes, they are coming out without any html wrapped around them, eg:

    <div id="profileProjectSize">
    	£0-£100k, £100k-£500k, £500k-£2m, £2m+	
    </div>

    I can’t see how to give each one an ID
    Thanks

    @bphelp

    Participant

    @applegateian
    I just created a checkbox called “Sign up for our newsletter” and this is what is return when I inspect the element:

    
    <div class="editfield field_21 field_sign-up-for-our-newsletter">
    
    				
    				
    				
    				
    				
    				
    					<div class="checkbox">
    						<span class="label">Sign up for our newsletter </span>
    
    						<label><input checked="checked" type="checkbox" name="field_21[]" id="field_22_0" value="Yes"> Yes</label>					</div>
    
    				
    				
    				
    									<p class="field-visibility-settings-toggle" id="field-visibility-settings-toggle-21">
    						This field can be seen by: <span class="current-visibility-level">Anyone</span> <a href="#" class="visibility-toggle-link">Change</a>
    					</p>
    
    					<div class="field-visibility-settings" id="field-visibility-settings-21" style="display: none;">
    						<fieldset>
    							<legend>Who can see this field?</legend>
    
    							<ul class="radio"><li><label for="see-field_public"><input type="radio" id="see-field_public" name="field_21_visibility" value="public" checked="checked"> Anyone</label></li><li><label for="see-field_loggedin"><input type="radio" id="see-field_loggedin" name="field_21_visibility" value="loggedin"> Logged In Users</label></li><li><label for="see-field_adminsonly"><input type="radio" id="see-field_adminsonly" name="field_21_visibility" value="adminsonly"> Admins Only</label></li><li><label for="see-field_friends"><input type="radio" id="see-field_friends" name="field_21_visibility" value="friends"> My Friends</label></li></ul>
    						</fieldset>
    						<a class="field-visibility-settings-close" href="#">Close</a>
    					</div>
    				
    				
    				<p class="description"></p>
    			</div>
    

    I could see how this could be targeted. Are you inspecting on the edit profile page that has the checkbox’s?

    @applegateian

    Participant

    Hi there

    Thanks @bp-help for the response. I’m not inspecting on the edit profile page, no, because I am displaying the ‘budget’ information for site visitors.

    It’s on the view profile page ( /profile) that I am showing this field using:

    	<div id="profileProjectSize">
    		<?php 
    		$data=bp_get_member_profile_data(array('field'=>'Budget'));
    		echo $data; 
    		?>
    	</div>	

    If I go to edit profile page, I can see the following for a checkbox:

    <label><input type="checkbox" name="field_229[]" id="field_758_0" value="£0-£100k"> £0-£100k</label>

    How would I get that unique id to show on the view profile page where I am using it?

    @applegateian

    Participant

    Sorry, meant to put @bphelp

    @bphelp

    Participant

    @applegateian
    If your on the view profile page and you are inspecting with dev tools you should see a tr class with the field_ID followed by td class label and td class data. You should be able to use those to your advantage.

    @applegateian

    Participant

    That’s what is strange @bphelp – when I inspect element in Chrome, there are simply no tags around the checkboxes on view profile:

    @bphelp

    Participant

    @applegateian
    Maybe I am missing something here! Did you add those fields in the dashboard, or was it some custom hack?

    @applegateian

    Participant

    Not sure it’s a custom hack…

    In WordPress admin, I go to Profile Fields

    Then, I have three profile groups in there. The third one is where this budget field sits.

    It’s only available to certain user types, which is why it’s in a separate profile group.

    However, as far as I know @bphelp – none of this is custom or a hack, this is standard BP functionality? Then using this snippet to show the output on the front end:

    
    	<div id="profileProjectSize">
    		<?php 
    		$data=bp_get_member_profile_data(array('field'=>'Budget'));
    		echo $data; 
    		?>
    	</div>	
    

    @henrywright-1

    Member

    Hi @applegateian – I think the problem might be the snippet you’re using to output the data string.

    try doing something like this:

    if ( $items = bp_get_member_profile_data( array( 'field' => 'Budget' ) ) ) {
        foreach ( $items as $item ) {
            // put whatever you want here
            echo $item;
            // put what you want here
        }
    }

    Note: I haven’t tested.

    @applegateian

    Participant

    Hi @henrywright-1

    Thanks for the idea.

    Pasting that in (exactly as it is) doesn’t return anything for Budget.

    How do I add the HTML I want into:

            // put whatever you want here
    

    Cheers

    Ian

    @henrywright-1

    Member

    Is budget a field that you’ve set up under WP Admin > Profile Fields? and is it of type ‘checkbox’? also are you displaying the values on the user’s profile page? if yes to all of these then this should work:

    if ( $items = bp_get_profile_field_data( array( 'field' => 'Budget' ) ) ) {
        foreach ( $items as $item ) { ?>
            <!-- put what you want here -->
            <?php echo $item; ?>
            <!-- put what you want here -->
        <?php }
    }

    Note: I’ve amended the code so you can insert HTML a bit easier

    @applegateian

    Participant

    @henrywright-1 it’s added in /wp-admin/users.php?page=bp-profile-setup – Profile Fields under the Users menu in WP Admin.

    Your code works, thanks..!

    So I can add html into those spaces, and each item is now separated by html…I think that should do it. Thanks so much for the support Team Buddypress 🙂

Viewing 25 replies - 1 through 25 (of 32 total)
  • The topic ‘Adding classes to profile fields’ is closed to new replies.
Skip to toolbar