Tutorial: Crear portfolio en Genesis con filtro por categorías

[…]


por

Muchos de los child themes para Genesis Framework que podemos encontrar no incluyen estilos y programación para un portfolio de proyectos o trabajos realizados y muchos de los que lo llevan son realmente sencillos, sin ninguna animación ni estilo especial.

En este tutorial veremos cómo crear un portfolio que pueda filtrarse por categorías en pocos pasos. Podéis seguir el video tutorial, o los pasos explicados uno a uno debajo del mismo.

 

Paso 1: Custom post type Portfolio

Aunque podríamos crearlo directamente con código, para hacerlo más sencillo instalaremos el plugin Portfolio Post Type para que nos cree el tipo de entrada que necesitamos.

Si nuestro tema ya incorpora este tipo de entrada, pero no con categorías y etiquetas como en el caso de Minimum Pro que vemos en el video-tutorial, instalaremos igualmente el plugin para tener todas las características que necesitamos.

 

Paso 2: Añadir soporte para Archive Portfolio

Para que nuestro portfolio no utilice la plantilla archive por defecto, sino la que subiremos expresamente para ello con el filtro de categorías, añadiremos la siguiente función al archivo functions.php del child theme:

//* Add Archive Settings option to Portolio CPT
add_post_type_support( 'portfolio', 'genesis-cpt-archives-settings' );

De esta forma, nos aparecerá ya en el menú de WordPress el elemento de Portfolio y su submenus para categorías, etiquetas y los settings de la página de archivo.

 

Portfolio custom post type

 

3. Crear la página archive-portfolio.php

Crearemos en nuestro ordenador un archivo php con el código que indicamos a continuación (también os lo podéis descargar al final del tutorial) y lo guardaremos como archive-portfolio.php

<?php 
//* Página de archivo para mostrar el portfolio con filtro en Genesis. 
//* Indicamos que se utilice el layout de ancho completo 
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); 
//* Sustituimos el loop estándar por el personalizado para el portfolio 
remove_action( 'genesis_loop', 'genesis_do_loop' ); add_action( 'genesis_loop', 'dpw_portfolio' ); 
// Llamamos a los archivos javascript para el filtro dinámico. 
wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array('jquery'), '1.5.25', true); 
wp_enqueue_script('isotope_init', get_stylesheet_directory_uri() . '/js/isotopes_init.js', array('isotope'), '', true); 
//* Función de loop para seleccionar y mostrar los elementos del portfolio con filtro por categorías. 
function dpw_portfolio() { ?>
<div class="archive-description">
<?php
$terms = get_terms( 'portfolio_category' );
if( $terms ) {
echo '
<ul id="portfolio-cats" class="filter clearfix">';
echo '
 	<li><a href="#" class="active" data-filter="*"><span>Todos</span></a></li>
';
foreach( $terms as $term ){
echo "
 	<li><a href='#' data-filter='.$term->slug'><span>$term->name</span></a></li>
";
}
echo '</ul>
<br>'; 
} 
// Creamos la consulta para filtrar el tipo de post y el máximo por página. 
$wpex_port_query = new WP_Query( array( 
'post_type' => 'portfolio', // enter your custom post type 
'posts_per_page'=> '20', // overrides posts per page in theme settings 
) ); 
//Mostramos los resultados de la consulta 
if( $wpex_port_query->posts ) { ?>
                <div id="portfolio-wrap" class="clearfix filterable-portfolio">
                    <div class="portfolio-content">
	                    <?php $wpex_count=0; ?>
                        <?php while ( $wpex_port_query->have_posts() ) : $wpex_port_query->the_post(); ?>
                           <?php $wpex_count++; ?>
                           
						<?php $terms = get_the_terms( get_the_ID(), 'portfolio_category' ); ?>
							
							<?php 
							//Mostramos sólo aquellos elementos que contienen imagen destacada
							
							if ( has_post_thumbnail(get_the_ID()) ) { ?>
						
							<article class="portfolio-item col-<?php echo $count; ?> <?php if( $terms ) foreach ( $terms as $term ) { echo $term->slug .' '; }; ?>">
							<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
							<?php echo genesis_get_image( array( size => 'sz-portfolio' ) );
							
							/* Para crear un tamaño de imagen personalizado para el portolio, debemos añadir 
							la función correspondiente en functions.php: 
							add_image_size( 'sz-portfolio', 300, 200, TRUE );
							*/
							
							  ?>
							<div class="portfolio-overlay"><h4><?php the_title(); ?></h4></div><!-- portfolio-overlay --></a>
							
							</article>
							<?php } ?>
						<?php endwhile; ?>
					</div><!-- /portfolio-content -->
				</div><!-- /portfolio-wrap -->
		<?php } ?>
<?php wp_reset_postdata(); ?>
</div>
<?php } genesis();

 

