What is the best way to build home pages with a lot of sections for distributable themes

(Naresh Devineni) #1

Hi Everyone,

I want to develop high quality themes by taking in to account all the important things like usability, accessibility. I just want my theme to be “perfect”.

Here is my dilemma.

So, what is best way to build a Home Page with a lot of sections?

I know there are three possible ways.

  1. Widgets
  2. Page Builder ( I do not have time to create premium themes. I want to distribute free themes on my spare time. So only free versions of the page builders )
  3. CMB2 or ACF

All three have pros and cons. But its the cons that bothers me a lot.

  1. Widgets - The only problem I have with widgets is If someone accidentally deletes a widget with an image or content, pufff, the content is gone. Plus, If they want to use the same widget with same content in some other sidebar, they have to copy all the content again, Which is kinda tedious and also redundant content.

  2. Page Builders - Little too much markup and less control. I am also aware that people love to use them. Removes developer dependency for a lot of things which is good for free themes. May be as a web standardista :stuck_out_tongue: I have a ego problem here :fearful:

  3. CMB2 or ACF - Developer Friendly but not client friendly. Its not going to be alright if you are planning to add or remove a section.

So, What is the best way?? I am ready take in the scolds and criticism :smile: , But please give me some clarity.

(Ben) #2

There’s also a 4th way - which is the way that TwentySeventeen did it. Using pages and their content for each section.

As for which is best - there isn’t a best. I think it’s up to you to decide which is least worst.

Personally I would go for something more like TwentySeventeen, or use widgets. With both these methods implementation is relatively simple and you don’t have to rely on 3rd party code that could change (and break your integration) or introduce security errors that you have no way of fixing.

(Naresh Devineni) #3

Oh It is a good idea (4rth way),I have used this technique for several clients. But It adds the following problems in my opinion.

  1. Re-ordering of sections is not possible with out a developer assistance
  2. It adds a bunch of additional pages which might give SEO guys a small heart attack.
  3. What if I want to display faqs, features list or a list of testimonials ?

Of course, I can create a custom plugin to counter the 3rd point above.

But instead of the above mess, If I can sacrifice the re-ordering part, I can go with the CMB2 or ACF way right? Whats your opinion on the CMB2 or ACF way ?

(Ben) #4

I wouldn’t use them. I don’t remember if it was one of both but I know at least one of those plugins did a big update with breaking changes and no backwards compatibility. Which means users could update the plugin and have their site break.

If I had to chose 1 option I think I would go for a variation on the 4th one. You don’t have to use pages for the page content (although you could do them as well). You could easily have a list of content to chose from and then format content differently depending upon the content selected. For instance you could list pages as 2017 does, but if you have a testimonials post type then you could let users select that as well, and then display it automatically.

I don’t think SEO from additional pages would be an issue. Most SEO plugins let you delist things at the page level. As long as you don’t link to the original page it wouldn’t be a problem. Reordering content would just be a case of selecting a different page/ option for the different panels (through the customizer). No developer needed.

I’ve seen this done quite successfully. You can see an example with the Liber theme by Anariel Design. They have 4 demos all built with a system that is a modification of the TwentySeventeen approach:

You can see a demo of the customizer in action here:

(Naresh Devineni) #5

Thank you very much for the much needed input & clarity. These demos look kickass and pretty much what I am looking for. I will dig deep in to their code for any other hidden gems. I will go with the 4rth one :sunny:

(Leland Fiegel) #6

I would reiterate what Ben said.

In addition to Twenty Seventeen, check out the code of the Lodestar and Pique themes (both by Automattic). I used those to build my own Belmont theme in a similar way.

It’s not perfect, but as far as I know, it’s the most “WordPress friendly” way to ensure content portability because the content is comprised of actual WordPress pages, not Customizer settings or widgets, both of which are not under revision control and can be more easily lost on theme switches.

It is also WordPress.org compliant (not sure if that’s a priority for you) and doesn’t require additional plugins.

