A specific menu inside a page, load different contents without reloading it, under the same link

I'm developing a website for a NGO, and they need it as user-friendly as possible since it's tailored towards folks over 65. So the challenge here seems a little big. I just have way too many questions on how to go about this.

They will need a page that has a menu inside it (tabs), and each tab has a different content under it, and this menu is specific for the page (it won't show up in any other part of the website, just on this page), and all of it is under the same link because they need this conglomerate of content easy to find.

I drew something to try to convey how this is. Mostly, I just want to make sure I'm going in the right direction without losing some better way to do it.

My questions:

  • How to add specific preloaded content under those tabs?
  • How the editor will be able to select the content that goes under each tab?
  • I found about pagination, but that seems to spread the content through different links, so probably I would have to use AJAX to reload the page contents. Is this assumption correct?
  • Do you have any other suggestions or future problems that you can perceive as happening and some tips about it?

Also, if you have any ideas that are completely different from mine on how to solve it, feel free to give your input. Thanks a bunch!

Topic customization Wordpress

Category Web

1
answered at

What you are looking for sounds a lot like a tabbed content pattern, a front-end only solution allows you to enter all the content on one post, but the user clicks different tabs to expose different parts of the content.

You can hand-craft something like this with CSS and Javascript. But I prefer to develop my sites using Foundation 6 as a framework. It comes with many pre-built solutions including tabbed content. Using a framework like Foundation allows me to simply add some classes to my html in the post editor.

Your theme might already include a framework (Bootstrap, Foundation, others) that has pre-build classes for tabs. If it doesn't you might need to write your own CSS and JS to create tabs, or pick a plugin that adds CSS and JS that lets you add tabs.

If just a few pages have this tabbed content it's easiest to simply create the right HTML and class structure in the Text view of the content editor.

But that's pretty easy for an editor to break and so it's not a good solution if you need to have a lot of pages with tabs or if your tabbed pages get edited frequently. In that case you might want to set up some kind of Advanced Custom Field solution that creates forms for each tab, and then write a custom template that wraps those ACF fields into the correct HTML and class structure. In ACF you'd probably use one Field Group with a bunch of Fields names like tab1_title, tab1_content, tab2_title, etc.

To create forms that editors and authors can use on the post edit page, you'll need to make custom fields. The most common way to do that is with the Advanced Custom Fields plugin, which is pretty easy to start with and has a great documentation site. ACF lets you create the field and specify the kind of postmeta box that allows field entry.

ACF also has great documentation on how to display those fields in template. You'll need to be able to edit some PHP and will essentially create the HTML tab structure with the contents filed in by ACF fields. The exact details will depend on Bootstrap's form requirements and the names you assign to your custom fields.

One of the Tabs plugins might have form-based tab content entry; I haven't used any of them and wouldn't know.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.