Skip to content
Text field, this component is a part of the Olympus Zeus Core framework.
PHP HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/css
languages
src
.gitignore
LICENSE
README.md
composer.json

README.md

Text Field

This component is a part of the Olympus Zeus Core WordPress framework.
It uses the default WordPress text field to display password, range, text, datetime, tel, and more fields.

Olympus Component CodeFactor Grade Packagist Version

Installation

Using composer in your PHP project:

composer require getolympus/olympus-text-field

Field initialization

Use the following lines to add a text field in your WordPress admin pages or custom post type meta fields:

return \GetOlympus\Field\Text::build('my_text_field_id', [
    'title'       => 'What do you like?',
    'default'     => 'Penguins, I am sure they\'re gonna dominate the World!',
    'description' => 'Put in here everything you want.',
    'placeholder' => 'McDonald\'s as well',
    'type'        => 'text',

    /**
     * Settings definition
     * @see the `Settings definition` section below
     */
    'settings' => [],
]);

Variables definitions

Variable Type Default value if not set Accepted values
title String 'Text' empty
default String empty empty
description String empty empty
placeholder String empty empty
type String 'text' see Accepted type
settings Array see Field initialization see Settings definition

Accepted type

Settings definition

The settings variable is an array of options depending on type value.
In all cases, here are the default settings with their explanations:

Variable Type Default value if not set Accepted values
attrs String empty empty
after String empty empty
before String empty empty
class String empty empty
readonly Boolean false true or false
  • Special case: attrs will let you add all additional attributes you need, such as data-*. Pay attention to this!
  • after will insert contents after the field. In number and range cases, the after content will prepend the max value
  • before will insert contents before the field. In number and range cases, the before content will append the min value
  • class will add CSS classes to the already-in regular-text field class (not used in hidden case)
  • readonly will avoid the field to be used when its value is set to true

Date type

Full documentation on Mozilla Date page

Variable Type Default value if not set Accepted values
max Date empty latest date to accept in yyyy-MM-dd format
min Date empty earliest date to accept in yyyy-MM-dd format
step Integer empty integer, to read as day

Datetime-local type

Full documentation on Mozilla Datetime-local page

Variable Type Default value if not set Accepted values
max Date empty latest date to accept in yyyy-MM-ddThh:mm format
min Date empty earliest date to accept in yyyy-MM-ddThh:mm format
step Integer empty integer, to read as second

Email type

Full documentation on Mozilla Email page

Variable Type Default value if not set Accepted values
maxlength Integer empty empty
minlength Integer empty empty
multiple Boolean false true or false
pattern String empty javascript regular expression
size Integer empty empty
spellcheck Boolean false true or false

Hidden type

Full documentation on Mozilla Hidden page

Variable Type Default value if not set Accepted values
display Boolean false true or false

This special display variable defines if the hidden field have to show field value or not:

  • set to false, a sentence will show where the value is stored in Database
  • set to true, a sentence will show where the value is stored in Database and what is the current value

Month type

Full documentation on Mozilla Month page

Variable Type Default value if not set Accepted values
max Date empty latest date to accept in yyyy-MM format
min Date empty earliest date to accept in yyyy-MM format
step Integer empty integer, to read as month

Number type

Full documentation on Mozilla Number page

Variable Type Default value if not set Accepted values
max Integer empty empty
min Integer empty empty
step Integer empty integer, to read as number

This number type will display max and min values arround the field itself.

Password type

Full documentation on Mozilla Password page

Variable Type Default value if not set Accepted values
maxlength Integer empty empty
minlength Integer empty empty
pattern String empty javascript regular expression
size Integer empty empty

Range type

Full documentation on Mozilla Range page

Variable Type Default value if not set Accepted values
max Integer empty empty
min Integer empty empty
step Integer empty integer, to read as number

This range type will display max and min values arround the field itself, with value in an output HTML tag.

Search type

Full documentation on Mozilla Search page

Variable Type Default value if not set Accepted values
maxlength Integer empty empty
minlength Integer empty empty
pattern String empty javascript regular expression
size Integer empty empty
spellcheck Boolean false true or false

Tel type

Full documentation on Mozilla Tel page

Variable Type Default value if not set Accepted values
maxlength Integer empty empty
minlength Integer empty empty
pattern String empty javascript regular expression
size Integer empty empty

Text type

Full documentation on Mozilla Text page

Variable Type Default value if not set Accepted values
maxlength Integer empty empty
minlength Integer empty empty
pattern String empty javascript regular expression
size Integer empty empty
spellcheck Boolean false true or false

Time type

Full documentation on Mozilla Time page

Variable Type Default value if not set Accepted values
max Date empty latest time to accept in hh:mm or hh:mm:ss format
min Date empty earliest time to accept in hh:mm or hh:mm:ss format
step Integer empty integer, to read as second

When the step variable is provided, browser will add the seconds input area adjacent to the minutes section.
The max and min variables format will automatically be forced to hh:mm:ss.

Week type

Full documentation on Mozilla Week page

Variable Type Default value if not set Accepted values
max Date empty latest time to accept in yyyy-Www format
min Date empty earliest time to accept in yyyy-Www format
step Integer empty integer, to read as 1week

Retrive data

Retrieve your value from Database with a simple get_option('my_text_field_id', '') (see WordPress reference):

// Get text from Database
$text = get_option('my_text_field_id', '');

// Display text
echo $text;

Release History

  • 0.0.17
  • FIX: display in widget area and globally as number type
  • 0.0.16
  • FIX: remove twig dependency from composer
  • 0.0.15
  • FIX: remove zeus-core dependency from composer
  • 0.0.14
  • ADD: new version with dedicated type settings

Authors and Copyright

Achraf Chouk
@crewstyle

Please, read LICENSE for more information.
MIT

https://github.com/crewstyle
https://fr.linkedin.com/in/achrafchouk

Contributing

  1. Fork it (https://github.com/GetOlympus/olympus-text-field/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

Built with ♥ by Achraf Chouk ~ (c) since a long time.

You can’t perform that action at this time.