Filterable Portfolio Grid on Front page and Archive page in Altitude Pro with Title, Excerpt and Clickable Custom Fields on Hover. https://sridharkatakam.com/filterable-portfolio-grid-on-front-page-and-archive-page-in-altitude-pro-with-title-excerpt-and-clickable-custom-fields-on-hover/

archive-portfolio.php

<?php
/**
 * This file adds the custom portfolio post type archive template to the Altitude Pro Theme.
 *
 */

//* Add portfolio body class
add_filter( 'body_class', 'altitude_add_portfolio_body_class' );
function altitude_add_portfolio_body_class( $classes ) {
	$classes[] = 'altitude-pro-portfolio';
	return $classes;
}

//* Load Isotope
wp_enqueue_script( 'isotope', get_stylesheet_directory_uri() . '/js/jquery.isotope.min.js', array( 'jquery' ), '1.5.26', true );
wp_enqueue_script( 'isotope_init', get_stylesheet_directory_uri() . '/js/isotope_init.js', array( 'isotope' ), '1.0.0', true );

//* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

//* Display Portfolio Categories Filter
add_action( 'genesis_before_loop', 'sk_isotope_filter' );
function sk_isotope_filter() {

	if ( is_post_type_archive( 'portfolio' ) )

		$terms = get_terms( 'portfolio_category' );
		$count = count( $terms ); $i=0;
		if ( $count > 0 ) { ?>
			<ul id="portfolio-cats" class="filter clearfix">
				<li><a href="#" class="active" data-filter="*"><span><?php _e('All', 'genesis'); ?></span></a></li>
				<?php foreach ( $terms as $term ) : ?>
					<li><a href="#" data-filter=".<?php echo $term->slug; ?>"><span><?php echo $term->name; ?></span></a></li>
				<?php endforeach; ?>
			</ul><!-- /portfolio-cats -->
		<?php }

}

//* Display 'back to portfolio' link and Title on Portfolio Category archive pages
add_action( 'genesis_before_loop', 'sk_taxonomy_page_additions' );
function sk_taxonomy_page_additions() {

	if ( is_tax( 'portfolio_category' ) ) {

		echo '<a href="' . get_bloginfo( 'url' ) . '/portfolio/">&laquo; Back to Full Portfolio</a>';
		global $wp_query;

		$term = $wp_query->get_queried_object();
		echo '<h2 class="taxonomy-title">' . $term->name . '</h2>';

	}
}

//* Wrap Portfolio items in a custom div - opening
add_action('genesis_before_loop', 'portfolio_content_opening_div' );
function portfolio_content_opening_div() {

	echo '<div class="portfolio-wrap"><div class="portfolio-content">';

}

//* Remove the breadcrumb navigation
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

//* Remove post info function
remove_action( 'genesis_entry_header', 'genesis_post_info', 5 );

//* Force Excerpts
add_filter( 'genesis_pre_get_option_content_archive', 'sk_show_excerpts' );
function sk_show_excerpts() {
	return 'excerpts';
}

//* Modify the length of post excerpts
add_filter( 'excerpt_length', 'sp_excerpt_length' );
function sp_excerpt_length( $length ) {
	return 10; // pull first 10 words
}

//* Modify the Excerpt read more link
add_filter( 'excerpt_more', 'new_excerpt_more' );
function new_excerpt_more( $more ) {
    return '... <a href="' . get_permalink() . '">More</a>';
}

//* Remove the post image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );

//* Remove post meta function
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

//* Do not show Featured image if set in Theme Settings > Content Archives
add_filter( 'genesis_pre_get_option_content_archive_thumbnail', '__return_false' );

