Making Category Archive Page in Gallery Format

Step 1: Add this following code in your functions.php file :

/**
* Category Archive in Gallery Format
*
* @author Genesis Developer
* @license GPL-2.0+
* @link http://genesisdeveloper.me/
* @copyright Copyright ( c ) 2015, Genesis Developer.
*/

//* Add the following codes in your functions.php file

//* Show all posts
add_action( 'pre_get_posts', 'gd_show_all_post_category_archive' );
function gd_show_all_post_category_archive( $query ) {
if( ! is_admin() && is_category() && $query->is_main_query() ) {
$query->set( 'nopaging', true );
return;
}
}

add_action( 'genesis_before_entry', 'gd_category_archive_template' );
function gd_category_archive_template() {
if( ! is_category() )
return;

remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );

remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

add_action( 'genesis_entry_header', 'genesis_do_post_image', 4 );
add_action( 'genesis_entry_header', 'gd_do_post_publish_date', 9 );

add_filter( 'genesis_attr_entry', 'gd_add_column_class' );
add_filter( 'genesis_attr_entry-image', 'gd_entry_image_attr' );
}

//* Display publish date
function gd_do_post_publish_date() {
printf( '<p class="entry-meta">%s</p>', do_shortcode( '[post_date]' ) );
}

//* Add columns class
function gd_add_column_class( $attributes ) {

$attributes['class'] .= ' col-3';

return $attributes;
}

//* Add class in img
function gd_entry_image_attr( $atts ) {
$atts['class'] = 'category-thumb';

return $atts;
}

//* Remove filters
add_action( 'genesis_after_entry', 'gd_remove_filter' );
function gd_remove_filter() {
if( ! is_category() )
return;

remove_filter( 'genesis_attr_entry', 'gd_add_column_class' );
remove_filter( 'genesis_attr_entry-image', 'gd_entry_image_attr' );
}

Step 2: Create a new js file “hover.js” and put in “your-child-theme-folder/js” folder. Now add this scripts into this file:

jQuery(document).ready(function($){
  $(".col-3").hover(function(){
    $(this).find('.entry-header').fadeIn();
  },function(){
    $(this).find('.entry-header').fadeOut();
  });
});

Step 3: Loading this new JS file on your site using wp_enqueue_scripts function. Add the following php code in your functions.php file. This JS file will load on category archive page only.

//* Loading JS file on Category Archive page only
add_action( 'wp_enqueue_scripts', 'gd_hover_effect' );
function gd_hover_effect() {
   if( ! is_category() )
     return;
   
   wp_enqueue_style( 'hover-js', get_stylesheet_directory_uri() . '/js/hover.js', array(), CHILD_THEME_VERSION );
}

Step 4: Last step is styling. Open your style.css file and add the following CSS :

.category .col-3 {
  float: left;
	margin: 0 0 0.5% 1.5%;
	overflow: hidden;
  position: relative;
	text-align: center;
	width: 32.333333333%;
}

.category .col-3:nth-of-type(3n+1) {
  clear: both;
  margin-left: 0;
}

.category .entry > a {
  display: inline-block;
  line-height: 0;
}

.category .entry-header {
  background: rgba(255,255,255,0.75);
  display: block;
  height: 100%;
  padding: 15px;
  position: absolute;
  top: 0;
  width: 100%;
}

.category .entry-header .entry-title {
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
}

.category p.entry-meta {
  color: #222;
  margin: 60px auto 5px;
}

@media only screen and (max-width: 680px) {
  .category .col-3,
  .category .col-3:nth-of-type(3n+1) {
    clear: none;
    margin-left: 1.5%;
    width: 49.25%;
  }
  
  .category .col-3:nth-of-type(2n+1) {
    clear: both;
    margin-left: 0;
  }
}

@media only screen and (max-width: 400px) {
  .category .col-3,
  .category .col-3:nth-of-type(3n+1) {
    margin-left: 0;
    width: 100%;
  }
  
  .category .col-3:nth-of-type(2n+1) {
    clear: none;
    margin-left: 0;
  }
}

Cheers. All are done. Now browse your category archive page and enjoy it.