Cómo agregar una clase personalizada a body con body_class()



Muchas veces a la hora de desarrollar nuestros propios temas personalizados para wordpress, o bien, realizar ediciones avanzadas en nuestros themes, necesitamos asignar propiedades CSS distintas a los mismos elementos, según la sección del blog en la que se encuentren (home, single, page, etc).

Al intentar asignarle una clase CSS a nuestra etiqueta puede que nos encontremos con la sorpresa de una etiqueta en php que genera las clases por defecto en nuestro archivo header.php, de wordpress:

<body <?php body_class(); ?>>

La manera más practica de agregar nuestra clase personalizada es simplemente agregarla de ésta forma:

<body <?php body_class('mi-clase-personalizada'); ?>>

Un ejemplo de uso podría ser:

<body <?php if ( is_page() ){body_class('clase-para-mis-paginas');} else {body_class(); } ?>>

En la pieza de código anterior, lo que vemos es un condicional que agregará la clase .clase-para-mis-paginas cada vez que nuestros usuarios naveguen en nuestras “páginas” de WordPress; evitará mostrarlo en la página principal o en los posts.


Ya son 5 años en los que el internet ha sido un estilo de vida, en mi ámbito profesional y auto-didacta; me encanta retarme y convertir WordPress en lo que sea que necesite y siempre innovar con modelos de negocios online [...] Leer Más »

Advertisement

8 Responses to “Cómo agregar una clase personalizada a body con body_class()”

  1. Diego

    ago 17. 2011

    Hola; estaba viendo lo que hiciste por que tengo un problema y no se si me puedas ayudar;

    quiero darle una clase a una pagina en especifico y no se como hacerlo me puedes ayudar?
    Gracias!!

    Reply to this comment
    • elfleat

      ago 19. 2011

      Hola Diego, ésto te servirá:

      <body <?php if (is_page('1')) {body_class('CLASSNAME');} else {body_class(); } ?>>
      

      Debes reemplazar ’1′ por el ID de la página en la que quieres que salga la clase, y ‘CLASSNAME’ por el nombre de la clase.

      Reply to this comment
  2. Pablo

    ago 29. 2011

    ¿y para darle una clase a cada sección como sería?

    Gracias!

    Reply to this comment
  3. Sergio

    nov 21. 2011

    Hola elfleat, tengo una duda y talvez me puedas ayudar, quiero insertar una nueva entrada con un estilo diferente, como hago esto..?

    Reply to this comment
    • elfleat

      nov 21. 2011

      Hola Sergio,

      Es sencillo, puedes utilizar un codigo similar a éste:

      <body <?php if (is_post('1')) {body_class('CLASSNAME');} else {body_class(); } ?>>
      

      Reemplaza donde dice is_post(’1′) por el id del post específico en el que quieres la clase (el id lo puedes ver en la url cuando estás editando la entrada desde el panel de administración).

      Reemplaza donde dice “CLASSNAME” por el nombre de la clase que quieres utilizar para ese post en específico.

      Y en el css, utiliza la clase para referirte a cada elemento estilo:

      .CLASSNAME h1, .CLASSNAME h2{
      padding-bottom:4px;
      border:1px solid lightgray;
      }
      
      Reply to this comment
  4. Sergio

    nov 29. 2011

    Como haces para dar una clase al body, pero que pille automático el nombre osea class=”CLASE EL NOMBRE DE LA PÁGINA QUE ESTOY” ???
    Un saludo

    Reply to this comment

Leave a Reply