Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Add textarea sample with colorpicker in theme options page #74

Closed
wants to merge 7 commits into from

3 participants

Frank Bültge Konstantin Kovshenin Ian Stewart
Frank Bültge

Add textarea with colorpicker on theme options page for see an example
and easy to set an color for textarea. Include js and css only for admin
theme options page for works with fantastic of WP core js libary.

Thanks for share this theme and i hope you like the enhancement.
I have also an solution for use the values in the customize library of WP 3.4 and if you like this, I will add also this solution for customize the example fields in the customizer in frontend.

Best regards

Frank Bültge Add colorpicker example on theme options page
Add textarea with colorpicker on theme options page for see an example
and easy to set an color for textarea. Include js and css only for admin
theme options page for works with fantastic of WP core js libary.
a06c787
Frank Bültge

see this screenshot for the result.

Konstantin Kovshenin
Collaborator

Just a note.. Farbtastic is deprecated and will not ship with core as of 3.5, it's replaced with the new Iris color picker which will be used throughout core.

Frank Bültge

Yes, I had read this and follow the ticket. But current it works and with WP 3.5 I will change to the next solution. Current is inside the nightly build the fantastic lib. It is decided for the Iris; I though, that was not decided in the current position?

Konstantin Kovshenin
Collaborator

But current it works

And it'll probably keep working in 3.5 and 3.6 and 3.7. I'm not saying it's wrong or will break, I'm just giving a heads up that Farbtastic will no longer be "the standard solution" for color picking in WordPress :)

My personal opinion is that we should remove the whole theme options panel in _s and provide a couple of examples for the Customizer only, which will also provide a smooth color-picker transition from 3.4 to 3.5 without having to do anything extra.

Frank Bültge

ah, ok. Yes, I think also and will use the default of the WP core and backend, maybe Iris color picker. I use on my current small theme also the Customizer, the same fields from the theme options page. And my current impression from the users is, that she use the theme options page and the Customizer. The theme options is for an experienced user easy and fast. This is the reason, why I include the theme options and the customizer.

Frank Bültge

No I add a first version of theme customizer form the sample options text and checkbox; maybe the other options later, also include color picker, if you like this idea and source.

Frank Bültge

Now with the other sample fields include a field for a color with color picker.
see http://www.diigo.com/item/image/1j30r/bnhq for options in Customizer

Ian Stewart
Collaborator

And it'll probably keep working in 3.5 and 3.6 and 3.7. I'm not saying it's wrong or will break, I'm just giving a heads up that Farbtastic will no longer be "the standard solution" for color picking in WordPress :)

I'm not that keen on supporting this at the moment. Closing the ticket.

Ian Stewart ianstewart closed this September 13, 2012
Frank Bültge

@ianstewart: but what is with the theme Customizer, he use the default color picker.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 7 unique commits by 1 author.

