0

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!

0

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.

  • Hey @Slam, thanks for your answer. Yep, you hit the nail in the head. I came up to the same conclusion with some research. The theme I'm using has Bootstrap. I didn't realize I could use Bootstrap itself to make the tabbed content. The biggest issue here is that I need to create some connection for the users who are going to be editing the tabs. For example, I need some type of form, or custom-fields, or whatever to give them space to write what goes into each tab, this has honestly been the trickiest part so far, any idea on that? I'll focus on creating the tabs via Bootstrap. Thanks! – Luke Perez Jun 8 '18 at 21:10
  • I do have some ideas and I'll update my answer with the new info. Please accept my answer if it works for you, I need the points. =) – Slam Jun 9 '18 at 20:07
  • I'll try this as well in case my solution doesn't work. I tried ACF and didn't find it convincing as a solution, but I didn't go in depth with it. I need to make it really easy for the user to edit those tabs, and the main content area below it, and the title. So right now, I'm pretty much coding a custom plugin for this (since remaking WP itself isn't ideal either), since just creating a page with custom HTML/CSS with a few PHP hooks wasn't solving all of it (the solution is good, but it isn't super user-friendly as well). – Luke Perez Jun 10 '18 at 17:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.