WP SITES

2966

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

4 Column Archive Recipes Template – Featured Image & Title Only

I was hired recently to create category archives for a recipe website like this:

4 column layout

The client wanted to keep the primary sidebar and squeeze in 4 featured images with titles only on all category archive pages.

Here’s the result the code in this post produces:

category archive columns

Layout Option

You can use either content sidebar or full width layout with this code:

grid

Demo Video

Includes 1 CSS rule for Media Queries:

Here’s the template code for logged in members:

Register for full access

Related Page Templates

Reader Interactions

Comments

  1. Greetings Brad!

    Thank you for the simple and easily understood directions. I have this mostly implemented, but am not having my categories showing 4 columns; rather its only showing a full-sized featured image with linked title underneath.

    I do apologize for leaving my link, but here’s an example with default template:
    http://thethriftycouple.com/category/diy-projects/gardening-diy-projects/

    And here’s an example with full width:
    http://thethriftycouple.com/category/finance/dropping-debt/

    I am using the Foodie theme but expect I might have some other conflict in my theme?

    Thank you so much!
    Alex

    Reply

  2. Thank you so much for this!

    I have two questions 😀

    1 – How would I display a specific thumbnail size? I’ve already generated it and have it selected in the archive settings in Genesis (it’s a square, 200×200), but it looks like it’s currently pulling a resized version of the featured image (a rectangle shape).

    2 – How could I get this same style to work for archive.php (so all category, taxonomy, and date archives) and search results? I saved this setup in archive.php and it’s currently works on category, but when I view taxonomy archive pages it says there are no posts to display.

    Reply

    • In this line in the code you can change the name of the image size

      if ( $image = genesis_get_image( 'format=url&size=recipe' ) ) {

      See 

      size=recipe

      Or add this:

      add_image_size( 'recipe, 200, 200, TRUE );
      Reply

    • 2. You could do this several ways.

      (a) Rename the file something like grid.php rather than archive.php and use template_include in your functions file with conditional tags to display on multiple archive types

      add_filter( 'template_include', 'use_for_archives', 99 );
function use_for_archives( $template ) {
	if ( is_archive() or is_search() or is_tax() ) {
		$new_template = locate_template( array( 'grid.php' ) );
		if ( '' != $new_template ) {
			return $new_template ;
		}
	}

	return $template;
}

      (b) Or add the PHP code directly to your taxonomy template for your CPT. I assume your theme folder includes a taxonomy-cpt-type.php file, where CPT is the name of your custom post type?

      Reply

      • I went with option A, since I’m coding this theme from scratch (or, trying to) so I only have the files I’ve made and the custom post type is handled by a plugin. Easier for me to code around it 🙂

        This solution worked perfectly. Thanks again!

        Reply

  3. Hi Brad. I only want this to show up on one category, and not all category archive pages. How would I filter this?

    Reply

    • Hello Kristie

      The WordPress template hierarchy works like this. WordPress looks for category files in this order:
      1. category-{slug}.php – If the category’s slug were news, WordPress would look for category-news.php
      2. category-{id}.php – If the category’s ID were 6, WordPress would look for category-6.php
      All you need to do is name the file category-slug.php
      Where slug is the name of your category

      Reply

  4. Hi,

    Thanks for the tutorial! Is there any way to make each post appear with a thumbnail of the featured image, instead of the actual featured image? Some of my featured images are different sizes, which makes the grid look messy – is there a way to get them to all appear the same size?

    Thanks!

    Reply

  5. Wonderful tutorial Brad!
    Just one thing I can’t figure out. I have enabled Jetpack sharing buttons to show on homepage, but when removing post content, buttons are also removed. Any tips to place these buttons under or next to the title?

    Cheers,
    Kris

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *