Customizing the Archive Page

[homemadehooplah]

Hello!

I feel like I have the simplest question in the world but after 5 hours of Google searching and 20+ failed tutorials I am at a complete loss 🙁

How in the world do I further customize how posts are displayed on the archive page?! Not so much CSS but the actual data that is churned out?

All I'm trying to create is a SINGLE archive template that will display posts in a thumbnail gallery format in chronological order (similar to how foodie pro does it). That's all. Yet every single search I've tried gives me results for something far more complicated (I don't need custom post types or custom pages per every category or taxonomy - just one template to rule them all) or I get something that will display the posts but no real control over the data that is being displayed. I've tried looking at the files of themes like foodie pro but sadly I'm not savvy enough (yet) to tell where all of this is being defined. I have full confidence I could research and edit the code once I found it... I just need to find it!

Can anyone point me in the right direction? After all the time I've wasted on this I'd even accept a well-coded plugin solution (which I also haven't been able to find.)

[Brad Dalton]

Many different solutions

1. You could take the file from Foodie Pro and use that.

2. You could create a archive,php or any other type of archive template and add PHP code directly to it to modify the output on specific archive types. Learn how the WordPress Template Hierarchy works and which files WordPress looks for first.

3. You could use CSS or PHP code to display your entries in a grid style format.

---

Tutorials for StudioPress Themes.

[homemadehooplah]

Thanks for the reply!

1. I've tried searching the Foodie Pro files, but since I'm still learning, I can't seem to identify what code they're using to create the archive pages. Nothing is clearly labeled "archive" or "grid archive" or anything similar.

2. I've actually tried that tutorial and for some reason it outputs blank data for my site for date, category, and taxamony archives. I'm at a loss as to why. EDITED TO ADD: Would the fact that I'm working with a custom post type ("recipes") have anything to do with this approach not working?

3. Thanks for the link! I have a few other ways bookmarked to accomplish the same effect, but so far I haven't been able to get the archive pages to 1) output the correct post data for given URL (ex: recipes/breadkfast) and 2) allow me to customize exactly what data is output (featured image, title, etc). I need both of these before I can even begin styling and so far it's been extremely difficult 🙁

[Brad Dalton]

1. Its a fairly complex way Foodie Pro codes the grid. The grid functions are in the includes folder and then used in the includes > widgets > foodie-featured-posts.php file. There's other ways to do this using either CSS or PHP code.

2. I tested the archive.php code i linked to on a fresh copy of the new Genesis Sample child theme and it works perfectly. This provides the solution you need to add or remove specific elements on the archive. You can name this file according to the WordPress Template Hierarchy.

3. I assume you want something like one of these:

(a) http://wpsites.net/web-design/4-column-category-archive-recipes-featured-image-title-only/

(b) http://wpsites.net/web-design/display-posts-in-columns-on-genesis-archive-pages/

---

Tutorials for StudioPress Themes.

[homemadehooplah]

Thanks again for the reply! And yes, those are exact examples of what I'm trying to accomplish 😀

I finally managed to get the "recipe" custom post types to display on archive pages using your tutorial above plus the code from here: https://wpbeaches.com/show-custom-post-types-category-archive-page/ and adding this to my functions.php file:

function hooplah_show_all_archives( $query ) {
if( is_category() || is_tag() && empty( $query->query_vars['suppress_filters'] ) ) {
$query->set( 'post_type', array(
'post', 'recipe'
));
return $query;
}
}

Again, I'm so new to all of this I don't know exactly what this is doing other than letting me identify the 'recipe' post type as something that can be displayed on archive pages.

Although, I did have to remove this:

add_filter( 'pre_get_posts', 'hooplah_show_all_archives' );

At the end of the code, because for whatever reason, this was causing my navigation menu to display a list of pages instead of what I have set in Appearance > Menus. So far in clicking around it doesn't seem to have negatively impacted anything, so I guess it's okay to leave it out?

[Brad Dalton]

Here's the original source of the code you linked to https://css-tricks.com/snippets/wordpress/make-archives-php-include-custom-post-types/

They have a forum you could ask about their code but i don't think removing the line of code with the hook in it will make the code work.

---

Tutorials for StudioPress Themes.

[homemadehooplah]

Thanks x3! I was able to find a comment that helped fix my navigation problem.

Question for this setup - is it responsive?

4 Column Archive Recipes Template – Featured Image & Title Only

[Brad Dalton]

Just checked the code and there's CSS for Media Queries so yes.

Sometimes i create a quick demo video. Do you think thats a good idea?

---

Tutorials for StudioPress Themes.

[homemadehooplah]

Yeah, that would for sure be helpful 🙂 After all my searching in code in the past month (I've know HTML and CSS for 15 years but php is totally new to me) I was surprised how often I could replicate the screenshots but then run into a random formatting problem I didn't anticipate once I was testing my site. I almost always prefer text over video for tutorials but seeing the final product in live action before diving in would be amazing.

[Author]

Posts