[Resolved] Build Taxonomy Archive Page with Divi Builder

[Author]

Posts

[Silvia]

Hello, I hope to be able to describe my problem exhaustively. My client is an Educational Agency that offers courses for companies, freelances, professional schools and private people.
I am using Toolset and Divi theme for this project to create a Course Managing website and proceeded as follows:
1)I created the Course Catalog cpt, where I store all the courses available regardless of the time and the place they are given as I have different sessions of the same course given in different venues
2) I created two other post types (sessions and venues) and related them to the Course Catalog cpt.
3) I created a "Course Scope Area" taxonomy with two custom fields that hold respectively an image being the header image of that taxonomy term, and an icon that represents the taxonomy term itself.
4) I created a "COURSE CATALOG" page (see IMAGE catalogocorsi.jpg) where I have two views based on the Course Scope Area taxonomy that has two main terms: TRANSVERSAL (courses that can be attended regardless the company's activity) and SECTORAL (courses specific to the company's activity). Each view is displaying their child terms.

My goal is this: to be able to click on the Child term in order to display an archive page built like the one in image called archivepage.jpg (that was built manually) possibly using the DIVI BUILDER with the divi builder elements in the image, using the TOOLSET shortcode to inject the proper field value in the proper element. I tried but I cannot find taxonomy custom fields listed in the "FIELDS AND VIEWS" button when building an archive page.

How can I achieve this? It would be awesome if you could help me

[Christian Cox]

Hi, let's do this in two parts:
- Display the correct information on a taxonomy archive page
- Integrate this information in a Divi builder design

Here are the basic steps to get the correct information shown on the archive page.
- You have already created a custom taxonomy Course Scope Area taxonomy with two terms, Transversal and Sectoral.
- You have already created a term field group that contains two custom fields that hold the term's header and icon images.
- You want to show an archive of the posts associated with each term, so create a Toolset WordPress Archive for the Course Scope Area taxonomy if you have not already done so. WordPress automatically creates archive URLs like yoursite.com/course-scope-area/transversal, and term links inserted by Views will point to these URLs automatically.
- In the Loop Output editor of this WordPress Archive, between the wpv-loop tags, use the Fields and Views button to design the list of posts associated with the current term.
- Outside of the wpv-loop tags, insert your term custom fields using the Fields and Views button. If they don't appear please temporarily deactivate all plugins except Types and Views and try again. I'm attaching a screenshot of the top of the dialog, where you can see term meta fields from my local site. You can also type the taxonomy name in the search field to filter the results.
- Since a WordPress Archive is designed to loop over posts and not terms, the term field shortcodes must be modified to point at the current archive term. As they are inserted, they won't show anything because term fields are not associated with posts (and the loop of an archive shows posts). You need to supply a term ID so these shortcodes know which term should be queried.
- You can access the current archive term's id with the shortcode:

[wpv-taxonomy-archive info='id']

- So using that information you can pass an ID into a term field shortcode like so:

[types field="image-field-slug" id="[wpv-taxonomy-archive info='id']"][/types]

Let me know how much of this you are able to accomplish, and we can go from there. If you run into problems and want to share login credentials with me, I have activated private reply fields.

[Christian Cox]

Seems fine to me. I see Dettagli Aree Riferimento term field group and the custom fields...am I misunderstanding something? I can select the term field Header Area Riferimento and insert it into a View. See the attached screenshots. Here is the shortcode result:

[types termmeta="header-area-riferimento" title="%%TITLE%%" alt="%%ALT%%" size="full"][/types]

Term field group I tested:
hidden link

View I tested:
hidden link

[Christian Cox]

Sorry for the extra post. Let me know if you are still unable to see the custom fields.

[Silvia]

Chris, I thought I had hit the submit button to this answer that I wrote last night at 4am, only to come home and find that it was still sitting there waiting to be sent. I am sending it right now.
--

Chris,
It's clear I am not doing the right things in the right order.. let me explain my step-by-step actions, maybe you can help me on what I'm doing wrong.

1) I went to the Toolset Dashboard -> WordPress Archives -> Create new Archive and selected "Aree di Riferimento" taxonomy.
2) I created the loop with just the [wpv-post-link] field
3) I set the cursor OUTSIDE the wp-loop and pressed FIELDS AND VIEWS
As you can see from the image attached I still cannot view the "Dettagli Aree Riferimento" field groups.

I am at a loss. I am clearly doing something wrong but cannot understand what. On the other hand it's 4 in the morning here, I might be a tad tired ?
I saved the archive "as is" with comments where I have anomalies. Feel free to alter it as needed. Thank you.

[Christian Cox]

I see, sorry. I was testing in a View, not a WordPress Archive. In my local testing I can see the same issue in WordPress Archives - no term fields are displayed in the Fields and Views dialog in a WordPress Archive. It may be that this feature is not yet implemented in the betas, or it may be a bug. Let me report it to my 2nd tier support team so they can clarify for me. I will update you as soon as I have some additional information.

For now, it appears that manually inserting the shortcodes is required. If you'd like, you can insert them in a View and then cut & paste the shortcodes into your WordPress Archive.

