Skip Navigation

[Resolved] Style archives with Elementor and Views

This thread is resolved. Here is a description of the problem and solution.

Problem:
Can we style archives with Elementor and Views.

Solution:
No, officially you cannot do that.
https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/design-archive-pages-for-custom-post-types/

However, you can try this approach:

- Create a template to style the Archive with Elementor (Pro and Anywhere Elementor feature such things)
- Insert in that template a View that returns posts by the current taxonomy archive.

You just made an archive styled with Elementor and showing data with/by Toolset.

Note, Elementor features different Templates for hierarchical terms, making this approach very powerful.

It's however not the official suggested method to design archives with Elementor pro.
See more in this post below or contact us for details

100% of people find this useful.

This support ticket is created 5 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Tagged: 

This topic contains 11 replies, has 2 voices.

Last updated by deanL 5 years, 11 months ago.

Assisted by: Beda.

Author
Posts
#1190393
screencapture-travelscams1-mysites-io-category-asia-china-2019-01-24-18_22_47.jpg
screencapture-travelscams1-mysites-io-category-asia-2019-01-24-18_03_51.jpg

In this site, I'm using Posts type for publishing content, and the built-in Category for organizing posts by regions/countries (regions in first level, countries in second level)

Here's an example of the region archive page: hidden link — you'll see the posts are showing up fine (see screenshot
screencapture-travelscams1-mysites-io-category-asia-2019-01-24-18_03_51.jpg)

Then I created a custom post type called "Profiles" and I set it to use same taxonomy as Posts. But as soon as I tagged some categories for a Profile post, the archive page (of the same category + parent category ) stopped working (see screenshot
screencapture-travelscams1-mysites-io-category-asia-china-2019-01-24-18_22_47.jpg)

What do you think is causing this behavior?

#1190409

This does not happen on my end.
Can you head to the archive in question you created (Toolset > WordPress Archives) and check whether or not the Taxonomy Archives section, Categories, tells that all post types are included there?

If not, please click "edit" and add the post types you want to display on this Archive.

If this does not help, please update your software to the latest editions, eventually first on a staging site, and test again.
If this does not solve the issue, please try again by removing all plugins but Toolset and using another theme
This should be done on a staging site, and it's necessary to exclude 3rd party compatibility issues.

If then the issue persist, please follow this doc to create a copy of that staging site and send it to me:
https://toolset.com/faq/provide-supporters-copy-site/

I can then have a look locally at this and suggest solutions or escalate this in case it's a bug.

#1190425

Thank you Beda for looking into this. After looking at your comment, I started to think this might have to do with how my taxonomy archives are rendered. I'm not using Toolset's WordPress Archives feature, instead I'm using the 3rd party plugin — AnyWhere Elementor Pro so I can assign different layout template for region and country archive pages.

Lets say I switch to use Toolset WordPress Archives for rendering taxonomy archive pages, is there a way for me to control output based on category level? Which means to say...
Level one categories (regions) look like this: hidden link
Level two categories (countries) look like this: hidden link

#1190438

This is tricky up to not possible on a Toolset Archive since we have no methods to detect what level of the term you are currently seeing. You can assign only one Archive each Taxonomy, so all it's hierarchically attached terms are going to use that same archive.

What you can do, is use HTML conditions in the Archive's loop and check upon the current term or URL, and hence display the posts with different Content Templates depending on the term seen currently.

Lets say I have this categories:
Parent
-- Child
-- Grand Child

They all will use the WordPress Archive I create with Views, but in the Archive loop now I could do this:

[wpv-conditional if="( '[wpv-post-taxonomy type='category' format='name']' eq 'grand-child' )"]
Call the CT you want to use to style Terms with name grand-child
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='category' format='name']' eq 'child' )"]
Call the CT you want to use to style Terms with name child
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='category' format='name']' eq 'parent' )"]
Call the CT you want to use to style Terms with name parent
[/wpv-conditional]

This only works if the posts have each ONE term assigned only.

You can also use this approach:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/displaying-taxonomies-conditionally/#specific

However, assume you have a post assigned to 2 terms (child and parent) then you would see both outputs, and hence, the post duplicated on the archive.

This will work, as long your posts have one term each.