I am a fan of ACF Pro, although I would be wary of including it in a theme because the creator asks it not be included like that. I also wouldn’t be comfortable asking customers purchase an additional plugin just to do something the theme should probably do on its own.

I haven’t used CMB2 enough to know if it’s possible, but if there was something similar to ACF Pro’s “Flexible Content Field” I would consider that. However, if this code is stored in the theme, you may have content portability issues. If it’s stored in a separate plugin, you have UX issues because it might be odd to install a plugin that has little use outside of the theme.

I don’t think it can hurt to include a “full width” template designed for page builder plugins to use. I just wouldn’t bundle page-building functionality in the theme itself. Maybe the user has a preferred page builder they like to use.

This approach by @natewr is worth taking a look at.

(Gerasimos) #7

In this theme https://cssigniter.com/preview/milos we used the 4th way mentioned by Ben and it works great. Here’s a screenshot from the customizer

It’s really flexible and people are happy with it. For example in the second section we show a page that uses a special page template capable of listing any child pages assigned to it.

We combined that we Jetpack’s featured content functionality giving the user 3 possible options for the hero area of the homepage. A static image background, a video background, or a simple slider.

We have also included a “blank canvas” template that includes only the header and the footer where people can use with their favorite page builder. Works great :slight_smile:

(Naresh Devineni) #8

Hi @leland,

Thank you for the resources. All I want to do is to create a theme in WordPress Friendly way with future compatibility.

I also develop themes that are WordPress.org compliant. They enforce good standards. I only find trouble with homepages.

The only reason I want to develop free themes is Freedom. I am passionate about developing themes for every profession and business available on the map irrespective of their demand in market. May be earn few bucks via “BuySellAds” or “Carbon” in next 3-4 years.

With the techniques mentioned above, I should be able to pursue my dreams at a comfortable pace.

I have been asking the same question since last two years all around the web. Never really expecting an answer from this website either :stuck_out_tongue:. @BinaryMoon’s answer gave me a long awaiting surprise.

Thank you for this website :heart_eyes:

(Naresh Devineni) #9

Hi @tsiger,

Thank you for clarification. I have already started working on the 4rth way. Hopefully, this topic will save a lot of time for future WordPress Standardistas and Theme Developers.

(Jeffrey Carandang) #10

Glad you’ve found a great way :slight_smile: The 4th one is really the best option for you. I would like to recommend widgets but seems you’ll be having several problems which I’ve noted and planning to solve in the future, thank you very much for that :slight_smile: I’ll probably integrate the solution on this plugin of mine : https://wordpress.org/plugins/widget-options/ . I’m already finding ways on cloning features which is also part of my todo lists, will see what I can do with history too! Thanks again!


(Naresh Devineni) #11

Hi Jefferey @phpbits , I have been using your Widgets Options for some of my works and its awesome, never really faced any issue. Thank you for the Plugin :slight_smile:

(Anh Tran) #12

In addition to the 4th way recommended by @BinaryMoon, you can avoid using Customizer by using child pages of the current page. You can control the order of pages using page_order parameter in WordPress (supported by default). This way, you can create as many landing pages as you want.

(Ben) #13

That’s an interesting idea. Not sure how discoverable it is for users - would need good documentation to make it clear how to use it - but would make for a nice custom page template.

(Naresh Devineni) #14

Hi @rilwis, your suggestion is invaluable. It simplifies things further. Between, I have been using Metabox.io since the times it was named “Delux Meta Box”. Greate Plugin :heart:

(Anh Tran) #15

@nareshdevineni: Thanks a lot :slight_smile:

By the way, if you’re worrying about SEO, you can also set the child pages “draft”, so they’re visible only for you.

(Naresh Devineni) #16

I am scared of word “Draft” lol. I am good with documentation :slight_smile:

(Jeffrey Carandang) #17

Thank you for using Widget Options and I’m really glad that you are loving the features :slight_smile: Will do my best to make it more awesome!