//* Add featured image above .entry-header
add_action( 'genesis_entry_header', 'altitude_portfolio_grid', 4 );
function altitude_portfolio_grid() {

	if ( $image = genesis_get_image( 'format=url&size=portfolio' ) ) {
		printf( '<div class="portfolio-featured-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );

	}

}

//* Add a button to display video (if present) in .entry-content-wrap
add_action( 'genesis_entry_footer', 'sk_add_video_btn' );
function sk_add_video_btn() {
	$video_url = get_post_meta( get_the_ID(), 'video_url', true );
	if ( $video_url ) {
		echo '<div class="video-button"><a href="'. $video_url .'" class="button foobox">Click to watch the video</a></div>';
	}
}

//* Wrap .entry-header and .entry-content in a custom div - opening
add_action( 'genesis_entry_header', 'sk_opening_div', 4 );
function sk_opening_div() {
	echo '<div class="entry-content-wrap">';
}

//* Wrap .entry-header and .entry-content in a custom div - closing
add_action( 'genesis_entry_footer', 'sk_closing_div' );
function sk_closing_div() {
	echo '</div>';
}

// add category names in post class
add_filter( 'post_class', 'portfolio_category_class' );
function portfolio_category_class( $classes ) {

	$terms = get_the_terms( get_the_ID(), 'portfolio_category' );
	if( $terms ) foreach ( $terms as $term )
		$classes[] = $term->slug;

	return $classes;

}

//* Wrap Portfolio items in a custom div - closing
add_action('genesis_after_loop', 'portfolio_content_closing_div' );
function portfolio_content_closing_div() {

	echo "</div></div>";

}

genesis();

front-page.php

<?php
/**
 * This file adds the Home Page to the Altitude Pro Theme.
 *
 * @author StudioPress
 * @package Altitude
 * @subpackage Customizations
 */

add_action( 'genesis_meta', 'altitude_front_page_genesis_meta' );
/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function altitude_front_page_genesis_meta() {

	// if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) || is_active_sidebar( 'front-page-4' ) || is_active_sidebar( 'front-page-5' ) || is_active_sidebar( 'front-page-6' ) || is_active_sidebar( 'front-page-7' ) ) {
	if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) || is_active_sidebar( 'front-page-4' ) || is_active_sidebar( 'front-page-6' ) || is_active_sidebar( 'front-page-7' ) ) {

		//* Enqueue scripts
		add_action( 'wp_enqueue_scripts', 'altitude_enqueue_altitude_script' );
		function altitude_enqueue_altitude_script() {

			wp_enqueue_script( 'altitude-script', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery' ), '1.0.0' );
			wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
			wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );

			//* Load Isotope
			wp_enqueue_script( 'isotope', get_stylesheet_directory_uri() . '/js/jquery.isotope.min.js', array( 'jquery' ), '1.5.26', true );
			wp_enqueue_script( 'isotope_init', get_stylesheet_directory_uri() . '/js/isotope_init.js', array( 'isotope' ), '1.0.0', true );

		}

		//* Add front-page body class
		add_filter( 'body_class', 'altitude_body_class' );
		function altitude_body_class( $classes ) {

   			$classes[] = 'front-page altitude-pro-portfolio';
  			return $classes;

		}

		//* Force full width content layout
		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

		//* Remove breadcrumbs
		remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

		//* Remove the default Genesis loop
		remove_action( 'genesis_loop', 'genesis_do_loop' );

		//* Add homepage widgets
		add_action( 'genesis_loop', 'altitude_front_page_widgets' );

		//* Add featured-section body class
		if ( is_active_sidebar( 'front-page-1' ) ) {

			//* Add image-section-start body class
			add_filter( 'body_class', 'altitude_featured_body_class' );
			function altitude_featured_body_class( $classes ) {

				$classes[] = 'featured-section';				
				return $classes;

			}

		}

	}

}

