Adding tabs in the page edit screen

Posted 21st Oct 2017

#fields #setup

Adding tabs in the page edit screen is a good way to organize your content and can improve the editing experience.

You may have read about creating grids of fields and this is just another way of organizing content to make pages easier to edit rather than having a big long page full of fields. This is just a basic example with small number of fields but it's enough to demonstrate.

Admin > Setup > Templates

Imagine you have a template with a bunch of fields like this.

Fields on home template
Fields on home template Zoom

When you edit a page created with the 'home' template, it looks like this.

Default look of home page edit screen
Default look of home page edit screen Zoom

You can use the 'Fieldset in Tab (Open)' field type to create tabs on the edit screen like so.

Admin > Setup > Fields

Add two new fields called 'imagesTab' and 'seoTab'.

This tab will show fields related to images
This tab will show fields related to images Zoom
This tab will show fields related to SEO
This tab will show fields related to SEO Zoom

Admin > Setup > Templates

Go back to your template, and add the fields 'fieldname' and 'fieldname_END' around the fields you want on that tab.

Adding tab fields to your template
Adding tab fields to your template Zoom

Now go back and edit the original page and you'll see that the fields have been moved into tabs of their own as set up in the template.

Content tab

The content tab on the home template
The content tab on the home template Zoom

Images tab

The images tab on the home template
The images tab on the home template Zoom

SEO tab

The SEO tab on the home template
The SEO tab on the home template Zoom

And that's it! Of course, this example didn't have many fields but if you have a template with 30+ text fields for a form, then tabs can be very useful to organize your page edit screen.

Feedback & support

I hope you enjoyed this tutorial. You can support pwtuts by following on @pwtuts. You can also donate at paypal.me/swcarrey to help support the site which would be awesome!

Related tutorials / See all

Suggest a tutorial

Please note: I do not store any of this information, it's simply used to send me an email. Your email address is required so I can get clarification on your request if needed.