As I’m working quite a lot with Bootstrap these days, I wrote a jQuery plugin to apply a “floating” effect on the framework’s horizontal forms labels.
Plugin
The jQuery plugin is very simple. Here is the full code.
(function($){'use strict';
$.fn.bsPeekabooLabel =function(){var input =$(this),
control = input.closest('[class*="col-"]'),
label = control.siblings('.control-label'),
show =false,
place =function(d){var m;if($(control).css('float')==='left'){
m ='0 0 0 '+ label.outerWidth()+'px';
label.animate({ margin: show ?0: m, opacity: show ?1:0}, d);
control.animate({ margin: m }, d);}else{
label.animate({ margin:0, opacity:1}, d);
control.animate({ margin: show ? label.outerHeight()+'px 0 0':0}, d);}};
label.css({ position:'absolute'});place(0);
input.keyup(function(){if(show ===!input.val()){
show =!show;place(400);}});$(window).resize(function(){place(0);});};}(jQuery));
How To Use
First, make sure your horizontal form respects Bootstrap’s HTML structure, and that your inputs have a placeholder attribute. Then, target each input you want to apply the effect to.
Settings are really useful to provide an easy configuration of themes and plugins to our users within their administration panel. But the creation of options pages often ends up in a messy and repetitive use of the great WordPress Settings API.
The option page generated with our really basic example.
Considering generic form fields, I wrote a class to clean and simplify the process. It’s something light that shall be used on the admin side. https://github.com/WebMaestroFr/wm-settings
Example
// Define the page$my_page=create_settings_page('my_page_id',__('My Page'),array('title'=>__('My Menu')),array('my_setting_id'=>array('title'=>__('My Setting'),'description'=>__('This is my section description.'),'fields'=>array('my_option_name'=>array('label'=>__('My Option'),'description'=>__('This is my field description.'))))));// Access the values$my_value=get_setting('my_setting_id','my_option_name');
$args : (array) (Optional) An array of miscellaneous arguments.
‘tabs‘ : (boolean) Whether to display the different sections as “tabs” or not. There must be several sections, and they must have a title.
Default : false
‘submit‘ : (string) Text of the submit button.
Default : ‘Save Settings’
‘reset‘ : (string) Text of the reset button. Set to false to disable the reset button.
Default : ‘Reset Settings’
‘description‘ : (string) Page description.
‘updated‘ : (string) Message of the success notice. Set to false to disable the notice.
Default : ‘Settings saved.’
// A top level page$my_top_page=create_settings_page('my_top_level_page',__('My Top Level Page'),array('parent'=>false,'title'=>__('Top Level Menu'),'icon_url'=>'dashicons-admin-generic','position'=>'63.3'),array('my_standard_section'=>array('title'=>__('Standard'),'description'=>__('My section description.'),'fields'=>array('my_input'=>array('label'=>__('Input example')),'my_checkbox'=>array('type'=>'checkbox','label'=>__('Checkbox example')),'my_textarea'=>array('type'=>'textarea','label'=>__('Textarea example'))))),array('tabs'=>true,'submit'=>__('My Submit'),'reset'=>__('My reset'),'description'=>__('My page description.'),'updated'=>__('My success message !')));// And a sub-page$my_sub_page=create_settings_page('my_sub_page',__('My Sub Page'),array('parent'=>'my_top_level_page','title'=>__('Sub Level Menu')));
Top level page after blank submit
Apply Settings Sections and Options Fields
$page->apply_settings($settings);
Append sections and fields to a form, with an associative array where each setting is a section, and each option is a field. Each key of $settings defines a new setting id.
‘fields‘ : (array) (Optional) An array of options field declarations. Each key of this new array defines a new option name.
‘type‘ : (string) (Optional) Field type (checkbox, textarea, radio, select, multi, media, action, color or any valid HTML5 input type attribute).
Default : ‘text’
‘label‘ : (string) (Optional) Field label. Use false to hide the label column on this field.
‘description‘ : (string) (Optional) Field description.
‘sanitize‘ : (callback) (Optional) A function to apply in place of the default sanitation of this field’s type. Receive the input value and the option name as parameters, and is expected to return a properly sanitised value.
‘attributes‘ : (array) (Optional) An array('my_attribute'=>'my_value',...) of HTML attributes. Useful for placeholder or pattern for instance.
‘options‘ : (array) (Optional) Only for radio, select and multi field types, an array('my_value'=>__('My Label'),...) of predefined values.
‘action‘ : (callback) (Optional) Only for action field type. Expect a response sent with either wp_send_json_success (success) or wp_send_json_error (failure), where $data(Optional) is either the message to display (string), orarray('reload'=>true) if the page needs to reload on action’s success.
Formatted and multiple fields, sections displayed as tabs
Apply settings anywhere, but in order to sanitise the data properly and to run the eventual callbacks, do it before ‘admin_init‘ is hooked.
$my_sub_page->apply_settings(array('my_advanced_section'=>array('title'=>__('Advanced'),'fields'=>array('my_media'=>array('type'=>'media','label'=>__('Media Example')),'my_color'=>array('type'=>'color','label'=>__('Color Example')),'my_action'=>array('type'=>'action','label'=>__('Action Example'),'description'=>__('Will call the PHP function "do_my_action" with AJAX.'),'action'=>'do_my_action'))),'my_custom_section'=>array('title'=>__('Custom'),'fields'=>array('my_custom'=>array('label'=>false,'description'=>__('Will be sanitized through the PHP function "do_my_sanitation".'),'default'=>__('DEFAULT'),'attributes'=>array('style'=>'font-family: "Comic Sans MS";','pattern'=>'[A-Z]*'),'sanitize'=>'do_my_sanitation')))));functiondo_my_action(){// If errorwp_send_json_error(__('Error !'));// If successwp_send_json_success(__('Success !'));// If the page needs to reloadwp_send_json_success(array('reload'=>true,'message'=>__('This message is only displayed if "reload" => false.')));}functiondo_my_sanitation($input,$name){returnsanitize_text_field(strtoupper($input));}
Advanced and Custom Fields
Get the values
Every setting is recorded as an array of options values. An easier way to get the data back, from anywhere in the code, is to use the function get_setting($setting_id,$option_name);.
$my_attachment_id=get_setting('my_advanced_section','my_media');// ... is the same than :$my_setting=get_option('my_advanced_section');$my_attachment_id=$my_setting['my_media'];
Callback after settings are updated
The class hooks actions tagged ‘(page_id)_settings_updated‘ when settings are updated.
add_action('my_top_level_page_settings_updated','do_my_page_callback');functiondo_my_page_callback(){// All settings of my_top_level_page have been updated.}
You can also use the ‘update_option_(setting_id)‘ WordPress action that will apply on every section update.
add_action('update_option_custom_fields_section','do_my_section_callback');functiondo_my_section_callback(){$my_custom_options=get_setting('my_custom_section');// All options of custom_fields_section have been updated.}
Custom notices
You can display custom notices on the options pages.
$my_page->add_notice(__('My info message.'));$my_page->add_notice(__('My updated message.'),'updated');$my_page->add_notice(__('My warning message.'),'warning');$my_page->add_notice(__('My error message.'),'error');
Allowed types are info (default), updated, warning and error.
Custom notices
What do you think ?
I’ve been working on and using this with fun. Feel free to contact me for questions, feedback or suggestions. And you can find all of it, fork and contribute on GitHub. Peace out.