Como modificar o añadir CSS a tu Tema WordPress

Read this article in English

Es una pregunta muy recurrente sobre todo en los foros de WordPress. Supongamos que queremos modificar un elemento muy concreto de nuestro diseño: el tamaño de los H1, la gama de colores o simplemente la tonalidad de los botones sociales…estas modificaciones requieren en la mayoría de los casos de un poco de CSS. Pero no hay que alarmarse, existen varios métodos para hacerlo en WordPress de forma segura y sin necesidad de tocar apenas código.

El otro escenario es que directamente tengas un extracto de CSS que quieras añadir a tu tema o plantilla. WordPress por defecto no trae ningún editor ni campo para introducir estas reglas de estilos (Actualización: ya tenemos la propiedad CSS adicional incluida en WordPress). Debemos por tanto modificar la plantilla o recurrir a algunos de los métodos alternativos (y recomendables) que te contamos:

Los temas WordPress se encargan del CSS

Salvo que un plugin en particular tenga un estilo personalizado y traiga consigo una hoja de estilos CSS propia, lo cierto es que toda la carga del diseño de nuestro WordPress pertenece exclusivamente a nuestra plantilla. Por tanto, ¿por qué no editamos directamente la plantilla? Error!

Las plantillas de WordPress son, al igual que los plugins, elementos que se actualizan, se mejoran y se sobreescriben sobre la versiones anteriores. Y además sin contemplaciones, no se guardan los cambios que se hayan realizado en dicha plantilla. Por tanto, eso quiere decir que si actualizas tu tema a una nueva versión, perderás todos los cambios que hayas realizado (en los archivos CSS o php claro está, el contenido no tiene nada que ver…)

En cuanto al CSS, es un lenguaje ligado al HTML al que no hay que tenerle miedo. Realmente no vamos a editar ningún archivo base, por lo que funciona algo que podemos añadir o quitar si vemos que no funciona. No obstante es bueno que conozcamos algunos fundamentos básicos del mismo y como se relaciona con el HTML. Estos dos artículos serán de gran ayuda: introducción HMTL e introducción CSS.

Comentados los antecedentes, enumeremos los métodos más recomendables y su dificultad, para añadir o modificar vía CSS algún elemento de diseño.

0. CSS adicional desde el Personalizador de WordPress.

Actualización: desde la versión 4.7 de WordPress en adelante, tenemos la opción de incluir nuestras modificaciones de CSS sin necesidad de plugins externos. Es una característica que se ha añadido al core de WordPress y que se accede desde el panel de administración, pulsando en Apariencia > Personalizar > CSS adicional. Es común a todas las instalaciones y no depende del tema que estemos utilizando. Muy útil y rápido.

Modificar CSS desde Apariencia de WordPress

Por contra, como podrás ver el editor es muy sencillo y aunque para pequeñas modificaciones CSS es la mejor opción a día de hoy, si queremos realizar una personalización de nuestro diseño más profunda y a medio plazo, quizás nos interesen otras opciones que comentamos a continuación, como el módulo de Jetpack (por su control de versiones y posibilidad de revertir cambios) o el plugin Simple Custom CSS, que nos resalta el código identificando clases y valores CSS por colores, para que podamos diferenciar los elementos de una forma más rápidas y sencilla.

Lo dicho, pequeñas modificaciones, este es tu método. Si quieres algo más avanzado, sigue leyendo!

1. Módulo JetPack CSS personalizado.

Sin duda el método más sencillo y bastante eficiente si ya utilizas Jetpack. Si no lo utilizas aún, consiste en descargar el plugin Jetpack (si no tienes cuenta en WordPress.com también puedes usar el plugin gratuito Slim JetPack) y activar el módulo de CSS personalizado.

Modificar el CSS de tu WordPress

Los pasos son sencillos:

1. Instalar plugin.
2. Activar el plugin. (posiblemente te pedirá que conectes con tu cuenta de WordPress.com)
3. Ir a JetPack (justo encima de Entradas en el menú lateral del panel de WordPress) y buscar el módulo de CSS personalizado.
4. Una vez activado, tendremos una nueva pestaña en el menú Apariencia > CSS personalizado. Voilá, un completo editor CSS de tu tema a tu alcance.

Nota: si optas por Slim JetPack, no es necesario que realices la activación en el paso 2, y en el paso 3, deberás acudir a Ajustes > Slim JetPack. El resto todo es igual.

Actualización: también puedes usar Jetplack sin tener cuenta en WordPress.com con el plugin Unplug Jetpack

Listo, ya tenemos activado nuestro editor donde pegar o escribir las reglas CSS que modificarán nuestro diseño o tema. Lo fantástico de este método, es que JetPack va a incluir los estilos CSS que definamos en este editor justo detrás en la carga de los que el tema trae por defecto (style.css), por lo que podemos sobreescribirlos sin problemas, sin miedo a perder los cambios en futuras actualizaciones.

2. Usando el plugin Simple Custom CSS.

Igual de fácil que usar el módulo de Jetpack. Después de instalar Simple Custom CSS y activar el plugin (aquí te enseñamos como hacerlo), simplemente tienen que navegar hasta Apariencia > Custom CSS y añadir tus lineas de CSS personalizado.

Editar CSS con plugin en WordPress

Fácil y rápido 🙂

3. Crear un Child Theme (o Tema Hijo)

