• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

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

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 1837 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 1837 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 te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉


Agentpress Pro CSS Personalizador de WordPress PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

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

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

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?