Adding classes to profile fields
-
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
-
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) doneThanks @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
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: </span>'; echo $data; echo '</div>'; } endif; } add_filter ( 'bp_before_member_header_meta', 'my_moneytizer' );
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
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}
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
Can anyone help me with this one? I know it’s probably really simple but I’m struggling to get this to work.
Thanks
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.
Thanks @modemlooper
So the checkboxes for ‘budget’ fall under a third tab within admin:
Would that need something different?
Sorry to chase, can anybody help clarify this? Thanks again.
@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?
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
@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.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@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?
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?
Sorry, meant to put @bphelp
@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.That’s what is strange @bphelp – when I inspect element in Chrome, there are simply no tags around the checkboxes on view profile:
@applegateian
Maybe I am missing something here! Did you add those fields in the dashboard, or was it some custom hack?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>
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.
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
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
@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 🙂
- The topic ‘Adding classes to profile fields’ is closed to new replies.