← All changes | README.md +153 -53 1.2.5 → 1.7.3 View file →

		@@ -1,5 +1,5 @@
1		-Customify [](https://travis-ci.org/pixelgrade/customify)
	1	+Customify [](https://travis-ci.org/pixelgrade/customify) [](https://lima.codeclimate.com/github/pixelgrade/customify) [](https://lima.codeclimate.com/github/pixelgrade/customify)
2	2	========
3	3	**A Theme Customizer Booster**
4	4
5	5	With Customify, you can easily add Fonts, Colors, Live CSS Editor and other options to your theme.
		@@ -59,10 +59,8 @@
59	59
60	60	// when working with filters always return filtered value
61	61	return $config;
62	62	}
63		-
64		-
65	63	```
66	64
67	65	The Customify plugin also create's its own defaults this way. You can see that in `customify/customify_config.php`
68	66	Personally I like to simply copy this file in my child theme and include it in `functions.php` with
		@@ -72,8 +70,29 @@
72	70	And after that the sky is the limit, I can style any elements or group of elements in customizer.
73	71
74	72	The intro is over let's get to some advanced stuff.
75	73
	74	+# List of fields
	75	+
	76	+Fields<a name="list_of_fields"></a> | [Live Preview Support!](#live_preview_support) | Description
	77	+------------- | ------------- | -------------
	78	+Text | Yes [with classes](#live_preview_with_classes) | A simple text input
	79	+Textarea | Yes [with classes](#live_preview_with_classes) | A simple text area input
	80	+Ace Editor | Yes [with classes](#live_preview_with_classes) | An ace editor that supports plain_text / css / html / javascript / json / markdown
	81	+Color | Yes | A simple color picker
	82	+Range | Yes | The default html5 range input
	83	+Font | Custom Live Preview | A complete font selector with Live Preview, google fonts, filtrable theme fonts and custom callbacks
	84	+Typography | No | This is a font selector but it will be soon depricated, use Font instead
	85	+Select | No | The standard HTML select
	86	+Radio | No |
	87	+Checkbox | No |
	88	+Upload | No | This field allows you to upload a file which you can use it later in front-end
	89	+Image | No | This is like the upload field, but it accepts only images
	90	+Date | No |
	91	+Pages select | No | The standard WordPress Page Select
	92	+[Select2](https://select2.github.io/) | No | An awesome select
	93	+[Presets](#presets_title) | No | An radio input option to select a group of options (inception style ^^)
	94	+
76	95	# Advanced Things
77	96
78	97	### The $config variable<a name="about_config_var"></a> ###
79	98
		@@ -141,25 +160,8 @@
141	160	}
142	161
143	162	```
144	163
145		-Fields<a name="list_of_fields"></a> | [Live Preview Support!](#live_preview_support) | Description
146		-Text | Yes [with classes](#live_preview_with_classes) | A simple text input
147		-Textarea | Yes [with classes](#live_preview_with_classes) | A simple text area input
148		-Ace Editor | Yes [with classes](#live_preview_with_classes) | An ace editor that supports plain_text / css / html / javascript / json / markdown
149		-Color | Yes | A simple color picker
150		-Range | Yes | The default html5 range input
151		-Typography | No | This is an awesome font selector, it supports standard fonts and google fonts. You can also Group fonts or offer a list of recommended fonts
152		-Select | No | The standard HTML select
153		-Radio | No |
154		-Checkbox | No |
155		-Upload | No | This field allows you to upload a file which you can use it later in front-end
156		-Image | No | This is like the upload field, but it accepts only images
157		-Date | No |
158		-Pages select | No | The standard WordPress Page Select
159		-[Select2](https://select2.github.io/) | No | An awesome select
160		-[Presets](#presets_title) | No | An radio input option to select a group of options (inception style ^^)
161	164	HTML field | No | A field which allows you to add custom HTML in customizer and hook into it with javascript later ;)
162	165
163	166	### Live Preview Support<a name="live_preview_support"></a>
164	167
		@@ -186,29 +188,13 @@
186	188
187	189
188	190	### Conditional fields<a name="conditional_fields"></a>
189	191
190		-Once with 1.2.3 version we've added support for conditional fields. This means that you can use the `show_on` argument
	192	+Along with version 1.2.3 we've added support for conditional fields. This means that you can use the `show_if` argument
191	193	to display a field only when another field has a certain value.
192		-For example this read more label will be visible only when the first checkbox will be active
193		-```
194		-'enable_read_more_button' => array(
195		- 'type' => 'checkbox',
196		- 'label' => esc_html__( 'Enable Read More Button', 'heap' ),
197		- 'default' => 1,
198		-),
199		-'read_more_button_label' => array(
200		- 'type' => 'text',
201		- 'label' => esc_html__( 'Read More Button Text', 'heap' ),
202		- 'default' => '+ READ MORE',
203		- 'show_on' => array( 'enable_read_more_button' ),
204		-)
205		-```
206		-By default, this field compares with '1' value, if you need another value, just add your preference like this
207	194
208		-`'show_on' => array( 'enable_read_more_button', 'custom_value' )`
	195	+This [gist](https://gist.github.com/andreilupu/3a71618fb6d2ea2c2b1429544c667cd1) shows how this can be done.
209	196
210		-
211	197	### Presets<a name="presets_title"></a>
212	198
213	199	Since version 1.1.0 we added support for presets options. With this fields, you can pre-define other options.
214	200	Here is and example of how to config this.
		@@ -215,15 +201,15 @@
215	201
216	202	```
217	203	'theme_style' => array(
218	204	'type' => 'preset',
219		- 'label' => __( 'Select a style:', 'customify_txtd' ),
220		- 'desc' => __( 'Conveniently change the design of your site with built-in style presets. Easy as pie.', 'customify_txtd' ),
	205	+ 'label' => __( 'Select a style:', 'customify' ),
	206	+ 'desc' => __( 'Conveniently change the design of your site with built-in style presets. Easy as pie.', 'customify' ),
221	207	'default' => 'silk',
222	208	'choices_type' => 'select',
223	209	'choices' => array(
224	210	'silk' => array(
225		- 'label' => __( 'Silk', 'customify_txtd' ),
	211	+ 'label' => __( 'Silk', 'customify' ),
226	212	'options' => array(
227	213	'links_color' => '#FAC2A8', //second
228	214	'headings_color' => '#A84469', //main
229	215	'body_color' => '#ffffff', // -
		@@ -231,9 +217,9 @@
231	217	'body_font' => 'Merriweather'
232	218	)
233	219	),
234	220	'red' => array(
235		- 'label' => __( 'Urban', 'customify_txtd' ),
	221	+ 'label' => __( 'Urban', 'customify' ),
236	222	'options' => array(
237	223	'links_color' => 'red',
238	224	'headings_color' => 'red',
239	225	'body_color' => 'red',
		@@ -241,9 +227,9 @@
241	227	'body_font' => 'Pacifico'
242	228	)
243	229	),
244	230	'black' => array(
245		- 'label' => __( 'Black', 'customify_txtd' ),
	231	+ 'label' => __( 'Black', 'customify' ),
246	232	'options' => array(
247	233	'links_color' => '#ebebeb',
248	234	'headings_color' => '#333',
249	235	'body_color' => '#989898',
		@@ -254,11 +240,11 @@
254	240	)
255	241	)
256	242	```
257	243
258		-The upper example will output a select which will change all the fields setted up in the `options` array.
	244	+The above example will output a select which will change all the fields configured in the `options` array.
259	245
260		-If you don't like the select type, at `choices_type` you can choose between `select`, `button` and an `awesome` radio select which allows you not only change de font-end options but also the preview button style.
	246	+If you don't like the select type, at `choices_type` you can choose between `select`, `button` and an `awesome` radio select which allows you to not only change the font-end options but also the preview button style.
261	247
262	248	Wanna have a preset like this?
263	249
264	250	
		@@ -266,19 +252,19 @@
266	252	Just add this section in your config
267	253
268	254	```
269	255	'presets_section' => array(
270		- 'title' => __( 'Style Presets', 'customify_txtd' ),
	256	+ 'title' => __( 'Style Presets', 'customify' ),
271	257	'options' => array(
272	258	'theme_style' => array(
273	259	'type' => 'preset',
274		- 'label' => __( 'Select a style:', 'customify_txtd' ),
275		- 'desc' => __( 'Conveniently change the design of your site with built-in style presets. Easy as pie.', 'customify_txtd' ),
	260	+ 'label' => __( 'Select a style:', 'customify' ),
	261	+ 'desc' => __( 'Conveniently change the design of your site with built-in style presets. Easy as pie.', 'customify' ),
276	262	'default' => 'royal',
277	263	'choices_type' => 'awesome',
278	264	'choices' => array(
279	265	'royal' => array(
280		- 'label' => __( 'Royal', 'customify_txtd' ),
	266	+ 'label' => __( 'Royal', 'customify' ),
281	267	'preview' => array(
282	268	'color-text' => '#ffffff',
283	269	'background-card' => '#615375',
284	270	'background-label' => '#46414c',
		@@ -294,9 +280,9 @@
294	280	'body_font' => 'PT Serif',
295	281	)
296	282	),
297	283	'lovely' => array(
298		- 'label' => __( 'Lovely', 'customify_txtd' ),
	284	+ 'label' => __( 'Lovely', 'customify' ),
299	285	'preview' => array(
300	286	'color-text' => '#ffffff',
301	287	'background-card' => '#d15c57',
302	288	'background-label' => '#5c374b',
		@@ -312,9 +298,9 @@
312	298	'body_font' => 'Playfair Display',
313	299	)
314	300	),
315	301	'queen' => array(
316		- 'label' => __( 'Queen', 'customify_txtd' ),
	302	+ 'label' => __( 'Queen', 'customify' ),
317	303	'preview' => array(
318	304	'color-text' => '#fbedec',
319	305	'background-card' => '#773347',
320	306	'background-label' => '#41212a',
		@@ -330,9 +316,9 @@
330	316	'body_font' => 'Gentium Basic',
331	317	)
332	318	),
333	319	'carrot' => array(
334		- 'label' => __( 'Carrot', 'customify_txtd' ),
	320	+ 'label' => __( 'Carrot', 'customify' ),
335	321	'preview' => array(
336	322	'color-text' => '#ffffff',
337	323	'background-card' => '#df421d',
338	324	'background-label' => '#85210a',
		@@ -348,9 +334,9 @@
348	334	'body_font' => 'PT Sans Narrow',
349	335	)
350	336	),
351	337	'adler' => array(
352		- 'label' => __( 'Adler', 'customify_txtd' ),
	338	+ 'label' => __( 'Adler', 'customify' ),
353	339	'preview' => array(
354	340	'color-text' => '#fff',
355	341	'background-card' => '#0e364f',
356	342	'background-label' => '#000000',
		@@ -366,9 +352,9 @@
366	352	'body_font' => 'Droid Sans Mono'
367	353	)
368	354	),
369	355	'velvet' => array(
370		- 'label' => __( 'Velvet', 'customify_txtd' ),
	356	+ 'label' => __( 'Velvet', 'customify' ),
371	357	'preview' => array(
372	358	'color-text' => '#ffffff',
373	359	'background-card' => '#282828',
374	360	'background-label' => '#000000',
		@@ -388,4 +374,117 @@
388	374	),
389	375	)
390	376	)
391	377	```
	378	+
	379	+
	380	+### Font Selector<a name="font_selector"></a>
	381	+
	382	+In 1.3.0 we introduced the new font selector, it works with live preview only and it has this possible configs:
	383	+
	384	+```
	385	+'headings_font' => array(
	386	+ 'type' => 'font',
	387	+ 'label' => esc_html__( 'Headings', 'customify' ),
	388	+ 'desc' => esc_html__( 'o descriere', 'customify' ),
	389	+ 'selector' => 'h1, h2, h3, h4, .title, .sub-title',
	390	+
	391	+ // Set the defaults
	392	+ 'default' => array(
	393	+ 'font-family' => 'Open Sans',
	394	+ 'font-weight' => '400',
	395	+ 'font-size' => 24,
	396	+ 'line-height' => 1.5,
	397	+ 'letter-spacing' => 1,
	398	+ 'text-align' => 'initial',
	399	+ 'text-transform' => 'uppercase',
	400	+ 'text-decoration' => 'underline'
	401	+ ),
	402	+
	403	+ //'load_all_weights' => true,
	404	+
	405	+ 'recommended' => $recommended_headings_fonts, // List of recommended fonts defined by theme
	406	+
	407	+ // Sub Fields Configuration (optional)
	408	+ 'fields' => array(
	409	+ 'font-size' => array( // Set custom values for a range slider
	410	+ 'min' => 10,
	411	+ 'max' => 40,
	412	+ 'step' => 1,
	413	+ 'unit' => 'px',
	414	+ ),
	415	+ 'line-height' => array(0, 2, 0.1, ''), // Short-hand version
	416	+ 'letter-spacing' => array(-1, 4, 0.1, 'em'),
	417	+ 'text-align' => true, // Disable sub-field (False by default)
	418	+ 'text-transform' => true,
	419	+ 'text-decoration'=> true,
	420	+ ),
	421	+ 'callback' => 'your_custom_callback_function'
	422	+),
	423	+```
	424	+
	425	+In the above example you can see the callback parameter, it supports a PHP or Javascript function
	426	+which should replace the current output of the font
	427	+
	428	+```
	429	+function your_custom_callback_function( $value, $font ) {
	430	+ return $combined_css';
	431	+}
	432	+
	433	+function add_javascript_callback_function() { ?>
	434	+ <script>
	435	+ function your_custom_callback_function( $values, field ) {
	436	+ return $combined_css;
	437	+ }
	438	+
	439	+ </script>
	440	+<?php }
	441	+add_action( 'customize_preview_init', 'add_javascript_callback_function' );
	442	+```
	443	+
	444	+
	445	+### Local Fonts
	446	+
	447	+Also this font selector comes with the ability to add custom fonts from a theme.
	448	+If a theme comes with the name of a font and a stylesheet with its fontface it
	449	+will be added as the first option of the font selector
	450	+```
	451	+function theme_add_customify_theme_fonts ( $fonts ) {
	452	+ $fonts['Custom Font'] = array(
	453	+ 'family' => 'Custom Font',
	454	+ 'src' => get_template_directory_uri() . '/assets/fonts/custom_font/stylesheet.css',
	455	+ 'variants' => array( '400', '700' )
	456	+ );
	457	+ return $fonts;
	458	+}
	459	+add_filter( 'customify_theme_fonts', 'theme_add_customify_theme_fonts' );
	460	+```
	461	+
	462	+# Developer Love
	463	+
	464	+We know developers are a special kind of breed and they need special kinds of treats. That is why we have introduced options dedicated to them.
	465	+
	466	+### Reset Buttons
	467	+
	468	+In the plugin's settings page (*WP Dashboard > Settings > Customify*) you will find a checkbox called **Enable Reset Buttons** that once activated will show a new Customizer section called **Customify Toolbox** and also introduce buttons in each section or panel configured via the plugin.
	469	+
	470	+All these buttons will reset the options to their default values.
	471	+
	472	+### Continuous Default Values
	473	+
	474	+If you want to go even further, there is a nuclear option. Simply define the `CUSTOMIFY_DEV_FORCE_DEFAULTS` constant to `true` and everywhere the default value will be used. You can play with the values in the Customizer and the live preview will work, but no value gets saved in the database.
	475	+
	476	+Add this in your `wp-config.php` file:
	477	+```php
	478	+define( 'CUSTOMIFY_DEV_FORCE_DEFAULTS', true);
	479	+```
	480	+
	481	+## License
	482	+
	483	+GPLv2 and later, of course!
	484	+
	485	+## Thanks!
	486	+This plugin also includes the following libraries:
	487	+
	488	+* Select 2 - https://select2.github.io/
	489	+* Ace Editor - https://ace.c9.io/
	490	+* React jQuery Plugin - https://github.com/natedavisolds/jquery-react