Una vez creado, lo subiremos por FTP a la carpeta de nuestro child theme, por ejemplo, wp-content/themes/minimum-pro/

 

4- Subir archivos javascript para filtro

Para crear la funcionalidad del filtro por categorías, necesitaremos dos archivos javascript que os pongo a continuación, deberéis descargarlos y subirlos a la carpeta /js de vuestro child theme (por ejemplo, wp-content/themes/minimum-pro/js/)

 

isotopes_init.js

isotope.pkgd.min.js

 

5- Añadir los estilos CSS para el filtro y el portfolio:

Por último deberemos añadir los estilos CSS necesarios para mostrar el portfolio cómo queramos.

Os dejo aquí el que utilizamos en el tutorial, pero es posible que quieras modificar colores y tamaños en función del resto de diseño de vuestro tema.

 

/* # Estilo para el portfolio y el filtro de categorías
---------------------------------------------------------------------------------------------------- */
.post-type-archive-portfolio .archive-description{
 overflow: hidden;
}
ul.filter {
 color: #999;
 list-style: none;
 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
ul.filter li {
 float: left;
}
ul.filter li:first-child {
 margin-left: 0;
}
ul.filter a {
 color: #555;
 display: block;
 padding: 0.5rem 1rem;
 text-decoration: none;
 border-bottom: none;
 font-size: 1.5rem;
 font-weight: 300;
 border-top: 4px solid #fff;
}
ul.filter a:hover, ul.filter a.active {
 border-top: 4px solid #3d91f0;
}
.filterable-portfolio {
 margin-left: -2rem;
 margin-left: -20px;
}
.portfolio-item {
 float: left;
 margin-bottom: 2rem;
 margin-bottom: 40px;
 margin-left: 2rem;
 margin-left: 20px;
 position: relative;
 width: 23%;
}
.portfolio-item a img {
 display: block;
 margin-bottom: 0;
}
.portfolio-overlay {
 color: #fff;
 position: absolute;
 width: 100%;
 text-align: center;
 top: 0px;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.5);
 padding: 30px;
 opacity: 0;
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
}
.portfolio-item img:hover + .portfolio-overlay, .portfolio-overlay:hover {
 opacity: 1;
}
.portfolio-overlay h4 {
 font-weight: 400;
 margin: 0;
 width: 100%;
 padding: 5px 7px;
 text-transform: uppercase;
 color: #fff;
}
.clearfix{
 clear: both;
}
/*-----------------------------------------------------------------------------------*
/* = Isotope CSS Animations
/*-----------------------------------------------------------------------------------*/
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; }
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }

.filterable-portfolio-page .content .entry-header {
 margin-bottom: 1rem;
 margin-bottom: 10px;
}
.filterable-portfolio-page .content .entry-title {
 margin-bottom: 3rem;
 margin-bottom: 30px;
}
@media only screen and (max-width: 1179px) {
 .portfolio-item {
 width: 22%;
 }
}
@media only screen and (max-width: 1023px) {
 .portfolio-item {
 width: 30%;
 }
}
@media only screen and (max-width: 500px) {
 .portfolio-item {
 width: 100%;
 }
}

 

Por último, os dejo un .zip con todos los archivos necesarios para crear el portfolio en tu web

Archivos Tutorial Portfolio en Genesis

 

Espero que os haya sido útil! El código original no es mío, es una mezcla de diferentes tutoriales que he podido encontrar.

Si tenéis cualquier duda, escribirla en los comentarios o escribirme a esther@esthersola.com

NOTA: Si necesitas que el portfolio abra las imágenes o videos en lightbox en la misma ventana en lugar de abrir la página con el detalle, no te pierdas este tutorial de la Zona DPW

 

¿Eres implementador o desarrollador WordPress?

En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:

ACCEDER AHORA

 

Comentarios

22 respuestas a «Tutorial: Crear portfolio en Genesis con filtro por categorías»

  1. Avatar de Nerea Fernandez

    |

    Hola! Me surge una duda a ver si podrías ayudarme. Me gustaría poder acceder a mis posts atraves de las imágenes en el portafolio.
    Muchas gracias de antemano.

    Un saludo,
    Nerea

    1. Avatar de esther

      |

      Hola Nerea!
      Se me ocurre una forma de hacerlo, aunque no es sencilla… podrías crear un campo personalizado en el portfolio para añadir el post asociado y editar la plantilla de portfolio para añadir el enlace desde cada elemento al post de ese campo. El plugin ACF (Advanced Custom Files) te puede servir.
      Saludos!

  2. Avatar de Pedro

    |

    Gran tutorial… pero tengo un problema con mi theme. El título, que va dentro del wrap, page-header, etc. se lo salta y me rompe todo el diseño.

    ¿Cómo puedo obligarle a que respete ese diseño y ya una vez pasado el header-wrap ya muestre el menú, etc?

    Gracias.

    1. Avatar de esther

      |

      Hola Pedro!
      No acabo de entender tu problema. ¿El título te refieres al de la página o al título de cada uno de los items del portfolio?

      Saludos,

      1. Avatar de Pedro

        |

        Me refería al de la página…
        Pero ahora tengo otro problema… y es que cuando entro en el portfolio desde un móvil o algo distinto al desktop, me eliminar mi menú responsive y me lo muestra como desde un desktop.

        Es decir, me quita el típico menú hamburguesa para mostrar todo mi menú desplegado. Y por más que intento que se adapte al móvil no soy capaz…

        Gracias.

  3. Avatar de Jordi

    |

    Fantástico post, Esther! Después de pegarme con un montón de plug-ins sin éxito, por fin consigo tener la galería tal como quería! Mil gracias!!!

    Una consulta: Como podría hacer que el portfolio apareciese en la home? Estoy utilizando el childtheme de ejemplo.

    Por cierto, los links de descarga no funcionan y no se pueden bajar los archivos javascript para filtro.

    Gracias y un saludo!

    1. Avatar de esther

      |

      Hola Jordi!
      Genial! Me alegra mucho saber que te ha sido útil 🙂

      Para ponerlo en la home, así de entrada y sin probarlo y si no quieres recurrir a plugins, yo creo que crearía una widget area que sólo apareciera en la home y crearía shortcodes que mostraran elementos del portfolio según los filtros que me interesara. (Mírate el artículo de mostrar banners con shortcodes, que la idea sería parecida)
      A ver si así te funciona y si es así, y quieres, estás invitado a escribir un artículo explicándolo 😉

      Saludos!
      PD: ya he corregido los enlaces, con esto de la migración me he dejado algunos por el camino…

  4. Avatar de Ronald Lau Barrientos

    |

    Como puedo hacer para que se creen solo columnas de 3, cambio el width del portfolio-item pero no responde.

    Ademas esta sentencia
    <article class="portfolio-item col- &slug .’ ‘; }; ?>»>

    la clase «col- » me sale en blanco, no me muestra un numero

    1. Avatar de esther

      |

      Hola Ronald!
      He corregido la sentencia de

      Al migrar de blog hubo problemas con el formato de algunos códigos y había un «&» que sobraba después del $count.

      Respecto lo de las columnas, modificando el CSS debería funcionarte, revisa las media queries y los márgenes por si acaso.

      Saludos!

  5. Avatar de Miguel Parraud Cordeyro

    |

    Hay forma de que se ordenen los items agrupados por categoría?
    Tengo 3 categorias de portfolio: cuadros, objetos y dibujos.
    Quiero que aparezcan primero todos los cuadros, luego los objetos y finalmente los dibujos, todo seguido.
    ¿Cómo podría hacer esto?

    gracias

    1. Avatar de esther

      |

      Hola Miguel!
      Prueba añadir en el WP_Query dos atributos más:
      $wpex_port_query = new WP_Query( array(
      'post_type' => 'portfolio', // enter your custom post type
      'posts_per_page'=> '20', // overrides posts per page in theme settings
      'orderby' => 'portfolio_category',
      'order' => 'DESC',
      ) );

      Saludos!

      1. Avatar de Miguel Parraud Cordeyro

        |

        Caca… no funcionó. Los sigue ordenando por fecha.
        Igual muchas gracias por la velocidad de respuesta!!
        Está buenisima esta «customización». Yo la apliqué a Gallery Pro.
        Ah!! aprovecho y, sin compromiso, te pregunto: ¿cómo podría agregar este filtro al blog también?
        La web donde estoy aplicando esto es terebordaarte.com
        gracias otra vez!

        1. Avatar de esther

          |

          Jeje, nunca es tan fácil ;). Ya cuando pueda te busco la forma de hacerlo con calma.
          Me apunto lo de aplicar los filtros al blog, podría estar bien!

        2. Avatar de esther

          |

          Hola Miguel!
          He estado probando lo de aplicar los filtros al blog, y sería hacer lo mismo pero en el archivo template del blog y cambiando $terms = get_terms(‘category’); y los argumentos del WP_Query para sustituir portfolio por posts.
          Cuando pueda prepararé un tutorial completo de cómo aplicarlo.

          Saludos!

          1. Avatar de Miguel Parraud Cordeyro

            |

            Que genia! muy bien. Lo intentaré y, si no lo logro, esperaré el tutorial.
            gracias!!!

  6. Avatar de Mariano

    |

    He caído en tu blog buscando información para solucionar un tema que me trae de cabeza. No sé si puedes ayudarme.
    Tengo una página hecha con Genesis y el theme Mai -lifestyle-pro, que no traía portfolios.
    Instalé el plugin «Portfolio Post Type» y todo bien.
    El problema es que en la página donde me salen todos los portfolios de cada categoría:
    …ayunviaje.com/portfolio_category/fotografia-viajes/
    no sé como como cambiar ese portfolio_category por otra palabra.
    Luego los portfolios individuales me salen:
    ….nviaje.com/portfolio/que-ver-en-roma/
    que me valen así como están.
    He probado con el plugin «Permalinks Customizer». Con el que puedo cambiar los enlaces de los portfolios individuales, pero las categorías imposible. Sigue apareciendo ese portfolio_category.
    Alguna idea de cómo podría cambiarlo? No encuentro ninguna solución.
    Si no, gracias de todas formas

    1. Avatar de esther

      |

      Hola Mariano!
      Tuve hace tiempo un caso similar y fue complicado hacerlo mediante plugins, al final lo que me sirvió fue crear el custom post type de portfolio «a mano» en lugar de utilizar el de Portfolio post type, indicando el slug para la url que yo quería. No se si te servirá como solución!

      Saludos,

    2. Avatar de Marcos

      |

      Aquí puedes ver cómo puedes cambiar la url de portfolio:
      https://wordpress.org/support/topic/change-url-slug-for-portfolio-type/

  7. Avatar de Javier Deblas

    |

    Muchísimas gracias, Esther! He creado mi página de portfolio gracias a tu ayuda 🙂

    3 años después de esta entrada, el código sigue funcionando perfectamente. Aún así, tuve que crear el CPT a mano (el plugin recomendado me dio problemas), tuve alguna dificultad con la integración a Gutenberg (olvidé añadir el típico show_in_rest: true a la taxonomía categoría) y tuve que modificar algo del PHP y CSS para dejarlo a mi gusto. Pero finalmente lo conseguí.

    Mil gracias y un abrazo!

    1. Avatar de esther

      |

      Hola Javier!
      Qué bien que te haya servido el tutorial! Sí… ya tiene un tiempo y hay algunas cosas que toca renovar, pero al menos te ha servido de base para preparar tu portfolio.

      Muchas gracias por comentar, y un abrazo!

  8. Avatar de jon

    |

    buenisimo, muchas gracias!!!!

  9. Avatar de jon

    |

    Hola, he realizado todos los pasos del tutorial pero me encuentro con el siguiente error en la pagina del porfolio, no se si me puedes orientar.

    Warning: Use of undefined constant size – assumed ‘size’ (this will throw an Error in a future version of PHP) in /home/u147864885/domains/proyectaryreformar.es/public_html/wp-content/themes/minimum-pro/archive-portfolio.php on line 70

    pd: no tengo ni idea de código, me encanta tu web, tiene un contenido increible!!!