WordPress.org

1. Paul Biron
   Member
   Posted 1 year ago #
   

   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?

2. Paul Biron
   Member
   Posted 1 year ago #
   

   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.

Topic Closed

This topic has been closed to new replies.