Title: modifying thwentyelement theme-options.{php,js}
Last modified: August 20, 2016

---

# modifying thwentyelement theme-options.{php,js}

 *  [Paul Biron](https://wordpress.org/support/users/pbiron/)
 * (@pbiron)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/modifying-thwentyelement-theme-optionsphpjs/)
 * theme-options.{php,js} in the twentyeleven theme allows for setting the link_color.
   I’m trying to modify these to allow changing a few other colors (e.g., foreground
   color).
 * I’m able to add the extra fields (and their defaults, etc). However, jQuery completely
   mystifies me and I can’t figure out to modify theme-options.js to associate separate
   color pickers, etc with the new fields.
 * Can anyone help?

Viewing 1 replies (of 1 total)

 *  Thread Starter [Paul Biron](https://wordpress.org/support/users/pbiron/)
 * (@pbiron)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/modifying-thwentyelement-theme-optionsphpjs/#post-2589900)
 * After **MUCH** experimentation I figured it out!
 * I modified theme-options.js so that it is now:
 *     ```
       var link_color ;
       var text_color ;
   
       (function($){
       	var link_pickColor = function(a) {
       		link_color.setColor(a);
       		$('#link-color').val(a);
       		$('#link-color-example').css('background-color', a);
       	};
   
       	var text_pickColor = function(a) {
       		text_color.setColor(a);
       		$('#text-color').val(a);
       		$('#text-color-example').css('background-color', a);
       	};
   
       	$(document).ready( function() {
       		$('#default-link-color').wrapInner('<a href="#" />');
       		$('#default-text-color').wrapInner('<a href="#" />');
   
       		link_color = $.farbtastic('#link-colorPickerDiv', link_pickColor);
       		text_color = $.farbtastic('#text-colorPickerDiv', text_pickColor);
   
       		link_pickColor( $('#link-color').val() );
   
       		$('.link-pickcolor').click( function(e) {
       			$('#link-colorPickerDiv').show();
       			e.preventDefault();
       		});
   
       		$('.text-pickcolor').click( function(e) {
       			$('#text-colorPickerDiv').show();
       			e.preventDefault();
       		});
   
       		$('#link-color').keyup( function() {
       			var a = $('#link-color').val(),
       				b = a;
   
       			a = a.replace(/[^a-fA-F0-9]/, '');
       			if ( '#' + a !== b )
       				$('#link-color').val(a);
       			if ( a.length === 3 || a.length === 6 )
       				link_pickColor( '#' + a );
       		});
   
       		$('#text-color').keyup( function() {
       			var a = $('#text-color').val(),
       				b = a;
   
       			a = a.replace(/[^a-fA-F0-9]/, '');
       			if ( '#' + a !== b )
       				$('#text-color').val(a);
       			if ( a.length === 3 || a.length === 6 )
       				text_pickColor( '#' + a );
       		});
   
       		$(document).mousedown( function() {
       			$('#link-colorPickerDiv').hide();
       			$('#text-colorPickerDiv').hide();
       		});
   
       		$('#link-default-color a').click( function(e) {
       			link_pickColor( '#' + this.innerHTML.replace(/[^a-fA-F0-9]/, '') );
       			e.preventDefault();
       		});
   
       		$('#text-default-color a').click( function(e) {
       			text_pickColor( '#' + this.innerHTML.replace(/[^a-fA-F0-9]/, '') );
       			e.preventDefault();
       		});
       	});
       })(jQuery);
       ```
   
 * Note that I also had to change twentyeleven_settings_field_link_color() accordingly:
 *     ```
       function twentyeleven_settings_field_link_color() {
       	$options = twentyeleven_get_theme_options();
       	$default_options = twentyeleven_get_default_theme_options();
   
       	?>
       	<input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
       	<a href="#" class="link-pickcolor hide-if-no-js" id="link-color-example"></a>
       	<input type="button" class="link-pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
       	<div id="link-colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
       	<br />
       	<span><?php printf( __( 'Default color: %s', 'twentyeleven' ), '<span id="default-link-color">' . $default_options['link_color'] . '</span>' ); ?></span>
       	<?php
       }
       ```
   
 * and modify theme-options.css as follows:
 *     ```
       #text-color-example,
       #link-color-example
       {
       	-moz-border-radius: 4px;
       	-webkit-border-radius: 4px;
       	border-radius: 4px;
       	border: 1px solid #dfdfdf;
       	margin: 0 7px 0 3px;
       	padding: 4px 14px;
       }
       ```
   
 * While this works, maintaining theme-options.js will get more difficult as I add
   more fields that require color pickers. When I get some time, I’ll try to parameterize
   all those functions so that they don’t have to be duplicated for each new field
   I add.

Viewing 1 replies (of 1 total)

The topic ‘modifying thwentyelement theme-options.{php,js}’ is closed to new replies.

## Tags

 * [colorpicker](https://wordpress.org/support/topic-tag/colorpicker/)

 * 1 reply
 * 1 participant
 * Last reply from: [Paul Biron](https://wordpress.org/support/users/pbiron/)
 * Last activity: [14 years, 3 months ago](https://wordpress.org/support/topic/modifying-thwentyelement-theme-optionsphpjs/#post-2589900)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics