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

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.

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