2/15/12 Add And Remove WordPress User Profile Fields And Display Them Within Your Theme

1/4 teachingyou.net/wordpress/add-and-remove-wordpress-user-profile-fields/
0

Add And Remove WordPress User Profile Fields And Display
Them Within Your Theme
I recently had to remove and add fields to the user profile of WordPress for one of my clients. The instructions
were simple and I had to remove quite a bit of fields which they specified and also had to add a way for the
users to upload an image.
So today I will show you two types of ways to remove fields, plus how to add your upload functionality already
build into WordPress. I will also show you how to retrieve and display your user information.
Here is the code to remove first couple of fields
Next we have to unset some fields
1
2
3
4
5
6
7
8
9
10
11
12
13
//hides the personal options
1unction hide_personal_options(){
echo "\n" . '<script type="text/javascript"jQuery(document).ready(1unction($) {
$(\'form#your-profile h3:first\').hide();
$(\'form#your-profile table:first\').hide();
$(\'form#your-profile\').show();

$(\'label[1or=url], input#url\').hide();
});

</script' . "\n";
}
add_action('admin_head','hide_personal_options');
1
2
3
4
5
6
7
//remove default fields
1unction hide_profile_fields( $contactmethods ) {
unset($contactmethods['aim']);
unset($contactmethods['jabber']);
unset($contactmethods['yim']);
return $contactmethods;
}
2/15/12 Add And Remove WordPress User Profile Fields And Display Them Within Your Theme
2/4 teachingyou.net/wordpress/add-and-remove-wordpress-user-profile-fields/
Okay, now that we have removed our fields we need to add an upload field and two extra fields.
Our upload functionality wont work yet, so here is the code to make it work.
7
8
}
add_filter('user_contactmethods','hide_profile_fields',10,1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );

1unction my_show_extra_profile_fields( $user ) { ?

<h3Extra profile information</h3

<table class="form-table"

<tr
<th<label 1or="image"Profile Image</label</th

<td
<img src="<?php echo esc_attr( get_the_author_meta( 'image', $user-ID ) ); ?"
<input type="text" name="image" id="image" value="<?php echo esc_attr( get_the_author_meta( 'image', $user-ID ) ); ?"
<span class="description"Please upload your image 1or your profile.</span
</td
</tr

<tr
<th<label 1or="image"Your Age</label</th

<td
<input type="text" name="age" id="age" value="<?php echo esc_attr( get_the_author_meta( 'age', $user-ID ) ); ?"
<span class="description"Please type your age.</span
</td
</tr

<tr
<th<label 1or="image"Interests</label</th

<td
<input type="text" name="interest" id="interest" value="<?php echo esc_attr( get_the_author_meta( 'interest', $user-ID ) ); ?"
<span class="description"Type your Interests here.</span
</td
</tr

</table
<?php }
1
2
3
4
5
6
7
8
9
10
1unction zkr_profile_upload_js() {
?<script type="text/javascript"
jQuery(document).ready(1unction() {
jQuery(document).find("input[id^='uploadimage']").live('click', 1unction(){
//var num = this.id.split('-')[1];
formfield = jQuery('#image').attr('name');
tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');

window.send_to_editor = 1unction(html) {
imgurl = jQuery('img',html).attr('src');
2/15/12 Add And Remove WordPress User Profile Fields And Display Them Within Your Theme
3/4 teachingyou.net/wordpress/add-and-remove-wordpress-user-profile-fields/
Now we need to have a way to save our field data.
Thats it your new fields are added and you should be able to save them now. Next we need to be able to display
our fields. You can put the following code anywhere you would like to display your data.
Ive written the main user profile code in to a plugin for you so you can download it and see how it works for
yourself.
Hope you enjoyed this tutorial and I just want to wish you all happy holidays and a merry Christmas from
TeachingYou.net
Related Posts:
WordPress Stats: Create A Simple Stats Plugin For Your Site
Custom Pagination for your WordPress themes
Wordpress 3.3 (sonny) Comes with the WP Editor API the power of TINYMCE
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
imgurl = jQuery('img',html).attr('src');
jQuery('#image').val(imgurl);
tb_remove();
}

return false;
});
});
</script
<?php
}
add_action('admin_head','zkr_profile_upload_js');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox'); //thickbox styles css
1
2
3
4
5
6
7
8
9
10
11
12
add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );

1unction my_save_extra_profile_fields( $user_id ) {

i1 ( !current_user_can( 'edit_user', $user_id ) )
return false;

update_usermeta( $user_id, 'image', $_POST['image'] );
update_usermeta( $user_id, 'age', $_POST['age'] );
update_usermeta( $user_id, 'interest', $_POST['interest'] );
}
1
2
3
4
5
<img src="<?php echo the_author_meta('image'); ?" style="height:50px; width:50px;"

Age: <?php echo the_author_meta('age'); ?

Interests: <?php echo the_author_meta('interest'); ?
2/15/12 Add And Remove WordPress User Profile Fields And Display Them Within Your Theme
4/4 teachingyou.net/wordpress/add-and-remove-wordpress-user-profile-fields/
About Morn
I'm a senior PHP developer that is passionate about WordPress, Coding and Marketing. I'm the owner of teachingyou.net and I
hope that you will enjoy my writing and teaching.
View all posts by Morn
Lie
M Subscribe by email RSS
Sort b popular now
6 Dirty Reasons Why You Suck At WordPress Theme Development
How to Build Your Own Custom WordPress Premium Theme Admin Part 2

Shoing 2 comments
Trackback URL http://teachingyou.net/wordpress/add-and-remove-wordpress-user-profile-fields/trackback/
Add Ne Comment
Thanks to this article.. :)
Sandeep816
Like 3 weeks ago
No Problem, hope it was helpful. :)
Morn
Like 3 weeks ago in reply to Sandeep816
Proudl powered b WordPress.