Simple Custom CSS and JS: cómo añadir código a WordPress sin tocar el tema
Quieres cambiar el estilo de un título, añadir el script de una herramienta de analítica o meter una encuesta en la página de inicio, y la única vía que ves es editar los archivos del tema. El problema es que, si tocas el tema directamente, la próxima actualización se lleva tus cambios. Simple Custom CSS and JS guarda tu código aparte y lo inserta donde tú le digas. En esta guía verás cómo se configura, cómo añadir código HTML, CSS y JavaScript con los ejemplos del vídeo, cómo limitarlo a ciertas páginas, qué precauciones tomar con el código que copias y qué trae la versión gratuita frente a la Pro.
En la academia tienes un curso de CSS y otro de HTML: son la base para entender el código que añades con este plugin en lugar de pegarlo a ciegas.
Qué es Simple Custom CSS and JS
Simple Custom CSS and JS es un plugin de SilkyPress para añadir código CSS, JavaScript y HTML a WordPress sin modificar los archivos del tema ni los de otros plugins. La versión gratuita está en el repositorio oficial (versión 3.54.3, actualizada el 8 de octubre de 2026, con más de 600.000 instalaciones activas y probada hasta WordPress 7.1) y está traducida al español. La Pro es de pago y va por la versión 4.44.
Al guardar, cada código se escribe en archivos dentro de wp-content/uploads/custom-css-js. Por eso no depende del tema: si lo cambias o lo actualizas, tu código sigue ahí.
El plugin imprime el código tal cual lo escribes, sin revisarlo ni validarlo, y el fabricante deja claro que la responsabilidad es tuya. Un JavaScript copiado de una web desconocida puede robar datos de tus visitantes o redirigirlos, y un error en un código cargado En la administración puede romperte el escritorio. Antes de pegar código de terceros, entiende qué hace, haz una copia de seguridad y pruébalo primero en una copia de pruebas de tu web (staging).
Instalación y ajustes
Instala la gratuita desde Plugins → Añadir nuevo plugin buscando «Simple Custom CSS and JS» y actívala. Aparece el menú CSS y JS personalizado, con la lista de códigos, los botones para añadir código y los Ajustes. En la Pro, la clave va en la pestaña de licencia de los ajustes. Los ajustes de la gratuita son pocos:
- Entidades HTML. Si usas entidades como
>y el editor te las convierte en el carácter, activa la opción de mantenerlas. - Completar automáticamente en el editor. Sugiere propiedades y etiquetas mientras escribes.
- Rol Diseñador web. Por defecto solo los administradores gestionan los códigos; este rol te deja darle ese permiso a otra persona sin hacerla administradora.
- Eliminar los comentarios que el plugin pone antes y después de cada código para que lo localices en el HTML de la página.
La Pro suma el tema de colores del editor y la duración de las vistas previas, y en el vídeo se ven también avisos de error en el editor y una pestaña de depuración para el soporte.
Cómo añadir código HTML (y usarlo como shortcode)
El HTML sirve para insertar bloques completos: un formulario, un script externo o una librería. En el vídeo se crea una encuesta.
Crea el código
En CSS y JS personalizado → Añadir código HTML, ponle un título que te sirva para reconocerlo y pega el código en el editor.
Elige dónde se inserta
En Ubicación en la página, la cabecera, justo después de la etiqueta <body> o el pie. En Ubicación en el sitio, la parte pública, el escritorio o los dos. La cabecera es el sitio habitual de scripts de seguimiento como el de Google Analytics.
Con la Pro, conviértelo en shortcode
Eliges shortcode, le das un ID (en el vídeo, «encuesta»), publicas y copias el shortcode desde Todos los códigos personalizados. Lo pegas con el bloque de shortcode de tu editor o constructor (en el vídeo, Elementor) y el código aparece justo ahí.
Publica y comprueba
Pulsa Publicar y abre la página. Desde la lista puedes desactivar un código sin borrarlo.
En los códigos HTML, la Pro añade En qué dispositivo se muestra (ordenador, móvil o los dos) y la Prioridad, del 1 al 10, que decide qué código va primero cuando dos coinciden en el mismo sitio.
Cómo añadir CSS personalizado
En el vídeo se le da estilo a un título de Elementor. Primero hay que poder apuntar a él: en la pestaña Avanzado del widget se le pone un ID CSS. Después:
Crea el código CSS
Pulsa Añadir código CSS, dale un título y escribe las reglas para ese ID. En el ejemplo, tipografía, color, fondo, borde redondeado, sombra y una transición para que el título se desplace al pasar el cursor.
Elige cómo y dónde se carga
En Tipo de enlazado, Interno escribe el CSS dentro de la página y Archivo externo lo enlaza como un .css aparte. Después, cabecera o pie, y si se aplica en la parte pública, el editor de bloques, el escritorio o la página de acceso, que te sirve para personalizar el login de WordPress.
Con la Pro tienes tres opciones más: escribir con un preprocesador (Sass, solo con sintaxis SCSS, o Less), minimizar el código para que pese menos y la prioridad. Si no sabes qué es un preprocesador, déjalo en Ninguno.
Cómo añadir JavaScript
En el vídeo se crea un botón en Elementor con su propio ID y, con Añadir código JS, un script que espera a que cargue la página, comprueba que el botón existe y cambia su texto al pasar el cursor, al retirarlo y al hacer clic. Las opciones son las mismas que en el CSS, y la Pro añade la minificación y la prioridad.
Si tu código usa jQuery, el propio plugin te recuerda que lo envuelvas en jQuery(document).ready(function( $ ){ ... });. Y para enlazar un archivo .js alojado en otro servidor no uses un código JS: crea un código HTML con la etiqueta <script src="...">.
Un solo código con HTML, CSS y JavaScript
Un código HTML puede llevar dentro su propio CSS y JavaScript. Al final del vídeo se crea así una encuesta interactiva con valoración, comentarios y correo, insertada con un shortcode en la página de inicio. Ojo: si el formulario no envía las respuestas a ningún servicio, el «gracias» sale igual pero no se guarda nada; y si pides el correo, tienes que cumplir el RGPD.
En el vídeo, todos los códigos se han generado con inteligencia artificial, y se defiende que así no hace falta saber programar. Úsala, pero revisa lo que te genera: entenderlo es lo que te permite arreglarlo cuando falla.
Mostrar el código solo en algunas páginas (Pro)
Por defecto, cada código se carga en toda la web. Con la Pro, la sección Aplicar solo en estas URL lo limita con reglas. En los ejemplos del vídeo se usa la de la página de inicio.
| Regla | Para qué sirve |
|---|---|
| Página de inicio | Solo en la home. |
| La URL contiene / no contiene | Las páginas que llevan (o no) un texto en la dirección. |
| La URL es igual a / no es igual a | Una página concreta, o todas menos esa. Con la ruta relativa, empezando por una barra. |
| La URL empieza por / termina en | Una sección entera, o las direcciones con un final común. |
| Etiqueta condicional de WordPress | Condiciones como is_single(), para las entradas. |
Las reglas se suman: el código solo se carga donde se cumplen todas. Cada código admite hasta 25.
Vista previa, revisiones y exportación (Pro)
- Vista previa. Pegas la URL de una página y pulsas Previsualizar los cambios: se abre con el código aplicado, sin publicarlo. El enlace se puede compartir para que un cliente dé el visto bueno; por defecto dura una hora e ignora las reglas de URL.
- Revisiones. Cada actualización guarda una revisión con la fecha y el autor. Puedes comparar dos lado a lado, opciones incluidas, y restaurar una anterior.
- Exportar e importar. Con Herramientas → Exportar e Importar de WordPress, los códigos viajan con sus opciones y reglas de URL, pero sin las revisiones.
Borra la caché si usas un plugin de caché, comprueba que el código está Publicado y activo (no en borrador ni en la papelera) y asegúrate de que la carpeta wp-content/uploads/custom-css-js existe y se puede escribir.
Simple Custom CSS and JS gratis vs Pro
| Función | Gratis | Pro |
|---|---|---|
| Códigos CSS, JS y HTML ilimitados | Sí | Sí |
Cabecera, pie y, en HTML, después de <body> | Sí | Sí |
| CSS y JS en la parte pública, el editor de bloques, el escritorio y el acceso | Sí | Sí |
| Archivo interno o externo | Sí | Sí |
| Shortcodes con variables | No | Sí |
| Aplicar solo en ciertas URL | No | Sí |
| Vista previa y revisiones | No | Sí |
| Sass, Less y minificación | No | Sí |
| Prioridad y, en HTML, dispositivo | No | Sí |
| Exportar e importar | No | Sí |
Precios de Simple Custom CSS and JS Pro
Los tres planes de la Pro tienen las mismas funciones; solo cambia el número de webs:
| Plan | Precio | Webs |
|---|---|---|
| Personal | 48,50 $ | 1 |
| Developer | 68,50 $ | 10 |
| Big Agency | 148,50 $ | 50 |
Son los precios que publica SilkyPress a 15 de octubre de 2026, los mismos del vídeo. Según el fabricante, una vez comprado puedes usar el plugin para siempre; la licencia incluye un año de actualizaciones y soporte, y renovarla antes de que caduque tiene un 40 % de descuento. En Europa los impuestos se suman al pagar. Se paga con PayPal o con tarjeta. Su política de devoluciones da 14 días, siempre que antes dejes que el soporte intente resolver el problema.
¿Necesitas la Pro? Para unos estilos o un script en toda la web, la gratuita basta. La Pro compensa si necesitas el código en páginas concretas, shortcodes, vista previa o historial de cambios, como en webs de clientes. El detalle está en su documentación.
Preguntas frecuentes
¿Simple Custom CSS and JS es gratis?
Sí. La versión gratuita está en WordPress.org, sin límite de códigos. La Pro, con shortcodes, reglas de URL, vista previa y revisiones, cuesta desde 48,50 $.
¿Pierdo el código si cambio o actualizo el tema?
No. El código se guarda fuera del tema, así que se mantiene aunque lo cambies o lo actualices.
¿Puedo aplicar un código solo en una página con la versión gratuita?
No. En la gratuita cada código se carga en toda la parte pública, el escritorio o el acceso, según elijas. Las reglas por URL y los shortcodes son de la Pro.
¿El plugin ralentiza la web?
Según el fabricante, los códigos se guardan en archivos, así que no hay consultas a la base de datos en cada visita. Lo que sí pesa es el código que añadas; la Pro puede minimizar el CSS y el JS.
En resumen
- Simple Custom CSS and JS añade CSS, JavaScript y HTML a WordPress sin tocar el tema, y el código sobrevive a sus actualizaciones.
- La gratuita inserta el código en la cabecera o el pie, en la parte pública, el escritorio o el acceso.
- La Pro añade shortcodes, reglas por URL, vista previa, revisiones, Sass y Less, minificación y exportación.
- El plugin no revisa lo que pegas: entiende el código, haz copia de seguridad y pruébalo en staging.
- Pro desde 48,50 $ para una web, con un año de actualizaciones y soporte.
¿Quieres escribir tu propio CSS?
Curso de CSS
Aprende a dar estilo a cualquier elemento de tu web y entiende el código que pegas.
Esta página incluye un enlace de afiliado a Simple Custom CSS and JS Pro: si compras a través de él, el precio que pagas es el mismo y a mí me corresponde una comisión.
Respuestas