El problema: ACF no permite quitar un icono seleccionado
Si trabajas con el Icon Picker de ACF, hay una limitación que acaba apareciendo antes o después: una vez que el usuario selecciona un icono, no existe una forma nativa de dejar el campo vacío otra vez.
Puede parecer un detalle menor hasta que empiezas a usar el campo en bloques reutilizables, componentes dinámicos o sistemas de diseño donde el icono es opcional. En ese momento aparece el típico caso: el usuario prueba un icono, cambia de idea… y descubre que no puede quitarlo desde el panel de administración.
A día de hoy, el campo sigue sin incluir un botón para limpiar la selección. Es una limitación bastante comentada en la comunidad de ACF y que continúa presente incluso en versiones recientes del plugin. Un pequeño detalle que parece inofensivo… hasta que alguien empieza a pelearse con el editor intentando dejar “ningún icono”.
El resultado es un pequeño callejón sin salida en la interfaz: el campo funciona bien para seleccionar iconos, pero no para deshacer la selección. Y ahí es donde merece la pena buscar una solución un poco más limpia que añadir campos auxiliares o lógica extra innecesaria.
A la izquierda, el comportamiento original del Icon Picker de ACF. A la derecha, el mismo campo tras añadir un botón “Clear icon” personalizado.
Por qué añadir un checkbox extra no es la mejor solución
La primera solución que suele aparecer cuando alguien se encuentra este problema es bastante simple: añadir un campo true/false con algo tipo “Mostrar icono”.
La lógica sería:
- seleccionas un icono en el Icon Picker,
- activas o desactivas un checkbox,
- y en frontend decides si renderizarlo o no.
Funciona, sí. Pero realmente no resuelve el problema original. Lo único que hace es añadir una segunda capa de control para compensar una limitación del primer campo.
Eso tiene varias consecuencias:
- El panel de administración se vuelve más confuso.
- El usuario tiene que gestionar dos campos para controlar una sola cosa.
- Añades lógica condicional innecesaria en plantillas o bloques.
- El contenido acaba siendo menos intuitivo de mantener.
Además, cuando trabajas con muchos campos personalizados o componentes reutilizables, este tipo de “pequeños parches” terminan acumulándose bastante rápido. Lo que parecía una solución simple acaba generando interfaces más pesadas y difíciles de entender para quien edita el contenido. Y ya sabemos cómo terminan esas cosas: alguien acaba dejando el icono “por si acaso” y nadie vuelve a tocarlo jamás.
En este caso, lo más limpio es resolver el problema directamente en el propio campo del Icon Picker: permitir que el usuario pueda limpiar la selección igual de fácil que la creó.
Y por suerte, ACF permite hacerlo sin necesidad de plugins extra ni scripts complejos.
Añadir un botón “Clear icon” con acf/input/admin_footer
La forma más limpia de resolver este problema es añadir un pequeño botón directamente dentro del campo del Icon Picker para vaciar su valor cuando el usuario lo necesite.
Y aquí hay un detalle importante: no hace falta crear un plugin entero, ni cargar archivos JavaScript separados, ni modificar ACF. Con un único snippet PHP podemos enganchar código JavaScript directamente en el panel de administración usando el hook acf/input/admin_footer.
Este hook se ejecuta justo antes del cierre del </body> en las pantallas donde ACF renderiza campos, así que es un sitio perfecto para añadir pequeños comportamientos personalizados ligados a la interfaz del editor.
El resultado es bastante natural: aparece un botón “Clear icon” debajo del selector y, al pulsarlo, el campo vuelve a quedar vacío.
add_action('acf/input/admin_footer', function () {
?>
<script>
(function($) {
if (typeof acf === 'undefined') return;
var label = <?php echo wp_json_encode(__('Clear icon', 'text_domain')); ?>;
function initClearButtons() {
$('.acf-icon-picker').each(function () {
var $wrap = $(this);
// Evitar duplicados
if ($wrap.find('.acf-icon-picker-clear').length) return;
var $btn = $('<button>', {
type: 'button',
'class': 'button acf-icon-picker-clear',
text: label,
css: { marginTop: '8px' }
});
$wrap.append($btn);
$btn.on('click', function (e) {
e.preventDefault();
// Vaciar valor del campo
$wrap.find('input[type="hidden"]')
.val('')
.trigger('change');
// Limpiar preview
$wrap.find('.acf-icon-picker-icon-preview, .acf-icon-picker-preview')
.empty();
// Quitar estado visual
$wrap.removeClass('has-value');
});
});
}
acf.addAction('ready', initClearButtons);
acf.addAction('append', initClearButtons);
})(jQuery);
</script>
<?php
});El snippet hace varias cosas bastante útiles:
- Añade automáticamente un botón dentro de cada
.acf-icon-picker. - Comprueba antes si el botón ya existe para evitar duplicados.
- Vacía el
input hiddendonde ACF guarda el valor seleccionado. - Limpia la previsualización visual del icono.
- También funciona dentro de Repeaters y Flexible Content gracias al hook
append.
Ese último punto es importante. Muchos snippets funcionan bien en campos estáticos, pero se rompen en cuanto el campo aparece dinámicamente dentro de un Repeater. Aquí evitamos ese problema desde el principio.
Además, el texto del botón pasa por __() y wp_json_encode(), así que sigue siendo compatible con traducciones estándar de WordPress sin necesidad de configuraciones adicionales.
Los selectores internos del Icon Picker (
.acf-icon-picker-preview,.acf-icon-picker-icon-preview, etc.) dependen de cómo ACF implemente internamente el campo. Si en futuras versiones cambia la estructura HTML, quizá tengas que revisar esos nombres desde el inspector del navegador. La parte más estable suele ser elinput[type="hidden"], que es donde realmente se guarda el valor del campo.
Cómo comprobar correctamente el valor del icono en frontend
Aunque el botón permita limpiar el icono desde el admin, conviene no dar por hecho que el campo siempre tendrá un valor válido en el frontend.
Cuando trabajas con campos ACF, especialmente con campos que devuelven estructuras más complejas, puede ocurrir que el campo no sea simplemente null. En algunos casos puedes recibir un array con claves vacías, y si renderizas el icono sin comprobar bien el valor, acabarás generando HTML innecesario o incluso pequeños errores visuales.
La comprobación más segura es validar la clave que realmente necesitas antes de renderizar nada:
$icon = get_field('custom_icon');
if (!empty($icon['value'])) {
// Mostrar el icono aquí.
}Así te aseguras de que el icono solo se renderiza cuando existe una selección real. Si el usuario ha limpiado el campo, o si nunca se seleccionó ningún icono, el bloque simplemente no muestra nada.
Es una comprobación pequeña, pero importante. Porque la interfaz del admin puede ayudarte a evitar errores, pero la plantilla debe seguir siendo la última barrera de seguridad. Ahí es donde el código decide si hay algo que mostrar… o si mejor no hacer ruido.
¿Tienes el Icon Picker integrado con tu propio Design System en WordPress? Puedes ver cómo montamos todo el sistema desde cero en el artículo Cómo usar ACF para tener iconos personalizados en WordPress.
Una solución simple para una limitación bastante molesta de ACF
El Icon Picker de ACF es muy útil cuando quieres integrar iconos personalizados en WordPress, sobre todo si trabajas con un Design System propio o con componentes reutilizables. Pero que no permita limpiar una selección desde el admin complica algo que debería ser sencillo.
Añadir un botón “Clear icon” directamente en el campo resuelve el problema sin ensuciar la interfaz, sin añadir campos extra y sin obligar al usuario a entender lógica interna. Selecciona un icono cuando lo necesita, lo limpia cuando cambia de idea, y listo. Que bastante complicada es ya la vida como para discutir con un campo de ACF.
No es una solución enorme ni especialmente compleja, pero precisamente por eso encaja bien: ataca el problema donde ocurre. En proyectos con muchos campos personalizados, este tipo de pequeños ajustes ayudan a evitar paneles de administración caóticos y difíciles de mantener, facilitando mucho el trabajo diario de edición y gestión de contenido.
Si trabajas con ACF, WordPress y componentes a medida, este tipo de snippets ayudan a mantener una edición más clara y mantenible. En Bubuku solemos aplicar este enfoque en proyectos de desarrollo WordPress a medida, donde el admin no solo tiene que funcionar, sino también ser fácil de usar para quien gestiona el contenido cada día.