Un método más complejo pero igual de eficaz. Consiste en crear un tema hijo, que modifica los estilos del tema padre. Básicamente vamos a realizar la misma tarea que con el método anterior: cargar una hoja de estilos propia justo después de la hoja de estilos del tema padre. Sobreescribimos y añadimos nuevas reglas sin tocar el tema original. Fantástico.

Sin embargo, para algunos usuarios, este método puede resultar algo tedioso. Necesitarás un editor de CSS (notepad puede servir, pero no es lo más recomendable, mejor sublime text o Atom, del que hablamos aquí), y acceso a tu FTP o empaquetar tu child theme e instalarlo como un tema normal via Apariencia > Temas.

Editar CSS con tema hijo WordPress

Sea cual sea la forma que decidas, aquí tienes más información sobre como crear un tema hijo en el codex de WordPress.

Este método es personalmente mi favorito, aunque es entendible que sólo se utilice cuando las modificaciones tienen una cierta entidad. Para una pequeña modificación, el método vía Editor CSS de JetPack es más sencillo y rápido.

Por otro lado, si no tienes problemas en crear themas hijos, te recomiendo que esta sea siempre tu primera opción. El motivo principal es que es escalable: si necesitas incluir alguna funcionalidad o template extra, lo puedes hacer en el fuctions.php de tu tema hijo (algunas pueden ser muy interesantes, sobre todas referidas al responsive o a incluir una web font en tu WordPress).

Con Jetpack no puedes modificar y añadir nuevas funciones. Solo modifica hojas de estilo. Y por otro lado, solo estás incluyendo una llamada más a un solo archivo CSS (style.css de tu child theme) mientras que para la primera opción, de partida ya estar cargando un plugin más la llamada al servidor del nuevo CSS. Pero lo dicho, ambas son muy buenas.

4. Editar directamente el style.css de tu Tema

Pasamos a la zona gris de la edición de CSS en WordPress. Editar directamente el CSS de tu tema (style.css) no es la solución más limpia. Tanto si es un tema premium como un tema gratuito, vas a perder dichos cambios cuando el tema se actualice.

Además, si no tienes conocimiento de CSS, ten mucho cuidado con las puntuaciones y los cierres de reglas. Dejarte una llave abierta, u olvidar un punto y coma puede hacer tu hoja de estilos ilegible para algunos navegadores.

Si aún así estás convencido de que este es tu método, veamos como podemos realizarlo directamente a través del panel de Administración de WordPress. Los pasos son:

1. Ir a Apariencia > Editor
2. Buscar el archivo style.css (comprobar que está seleccionado el tema actual)
3. Editar con sumo cuidado.

Editar el CSS de theme WordPress

Además de los inconvenientes citados anteriormente, este método no te dará acceso a todo el CSS en algunos temas. Un ejemplo claro: si el autor del tema ha decidido dividir los estilos en varios CSS, puede que alguno de ellos esté inaccesible desde dicho editor, al encontrarse dentro de una carpeta tipo library, assets o css.

Por donde empezar, otros métodos y alternativas.

Existen otros métodos y alternativas: principalmente plugins que te permiten definir una hoja de estilos, o algún tema que trae consigo un campo para las modificaciones que queramos realizar. Pero suelen ser muy minoritarios.

Una vez seleccionado el método con el que vamos a modificar nuestra plantilla WordPress, toca realizar las modificaciones. Piensa que todo lo que se muestra en nuestra web ya tiene unos estilos predefinidos, por lo tanto, lo más sencillo es conocer como funciona nuestro diseño, que reglas CSS se están ejecutando y editarlas. Para ello nos ayudaremos del inspector de nuestro navegador: aquí tienes un tutorial sobre como trabajar con él.

Una vez identificado el elemento que queremos editar, necesitamos conocer sus clases e identificador. Aquí puedes ver una introducción básica a CSS donde hablamos sobre dichos elementos. Ya solo queda cambiar el valor que queramos y añadirlo a WordPress.

Si necesitas inspiración aquí te dejo algunos artículos útiles para empezar con esto del CSS desde nuestra sección dedicada a tutoriales y recursos CSS:

Lo importante es que, decidas el método que decidas, realices una copia de aquellos archivos que puedas perder y uses la alternativa que más se adecue a tus conocimientos. Muévete por lo sencillo y lo que controles. Suerte! (cualquier duda me preguntas) Y tú, cuál es tu método favorito para editar CSS en WordPress?

Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.

