• Ir a navegación principal
  • Ir al contenido principal
Código Genesis

Código Genesis

Tutoriales para Genesis Framework y WordPress

  • Empieza aquí
  • Acceder
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse

Añadir un nuevo esquema de colores al personalizador de WordPress en AgentPress Pro

Descubre en este tutorial cómo agregar un nuevo esquema de colores al personalizador de WordPress en AgentPress Pro mediante código.

El child theme de Genesis AgentPress Pro ofrece la opción de cambiar el esquema de colores desde el personalizador de WordPress.

Por defecto, cuenta con 4 esquemas de color distintos:

Esquemas de color por defecto de AgentPress Pro.

Pero hace unos días, Mario, uno de los suscriptores de Código Genesis, me preguntó si se podía añadir uno nuevo y cómo hacerlo.

Ejemplo de página con colores por defecto AgentPress Pro desde el personalizador WordPress.

Así que me puse manos a la obra. ¿A ti también te interesa?

Sigue leyendo este tutorial. 😉

Instrucciones para agregar un nuevo esquema de colores al personalizador en AgentPress Pro

1. Modifica el fichero functions.php

Sustituye en el fichero functions.php el siguiente fragmento:

Para ver este código y los otros 1239 snippets de esta web,
identifícate o suscríbete aquí.

Usando este snippet, añades un nuevo esquema de colores, en este caso Purple, que se une a los que ya existen (Default, Blue, Gold y Green).

Por supuesto, te invito a ponerle el nombre que tú desees. Una idea sería sustituir ‘AgentPress Pro Purple’ por ‘AgentPress Pro Personalizado’, por ejemplo.

Con esto consigues que se muestre la nueva paleta en el personalizador de WordPress.

Pero para que tenga efecto, necesitas vincular esas opciones con cómo se mostrarán en la parte frontal de la web; o lo que es lo mismo, dar estilos. 

Vamos a ello.

2. Edita el fichero style.css

Para ello, introduce el siguiente snippet en style.css:

Para ver este código y los otros 1239 snippets de esta web,
identifícate o suscríbete aquí.

Con esto consigues que se apliquen los cambios de color que deseas en cada elemento cuando seleccionas el nuevo esquema de colores desde el personalizador de WordPress.  

Nuevo esquema colores en el personalizador de WordPress para AgentPress Pro

Del mismo modo que podías cambiar el nombre del esquema, también puedes escoger los colores que prefieras.

Solo tienes que cambiar los valores de color y background-color en el fragmento de código anterior.

Conclusiones

Ahora ya sabes cómo añadir un nuevo esquema de colores al personalizador de WordPress en el child theme de Genesis AgentPress Pro.

Si tienes alguna duda sobre este tutorial, déjala en los comentarios.

¿Sugerencias para próximos snippets? Envíamelas con el formulario de contacto.

Todo ventajas de ser suscriptor.


Agentpress Pro CSS Personalizador de WordPress PHP WordPress

Nahuai Badiola - CEO

Desarrollador web especializado en WordPress y Genesis Framework. Me encanta contribuir a la comunidad de WordPress y Genesis dando charlas en WordCamps, organizando eventos, traduciendo temas y plugins… más sobre mí.

Para dejar dudas o preguntas sobre este código,
puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto
  • Legal

¿Has olvidado tu contraseña?