Custom Post Type Archive page and Templates

Hi All. I am having a hard time creating an archive page with a Custom Post Type query loop and applying a template to it in order to achieve a certain link structure.

Desired link structure:
domain.com/work/ (work archive)
domain.com/work/single-page (work single > this is all fine, no issues here)

CPT setup:
Custom Post Type is called “Work”
Taxonomy is called “Listings”
Series of categories

Questions:
Do I need to create a “Work archive template” with the query loop and use the “work archive template” as a main menu item? (this method does output the correct link structure) Then again, I thought we are not supposed to add content to a template? So, not sure if this is the right way.

Also, when going this route I am not able to change the background color of the “work archive template” because I have replaced the post content block with the query block… In addition I am not able to apply a conditional header for this specific archive page.

As you can see, it’s a mess… Any help is very much appreciated!

@Alexander Aye you need to Create an Archive Page Template for your Custom Post Type. For Custom Post Types you can’t create a Traditional Wordpress ‘Page’ or ‘Post’ for your Archive Page. In ACF under Custom Post Types make certain to enable the Archive Page. Then you can go into Cwicly Themer and create a Template for the that specific Custom Post Type Archive Page.

For example, I have a custom post type of ‘Christmas’ I create a Single Item Template and place content in it like the Header & Footer that will be identical on all Christmas Posts. In between the Header and Footer I have the ‘Content’ block that pulls in the content from the actual custom posts.

The URL for the Archive page will be www.mywebsite.ie/christmas/

For any Christmas custom posts will be for example www.mywebsite.ie/christmas/private-party-nights/

I created an Archive Template for my custom post type ‘Christmas’. Because it’s an archive template I have to put all content in that Template for the frontend Christmas Archive Page.

Single ‘Christmas’ Custom Post Type Template
Screenshot 2023-12-21 at 12.17.12

Posts

I hope that makes sense

Thank you for your detailed answers! I think that I understood most of your instructions. Let me recap the process step by step for the Archive Template and add some questions I am still having:

  1. Create Archive Template in Cwicly Themer
  2. Add Query and Query Template to pull Custom Post Types into the Archive Template
  3. Add Header and Footer

Questions Archive Template:

  1. As per your example - in order to have “Christmas” as a main menu item, do I need to add the archive template directly in to my main menu (Appearance > Menu)?
  2. How can I change the background color of the Archive Template since I replace the post content block with my Query block and therefore can’t change the background of the template?
  3. In your answer you mention “frontend Christmas Archive Page”. Please correct me, but there is only one Archive Template which will serve as the front-end archive.

Thanks you for your patience. I am slowly getting there.

@Alexander You are getting there!

Each Custom Post Type can have a Archive Template (in the Cwicly Themer). So for example I have 3 custom post types, Christmas, Weddings and Events. I will have a Archive Template for each one of those custom post types in the Cwicly Themer.

Add your Query block into each Archive Template and configure it for whatever suits, You can select Post Type and select you Custom Post Type or you could sort by Category within the custom post type or by Taxonomy. Up to you, its all possible as Cwicly is incredibly versatile.

Whatever you put in the Archive Template, be it the header and footer, that will only display on that specific Custom Post Type Archive page on the frontend. So each Custom Post Type will need a Archive Template and Single Page Template.

To add an Archive Template to your menu find it in Appearance > Menu like so:

You can change the background colour globally in Global Colours :

Screenshot 2023-12-21 at 15.23.10

Or wrap the query block in a Div and set the bg colour:

1 Like

Hi @Alexander,

As @hopscotch has explained everything else thoroughly and clearly, I just wanted to quickly share this tip with you regarding the menu items:

Oh I forgot that bit thank you @StrangeTech! :grinning:

1 Like

Ok, great additional infos and explanations - thanks again!

Regarding background colors, you suggest to add an extra div for the archive template. Is this sort of best practice - talking DOM size etc.? My global color is white, however - my archive template needs to have a different background color. Thanks.

Thank you for the additional info. I had the Visibility already checked. Everything now works as expected!

It is best practice to have a <main> tag to denote your main content, so you can wrap your content in a div and change the tag to main.

Depending on whether you use Template parts for your header and footer or embed them directly within your templates will obviously influence the scope of the tag.