Results 1 to 2 of 2

Thread: Datepicker in User Profile fields

  1. #1
    Thread Starter
    Newbie joeventures's Avatar
    Join Date
    Jun 2011
    United States
    Thanked 3 Times in 2 Posts

    Cool 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;"
    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:
    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:
    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:

    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>
    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!

  2. #2
    Veteran barukar's Avatar
    Join Date
    Sep 2010
    Brasil, São Paulo, SP
    Thanked 742 Times in 623 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!
    Projects: ClassiNoiva - Classimóveis - vocênoenem - i50 - Clube DETRAN

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Help editing ( adding / removing ) user profile fields
    By fedeogue in forum ClassiPress General Discussion
    Replies: 1
    Last Post: January 13th, 2012, 08:37 AM
  2. User profile problems when click on classipress user admin
    By terenztan in forum ClassiPress General Discussion
    Replies: 19
    Last Post: October 24th, 2011, 01:03 PM
  3. More Fields in Registerform and Profile-Page / Custom Fields
    By magicfingers in forum ClassiPress General Discussion
    Replies: 2
    Last Post: September 4th, 2011, 05:39 PM
  4. Adding fields to user profile
    By rtibbs4 in forum ClassiPress General Discussion
    Replies: 1
    Last Post: April 18th, 2010, 11:01 PM