83 Comentarios en “Como modificar o añadir CSS a tu Tema WordPress

  1. Blackhaze

    Personalmente, prefiero el child theme. A parte de la seguridad que ofrece al no trabajar directamente con la plantilla padre, también me sirve para tener más controlados todos los templates que vaya creando (pages, taxonomies, etc…) al estar todo guardado en un directorio a parte del directorio padre.

  2. Andrelo

    Muy buenas Ricardo,
    ¿qué tal?

    Son muy interesantes las opciones que planteas a la hora de editar el CSS de nuestras plantillas. Mi problema es que no tengo mucho conocimiento de CSS, y he dado con una plantilla que en su archivo style.css y editor-style.css no tiene nada de código. Estoy buscando a ver si existe algún tipo de plantilla CSS por defecto de wordpress, pero no encuentro nada. Mi problema es que cuando incorporo negrita a un texto, el texto se desordena, pierde su formato, incluso aumenta a veces el interlineado, y no sé como solucionarlo…

    ¿Me podrías ayudar?

    Muchas gracias!

    1. Saludos Andrelo.

      Lo que comentas suele ser una práctica algo frecuente en algunos temas que utilizan un framework o librería. Seguramente, la hoja de estilos estará dentro de un directorio tipo /library o /inc o /css. De todas formas, puedes escribor CSS sin problemas en estos archivos que comentas, pues lo lógico es que se carguen tambien en la plantilla. Lo importante es conocer si se cargan antes o despues de la hoja de estilos principal del tema, para tener la seguridad de que estas sobreescribiendo las reglas. Si no, tendrás que hacer uso de !important.

      En cuanto a lo de las negritas, tiene pinta que hay una regla que modifica los atributos del elemento párrafo (p) cuando se incluyen negritas. Busca por tanto las reglas que incluyan b o strong que son la que dan estilo a las negritas en CSS.

      Saludos!

  3. Aldarull

    Buenas,
    Me gustaría cambiar el aspecto de una pestaña concreta del menú ppal pero no se como asignarle una clase únicamente a ese elemento. Con un simple “bold” sería suficiente. Alguien me puede echar un cable?
    Muchas gracias de antemano 😉

    1. Saludos Aldarull. Tres opciones:

      Todos los elementos del menú llevan un id único. puedes asignarle un estilo a ese id. Por ejemplo #menu-item-55 { font-weight: bold; } Usa el inspector de tu navegador para conocer que id le a asignado WordPress.

      La segunda opción es mediante el selector CSS :nth-child(n) que selecciona un elemento en el orden concreo que le asignes. Si por ejemplo tu item del menú está en el quinto puesto, pues #site-navigation .menu-item:nth-child(5) { font-weight: bold; }

      La tercera y más recomendable, ve a Apariencia > Menús y en la esquina superior derecha clic en opciones de pantalla. En el desplegable activa la casilla clases CSS. Esto habilitará un campo para que introduzcas una clase personalizada para cada elemento del menú. Solo tienes que introducir una clase y darle estilo por CSS. Ejemplo: tu clase es “elemento-menu-especial” y en el CSS le damos estilo: .elemento-menu-especial { font-weight: bold; }

      Espero que con estos consejos lo consigas. Un saludo y gracias por comentar!

      1. Aldarull

        Muchas gracias Ricardo. Utilicé la primera opción que me indicaste y funcionó a la perfección.
        Gracias de nuevo. Un abrazo.

  4. Hola Ricardo,
    Encontre tu web y me he quedado mirando y mirando, muy buenos diseños.
    Necesito ver los articulos de mi blog en dos columnas, no he encontrado mucho al respecto. ¿Lo que comentas de modificar el CSS me sirve para hacer esto?
    Saludos
    Un abrazo
    Daniel

    1. Saludos Daniel,

      efectivamente, podemos definir un ancho para los artículos (por ejemplo con 45%) y un padding para dejar un espacio entre ellos. Así tendremos los artículos en dos columnas.
      Igualmente podemos usar las psudoclases :odd y :even, para seleccionar los post de la izquierda y la derecha, y darle diferentes margenes e incluso un clear: both; para guardar un orden entre las filas.

      Saludos, ya me cuentas tus avances 😉

  5. Ovidiu

    Buenos dias,

    Me gustaria que me ayudaras con la creacion de un menu parecido al vuestro. Me explico.
    Quiero que se cambie el menus tal cual lo hace el vuestro cuando cuando voy bajando en la pagina con el scrolldown.
    ¿Como lo puedo hacer?
    Os lo agradezco de antemano.

    1. Hola Ovidiu.
      Dicho efecto lo realizamos gracias a jQuery y CSS. Es un poco complejo.
      Básicamente consiste en añadir una clase al elemento contenedor del menú cuando alcanza un número determinado de px (scroll). Mediante CSS, damos estilo por medio de esa clase a las reglas que nos interesen: color, fondo, tamaño, etc..
      Me lo apunto para hacer un tutorial en breve.
      Gracias por comentar!

  6. toni

    Hola Ricardo, felicidades por tu página.
    Estoy creando mi primer proyecto de WordPress y tengo dudas sobre editar CSS’s. Utilizo el tema Catch Evolution pues necesito tres columnas para la web, me piden que redondee las esquinas de las columnas y los contenedores de widgets y he encontrado este CSS:

    webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    Mi tema tiene una opción que es “Custom CSS”, allí introduzco el código pero no me modifica nada. Creo que es porque le falta definir en que parte de la web se ejecuta dicha propiedad. Es así?
    ¡Gracias de antemano!

    1. Saludos Toni, gracias por comentar.
      Exacto, debes indicar a que elemento quieres aplicar dichas reglas. Lo podrás hacer mediante cualquier selecto CSS válido (ids, clases…). Para ello comprueba como puedes seleccionar dichos widgets, será algo parecido a esto (depende de cada plantilla):

      aside.widget {
      border-radius: 15px;
      }

      Un saludo y gracias por comentar!

  7. aina

    Hola Ricardo,

    Me ha encantado como explicas todo tan claramente! Llevo días leyendo sobre como editar y cometí el error de usar el método de la zona gris… hehe
    Edité una de las plantillas directamente en wordpress y al guardar archivo se quedó la pagina en blanco. Me asusté por haber destruido todo mi trabajo e intente pegar otra vez el código predeterminado pero ya no puedo modificar nada. La plantilla queda siempre en blanco al guardar los cambios.

    No se si me he explicado bien, es que esto de editar es mas difícil de lo que pensaba.. Ahora solo quiero volver atrás en el tiempo y dejar-lo todo como estaba! 🙁

    Me ayudaría mucho cualquier indicación sobre que hacer para guardar el código original otra vez, si quieres lo puedo pegar aquí mismo. También he puesto mi pagina para que puedas verla, aun que no hay mucho que ver ya que la index php template es la que he estropeado…

    Muchas gracias por adelantado y sigue con tus post, son de mucha ayuda 🙂

    1. Hola Aina, gracias por comentar.

      Correcto, la opción de editar directamente los archivos desde el editor de WordPress tiene ese riesgo.
      En tu caso lo mejor es decargar la plantilla original y mediante FTP sustituir aquellos archivos que hayas modificado (index.php o el style.css). Y para el futuro optar por temas hijos o el editor de CSS de Jetpack.

      Espero que lo soluciones con esto!
      Un saludo 🙂

  8. sebastián

    Muchas gracias por compartir tus conocimientos. Veo que Jetpack parece ser la forma más segura y a la misma vez la más sencilla. Hay una tema wordpress que me gusta mucho, salvo por el menú que trae. Y eso me ha hecho no instalarlo todavía. Tal vez pueda modificar ese menú con jetPack. el Tema wordpress se llama Hueman. me gustaría la cabecera no tan gris y el menú algo más grande y colorido.

    1. Saludos Sebastián.

      Con Jetpack teóricamente podríamos introducir todos nuestros cambios, y como se carga después de la hoja de estilos del tema, sustituiríamos aquellos elementos que quisiéramos. Con un poco de maña y CSS todo es posible 😉

      Gracias por comentar y suerte!

  9. Yings

    Buenas Tardes!

    Mi pagina funciona trayendo automaticamente noticias de diferentes portales , sin embargo hay noticias que traen la imagen y las muestra, como otras que son videos y no los carga. Asi mismo, si la noticia de origen no contiene imagen me aparece la caja gris “No image” la cual supongo viene predeterminado por el tema instalado. Por favor les pido ayuda como hacer para que se cargen los videos, imagenes y si no las hay que no aparezca esa imagen.

    Gracias de antemano!

    1. Gracias por comentar Yings.

      Habría que estudiar la plantilla y cual es el funcionamiento. Lo que me comentas de la imagen se solucionaría con un condicional en php dentro de la plantilla que carga la noticia (seguramente single.php o algo similar), y con un if ( '' != get_the_post_thumbnail() ) : podría valer. Pero sin ver el código es complicado.

      Necesitarás el trabajo de un profesional para que haga esto que te comento + el tema del vídeo.
      Suerte y gracias de nuevo! 🙂

  10. Guillermo

    Hola Ricardo

    Pregunta estoy optimizando mediante los resultados de de gtmetrix …mis imagenes

    Segun el ejemplo que ves aqui:

    The following image(s) are missing width and/or height attributes.

    http://deathmap.deathcommand.com/wp-content/uploads/2014/09/death_map_logo-menu_1.png (Dimensions: 328 x 328)

    Como exactamente escribo en mi “custom css” este pedido de: “Specify image dimensions” para que no vuelva a aparecer en mi próximo testeo con gtmetrix…

    Gracias
    Saludos
    Guillermo.

    1. Hola Guillermo! Gracias por comentar.

      Suele ser una pregunta común. Puedes optar por seleccionar la imagen por alguna clase concreta e indicarle esos atributos. Sería algo así:
      img.clase-de-tu-imagen {
      width: 328px;
      height: 328px;
      }

      Con eso debería valer. Un saludo y gracias!

  11. José Rubio

    Hola Ricardo un saludo. En primer lugar te felicito por el excelente contenido de tu blog. De hecho ya me he suscrito. Me has ayudado a resolver un problema con el artículo sobre creación de menus y submenus. Tengo una inquietud. No soy un experto, estoy construyendo mi sitio y quiero centrar los títulos de las páginas y post, en mi sitio WP. Siempre centro las imagenes, y los subtitulos en mis post y páginas, el contenido (párrafos) lo justifico pero los títulos por defecto quedan justificados a la izquierda. Me parece que debían quedar también centrados. Como puedo hacer esto. En síntesis ¿cómo centro los títulos de páginas y entradas? que debo hacer por favor. Gracias de antemano.

    1. Saludos José, gracias por tus buenas palabras y por comentar.

      La respuesta rápida es que depende del tema que estés utilizando. Cada plantilla introduce unas clases para definir los elementos.
      Sin embargo, si el autor ha seguido las buenas prácticas a la hora de maquetar un tema WordPress, lo más seguro es que los títulos sean h1 y tengan la clase entry-title. Por ello, basta con que añadas al CSS de tu sitio:

      .entry-title {
      text-align: center;
      }

      Espero que te sirva. Un saludo y gracias!

  12. David Moreno

    Buenos días,

    Muchas gracias por la página, está genial.
    Quería consultarte algo, por si me puedes ayudar, creo que debe ser algo bastante básico, pero soy un principiante en WordPress y estoy perdido.
    Como puedes ver (https://adnalisis.wordpress.com/) En algunas entradas el título aparece dividido, esto me ocurre al introducir la imagen destacada, he estado buscando cómo solucionarlo mediante el CSS, porque al intentar cambiar el tamaño de la imagen no consigo nada, pero solo encuentro formas para cambiar el estilo del título (centrado, justificado, etc.) y nada sobre la imagen o algo que englobe titulo, imagen y el texto.

    ¿Alguna idea?

    Gracias.

    1. Hola David, tienes que quitar el float: left; a la imágen. Lo tienes aplicado aquí:

      .entry-thumbnail {
      float: left;
      margin: 0 2.5em 2.5em 0;
      max-width: 48.333333333%;
      }

      cámbialo por:

      .entry-thumbnail {
      float: none;
      margin: 0 2.5em 2.5em 0;
      max-width: 48.333333333%;
      }

      Espero que te sirva, saludos!

  13. Ana Manosfrias

    Buenas,

    Estoy modificando un tema para que se parezca a la web. Está… casi casi. Tengo que modificar unos detallitos en el CSS del tema. Me decanto por realizarlo directamente sobre el CSS con el editor del ftp y … no se modifica. He estado trasteando y, al principio parecía que tomaba otra hoja de estilo, pero ahora esta corregido, está modificada y… sigue comportándose como si no se hubiera modificado.

    ¿A qué se debe?

    un saludo

    1. Hola Ana,

      puede deberse a varios motivos. Los más frecuentes son que la hoja de estilos se queda guardada en la caché de nuestro navegador, y no vemos los cambios. Prueba a borrar el cache del navegador (Ctrl+F5 en Windows). Otro motivo sea la propia caché de WordPress o de un plugin que minifica el CSS y crea igualmente un archivo cacheado.

      Espero que te sirva. Saludos

  14. Abel

    Fantástico blog.
    Yo soy otro de los inexpertos que erróneamente tocamos el código que no debemos…(menos mal que al final subiendo de nuevo la plantilla original se solucionó).

    El hecho es que intento colocar una zona de widget en el header añadiendo en functions.php un “register_sidebar” que me habilite un nuevo widget. Hay cientos de tutoriales por internet que lo explian muy bien.
    Pero lo complicado para mí (que seguro te vas a reir), es: ¿donde, en que linea, sobre que linea o bajo que linea exactamente coloco “;
    ” si quiero que apareza a la derecha del header?…(igual que el logo izquierdo de la web)

    En todos sitios dicen “Allí donde queremos añadir el widget escribimos el siguiente código:”…….pero aún con inspecionar elemento e incluso con firebug, no acabo de aclararme donde exactamente.

    1. Hola Abel, dependerá de como esté maquetada la plantilla.

      A ciegas, lo más sencillo sería colocarlo justo antes del cierre del , y darle por css un ancho de 30% y un float: left; Todo lo anterior al nuevo elementos lo mentes en un div y le das un ancho del 70% y también float: left;
      Seguramente no será lo más limpio, pero sin ver el código creo que es la solución que mejor se adapta.

      Saludos y gracias por comentar!

  15. Javier

    Hola. Espero me puedas ayudar.
    Llevo un rato (días) intentando cambiar el color de un texto en mi plantilla de wordpress.
    La plantilla original estaba en color blanco de fondo con textos negros y al cambiar el fondo a negro pues muchos textos han quedado invisibles por ser oscuros.
    El punto es que, utilizando las herramientas para desarrolladores del navegador, he identificado la instrucción del CSS que debo corregir, por lo que procedo a abrir el archivo y lo actualizo vía FTP, pero al refrescar no me cambia nada… Pudiera ser algo como mencionaste arriba sobre los caches pero entonces ¿cómo puedo solucionarlo?
    Gracias por ayudar que ya tengo mucho rato batallando con esto y nomás no queda.
    Saludos.

    1. Correcto Javier, puede deberse a que el navegador sigue cargando la hoja de estilos antigua.
      Necesitarás limpiar la caché del navegador. Normalmente suele ser Ctrl+F5 en Windows y Cmd + Shift + R en Mac

      Saludos 🙂

  16. Nuria

    Hola Ricardo,

    Tras eliminar el plugin w3c total cache, me desapareció el css de la página web. He vuelto a instalarlo, activar y desactivar, pero no consigo que se muetsre. Conoces la solución?

    Gracias,

    1. Saludos Nuria,

      El CSS del tema que estás utilizando suele ubicarse en una carpeta diferente del plugin, por lo que es muy extraño que se haya borrado. Lo mejor es que preguntes directamente el el foro de soporte del plugin 🙂
      Gracias por comentar!

  17. Luar

    Buenos días,
    Tengo una duda que me está volviendo loco. Mi theme “padre”, tiene varios CSS. Uno el style.css, que he modificado sin problemas en el “hijo”. Pero luego tengo otros CSS, por ejemplo CSS/theme-responsive.css. Y claro, este theme-responsive, no consigo modificarlo. He creado una carpeta igual “CSS”, y he creado este archivo con las modificaciones que quiero, pero no me lo lee. ¿Cómo puedo solucionarlo? Gracias!

    1. Saludos Luar, no es necesario que crees ningún otro archivo.
      Simplemente en el style.css de tu tema hijo añades las reglas de los CSS de tu tema padre que quieras modificar. No tienes que preocuparte en que hoja de estilos se encuentre. El style.css del tema hijo se carga después que los del padre. Saludos!

  18. montse

    Buenos días, en primer lugar muchas gracias por este información, para los que andamos un poco perdidos en este mundillo es de gran utilidad. Me gustaría hacer una consulta, a ver, tengo un blog en wordpress con la plantilla adelle, pero me gustaría personalizarlo totalmente, es decir na nueva cabecera sin los lunarcitos que trae por defecto, una nueva barra de menú principal, diferentse widgets y funciones, y no sé si todo esto se consigue con JetPack o es necesario crear un tema hijo. En caso de tener que crear un tema hijo, hay alguna manera de ir realizando los cambios, guardarlos y verlos en mi equipo sin que el resto de visitantes vea esos cambios hasta que no sean definitivos? lo mismo es una pregunta muy básica pero ando un pelín perdida.
    Otra cosa, si yo veo en otro blog por ejemplo el código de como han realizado el newsletter, el código del menú principal,…, podría copiar ese código al inspeccionar elementos y pegarlo en mi css y personalizarlo con mis imágenes e iconos por ejemplo?

    Un saludo y gracias por acercarnos a este mundo, acabo de unirme a silocreativo para que todo llegue a mi correo, no quiero perderme nada!

    1. Saludos Montse, bienvenida 🙂

      En tu caso necesitarás crear un tema hijo, ya que con CSS solo es posible cambiar el aspecto y diseño. Para añadir una nueva zona zona de widgets y un nuevo menú es necesario añadir algo de php.
      Para ello puedes crearte una instalación en tu ordenador con un servidor local, por ejemplo Wamp. Cuando tengas los cambios listos los subes a tu web.
      En cuanto a lo de inspeccionar el código, solo podrás ver el HTML, CSS y JS de una web, el php nunca es visible (está del lado del servidor). A veces con eso te puede servir.

      Genial, suerte y gracias por comentar!

  19. Claudia

    Hola, ayuda… ya edite el style.css y he metido mano a casi todo el código, como puedo mantener
    todo el trabajo que ya he hecho?¿, muchas gracias!

    1. Saludos Claudia, para mantener el trabajo y no perderlo en la actualización del tema tendrás que optar por cualquiera de los otros métodos alternativos (Tema hijo o plugin) como comentamos en el artículo,

      saludos!

  20. Malena

    Hola! Intenté la opción de instalar Jetpack, pude hacerlo, pero en apariencia me aparece CSS personalizado y cuando entro ahí me dice lo siguiente:

    ¿CSS es nuevo para ti? Empieza con un tutorial para principiantes. ¿Alguna pregunta? Plantea tus preguntas en el foro de temas y plantillas.

    Nota: Se restablecerá CSS personalizado al cambiar los temas.

    ¿Es esto correcto? Pensé que iba a permitirme ver el código para poder editarlo…

    Gracias por tus aportes!

    1. Saludos Malena,

      si, es correcto. El cuadro de texto que te muestre esta pantalla tiene que estar vacío, listo para que puedas empezar a añadir tu propio CSS.
      Ten en cuanto que esté CSS que añadas se guardará en un archivo nuevo que se cargará después del CSS de tu tema, sobrescribiendo las reglas. Así no modificas nada de tu tema original. Es como poner una capa efímera por encima de todo lo que ya hay.

      Saludos!

  21. María José

    Hola Ricardo,

    he empezado ahora con los child theme, pero me surge una duda…sólo puedo personalizar el style.css?En la plantilla que estoy utilizando utiliza por defecto un color que no es el que quiero, y claro, hay estilos de menús y otras estructuras que tengo que cambiar y algunos no se encuentran en el style.css, sino en archivos css internos. Al actualizar el theme se me ha borrado todo y he tenido que volverlo a poner como yo quería(evidente), pero como puedo hacer para que el tema hijo también coja esas hojas de estilo?se puede?

    1. Saludos María José, gracias por comentar.

      Efectivamente es posible, tendrás que añadir esos CSS a tu child theme y cargarlos mediante un archivo functions.php.
      Esto es algo complejo, por ello lo mejor es escribir aquellas propiedades de CSS que quieres cambiar directamente en el style.css de tu child theme.
      Como este archivo siempre se va a cargar el último, sobrescribirá lo definido en todos los CSS anteriores.

      Suerte!

  22. Fernando

    Buenas tardes.
    Yo voy a hacer la pregunta de parvulitos.
    He descargado una plantilla de WordPress y me pone lo siguiente:

    La plantilla no está disponible. Los temas necesitan un archivo de plantilla index.php .
    Los Temas hijo necesitan una cabecera de plantilla en la hoja de estilos style.css

    ¿Porque puede ser esto?

    Muchas gracias.

    1. Saludos Fernando,

      parece que la plantilla no está completa o que el archivo que estás instalando no es la plantilla o requiere extraer el archivo zip de otro archivo zip contenedor.
      Pásate por este post por si te ayuda. Si no, lo mejor es que busques ayuda según el tipo de plantilla que estés usando aquí.

      Suerte!

  23. Marcos

    Hola buenas tardes Ricardo, mis duda es la siguiente, quiero modificar una opcion del css “por ejemplo un fondo” sin que afecte al resto de las páginas. Vamos que si cambio un color no quiero que afecte al resto de la página.
    Suelo utilizar el JP Custom CSS. Se que tendría que crear una clase nueva para hacer lo que te pido, pero como son temas que no son mios nose que modificar.

    Saludos y felicitaciones por el blog 😉

      1. Marcos

        Gracias en el body si funciona perfecto 🙂 . Pero en el site-content tururururu 😀
        ¿Sabes a que es debido?

        Muchas gracias de nuevo.

        1. Puede ser por muchos mmotivos. Prueba a añadir !important a la declaración que hagas, o si el fondo está en un elemento padre, añade un background: transparent; a los elementos que se muestren un poco rebeldes.

          Suerte!

  24. Eloy

    Hola Ricardo !!

    Soy muy nuevo en esto 😬 Mi duda es saber Si puedo colocar una pequeña imagen (una banderita) junto a una palabra del menú como por ejemplo la de “equipo” ?? ¿Cómo lo podria hacer en una plantilla de WordPress ??

    Gracias !!

  25. Eloy Rodriguez

    Hola de nuevo Ricardo,

    La duda que te planteaba en mi anterior pregunta no la plantee bien, ahí va de nuevo !!

    ¿De que manera puedo añadir una imagen al lado de una de las opciones del Menú (WordPress), que sea PNG ?

    ¿Tendría que ser en HTML y no con CSS, verdad? ¿Me puedes dar alguna opcion si fuera necesario tocar el HTML parecida al PLugin de JetPack para no tener que tocar nada de la plantilla?

    Mil Gracias 😉

    1. Saludos Eloy,

      entonces si sería necesario tocar el HTML. Pero como los menus en WordPress se generan dinámicamente, va a costar un poco.
      La mejor opción para no alterar la plantilla es añadirle una clase a cada elemento (como en el tutorial para destacar un elemento del menú) y posicionar los pngs via CSS, como background-image y cada uno en su respectivo pseudo-elemento (:before por ejemplo). Es trabajoso pero da resultado y no alteras la plantilla.

      Suerte!

  26. Camilo

    Quisiera tener acceso a todo el código php y css de cada página ¿como lo podría hacer ?
    He mirado visual composer pero sirve para construir necesito uno para editar plantillas prediseñadas. De antemano gracias por cualquier comentario a mi inquietud, un saludo.

    1. Hola Camilo, puedes acceder a los archivos php y CSS de los temas que tengas instalados desde Apariencia > Editor.
      Desde ahí puedes cambiar lo que necesites con el editor básico. Si quieres algo más avanzado, mira en la sección de SiloMag #01 la recomendación del plugin WP Editor.

      Suerte!

  27. Caro chan

    Buenas Ricardo, gran post!

    Mi duda es que yo tengo mi html y CSS hechos desde scratch y quiero implantarlo en mi wordpress. Entiendo que será un trabajo de chinos insertar las clases y los id que tenga ya esa plantilla para que las cosas funcionen…¿o acaso eso es imposible? He leído en alguna respuesta que el html es dinámico y por tanto no es posible cambiarlo. ¿Qué solución que no requiera grandes conocimientos de programación sería posible para esto? porque he estado leyendo los del tema hijo, ahí solo se habla de CSS y yo quiero saber como modificar mi html también….

    Muchísimas gracias!!

    Chuuuu!!

    1. Saludos Caro,
      exacto, WordPress genera el HTML de forma dinámica desde PHP, por lo que habrá algunas cosas que no puedas cambiar fácilmente. De todas formas, con los temas hijos puedes duplicar los archivos php del tema padre y modificar buena parte del HTML. Para otras secciones será necesario tocar el archivo de funciones u otros auxiliares (comentarios, búsqueda, menus, widgets…).

      Suerte!

  28. Marina

    Hola Ricardo, gracias por este y todos los posts. Quiero modificar el diseño del formulario de suscripción de MailPoet (hacerlo horizontal, ponerle las puntas redondeadas, cambiarle el color, etc.) y me dijeron que para eso necesito editar CSS. ¿Es eso correcto? ¿Cómo lo hago?
    Desde ya mil millones de gracias.

  29. estefania

    Hola!

    tengo un problema con mi formulario porque los recuadros para introducir la info tiene los bordes transparentes y es raro para mis clientes, ¿podría cambiarlo con la opción primera, la de la nueva actualización de wp desde apariencia?

    Por cierto uso contact form 7 plugin.

    Gracias

  30. Christian HK

    Hola que tal?
    He estado bastante tiempo tratando de editar unas cosas con CSS y al fin lo pude hacer. Lo que hice fue copiar y pegar toda la sección de “Hoja de Estilos” al Custom CSS y ahi edité todo lo que quería.
    Me surgen ahora unas dudas:
    Es esta una manera correcta de hacerlo? O hay algo que pueda hacer para solo copiar y pegar lo que específicamente quiero editar y ahorrar tiempo?
    Al actualizarse el tema, se va a perder todo los cambios que hice ?

    Gracias!

    1. Saludos Christian,

      Es una forma de hacerlo, sin embargo solo es necesario que copies aquellas reglas que vas a editar. El resto, si van a quedar igual que tu hoja de estilos no tiene sentido que estén por duplicado en ambos sitios.

      Puedes utilizar el inspector de tu navegador para editar y hacer previsualizaciones en vivo, para entonces copiar y pegar aquellas reglas que hayas modificado y que son las específicas que necesitas añadir.

      Suerte!

      1. Christian HK

        Ricardo,
        Gracias por tu respuesta. Si, supuse que podía hacer eso. Veré lo del inspector de CSS para probar solo editar lo necesario.
        Gracias!

  31. Alejandro

    Buenas, tengo un problema con mi blog. El caso es que todas las páginas se ven correctamente excepto una (relativa a la tienda de woocommerce). Esa página en cuestión el ‘ancho’ está muy desproporcionado llegando el texto a rozar con la pantalla. El tema en cuestión es un tema gratuito de wordpress (SaleJunction) y no he tocado nada.

    ¿Cómo puedo cambiarlo?!

    1. Saludos Alejandro.

      Para adaptarse a la maquetación de WooCommerce, el theme tiene que venir preparado para ello o al menos con algunos estilos para dar formato a estas páginas. Lo mejor es que preguntes directamente a los autores del tema sobre esta cuestión o si tienes que activar algo para corregir este fallo. Aquí te dejo donde encontrar ayuda según le theme.

      Suerte!

  32. Silvia

    Hola Ricardo,

    No tengo mucha idea de esto, más bien poca. Me gustaría ampliar el ancho de todas las páginas, ya que para mi gusto es muy estrecha y la lectura exige demasiado desplazamiento vertical para mi gusto. Lo tengo como una página estática sin sidebar, porque el concepto es más de una web, no de un blog. Los contenidos serán bastante estables.
    En mi caso uso wordpress.org. Jetpack veo que es para wordpress.com. Qué opciones recomiendas en este caso, teniendo en cuenta pocos conocimientos técnicos?
    Gracias!

    1. Saludos Silvia!

      Sobre Jetpack, es un plugin para WordPress.org cuya función es traer varias funcionalidades de WordPress.com que no están disponible en el .org.
      Para ampliar el ancho de página lo puedes hacer mediante CSS, pero habría que inspeccionar tu web actual (con esto lo puedes hacer), ya que cada tema utiliza una clase distinta para fijar el ancho de las columnas. Una vez localizado el ID o la clase ya se puede fijar por CSS el ancho mínimo o máximo (o fijo) para cada resolución.

      Si no tienes a mano a nadie que maneje CSS, puedes escribirnos con la url y te decimos el coste de la modificación.
      Suerte!

  33. Lenis

    Hola! buen artículo. Me pasa una cosa extraña. Estoy creando un tema hijo en un servidor local y todo bien. Cuando lo subo al servidor real no me aparece la opción para añadir css desde el editor. ¿Sabes a qué se debe?

    1. Saludos Lenis,

      puede ser que el servidor real no tengas permisos suficientes para acceder a la pestaña de Apariencia > Editor. Revisa tu perfil de usuario para conocer tu rol y también si estás en un multisite.

      Suerte!

  34. Montse

    buenos días Ricardo,
    tengo un problema que no resuelvo. Estoy personalizando un blog en wp via css (tema gratuito Edin) y todo funciona perfecto excepto que en el móbil no se implementan estos cambios, el archivo no lee mi css. Como puedo solucionar? Haciendo uso del theme-child este problema se solucionaria? muchas gracias

    1. Saludos Montse,

      es posible que tengas activado una versión mobile por defecto, que no cargue la hoja de estilos de tu theme ni los añadidos via CSS adicional. Puede ser el caso de que tengas activo por ejemplo el tema mobile de Jetpack o que el propio tema u otro plugin estén activando esto por efecto.

      Revisa la configuración. Si no encuentras nada raro, entonces contacta con el autor del tema por si hubiera realizado o desactivado alguna opción de carga de CSS (muy raro).

      Suerte!

  35. Kilian Skoogh

    Hola Ricardo!

    Gracias por el post y todas las respuestas! 😉

    Tengo instalado visual composer en una web, lo que me genera mucho código .css dentro del propio html. Mi intención: crear archivos externos y llamarlos para aligerar las páginas.

    ¿Es esto posible?

    1. Saludos Kilian!

      Correcto, es uno de los inconvenientes que tiene usar composers, que llenan el código de estilos directamente en el HTML (una mala práctica), resultando de archivos mas pesados y no optimizados. Actualmente todos los composer funcionan de esta forma. Digamos que dan facilidad al usuario, pero por contra hacen que la web pese más y esté menos optimizada.

      gracias por comentar!

  36. RayGarcia91

    Hola Ricardo,

    Muy buen articulo y muy completo, tengo algo de experiencia en wordpress pero en cuestiones de css soy algo novato, de momento estaba trabajando en una pequeña modificación en una web en la que trabajo, buscaba quitar un pequeño marco que se ponia por default en una galeria de imagenes, por lo que leí en tu web la mejor manera era usando el editor de wordpress (la primera opcion) y al colocar ahi este codigo:

    .page-id-168 #gallery-1 img{ border: none;}

    La vista previa efecticamente me muestra que da resultado, pero al momento de salvar y quitar la vista de personalizar, la pagina vuelve a verse como antes y al regresar al editor mi codigo desaparece, alguna idea de ¿por que? Felicidades por tan buen sitio.

    1. Saludos Ray,

      el código parece estar ok. Prueba el método de añadir CSS via plugin (2), por si el CSS adicional de WP esté fallando por algún tema relacionado con el servidor (algo raro).

      Suerte!

  37. Camilo santos

    Muchas gracias por compartir tus conocimientos. Veo que Jetpack parece ser la forma más segura y a la misma vez la más sencilla. Hay una tema wordpress que me gusta mucho, salvo por el menú que trae. Y eso me ha hecho no instalarlo todavía.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *