• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

  • Genesis Grid Style Archive Page Template for Columns

Foodie Pro Theme

Reader Interactions

Comments

  1. thriftycouple says

    July 30, 2016 at 6:38 pm

    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

    Log in to Reply
    • Brad Dalton says

      July 30, 2016 at 11:09 pm

      It seems you may need to clear caching as the CSS displays each entry in columns using width: 25%. If the new CSS you add to your style.css file isn’t being rendered ( Due to an old version of the style sheet being rendered by the browser caching ), only the new PHP will execute.

      or

      You can use another solution http://wpsites.net/web-design/foodie-pro-archive-page-template-for-columns/

      Log in to Reply
  2. homemadehooplah says

    May 22, 2016 at 10:48 am

    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.

    Log in to Reply
    • Brad Dalton says

      May 22, 2016 at 10:57 am

      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 );
      Log in to Reply
      • homemadehooplah says

        May 22, 2016 at 12:13 pm

        Perfect! I totally missed that in the code but now I know what to look for – thank you!

        Log in to Reply
    • Brad Dalton says

      May 22, 2016 at 11:07 am

      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?

      Log in to Reply
      • homemadehooplah says

        May 22, 2016 at 12:15 pm

        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!

        Log in to Reply
  3. Kristie Hill says

    April 30, 2015 at 10:39 pm

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

    Log in to Reply
    • Brad Dalton says

      April 30, 2015 at 11:08 pm

      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

      Log in to Reply
      • Kristie Hill says

        May 5, 2015 at 7:59 pm

        Thanks for explaining the hierarchy to me Brad! That part worked beautifully, any ideas why the images aren’t taking on the 25% display? http://184.154.247.31/~fashi562/category/style-file

        Log in to Reply
        • Brad Dalton says

          May 5, 2015 at 8:08 pm

          There’s another method.
          Use the 2nd snippet and change the 3 to 4.

          Log in to Reply
          • Kristie Hill says

            May 6, 2015 at 8:37 pm

            I’ll keep tinkering with it. I like this gallery method, it works on all of my other sites, just not with this one.

          • Kristie Hill says

            May 6, 2015 at 9:32 pm

            Got it working.

          • Brad Dalton says

            May 6, 2015 at 9:34 pm

            Good Stuff! What was the problem?

  4. Lisa says

    August 8, 2014 at 2:54 am

    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!

    Log in to Reply
    • Brad Dalton says

      August 8, 2014 at 4:59 am

      Hello Lisa

      Add a custom size to the code in the file and regenerate thumbnails. https://wordpress.org/plugins/regenerate-thumbnails/

      Or crop the images and re-upload each featured image manually.

      Log in to Reply
  5. Kris says

    July 31, 2014 at 8:33 pm

    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

    Log in to Reply
    • Brad Dalton says

      July 31, 2014 at 11:07 pm

      Hello Kris

      I think you would need to add them before or after the content using a different hook like genesis_entry_footer

      http://wpsites.net/best-plugins/moving-jetpack-sharing-buttons-above-post-content/

      Log in to Reply
      • Kris says

        August 1, 2014 at 8:10 am

        Got it working!
        https://gist.github.com/anonymous/128f09ce5a4962e1d6a8

        Thanks 🙂

        Log in to Reply
        • Brad Dalton says

          August 1, 2014 at 10:36 am

          Thanks for sharing Kris.

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.