Sep 07, 2012
Frank Bültge Add colorpicker example on theme options page
Add textarea with colorpicker on theme options page for see an example
and easy to set an color for textarea. Include js and css only for admin
theme options page for works with fantastic of WP core js libary.
a06c787
Sep 09, 2012
Frank Bültge add theme customizer for the example fields 42cc198
Frank Bültge remove theme options include, not important for Customizer 90b0569
Frank Bültge update codex and change string for same as in theme options 92a3395
Frank Bültge add sample select nput field to Customizer 15d780c
Frank Bültge update codex 7c93ada
Frank Bültge add color field include color picker for Customizer a11205b
This page is out of date. Refresh to see the latest.
7  functions.php
@@ -40,7 +40,12 @@ function _s_setup() {
40 40
 	 * Custom Theme Options
41 41
 	 */
42 42
 	//require( get_template_directory() . '/inc/theme-options/theme-options.php' );
43  
-
  43
+	
  44
+	/**
  45
+	 * Custom Theme Options with Customizer
  46
+	 */
  47
+	require( get_template_directory() . '/inc/theme-options/theme-customize.php' );
  48
+	
44 49
 	/**
45 50
 	 * WordPress.com-specific functions and definitions
46 51
 	 */
155  inc/theme-options/theme-customize.php
... ...
@@ -0,0 +1,155 @@
  1
+<?php
  2
+/**
  3
+ * _s Theme Customizer
  4
+ * 
  5
+ * @package _s
  6
+ * @since   _s 1.1-wpcom
  7
+ */
  8
+
  9
+add_action( 'customize_register', '_s_customize_register' );
  10
+/**
  11
+ * Register Customize settings
  12
+ * 
  13
+ * @since   1.1-wpcom
  14
+ * @author  Frank Bueltge <frank@bueltge.de>
  15
+ * @see     class WP_Customize_Control::render_content() in wp-inlcudes
  16
+ * @see     examples for different input fields https://gist.github.com/2968549
  17
+ * @return  void
  18
+ */
  19
+function _s_customize_register( $wp_customize ) {
  20
+	
  21
+	$options = _s_get_theme_options();
  22
+	
  23
+	// Create custom section for custom example options
  24
+	$wp_customize->add_section( '_s_theme_options', array(
  25
+		'title'      => __( 'Theme Options', '_s' ),
  26
+		'priority'   => 35,
  27
+	) );
  28
+	
  29
+	// ===== Sample Checkbox Field =====
  30
+	// Add settings for sample checkbox
  31
+	$wp_customize->add_setting( '_s_theme_options[sample_checkbox]', array(
  32
+		'default'    => $options['sample_checkbox'],
  33
+		'type'       => 'option',
  34
+		'capability' => 'edit_theme_options',
  35
+	) );
  36
+	
  37
+	// Add control and output for sample checkbox
  38
+	$wp_customize->add_control('_s_theme_options_sample_checkbox', array(
  39
+		'label'      => __( 'Sample Checkbox', '_s' ),
  40
+		'section'    => '_s_theme_options',
  41
+		'settings'   => '_s_theme_options[sample_checkbox]',
  42
+		'type'       => 'checkbox',
  43
+	) );
  44
+	
  45
+	// ===== Sample Text Input Field =====
  46
+	// Add field for example text field in custom section
  47
+	$wp_customize->add_setting( '_s_theme_options[sample_text_input]', array(
  48
+		'default'    => $options['sample_text_input'],
  49
+		'type'       => 'option',
  50
+		'capability' => 'edit_theme_options',
  51
+	) );
  52
+	
  53
+	// Add control and output the text field
  54
+	$wp_customize->add_control( '_s_theme_options_sample_text_input', array(
  55
+		'label'      => __( 'Sample Text Input', '_s' ),
  56
+		'section'    => '_s_theme_options',
  57
+		'settings'   => '_s_theme_options[sample_text_input]',
  58
+		'type'       => 'text',
  59
+	) );
  60
+	
  61
+	
  62
+	// ===== Sample Select Input Field =====
  63
+	// Add field for example select field in custom section
  64
+	$wp_customize->add_setting( '_s_theme_options[sample_select_options]', array(
  65
+		'default'    => $options['sample_select_options'],
  66
+		'type'       => 'option',
  67
+		'capability' => 'edit_theme_options',
  68
+	) );
  69
+	
  70
+	// Add control and output for select field
  71
+	$wp_customize->add_control( '_s_theme_options_sample_select_options', array(
  72
+		'label'      => __( 'Sample Select Options', '_s' ),
  73
+		'section'    => '_s_theme_options',
  74
+		'settings'   => '_s_theme_options[sample_select_options]',
  75
+		'type'       => 'select',
  76
+		'choices'    => array(
  77
+			'0' => __( 'Zero', '_s' ),
  78
+			'1' => __( 'One', '_s' ),
  79
+			'2' => __( 'Two', '_s' ),
  80
+			'3' => __( 'Three', '_s' ),
  81
+			'4' => __( 'Four', '_s' ),
  82
+			'5' => __( 'Five', '_s' ),
  83
+		),
  84
+	) );
  85
+	
  86
+	// ===== Sample Radio Buttons Fields =====
  87
+	// Add field for example radio buttons
  88
+	$wp_customize->add_setting( '_s_theme_options[sample_radio_buttons]', array(
  89
+		'default'    => $options['sample_radio_buttons'],
  90
+		'type'       => 'option',
  91
+		'capability' => 'edit_theme_options',
  92
+	) );
  93
+	
  94
+	// Add control and output for select field
  95
+	$wp_customize->add_control( '_s_theme_options_sample_radio_buttons', array(
  96
+		'label'      => __( 'Sample Radio Buttons', '_s' ),
  97
+		'section'    => '_s_theme_options',
  98
+		'settings'   => '_s_theme_options[sample_radio_buttons]',
  99
+		'type'       => 'radio',
  100
+		'choices'    => array(
  101
+			'yes'   => __( 'Yes', '_s' ),
  102
+			'no'    => __( 'No', '_s' ),
  103
+			'maybe' => __( 'Maybe', '_s' ),
  104
+		),
  105
+	) );
  106
+	
  107
+	// ===== Sample Color Picker Field =====
  108
+	// Add settings for color niclude a color picker
  109
+	$wp_customize->add_setting( '_s_theme_options[sample_colorpicker]', array(
  110
+		'default'           => $options['sample_colorpicker'],
  111
+		'type'              => 'option',
  112
+		'sanitize_callback' => 'sanitize_hex_color',
  113
+		'capability'        => 'edit_theme_options',
  114
+	) );
  115
+	
  116
+	// Add control include colorpicker
  117
+	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, '_s_theme_options_ 	sample_colorpicker', array(
  118
+		'label'    => __('Sample Color', '_s'),
  119
+		'section'  => '_s_theme_options',
  120
+		'settings' => '_s_theme_options[sample_colorpicker]',
  121
+    ) ) );
  122
+}
  123
+
  124
+if ( ! function_exists( '_s_get_theme_options' ) ) {
  125
+	
  126
+	/**
  127
+	 * Returns the options array for _s.
  128
+	 *
  129
+	 * @since _s 1.0
  130
+	 * @param $value  String
  131
+	 */
  132
+	function _s_get_theme_options( $value = NULL ) {
  133
+		
  134
+		$saved = (array) get_option( '_s_theme_options' );
  135
+		$defaults = array(
  136
+			'sample_checkbox'       => 'off',
  137
+			'sample_text_input'     => '',
  138
+			'sample_select_options' => '',
  139
+			'sample_radio_buttons'  => '',
  140
+			'sample_textarea'       => '',
  141
+			'sample_colorpicker'    => '#D54E21',
  142
+		);
  143
+	
  144
+		$defaults = apply_filters( '_s_default_theme_options', $defaults );
  145
+	
  146
+		$options = wp_parse_args( $saved, $defaults );
  147
+		$options = array_intersect_key( $options, $defaults );
  148
+	
  149
+		if ( NULL !== $value )
  150
+			return $options[$value];
  151
+	
  152
+		return $options;
  153
+	}
  154
+	
  155
+}
44  inc/theme-options/theme-options.css
... ...
@@ -0,0 +1,44 @@
  1
+#wpcontent select option {
  2
+	padding-right: 5px;
  3
+}
  4
+.image-radio-option td {
  5
+	padding-top: 15px;
  6
+}
  7
+.image-radio-option label {
  8
+	display: block;
  9
+	float: left;
  10
+	margin: 0 30px 20px 2px;
  11
+	position: relative;
  12
+}
  13
+.image-radio-option input {
  14
+	margin: 0 0 10px;
  15
+}
  16
+.image-radio-option span {
  17
+	display: block;
  18
+	width: 136px;
  19
+}
  20
+.image-radio-option img {
  21
+	margin: 0 0 0 -2px;
  22
+}
  23
+
  24
+#colorPickerDiv {
  25
+	z-index: 100;
  26
+	background: #eee;
  27
+	border: 1px solid #ccc;
  28
+	position: absolute;
  29
+	display: none;
  30
+}
  31
+
  32
+#sample-colorpicker-example {
  33
+	-moz-border-radius: 4px;
  34
+	-webkit-border-radius: 4px;
  35
+	border-radius: 4px;
  36
+	border: 1px solid #dfdfdf;
  37
+	margin: 0 7px 0 3px;
  38
+	padding: 4px 14px;
  39
+}
  40
+
  41
+body.rtl .image-radio-option label {
  42
+	float: right;
  43
+	margin: 0 2px 20px 30px;
  44
+}
58  inc/theme-options/theme-options.js
... ...
@@ -0,0 +1,58 @@
  1
+var farbtastic;
  2
+
  3
