Genesis Simple Hooks: vamos a jugar con nuestro theme de Genesis

Hoy te voy a hablar de un plugin específico para Genesis, otro más, en esta ocasión se trata de Genesis Simple Hooks.

Me habrás oido hablar de él en otros artículos relacionados con Genesis Framework, pero hasta ahora no me había metido más de lleno con este tema.

Se trata de un plugin que te permite la inserción de Hooks, o más bien te facilita su locación para que metas el código que deseas en ellos y así poder personalizar tu theme en cuanto a su estructura.

Bien, como dicho esto te acabas de quedar igual que estabas 😉 vamos a ir paso a paso.

genesis-simple-hooks-plugin-wordpress

 icon-anchor ¿Qué es un Hook?

Hook en inglés significa «gancho», o «enganche».

En este sentido, debemos entender un Hook como «un gancho de código» que nos permite insertar lo que queramos en partes determinadas de nuestro theme.

Intento explicar dificilmente con palabras lo que visto es muy sencillo, pero tranquilo que entre lo que vamos a ir mostrando y el video, se entiende sin problemas.

Un Hook por ejemplo sería esto:

genesis_before_header

Eso es un hook con el que puedes acceder a la parte de la plantilla que afecta a «antes del header» y meter el código que haga que muestres lo que quieras ahí, insertándolo en el archivo «functions.php»

Ahora bien, como ni somos expertos ni pretendemos saber ahora de PHP, para no liarla existe el plugin Genesis Simple Hooks.

Este plugin lo que hace es que no te tengas que meter a insertar los Hooks en el archivo, sino que te muestra todos los Hooks disponibles con una casilla de área de texto debajo para que puedas meter el código más fácilmente, y él ya se encarga de que se ejecute donde corresponde.

 icon-question-circle Cómo localizo el Hook del sitio que me interesa

Una vez instalado y activado el plugin, sólo tienes que ir a «Genesis/Simple Hooks» y verás que te salen un montón de desplegables.

Si los recogemos todos, son un total de 12 y organizan un poco todos los Hooks que hay, de este modo:

  • Wordpress Hooks
  • Document Hooks
  • Header Hooks
  • Content Hooks
  • Loop Hooks
  • Entry Hooks
  • Comment List Hooks
  • Ping List Hooks
  • Comment Form Hooks
  • Sidebar Hooks
  • Footer Hooks

Dentro de cada desplegable de estos, tendremos los Hooks que corresponden, por ejemplo dentro del «Content Hooks»:

  • genesis_before_content_sidebar_wrap
  • genesis_after_content_sidebar_wrap
  • genesis_before_content
  • genesis_after_content

Como ves, los nombres son bastante descriptivos del lugar al que afectan, «before_content» pues es lo que va «antes del contenido», o bien «after_content_sidebar_wrap» es lo que va «después del contenido del sidebar», etc.

Lo que pasa que algunas veces aunque lo sabes traducir no te queda claro de dónde exactamente estamos hablando, es decir, de dónde nos va a meter lo que pongamos ahí.

Por eso te dejo aquí un link a una web que cuando lo veas dirás «oooh…esto es lo que necesitaba para enterarme» 😉 Es esta: Visual Hook Guide

Con eso puedes ver de forma visual la ubicación de cada Hook, pero si te sabe a poco, también puedes consultar la documentación oficial de Studiopress al respecto (en inglés y debes logearte, es información sólo para clientes)

 icon-question-circle Cómo puedo insertar códigos en los Hooks

Con este plugin es muy sencillo, en las cajas de área de texto que ves debajo de cada Hook.

Te acepta HTML normal y CSS directo, ahora bien, también tienes otras dos casillas debajo de cada cajita:

  • : para que puedan funcionar los shortcodes.
  • Execute PHP on this hook: para que funcione el código PHP.

Porque sí, muchas veces lo más cómodo es insertar un shortcode de algo que ya te ofrece otro plugin, como puede ser un formulario de suscripción, un slider o algo así.

Sino, mi recomendación es trabajar los «divs» en HTML y meterle o bien un CSS directo o asignarle un ID al div y controlar sus propiedades desde el style.css

Pero ya es un poco más avanzado lo que estoy diciendo, si puedes tirar de shortcodes, mejor.

 icon-check-circle Ejemplo con el formulario de ancho total de mi blog

Te voy a explicar por escrito cómo he resuelto el tema de meter un formulario de suscripción de ancho total en la Home de mi blog, y sólo en la Home.

También te recomiendo antes de nada, que luego veas el video que he grabado donde explico todo lo de este post y también este ejemplo en concreto, seguro que lo vas a comprender mejor.

