{"slug":"wp-admin-form-controls","title":"wp-admin-form-controls","summary":"Use WordPress admin form-control widgets that ship in core,","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-16T14:52:22.321032Z","repo":{"url":"https://github.com/Lonsdale201/wp-agent-skills","stars":22,"forks":2,"license":"MIT","updatedAt":"2026-09-21T19:53:59Z"},"bodyHtml":"
\n

name: wp-admin-form-controls\ndescription: Use WordPress admin form-control widgets that ship in core,\nwp-color-picker, jquery-ui-datepicker, jquery-ui-autocomplete,\nand wp-pointer. Covers correct script/style enqueues, the missing\njQuery UI datepicker CSS, wpColorPicker change / clear callbacks,\ndatepicker yy-mm-dd formatting plus strict server sanitization,\nautocomplete source shapes with response(), core user/tag suggest,\nand wp-pointer dismissal through dismiss-wp-pointer. Use when adding\ncolor, date, typeahead, or first-run pointer controls to settings pages,\nmetaboxes, or repeater rows.\nmetadata:\nwp-skills-author: \"Soczó Kristóf\"\nwp-skills-contact: \"mailto:lonsdale201@hotmail.com\"\nwp-skills-plugin: \"wordpress\"\nwp-skills-plugin-version-tested: \"6.0 - 7.1\"\nwp-skills-wp-version-tested: \"7.1\"\nwp-skills-php-min: \"7.4\"\nwp-skills-last-updated: \"2026-08-20\"

\n

WordPress Admin Form Controls

\n

Four small widgets that ship with every WP install and that plugin developers reach for daily — but rarely enqueue correctly. This skill is the recipe sheet.

\n

When to use this skill

\n

Trigger when ANY of the following is true:

\n\n

Color picker — wp-color-picker

\n

Script handle wp-color-picker depends on iris (the underlying picker — Automattic's color library, wp-includes/js/iris.min.js, registered at wp-includes/script-loader.php:1502). The stylesheet wp-color-picker is also registered; you must enqueue it as well.

\n

Enqueue

\n
add_action( 'admin_enqueue_scripts', static function ( string $hook_suffix ): void {\n    if ( 'settings_page_myplugin' !== $hook_suffix ) {\n        return;\n    }\n    wp_enqueue_script( 'wp-color-picker' );\n    wp_enqueue_style( 'wp-color-picker' );\n\n    wp_enqueue_script(\n        'myplugin-color-init',\n        plugins_url( 'assets/color-init.js', MYPLUGIN_FILE ),\n        array( 'wp-color-picker', 'wp-i18n' ),\n        MYPLUGIN_VERSION,\n        array( 'in_footer' => true )\n    );\n} );\n
\n

Markup + init

\n
<input\n    type=\"text\"\n    name=\"myplugin_options[brand_color]\"\n    value=\"<?php echo esc_attr( $options['brand_color'] ?? '#0073aa' ); ?>\"\n    class=\"myplugin-color-field\"\n    data-default-color=\"#0073aa\"\n/>\n
\n
jQuery( function ( $ ) {\n    $( '.myplugin-color-field' ).wpColorPicker( {\n        // Optional — picked up automatically from data-default-color if set on the input.\n        // defaultColor: '#0073aa',\n\n        change: function ( event, ui ) {\n            // Fires on every color tweak while the picker is open.\n            // ui.color is an Iris Color object — call .toString() for the hex.\n        },\n        clear: function () {\n            // Fires when the \"Clear\" button is clicked.\n        },\n        palettes: true,                              // false to hide the preset palette row\n        // palettes: [ '#0073aa', '#23282d', '#fff' ], // OR an array of hex strings\n    } );\n} );\n
\n

Sanitizing server-side

\n
'sanitize_callback' => static function ( $value ): string {\n    if ( ! is_string( $value ) ) {\n        return '';\n    }\n    return sanitize_hex_color( $value ) ?: '';\n},\n
\n

sanitize_hex_color() returns null on invalid input — coalesce to '' (or your default) to keep update_option() happy.

\n

Date picker — jquery-ui-datepicker

\n

The bundled jQuery UI datepicker. The non-obvious bit: core does NOT enqueue\na default stylesheet for it. Ship a small plugin-owned stylesheet; avoid\nmaking wp-admin depend on a third-party CDN. For a simple date-only value,\nprefer native <input type=\"date\"> and use jQuery UI only when you need a\nconsistent calendar UI or constraints native controls cannot provide.

\n

Enqueue

\n
add_action( 'admin_enqueue_scripts', static function ( string $hook_suffix ): void {\n    if ( 'settings_page_myplugin' !== $hook_suffix ) {\n        return;\n    }\n    wp_enqueue_script( 'jquery-ui-datepicker' );\n\n    // CRITICAL — core ships no datepicker CSS. Ship your own:\n    wp_enqueue_style(\n        'myplugin-datepicker',\n        plugins_url( 'assets/datepicker.css', MYPLUGIN_FILE ),\n        array(),\n        MYPLUGIN_VERSION\n    );\n\n    wp_enqueue_script(\n        'myplugin-date-init',\n        plugins_url( 'assets/date-init.js', MYPLUGIN_FILE ),\n        array( 'jquery-ui-datepicker', 'wp-i18n' ),\n        MYPLUGIN_VERSION,\n        array( 'in_footer' => true )\n    );\n\n    wp_add_inline_script(\n        'myplugin-date-init',\n        'window.MyPluginDates = ' . wp_json_encode( array(\n            'firstDay' => (int) get_option( 'start_of_week', 0 ),\n        ) ) . ';',\n        'before'\n    );\n} );\n
\n

If you don't want to bundle your own CSS, the jQuery UI \"smoothness\" theme CSS works:

\n
/* assets/datepicker.css — minimum the picker needs to be usable */\n.ui-datepicker { background: #fff; border: 1px solid #c3c4c7; padding: 8px; z-index: 9999; }\n.ui-datepicker-header { display: flex; justify-content: space-between; padding: 4px 0; }\n.ui-datepicker-prev, .ui-datepicker-next { cursor: pointer; }\n.ui-datepicker table { border-collapse: collapse; }\n.ui-datepicker td a { display: block; padding: 4px 8px; text-align: center; text-decoration: none; }\n.ui-datepicker td a.ui-state-active { background: #2271b1; color: #fff; }\n
\n

Markup + init

\n
<input\n    type=\"text\"\n    name=\"myplugin_options[start_date]\"\n    value=\"<?php echo esc_attr( $options['start_date'] ?? '' ); ?>\"\n    class=\"myplugin-date-field\"\n    autocomplete=\"off\"\n/>\n
\n
jQuery( function ( $ ) {\n    $( '.myplugin-date-field' ).datepicker( {\n        dateFormat:      'yy-mm-dd',           // ISO format for storage. NOT PHP's date() format — jQuery UI's.\n        firstDay:        MyPluginDates.firstDay,\n        changeMonth:     true,\n        changeYear:      true,\n        yearRange:       '-5:+5',\n        showButtonPanel: true,\n    } );\n} );\n
\n

autocomplete=\"off\" on the input prevents the browser from popping its own calendar overlay on top of the jQuery UI one.

\n

dateFormat is jQuery UI's own format string (yy-mm-dd = 4-digit year, 2-digit month, 2-digit day) — NOT PHP's date() syntax. Common confusion source.

\n

Sanitizing server-side

\n
'sanitize_callback' => static function ( $value ): string {\n    $raw  = trim( (string) $value );\n    $date = DateTimeImmutable::createFromFormat( '!Y-m-d', $raw );\n    $err  = DateTimeImmutable::getLastErrors();\n\n    if ( ! $date || ( is_array( $err ) && ( $err['warning_count'] || $err['error_count'] ) ) ) {\n        return '';\n    }\n\n    return $date->format( 'Y-m-d' ) === $raw ? $raw : '';\n},\n
\n

Autocomplete — jquery-ui-autocomplete

\n

Handle jquery-ui-autocomplete (depends on jquery-ui-menu and wp-a11y — the a11y dep means screen readers get role announcements for free).

\n

Enqueue

\n
wp_enqueue_script(\n    'myplugin-tag-suggest',\n    plugins_url( 'assets/tag-suggest.js', MYPLUGIN_FILE ),\n    array( 'jquery-ui-autocomplete', 'wp-api-fetch', 'wp-i18n' ),\n    MYPLUGIN_VERSION,\n    array( 'in_footer' => true )\n);\n
\n

Source shapes

\n

source can be a static array, a synchronous transform, or an async function that calls response( results ) after wp.apiFetch(). It cannot just return a Promise. Items can be strings or objects with at least label and value; add an id and read it in select when you need a hidden ID field. See reference.md for complete examples.

\n

For user / term suggestions, core ships user-suggest (admin pages only) and tags-suggest — those are wrappers around jquery-ui-autocomplete that hit core admin-ajax endpoints. Worth reusing if your \"User\" autocomplete maps to WP users — see wp-admin/js/user-suggest.js.

\n

Admin onboarding pointer — wp-pointer

\n

The blue floating tooltip core uses for \"new feature\" onboarding (e.g. the first-time pointer that introduced the Customizer). Useful in plugins for: announcing a new admin menu item after a version bump, drawing attention to a moved button, first-time-tour-style hints.

\n

This is not WordPress 7.1's wp_get_tooltip() / wp_get_toggletip() API.\nPointers are dismissible onboarding UI with user-meta persistence; tooltips are\naccessible control names or supporting context. Reach for that core API\nwhen the requested UI is a tooltip/toggletip rather than a one-time tour.

\n

Handle wp-pointer is registered at wp-includes/script-loader.php:860 and depends on jquery-ui-core. The matching stylesheet wp-pointer is registered at :1655 and depends on dashicons — enqueue both.

\n

Dismissal persistence pattern

\n

The hard part isn't showing the pointer; it is not showing it again after dismissal. Core stores dismissed pointer slugs in dismissed_wp_pointers user meta. Enqueue wp-pointer + style only when the slug is not already dismissed, then POST { action: 'dismiss-wp-pointer', pointer: slug } in the pointer close callback. See reference.md for the full safe-content example.

\n

Combining multiple controls on one page

\n

The handles compose cleanly — declare them all as deps, init each in DOM-ready. WP loads each only once even if multiple scripts depend on it.

\n
wp_enqueue_script( 'wp-color-picker' );\nwp_enqueue_style( 'wp-color-picker' );\nwp_enqueue_script( 'jquery-ui-datepicker' );\nwp_enqueue_style( 'myplugin-datepicker' );\nwp_enqueue_script(\n    'myplugin-fields',\n    plugins_url( 'assets/fields.js', MYPLUGIN_FILE ),\n    array( 'wp-color-picker', 'jquery-ui-datepicker', 'jquery-ui-autocomplete', 'wp-api-fetch', 'wp-i18n' ),\n    MYPLUGIN_VERSION,\n    array( 'in_footer' => true )\n);\n
\n

Critical rules

\n\n

Common AI mistakes

\n

See reference.md for before/after snippets: script without stylesheet, unstyled datepicker, PHP date formats in jQuery UI, returning a Promise from autocomplete source, and pointer UI with no dismissal persistence.

\n

Cross-references

\n\n

What this skill does NOT cover

\n\n

References

\n\n","files":[{"path":"reference.md","sizeBytes":3928,"isText":true},{"path":"SKILL.md","sizeBytes":14063,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-16T14:58:48.375191Z","sha256":"41FACC4B13D6A129FFCCF051DDA31F725573531B94ADF4AC9CC3BF1672E2FDB8","sizeBytes":6905},"review":null,"source":{"repositoryUrl":"https://github.com/Lonsdale201/wp-agent-skills","path":"wordpress/wp-admin-form-controls","license":"MIT","commit":"8820ff3c301066297e696611e3bc4ebeb47d1851","subtreeSha":"38A4EC68775919D02171257886728E6EF831A98283BBCD592EB46429CA98BE3C","lastSyncedAt":"2026-09-22T13:51:11.366991Z"},"reviewedAt":"2026-09-16T15:19:28.671999Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/Lonsdale201/wp-agent-skills/tree/main/wordpress/wp-admin-form-controls"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install lonsdale201-wp-agent-skills@llmmart"},{"target":"git","command":"git clone https://github.com/Lonsdale201/wp-agent-skills.git"}]}