+( function($) {
  4
+	
  5
+	// set ID or class for the textarea
  6
+	var colorpicker = '#sample-colorpicker',
  7
+			example     = '#sample-colorpicker-example';
  8
+	
  9
+	var pickColor = function(a) {
  10
+		farbtastic.setColor(a);
  11
+		$(colorpicker).val(a);
  12
+		$(example).css('background-color', a);
  13
+	};
  14
+	
  15
+	$(document).ready( function() {
  16
+		$('#default-color').wrapInner('<a href="#" />');
  17
+		
  18
+		farbtastic = $.farbtastic('#colorPickerDiv', pickColor);
  19
+		
  20
+		pickColor( $(colorpicker).val() );
  21
+		
  22
+		$('.pickcolor').click( function(e) {
  23
+			$('#colorPickerDiv').show();
  24
+			e.preventDefault();
  25
+		});
  26
+		
  27
+		$(colorpicker).keyup( function() {
  28
+			var a = $(colorpicker).val(),
  29
+				b = a;
  30
+			
  31
+			a = a.replace(/[^a-fA-F0-9]/, '');
  32
+			if ( '#' + a !== b )
  33
+				$(colorpicker).val(a);
  34
+			if ( a.length === 3 || a.length === 6 )
  35
+				pickColor( '#' + a );
  36
+		});
  37
+		
  38
+		$(document).mousedown( function() {
  39
+			$('#colorPickerDiv').hide();
  40
+		});
  41
+		
  42
+		$('#default-color a').click( function(e) {
  43
+			pickColor( '#' + this.innerHTML.replace(/[^a-fA-F0-9]/, '') );
  44
+			e.preventDefault();
  45
+		});
  46
+		
  47
+		$('.image-radio-option.color-scheme input:radio').change( function() {
  48
+			var currentDefault = $('#default-color a'),
  49
+				newDefault = $(this).next().val();
  50
+			
  51
+			if ( $(colorpicker).val() == currentDefault.text() )
  52
+				pickColor( newDefault );
  53
+			
  54
+			currentDefault.text( newDefault );
  55
+		});
  56
+	});
  57
+	
  58
+} )(jQuery);
64  inc/theme-options/theme-options.php
@@ -45,6 +45,8 @@ function _s_theme_options_init() {
45 45
 	add_settings_field( 'sample_select_options', __( 'Sample Select Options', '_s' ), '_s_settings_field_sample_select_options', 'theme_options', 'general' );
46 46
 	add_settings_field( 'sample_radio_buttons', __( 'Sample Radio Buttons', '_s' ), '_s_settings_field_sample_radio_buttons', 'theme_options', 'general' );
47 47
 	add_settings_field( 'sample_textarea', __( 'Sample Textarea', '_s' ), '_s_settings_field_sample_textarea', 'theme_options', 'general' );
  48
+	// example for colorpicker on textarea
  49
+	add_settings_field( 'sample_colorpicker', __( 'Sample Colorpicker', '_s' ), '_s_settings_field_sample_colorpicker', 'theme_options', 'general' );
48 50
 }
49 51
 add_action( 'admin_init', '_s_theme_options_init' );
50 52
 