//* Add markup for front page widgets
function altitude_front_page_widgets() {

	genesis_widget_area( 'front-page-1', array(
		'before' => '<div id="front-page-1" class="front-page-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-1' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'front-page-2', array(
		'before' => '<div id="front-page-2" class="front-page-2"><div class="solid-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-2' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'front-page-3', array(
		'before' => '<div id="front-page-3" class="front-page-3"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-3' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'front-page-4', array(
		'before' => '<div id="front-page-4" class="front-page-4"><div class="solid-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-4' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	// genesis_widget_area( 'front-page-5', array(
	// 	'before' => '<div id="front-page-5" class="front-page-5"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-5' ) . '"><div class="wrap">',
	// 	'after'  => '</div></div></div></div>',
	// ) );

	sk_filterable_portfolio();

	genesis_widget_area( 'front-page-6', array(
		'before' => '<div id="front-page-6" class="front-page-6"><div class="solid-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-6' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'front-page-7', array(
		'before' => '<div id="front-page-7" class="front-page-7"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-7' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

}

function custom_read_more() {
	return '... <a href="' . get_permalink() . '">More</a>';
}

function excerpt( $limit ) {
	return wp_trim_words( get_the_excerpt(), $limit, custom_read_more() );
}

function sk_filterable_portfolio() {
	// Display Portfolio Categories
	$terms = get_terms( 'portfolio_category' );
	$count = count( $terms ); $i=0;
	if ( $count > 0 ) { ?>
		<div id="front-page-5" class="front-page-5"><div class="wrap">
			<ul id="portfolio-cats" class="filter clearfix">
				<li><a href="#" class="active" data-filter="*"><span><?php _e('All', 'genesis'); ?></span></a></li>
				<?php foreach ( $terms as $term ) : ?>
					<li><a href="#" data-filter=".<?php echo $term->slug; ?>"><span><?php echo $term->name; ?></span></a></li>
				<?php endforeach; ?>
			</ul><!-- /portfolio-cats -->
	<?php }

	// Query
	$sk_port_query = new WP_Query(
		array(
			'post_type' => 'portfolio',
			'showposts' => '6'
		)
	);

	// Loop
	if( $sk_port_query->posts ) { ?>
		<div class="portfolio-wrap">
			<div class="portfolio-content">
				<?php while ( $sk_port_query->have_posts() ) : $sk_port_query->the_post();

					$terms = get_the_terms( get_the_ID(), 'portfolio_category' );

					$video_url = get_post_meta( get_the_ID(), 'video_url', true );

					if ( has_post_thumbnail( $post->ID ) ) { ?>
						<article class="entry portfolio-item <?php if( $terms ) foreach ( $terms as $term ) { echo $term->slug . ' '; }; ?>">
							<div class="portfolio-featured-image">
								<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo genesis_get_image( array( size => 'portfolio' ) ); ?></a>
							</div>
							<div class="entry-content-wrap">
								<header class="entry-header">
									<h1 itemprop="headline" class="entry-title"><a rel="bookmark" href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1> 
								</header>
								<div itemprop="text" class="entry-content">
									<p><?php echo excerpt( '10' ); ?></p>
								</div>
								<?php if ( $video_url ) { ?>
									<div class="video-button"><a href="<?php echo $video_url; ?>" class="button foobox">Click to watch the video</a></div>
								<?php } ?>
							</div>
						</article>
					<?php } ?>
				<?php endwhile; ?>
			</div><!-- /portfolio-content -->
		</div><!-- /portfolio-wrap -->
		<div class="portfolio-archive-link"><a href="/portfolio/" class="button">View our full Portfolio &raquo;</a></div>
		<?php } ?>
		<?php wp_reset_postdata(); ?>
	</div></div> <!-- /wrap, /front-page-5 -->

<?php }

genesis();

functions.php

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

//* Define a custom image size for images on Portfolio archives
add_image_size( 'portfolio', 500, 300, true );

/**
 * Template Redirect
 * Use archive-portfolio.php for portfolio category and tag taxonomy archives.
 */
add_filter( 'template_include', 'sk_template_redirect' );
function sk_template_redirect( $template ) {

	if ( is_tax( 'portfolio_category' ) || is_tax( 'portfolio_tag' ) )
		$template = get_query_template( 'archive-portfolio' );
	return $template;

}

add_action( 'pre_get_posts', 'sk_change_portfolio_posts_per_page' );
/**
 * Set all the entries to appear on Portfolio archive page
 * 
 * @link http://www.billerickson.net/customize-the-wordpress-query/
 * @param object $query data
 *
 */
function sk_change_portfolio_posts_per_page( $query ) {
	
	if( $query->is_main_query() && !is_admin() && is_post_type_archive( 'portfolio' ) ) {
			$query->set( 'posts_per_page', '-1' );
	}

}

gistfile1.php

genesis_register_sidebar( array(
	'id'          => 'front-page-5',
	'name'        => __( 'Front Page 5', 'altitude' ),
	'description' => __( 'This is the front page 5 section.', 'altitude' ),
) );

style.css

/* Filterable Portfolio Grid
-------------------------------- */

.front-page-5 .wrap {
	padding-top: 100px;
	padding-bottom: 100px;
}

.cpt-archive-description {
	margin-bottom: 50px;
}

.portfolio-wrap {
	margin-top: 12px;
	margin-left: -39px;
}

.portfolio-content .entry {
	width: 374px;
	margin-bottom: 39px;
	margin-left: 39px;
	background: #333;
	position: relative;
}

.portfolio-content .entry-header:after {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.portfolio-content .entry-content-wrap {
	padding: 30px 30px 0 30px;
	position: absolute;
	top: 0;
	opacity: 0;
}

.portfolio-content .entry img {
	display: block;
	left: 0;
	-webkit-transition:  all .2s linear;
	-moz-transition:  all .2s linear;
	-o-transition:  all .2s linear;
	transition:  all .2s linear;
}

.portfolio-content .entry:hover img {
	opacity: 0.1;
}

.portfolio-content .entry:hover .entry-content-wrap {
	opacity: 1;
}

.portfolio-content .entry .entry-title {
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 10px;
}

.portfolio-content .entry .entry-title a {
	color: #fff;
}

.portfolio-content .entry p {
	color: #fff;
	font-size: 16px;
	margin-bottom: 0;
}

.portfolio-content .entry .entry-content a:hover {
	color: #fff;
}

.prev-next-post-links {
	overflow: hidden;
}

.previous-post-link {
	float: left;
}

.next-post-link {
	float: right;
}

.portfolio-image-single {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 30px;
}

.taxonomy-title {
	margin-top: 30px;
	margin-bottom: 30px;
}

.video-button {
	text-align: center;
	margin-top: 10px;
}

.video-button a.button {
	padding: 5px 10px;
	font-size: 10px;
	letter-spacing: 1px;
}

/*
Filterable Portfolio
------------------------ */

ul.filter {
	color: #999;
	list-style: none;
	margin-left: 0;
}

ul.filter li {
	float: left;
	margin-left: 8px;
	margin-bottom: 8px;
}
ul.filter li:first-child {
  margin-left: 0;
}

ul.filter a {
	background: #333;
	color: #fff;
	display: block;
	padding: 4px 10px;
	text-decoration: none;
	border-bottom: none;
	font-size: 16px;
	text-transform: uppercase;
}

ul.filter a:hover, ul.filter a.active {
	background: #ecb538;
	color: #000;
}

.isotope-item {
	z-index: 2;
}

.isotope-hidden.isotope-item {
	pointer-events: none;
	z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
	 -moz-transition-duration: 0.8s;
	  -ms-transition-duration: 0.8s;
	   -o-transition-duration: 0.8s;
		  transition-duration: 0.8s;
}

.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:      -o-transform, 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;
}

@media only screen and (max-width: 1280px) {
	
	.portfolio-content .entry {
		width: 353px;
	}

	.archive .portfolio-content .entry {
		width: 350px;
	}

}

@media only screen and (max-width: 1024px) {

	.portfolio-content .entry-content-wrap {
		position: static;
		opacity: 1;
		padding: 30px;
	}

	.portfolio-content .entry:hover img {
		opacity: 1;
	}

}

@media only screen and (max-width: 800px) {

	.portfolio-content .entry {
		width: 340px;
	}

}

@media only screen and (max-width: 768px) {

	.archive .portfolio-content .entry {
		width: 325px;
	}

}

@media only screen and (max-width: 798px) {

	.portfolio-content .entry {
		width: 300px;
	}

}