Could you instruct me or share a copy along with instructions, how you set this up with Elementor?
I can try to see if I can exclude our Custom Post or plugins from being the culprit of the issue, and if so, you could contact Elementor afterwards about the issue, or if I can confirm this happens only when using Toolset Post Types, we can look into this problem

I re-activated a private reply for the data to be submitted safely.

#1190448

The wpv-conditional method makes sense, but will not be a good solution for me as I have 260+ child terms (that's how many countries out there!)

Can I share the login info with you so you may login to take a look around? I have made a full site backup so you need not worry about breaking anything.

If this is ok with you, please enable the "hidden message" fields.

#1190450

Enabled.
Please be sure to have a backup.

#1190903

I see your theme is very minimal, it does not feature an archive template, and you mention to use the Elementor plugin to create the archive.
Hence, it's depending on what that archive is able to display.
Usually, Custom Types in WordPress would be archived with the default archive template if any or hierarchically upwards in the template system, and that usually results in that data not displayed because the templates are not ready to display the custom data.

This is where custom templates, or Views, or in your case Elementor come in.
Views is able to create an archive template that will display both your posts and custom posts for the shared taxonomy.
I created one for you at hidden link but it does not apply to the archive in question after assigning it to the taxonomy.
This can be because:
- Elementor is assigned
- The theme is not featuring necessary code to properly render archives of any kind
- Others

At this point, I refrained from deactivating software, but you can do so, and should then see the archive as created by Views instead of the one created by Elementor.
This would display all those posts in that category and could be styled in the Archive View itself with HTML and CSS.

Theoretically, you can insert IN the Archive View Loop an Elementor Template.
https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/create-templates-for-custom-post-types-with-elementor-and-toolset/#limitations-when-using-elementor-and-toolset-templates-together
But note that this is not how we intended the integration between Toolset and Elementor to be used (even it's possible). Intended would be to insert the Toolset generated "things" into Elementor templates.

This is the way you actually try to do it currently (Create the archive with Elementor and display Toolset elements in it.), and also according to the requirements you need to use Elementor's features that allow styling each hierarchical member of the taxonomy separately as you outline.

That breaks as soon you add custom content to that archive, I confirm this.

This means if it happens with "any" kind of custom content, even if not generated by Toolset, it would be an issue to solve either in Elementor or the website itself.
To test this I created a Custom Post Type (hidden link) with this tool hidden link and inserted this to your Theme's functions.php.

No worries, I removed all posts form that type so nothing can be seen on the front end.
The post type shares taxonomy categories.
You can add a post here and connect it to the category "Africa".

There will be no issue (nothing disappears), but the post also will not be displayed on the archive!
So we have a different result than when you use Toolset Post Types, but not a satisfying one still.

I suggest we try to display the Custom Types successfully on the Elementor Template, no matter whether this is a Toolset type or any else.

Now I need to know:
"Post archive template for region" on your site, under hidden link. (no worries these links are not public), I cannot see how to determine what post types to display in that taxonomy archive. How does Elementor let you choose that? Knowing this will allow us to show Custom Types on the templates.
- later, what is the difference between my Custom Post Type, and the Type you created with Toolset?
(Maybe a setting or some filter applied, etc)

#1190932
Image 2019-01-25 at 17.00.50.png

Hi Beda, I'm going to take some time to digest through your findings. Meanwhile let me answer your questions:

"Post archive template for region" on your site, under hidden link. (no worries these links are not public), I cannot see how to determine what post types to display in that taxonomy archive. How does Elementor let you choose that? Knowing this will allow us to show Custom Types on the templates.

The templates were created using Anywhere Elementor Pro, under AE Templates.
There you will find "Post archive template for region" and "Post archive template for country".
"Post archive template for country" was set as global template for any taxonomy archive.
"Post archive template for region" is manually assigned in the Edit Category page (see screenshot) — reason of doing so is because there are only 6 regions. As opposed to 260 countries. By setting "Global" for country template, I don't need to assign the template one by one.

- later, what is the difference between my Custom Post Type, and the Type you created with Toolset?
(Maybe a setting or some filter applied, etc)

I have no idea. I didn't meddle with the settings when I created the post type with Toolset, I just filled in the names and tagged it to use Categories and that's all. Could you tell by looking at the settings? hidden link

#1190968

1. By setting "Global" for the country template, I don't need to assign the template one by one.
I understand the plugin is "OK" with this and does not conflict with itself when one template is global and the other specific, this seems a great solution provided by the plugin...

2. Related to the assigning of the template, I meant, where does or how does this plugin determine what Post Types to display on the archive it generates for the taxonomy?
As we see, it does not display any Custom Posts at all, but only one post type: native WordPress posts.
How does Elementor let you choose that? Knowing this would allow us to show these Custom Types on the templates.
If the Custom Post Type is connected to the taxonomy it does not yet mean, the archive for that taxonomy is able to display data of that Custom Post Type.

That's crucial to display the custom type, however I found the reason to all this, hence you can ignore this point 🙂

3. The settings should be fine, after controlling them, of the post type.

I suspect, Anywhere Elementor is not ready to display Custom Post Types on the archives it generates for any taxonomy.
But I cannot confirm this yet, I just based on the fact that I cannot see settings for this, while Toolset Views, for example, provides this setting, and it is something required to display custom data on archives (as the data is not native to WordPress)

Can you ask with Anywhere Elementor how to include Custom Post Types in the archives created for categories?
If you want I can also ask them, it will, however, take a while as I will have to communicate this thru the compatibility team's process.

I notice also the involved plugins are out of date. This is not necessarily an issue but Elementor and Toolset both fixed several issues in past for compliance, it could be good to update them.

Now, to the solution.

1. I noticed that you do only create the template with Elementor, however, the content (loop) is not generated by it, it's generated by 2 Views.
One does Select taxonomy terms whose parent is the current taxonomy archive and outputs the taxonomy link and a post count.

2. Another displays the posts determined by the current archive term, and that is why we do not see any other custom post, of course, since it does display only native posts. I added all custom posts to it.

3. Additionally, since that View is ordered by "Likes", and no likes exist on profiles or posts, nothing is displayed for those, they simply are omitted, as it cannot be used to order if values are missing.

4. The solution here is to order by something that exists (post date?) and that should be solved (I did this change already)
We now see all posts on the archive, but as soon Profile is activated (with Africa) all disappear again!

5. This indeed is because the single profile posts, apply a Toolset Content Template AND a global Elementor template, whereas you should only apply the Elementor Template (or the content Template, but we suggest the elementor template)
See: https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/create-templates-for-custom-post-types-with-elementor-and-toolset/#limitations-when-using-elementor-and-toolset-templates-together
I also already adjusted this for the one post in profile with term Africa and now on Africa's archive, all 3 custom posts can be seen.
hidden link

Please let me know if some unclarities remain

#1191361

Thank you Beda for spending so much time on this. I truly appreciate you trying to help. The fixes you made had caused something else to stop working, but I don't blame you. I'm starting to believe the issue has a lot to do with the Anyway Elementor Pro plugin I have used to handle taxonomy archives, which I had no other choice. After much consideration, I decided to scrap the idea of sharing Post type categories with Profile type and explore different approach.

Meanwhile I have restored the site to the state before granting you access. I'll take it from here. Thanks again for going the extra miles!

#1191391

I apologise if I broke something on the site (This is the reason I do not like online edits, even if minimal).
Luckily you were able to restore this change.

I still think it is possible to achieve your goal as shown above, eventually with more work that needs to be done where you mention things were broken after.

If you require help for this, let us know, in a new ticket, or here, I can, of course, try to have a look.

#1191835
screenshot.png

Hey Beda, I just had to tell you about this, I finally found the culprit!

This whole time, the problem was caused by the content template I had initially created for Profiles type! What's weirder was, even though I had set it not to be used with any post/taxonomy, when I created new profile, this content template was still automatically got assigned. So I had to completely remove the template from Toolset. Now I'm using Elementor to handle the layout of Profiles type instead and here's how it look: hidden link — Now I'm finally able to use the Category taxonomy (See "My favorite destinations")

By the way, you did not need to apologize. You hadn't broken anything, I do realize the backend is getting a little complex and even I myself could start to break things!

Once again, I can't thank you enough for taking the time to look into my request. Thank you for being so awesome!