@@ -70,6 +72,7 @@ function _s_option_page_capability( $capability ) {
70 72
  * @since _s 1.0
71 73
  */
72 74
 function _s_theme_options_add_page() {
  75
+	
73 76
 	$theme_page = add_theme_page(
74 77
 		__( 'Theme Options', '_s' ),   // Name of page
75 78
 		__( 'Theme Options', '_s' ),   // Label in menu
@@ -77,10 +80,40 @@ function _s_theme_options_add_page() {
77 80
 		'theme_options',               // Menu slug, used to uniquely identify the page
78 81
 		'_s_theme_options_render_page' // Function that renders the options page
79 82
 	);
  83
+	
  84
+	add_action( 'admin_print_scripts-' . $theme_page, '_s_admin_enqueue_scripts' );
80 85
 }
81 86
 add_action( 'admin_menu', '_s_theme_options_add_page' );
82 87
 
83 88
 /**
  89
+ * Properly enqueue styles and scripts for our theme options page.
  90
+ * 
  91
+ * @return   void
  92
+ */
  93
+function _s_admin_enqueue_scripts( $hook_suffix ) {
  94
+	
  95
+	// enqueue styles
  96
+	wp_register_style(
  97
+		'_s_theme_options',
  98
+		get_template_directory_uri() . '/inc/theme-options/theme-options.css',
  99
+		FALSE,
  100
+		FALSE
  101
+	);
  102
+	wp_enqueue_style( '_s_theme_options' );
  103
+	wp_enqueue_style( 'farbtastic' );
  104
+	
  105
+	// enqueue scripts
  106
+	wp_register_script(
  107
+		'_s_theme_options',
  108
+		get_template_directory_uri() . '/inc/theme-options/theme-options.js',
  109
+		array( 'farbtastic' ),
  110
+		FALSE
  111
+	);
  112
+	wp_enqueue_script( '_s_theme_options' );
  113
+}
  114
+
  115
+
  116
+/**
84 117
  * Returns an array of sample select options registered for _s.
85 118
  *
86 119
  * @since _s 1.0
@@ -144,8 +177,9 @@ function _s_sample_radio_buttons() {
144 177
  * Returns the options array for _s.
145 178
  *
146 179
  * @since _s 1.0
  180
+ * @param $value  String
147 181
  */
148  
-function _s_get_theme_options() {
  182
+function _s_get_theme_options( $value = NULL ) {
149 183
 	$saved = (array) get_option( '_s_theme_options' );
150 184
 	$defaults = array(
151 185
 		'sample_checkbox'       => 'off',
@@ -153,6 +187,7 @@ function _s_get_theme_options() {
153 187
 		'sample_select_options' => '',
154 188
 		'sample_radio_buttons'  => '',
155 189
 		'sample_textarea'       => '',
  190
+		'sample_colorpicker'    => '#D54E21',
156 191
 	);
157 192
 
158 193
 	$defaults = apply_filters( '_s_default_theme_options', $defaults );
@@ -160,6 +195,9 @@ function _s_get_theme_options() {
160 195
 	$options = wp_parse_args( $saved, $defaults );
161 196
 	$options = array_intersect_key( $options, $defaults );
162 197
 
  198
+	if ( NULL !== $value )
  199
+		return $options[$value];
  200
+
163 201
 	return $options;
164 202
 }
165 203
 
@@ -245,6 +283,24 @@ function _s_settings_field_sample_textarea() {
245 283
 }
246 284
 
247 285
 /**
  286
+ * Render the sample textarea with colorpicker settings field.
  287
+ */
  288
+function _s_settings_field_sample_colorpicker() {
  289
+	$options = _s_get_theme_options();
  290
+	?>
  291
+	<input type="text" name="_s_theme_options[sample_colorpicker]" id="sample-colorpicker" value="<?php echo esc_textarea( $options['sample_colorpicker'] ); ?>" />
  292
+	<a href="#" class="pickcolor hide-if-no-js" id="sample-colorpicker-example"></a>
  293
+	<input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', '_s' ); ?>" />
  294
+	<div id="colorPickerDiv"></div>
  295
+	<br />
  296
+	<label class="description" for="sample-colorpicker"><?php printf( 
  297
+		__( 'Sample textarea with colorpicker. Default color: %s', '_s' ),
  298
+		'<code id="default-color">' . _s_get_theme_options( 'sample_colorpicker' ) . '</code>'
  299
+	); ?></label>
  300
+	<?php
  301
+}
  302
+
  303
+/**
248 304
  * Renders the Theme Options administration screen.
249 305
  *
250 306
  * @since _s 1.0
@@ -301,6 +357,10 @@ function _s_theme_options_validate( $input ) {
301 357
 	// The sample textarea must be safe text with the allowed tags for posts
302 358
 	if ( isset( $input['sample_textarea'] ) && ! empty( $input['sample_textarea'] ) )
303 359
 		$output['sample_textarea'] = wp_filter_post_kses( $input['sample_textarea'] );
304  
-
  360
+	
  361
+	// The sample textarea with colorpicker must be safe text with the allowed tags for posts
  362
+	if ( isset( $input['sample_colorpicker'] ) && ! empty( $input['sample_colorpicker'] ) )
  363
+		$output['sample_colorpicker'] = wp_filter_post_kses( $input['sample_colorpicker'] );
  364
+	
305 365
 	return apply_filters( '_s_theme_options_validate', $output, $input );
306 366
 }
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.