Datepicker in User Profile fields
I am working on building custom user profiles in my ClassiPress installation. If you are like me and working to build a community, and not just a generic classified ad service, you probably share my frustration in the inadequacy the user profiles in ClassiPress. But if you learn the best practice -- create a child theme, and do not modify the original files -- you'll find there is more you can do than you realize to customize the Profile Edit page.
To illustrate, I'll show you how to add custom fields, remove those pesky "extended" fields, and modify the date fields so they use the jQuery UI datepicker.
I'll assume you already know how to set up a child theme in WordPress. No need to rehash all of that here.
To maintain sanity, create a custom_user_fields.php file in the child theme. You can use require_once( 'custom_user_fields.php' ); in your functions.php to make sure the file executes.
In the parent theme, look for includes/theme-profile.php. Copy the entire function, cp_profile_fields and paste it into your custom_user_fields.php. (Notice, also, in theme-profile.php, the global variable, $appthemes_extended_profile_fields.)
Let's start by removing the fields "PayPal Email," "Active Membership Pack," and "Membership Pack Expires Date." In your new cp_profile_fields function, insert the following lines immediately after the line "global $appthemes_extended_profile_fields;"
Code:
unset( $appthemes_extended_profile_fields['paypal_email'] );
unset( $appthemes_extended_profile_fields['active_membership_pack'] );
unset( $appthemes_extended_profile_fields['membership_expires'] );
Next, let's add some new fields. ClassiPress has a hook available just for that purpose:
Code:
add_filter( 'appthemes_extended_profile_fields', 'sm_add_profile_fields' );
function sm_add_profile_fields( $fields ) {
$fields['phone_number'] = array(
'title'=> __('Phone Number:','appthemes'),
'type' => 'text',
'description' => __('Enter your phone number to allow others to easily contact you by phone.','appthemes')
);
$fields['a_date'] = array(
'title' => __('A Date:', 'appthemes'),
'type' => 'date',
'description' => __('Pick a date. Any date.', 'appthemes')
);
return $fields;
}
So now, you've added a phone number field and a date field. But the user interface on that date field isn't exactly very friendly. So we can use a jQuery UI datepicker.
To start building your datepicker, go out and find a stylesheet for your datepicker. If you
download jQuery UI, including datepicker, you'll find a couple of examples in the zip file you'll download, under /development-bundle/themes. Just look for the file jquery.ui.datepicker.css and place it in your child theme directory (or in a subdirectory, if you're that organized).
In your functions.php, use this code to activate the jQuery UI datepicker and make it pretty:
Code:
add_action( 'wp_enqueue_scripts', 'register_datepicker' );
function register_datepicker() {
wp_enqueue_script('jquery-ui-datepicker' );
wp_register_style( 'cp_child_datepicker', get_bloginfo( 'stylesheet_directory' ) . '/jquery.ui.datepicker.css' );
wp_enqueue_style( 'cp_child_datepicker' );
}
Note: If you placed your datepicker stylesheet in a subdirectory, make sure to modify the wp_register_style function appropriately.
Finally, we want to go back to the custom cp_profile_fields() function. You'll see a few field types accounted for under switch( $field_values['type'] ): date, active_membership_pack, and everything else. Obviously, we want to modify the date case:
Code:
case 'date':
?>
<script type="text/javascript">jQuery(function($) { $("#<?php echo $field_id; ?>").datepicker(); });</script>
<input type="text" name="<?php echo $field_id; ?>" id="<?php echo $field_id; ?>" value="<?php esc_attr_e( $the_value ); ?>" class="regular-text" size="35" <?php if(!empty($protected)) echo 'style="display: none;"'; ?> /><br />
<span class="description"><?php echo $field_values['description']; ?></span>
<?php
break;
From here, if you like, you can further modify the format of the date. There's a handy-dandy guide for that on the
jQuery UI demo.
Have fun!
Reply With Quote
You must be an AppThemes customer and logged in to view this response.