Skip Navigation

[Resolved] How to make a page with tabbed content?

This support ticket is created 7 years, 3 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)

This topic contains 10 replies, has 2 voices.

Last updated by erikd-6 7 years, 3 months ago.

Assisted by: Beda.

Author
Posts
#482269
page with tabbed content layout.png
main layout.png
sketch.png

I want to build a page template using Toolset Layouts, which the end user can use to make pages. The layout contains the normal page elements (title, body) and also a tabbed section.

I managed to: use tabbed content in one of the pages of a site I’m working on but I feel my solution is too complicated fo the end user to work with.

What I wanted to achieve was to create a page with the normal page content (title, body) and below that some content in tabs (provided by layouts). See sketch.png for an example of what I want to have on the front end.

So I put a visual editor cell in a child layout with shortcodes for post title and post body. Below that I added a row with a Tabs cell. page with tabbed content layout.png and main layout.png are screenshots of the child and parent layout I made.

Now I tried to figure out how to get content into the tabs. I could do that with Visual Editor cells in each tab, but then the content would become part of the child layout, which is not very intuitive for the end user.

So instead I created a CPT and a custom taxonomy for it. Each instance of the CPT goes into one of the tabs. I put Views cells in the tabs which I filtered to show only one result per View, using the taxonomy of the CPT.

I feel I may be missing some easier way to do this, as this process – although it does the job – is quite complicated for achieving the seamingly simple goal of putting some tabbed content on a page. Also it means the end user will need to edit a page on two separate locations: the title and body in the normal page editor, and the content for the tabs in separate CPT's. I’d rather have it all in one editor.

Did I overlook something here?
Or is this the way this should be done?
And if so, will this become easier in Layouts 1.9?

#482282

Well, it depends what you want to diplay on those tabs.

The structure of a Parent/Child Layout is clear:

1. The parent Layout is called whenever the Child Layout is called
2. The Child Layout is called whenever you assign it to a page.

Now, the child Layout will display whatver you insert into it, so does the Parent.

If on the Child Layout you want to display information about other Posts you can either insert Visual Editor Cells and ShortCodes passing the Post ID argument (it's available in the GUI, when you insert the ShortCode), or as you do now, with a View displaying other type of content.

By default of course the ShortCode will display content of the current viewed page.

So your approach is so far correct, since you do not want to display current post data, but other posts data.
The only other thin you can do is pass the ShortCode ID and that will call the data of a specific Post.

#482300

Hi Beda, Thanks for your quick reply. I understand the way my solution works. However, I want to make this tabbed content easy to handle for an end user who is not savvy enough to work with toolset but who can make pages and posts by filling in content in a template. This is the profile of many of my clients. Is there a way to add a tabs editor to the page editor? So that the unsavvy end user can fill in the tabs using visual editors just like he fills in the main page content?

What I have in mind now is using a repeating Wysiwyg field. The tabs should be filled with the contents of the Wysiwyg fields supplied by the end user. Would that be possible?

#482308

WYSIWYG fields cannt be repetitive.
But yes, you can add several of them and then place the ShortCode to display those in your Tabs in layouts.

The User can edit the WYSIWYG, which needs of course a sensed title and description (you can add that in Types > Post Fields).

So you could let's say have 3 tabs in Layouts, in the first you call WYSIWYG 1, in the second WYSIWYG 2 and in the third WYSIWYG 3.
In the Post Edit Screen you have those 3 WYSIWYG and give them a proper title / comment(description) and there the user can edit that content easily.

Does that help to solve this problem?

==> The content of course will be of the CURRENT post, when viewed on the front end, btu I think this is exactly what you want?

#482326

Why can WYSIWYG fields not be repetitive? ACF can do it. Are there plans to make Toolset WYSYWIG fields repeatable? Or else could my template work with ACF repeater field with WYSIWYG?

#482338

It cannot be repetitive due to its nature.
There are no plans to make that possible.

What you can do is use the "Multiple Line" field, that can be repetitive, but is not a WYSIWYG.
It should work with ACF Fields if you can call them with a ShortCode in the Visual Editor.

But you still need different FIELDS to call them in the different TABS
You cannot call the repetitive instance of a field in different Tabs.
I mean, the Types Shortcode will output ALL repetitive instances of a Field with one Call separating it by your custom separator you set in the ShortCode.

I am quite sure that's the same for ACF?

#482348

Is it possible to create tabs dynamically in Toolset Layouts, based on a number of instances of a source? Like a Foreach loop?

In pseudo code:

foreach( instance of a given repeater field ) {
create a tab;
put the content of the instance in it;
}

#482367

Not without very elaborated Custom Code.

The Cell for Tabs let you add new Tabs when editing the Layouts, but to add such a functionality as you need you would need a whole new Cell (Custom Cell) mimicking the current Tabs and then adding your own Workflow.
https://toolset.com/documentation/user-guides/creating-custom-cells-unique-functionality/layouts-cells-api/

Also keep in mind you would even need to add new Content Cells (like Visual Editors) and even parse shortcodes in them for each new instance.

In my opinion, it is simpler to restrict the amount of WYSIWYG and let the user edit those.
Also keep in mind if you can add unlimited Tabs, at some point, it will get messy in the display.

#482372

Let me give you an example.

Suppose I build a house renting site where logged in users of some role can upload information about their private holiday homes, which information will be presented at the front end for potential customers.
Suppose I want to present the rooms of the houses in a tabbed user interface. Since the number of rooms is not fixed, this must be a variable number.
Of course there is a limit to the number of tabs to prevend the UI from getting messy. That could be solved by nesting tabs inside parent tabs and/or limiting the maximum number of tabs.

Such a real life example would ask for dynamically created tabs.

Perhaps another workaround would be to create a custom php cell, where the logic is handled either with the output of Toolset fields or other custom fields like ACF. I am aware this goes beyond the Toolset philosophy of creating a php free system. However, would it be possible to create such custom php cells inside a layout?

#482375

I understand the need you mention, but with Toolset this is not possible in the GUI.

You can code the elaborated Cell, this is possible, but as said it is not a trivial code as it needs to mimic the Cell (tabs), then insert content cells and shortcodes, and all this conditionally related to some other Types field where you as example determine the amount of Rooms.

This is something we cannot assist, but we have a DOC (passed previously) about our Cell API.

Unfortunately it is not possible to create these Tabs conditionally on the fly with the GUI only

#482378

Thank you Beda!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.