[Silvia]

Thank You very much, I will be waiting for your response regarding the rest of the problem (i.e. the formatting process in the divi builder to achieve the same result of the pic I sent in my first message)

[Christian Cox]

Divi does not support or provide theme options for full-width archives, so I'm not able to achieve exactly what you have described here. It's a limitation of Divi, unfortunately. Here are the things that are not supported:
- The Divi Full-width header module will not extend the full width of the page, it will only extend the width of the page container. In your screenshot above that width is represented by the orange dotted box, and the body area without the diagonal line background
- The Divi image module is not designed to accept a shortcode, so we cannot use it to display a custom field image. A Text module is required instead.

Here are the things we can accomplish:
- Hide the sidebar contents
Use the Theme Options section of your WordPress Archive to disable the sidebar. Note that this only disables the content of the sidebar, it does not force the main contents to extend full-width. Divi has some information here about how you can accomplish that with custom CSS:
hidden link
This CSS applied to the WordPress Archive's CSS panel seems to do the trick, but ultimately this is Divi's code:

@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

- Add a header image that extends the width of the main content area, using a term custom field image
First, create a Content Template that is not assigned to any content. Then use the Divi Builder to design everything between the main nav and the loop. In the first row, insert a Text module. Insert the custom header image field here. Now edit or create a WordPress Archive for this taxonomy. In the Loop Output editor, insert this Content Template just after the wpv-layout-start tag.

- Add the current taxonomy archive term using a shortcode
You can access the current archive term using the wpv-taxonomy-archive shortcode like so:

[wpv-taxonomy-archive info="name"]

You can use the same shortcode to access other information about the current term as well, like the ID or slug. More info about that here:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-taxonomy-archive

- Add an icon image using a term custom field image and a Text module
The process is basically the same as inserting the header image, but with less formatting since it does not extend full-width.

- Create a list of results using a WordPress Archive's loop
Use the Loop Output editor to insert a link to each Post between the wpv-loop tags.

[Silvia]

Chris, thanks for your answer. I followed your instructions but there has to be something I do wrong, because apart from not seeing the taxonomy term fields among the available fields to use in the divi builder, I am probably using the wrong syntax or something, because the page header is not showing neither the header image nor the taxonomy icon, nor the taxonomy term. I put a divider in the content template just to make sure I was editing the right item, and that's the only thing that's showing up. On top of all that, in the loop data I am trying to show the fields that determines if the course is issuing a certificate or not (radio button) and that's not showing either.

Could you please take a look and tell me what I am doing wrong?
The content template is called "TESTATA TASSONOMIA CORSI" and I inserted it into the only archive page available at the moment, "Archivio Aree Riferimento". Thank you!

PS just as a note, I had to add an "!important" to the "width:100;" css code otherwise it wouldn't work.

[Christian Cox]

Okay I made some changes I would like to review with you.
1. The syntax to show term fields using a Types field shortcode is a bit different. You must use "termmeta" instead of "field" as the attribute.

[types termmeta="header-area-riferimento" title="%%TITLE%%" alt="%%ALT%%" size="full"][/types]

2. This is an invalid shortcode, it should be removed:

[wpcf-header-area-riferimento]

3. The "Testata Tassonomia Corsi" Content Template built in Divi includes a wpv-post-taxonomy shortcode:

{!{wpv-post-taxonomy type="area-riferimento" format="name"}!}

However, a post taxonomy shortcode only works in the context of a post. Since this template is placed outside the wpv-loop tags of your taxonomy WordPress Archive, the context is not a post, it's a term. If you want to display the term name here, use the wpv-taxonomy-archive shortcode.

4. In the template for the loop "Loop item in Archivio Aree Riferimento", I have replaced the Types field shortcode with a different shortcode to display the selected radio button value:

[wpv-post-field name="wpcf-rilascio-attestato"]

I'm not quite sure why the Types field shortcode did not work here. It seemed to be set up correctly, so I need to do some additional investigation. Standby and I will update you again shortly.

[Christian Cox]

Okay it appears that displaying a Types field from a post in a taxonomy term archive is still a bit buggy in the betas, and actually produces some PHP warnings. I will report this as a potential bug so it can be addressed in a future beta release. For now, the workaround is to use the wpv-post-field shortcode. You can apply conditionals if necessary to show different text based on the selected option.

[Silvia]

Chris,
thank you so much for your help. Now I can see the image header and the taxonomy name. The only thing that's not working yet is the taxonomy icon.
The code inserted is

[types termmeta="icona-area-riferimento" title="%%TITLE%%" alt="%%ALT%% size="full"][/types]

but nothing is showing.
Any idea why?

[Christian Cox]

It looks like you're missing a double quote after alt="%%ALT%%, can you check that?

[Silvia]

That was just a typo because I was copying the code from another computer on my laptop. The code inserted in the text element is this

[types termmeta="icona-area-riferimento" title="%%TITLE%%" alt="%%ALT%%" size="full"][/types]

[Christian Cox]

Just a typo - the slug of that field is actually "icona-di-area-riferimento", not "icona-area-riferimento". I changed that for you and the image is showing here now: hidden link