Bien, para conseguir el formulario grande de mi Home he utilizado:

  • Hybrid Connect
  • Genesis Simple Hooks
  • Unas líneas de código PHP

El plugin Hybrid Connect es con el que he creado los nuevos formularios de suscripción de mi blog, y te ofrece para cada uno de ellos un shortcode y un código PHP de insercción.

Eso por un lado.

Después con el Genesis Simple Hooks, localicé el Hook donde quería insertar el formulario, en este caso justo antes del contenido, pues es dentro de los «Content Hooks» el que pone «genesis_before_content».

Podría ser tan sencillo como meter en esa cajita el código del shortcode, pero yo quería además que sólo se mostrara en el Home y además poder controlar los «márgenes» de ese espacio donde se insertaba el formulario.

Lo que hice fue buscar este tutorial en inglés donde te explican las líneas mínimas de PHP para wordpress con las que puedes indicar si quieres que algo salga sólo en el Home, o en todas menos en el Home, o en una página concreta, o en una categoría concreta… en fin, lo que quieras.

Entonces finalmente en lugar de poner el shortcode me decanté por usar el código PHP que me ofrecía el Hybrid Connect, solo que con una pequeña modificación aprendida en ese tutorial para hacer que sólo se mostrará en el Home.

Por último, le metí un CSS directo para controlar sus márgenes (espacio antes y espacio después respecto de los otros elementos) y le asigné un ID para poder decirle en los Media Queries del style.css que por debajo de según que ancho de dispositivos, que no me lo muestre.

Estos serían los códigos, dentro del «genesis_before_content»:

<div id=»suscripcion» style=»margin: -28px 0px 28px 0px;»>
<?php if(is_home()) {
hybrid_connect_insert_connector(9);
}
?>
</div>

Mantengo las dos casillas que comentábamos antes activadas, aunque no utilice shortcodes.

Por otro lado, dentro del style.css en «@media only screen and (max-width: 767px)» le tengo puesto:

#suscripcion {
display: none;
}

De esta forma consigo que por debajo de ese ancho de pantalla no se muestre el formulario, es decir, que no se muestre en móviles ni en tablets en orientación vertical.

Video sobre Genesis Simple Hooks

Te dejo con más con el video, espero que te sirva.

YouTube video

 

Soy consciente de que no he profundizado por completo en la infinidad de posibilidades que dan los Hooks, tampoco era mi objetivo sino darte unas nociones básicas y unas herramientas que te facilitarán su uso si no te sabes manejar muy bien con el código.

Cualquier comentario de expertos en este tema, será muy bien bienvenido 😉

Por cierto, siempre que soy tan directo quedo como el culo, pero déjame decir una cosa más: actualmente estoy muy pillado de tiempo y no me puedo dedicar a resolver dudas técnicas concretas de forma individual, por lo que si tu comentario empieza con un «oye dime cómo hacer con esto de los Hooks para poner «X» en «Y»…» me temo que no podré contestarte.

¿Quieres aprender más sobre Genesis?

Artículos de la serie Genesis Framework:

  • Genesis Framework: la guía re-definitiva que debes consultar si estás pensando en cambiarte a Genesis
  • Guía definitiva para personalizar tu child theme de Genesis
  • Child Theme, 10 factores a tener en cuenta a la hora de elegir tu theme de Genesis
  • CSS en Genesis, personalizando tu Child Theme agusto y sin agobios
  • Plugins de Genesis hay unos cuantos, te presento mis 5 imprescindibles
  • Genesis Simple Sidebars: usa distintos widgets donde y como te plazca
  • Genesis Grid Loop: otra vuelta de tuerca a tus páginas de contenidos
  • Genesis Responsive Slider con Executive Pro para webs corporativas
  • Genesis Simple Hooks: vamos a jugar con nuestro theme de Genesis
  • Qué es un Third Party Theme de Genesis y ejemplo con toque femenino
Rate this post

¿Te gustaría autoemplearte y trabajar desde casa pero no sabes por dónde empezar?

