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.