13 comentarios en “Genesis Simple Hooks: vamos a jugar con nuestro theme de Genesis”

  1. Estoy decidiendo que plantilla usar de wordpress y quiero que me admita cierto codigo javascript. Mi pregunta es si es a traves de esta herramienta en el caso de genesis, gracias

    1. Omar De La Fuente

      Hola Daniel,
      no te puedo decir 100% seguro porque no tengo ni idea de Javascript.
      En principio, esto te sirve para meter código PHP, así que dado que el plugin es gratis todo sería que pruebes a ver con Javascript también lo admite y funciona, o no.
      Un saludo!

      1. Daniel, el plugin que te dice Omar sí que funciona para eso también. Vamos, yo lo he usado alguna vez para cosas de analítica y tal.

        Ahora, si es algo muy muy especial, tipo automatizaciones que dependen de alguna otra plataforma, pues no sé si puede haber alguna incompatibilidad, pero vamos, no creo… De todas formas, como te dice, probar es gratis y lo que no te haga una plantilla de Genesis no te lo va a hacer cualquier otra de WordPress (a no ser que te fueras a otro tipo de framework menos común).

  2. ¿Y cómo haces para insertar el formulario de Hybrid connect sólo en una página (que no es la home) y no en el resto. el shortcode no me funciona…

    1. Omar de la Fuente

      Pues ni idea Teresa, es por PHP y yo de PHP sé lo justito… pude hacer lo del Home porque buscando en Google pillé ese tutorial que lo hacía justo con el Home y venía ese código, pero otra página concreta, ni idea.
      Un saludo!

      1. Ok, seguiré buscando a ver lo que encuentro.

        Por cierto, he remodelado la Home del metro Pro que ahora parece otra plantilla y todo. Aún está en modo mantenimiento, pero la idea es reabrirlo, como muy tarde, el martes que vine. Ya le echarás un vistazo para ver qué te parece 😉

        1. Hola Teresa,

          ¿Conseguiste insertar el formulario dónde querías?

          Vaya por delante que yo tampoco sé mucho de Php pero a lo mejor esto te sirve.

          Te lo explico por partes, supongamos que quieres añadir el formulario (o lo que sea) solo a la Home, el código php necesario sería este:

          if(is_home()) { ?>
          Tu contenido

          Tu contenido

          Tu contenido
          <?php }

          Donde pongo los símbolos +++ tú tendrías que poner el id de la página que quieres mostrar. Para saber el id de una página de tu Wordpress puedes utilizar el inspector de elementos de tu navegador en la página que te interese y justo al principio de la etiqueta body verás algo como esto:
          Tu contenido
          <?php }

          Espero haberte ayudado y si hay por ahí algún experto en php que lo revise y a ver si me da el visto bueno 🙂

          Un saludo.

  3. Efectivamente es un plugin que facilita enormemente la inserción de código sin tener que tocar el tema padre de modo que no repercute cuando hay actualizaciones, imprescindible si diseñas con génesis.

  4. Hola Omar, un plugin que me huele que es una perla en bruto en el tema de los hooks es el plugin Genesis Extender de Cobalapps.

    Para los que preferimos controlar todos rincones de nuestro blog sin tener que adentrarnos en el mundo de la programación (no me gusta ni me veo) el tema de los hooks es un invento que el único límite que le veo es tu imaginación.

    Para los que le pegan a la programación, como Javier, esto de los hooks tiene que ser una pasada. Personalmente es un mundo que quiero descubrir y controlar y ya estoy en ello.

    Me da en la nariz que Genesis Extender puede provocarte una experiencia similar a la que has tenido con Hibryd Connect.

    Ya lo hemos comentado en alguna ocasión, pero ahora que sacas el tema de los hooks, te refresco la memoria.

    Saludos.

    Página del plugin:
    http://cobaltapps.com/downloads/genesis-extender-plugin/

  5. Buen articulo. El martes mismo publique yo tambien un post sobre tres ideas para usar Genesis Simple Hooks, pero me ha gustado más tu explicación sobre que son los hooks. Para quien tenga curiosidad: http://hormigasenlanube.com/genesis-simple-hooks/

    ¡Yo en este caso si me pelee más con código! De hecho mi formulario de suscripción en Home, es puro código en un widget de texto, a través de un area de widget creada nueva en el functions.php. Pero así me dejo ya el area de widget por si quiero insertar algo diferente más adelante.

    Un saludo!

    1. Omar de la Fuente

      Hola Javier!

      Pues gracias por el enlace, ahora lo echo un vistazo. Lo cierto es que esto del tema Hooks es un poco para usuarios avanzados al hablar de tema código, yo mismo de hecho no me entero de cómo va en su totalidad (aun), pero lo que e intentado es explicar lo básico y de una forma sencilla, que se entienda bien aunque no sepas nada de código 😉

      Un abrazo!

      1. Pues para mi lo has conseguido muy bien. Ya te digo que me gusta mucho como has explicado lo que es un hook, ejemplos, etc… Cosa que yo no consegui explicar.

        Cualquier duda más avanzada ya sabes donde encontrarme!

        Un abrazo Omar.

Deja un comentario

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

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Scroll al inicio

UNA PREGUNTA RÁPIDA

¿Tienes ya una página web propia?