Strategies for building the main content of the Homepage

The main content of the internal pages or blog articles is often dull and can be easily created using the default Gutenberg editor. The following image is what we can achieve easily using Gutenberg Editor.

But this is not the case with the Homepage. In fact, not just the Homepage. Every page on your site with complex layout and heavy content. For Example, Our Dosth site’s Homepage.

We have two goals when building page’s main content:

1. Every piece of main content must be easily editable by the client. Trust me, you don’t want to attend those content change phone calls when you were on a holiday.
2. Often we only get 25 hours to build the Homepage. Most of the clients budget is limited. So, we have to choose the fastest yet least bad way to build the Homepage.

“Least bad way? What does that even mean?”

Here is the reality my friend. There is no standard way to build a page with complex layout and content.

I had this same question and took it to WordPress-StackExchange for an answer and Rarst gave a fitting answer that made sense. Here is it:

https://wordpress.stackexchange.com/questions/271953/what-is-the-best-way-to-build-home-pages-with-a-lot-of-sections-for-distributabl

Although the question is about Theme Development for mass distribution, Rarst’s answer applies to “Theme development for a client” too. 

Get it?

Anyway, let’s take a look at all the available approaches and let’s pick one of them to build our Homepage.

There are six approaches to build the content of a Complex Page ( From a Theme Developer’s perspective )

1. Using Widgets
2. Using page Builders like Divi, BeaverBuilder, WP-Bakery, Elementor, Site Origin
3. Using multiple WordPress pages and their content to build the final page
4. Using custom fields with the help of plugins like ACF, RMB2
5. Using the Gutenberg Editor ( Default content editor since WordPress 5.0 )
6. Combination of 5 and 6, that is building the page’s content with the help of Custom Fields and Gutenberg Editor

Every one of the above-mentioned methods has pros and cons.

But it’s the cons that bother me a lot.

1. Using Widgets – The only problem I have with widgets is If someone accidentally deletes a widget with an image or content, puff, the content is gone. Plus, If they want to use the same widget with the same content in some other sidebar, they have to copy all the content again, Which is kinda tedious and also redundant content.
2. Using Page Builders:
   1. They spit little too much HTML markup and we have no control over it whatsoever.
   2. Page Builders are just plugins that get updates every now and then. Not most of the time, but sometimes these updates break the page’s content and design. And this can be fatal sometimes. If you want to sleep peacefully at night, better do not go for this option. Page builders are for the clients who are designers themselves.
3. Using multiple WordPress pages –This is the best standards-friendly way. This technique doesn’t involve any third-party plugin or data loss. But the only con is its time taking. It always takes time to build the content of the page in a standards-friendly way.
4. Using Custom Fields with third-party plugins like ACF: Although this approach gives all the control over the Markup, it has the same problem as Page Builders. Sometimes Plugin updates break the site and force us to update our code.
5. Using the default Gutenberg Editor – As of now, we can only build not-so-complex layouts but that too with a lot of CSS overrides. Anyway, Gutenberg is the future. It takes time for this beauty to evolve. So, let’s keep an eye on it.

In my opinion:

It totally depends on the budget of the client.

If the client strives to build their website by maintaining all the best possible standards and if the budget is not all a constraint,  I will go with the third approach, that is, building the content of a complex page using Multiple WordPress pages. 

But, most of the time, this is not the reality. Most of the clients just want their website done within a very short span of time like 45 hours, 60 hours etc. and if this is the case, I will go with the sixth approach, that is building the page’s content with the help of Custom Fields and Gutenberg Editor.

Now, WordPress allows us to create custom fields, but it takes a lot of time to build robust custom fields and we shouldn’t build these custom fields inside our theme, if we do so, when the client switches from our theme, the custom fields that came with our theme are gone too.

So, I will rely on a plugin like ACF to create custom fields within minutes. ACF ( Advanced Custom Fields ) is a very reliable plugin for developers and it’s worth the risk.

“Why this combination? Why can’t you just go with the Custom Fields approach totally?”

Simple. Every page has some content that is really important. And most often, this is the content that the page will get started with. So, I always try to build this content using the features that ship by default with WordPress. I Just want this content to be accessible to the visitors even if the ACF or RMB2 plugins fail.

Again, these are my personal preferences. But follow them unless you have a better approach.

For the purposes of this course

I am gonna go with the combination of custom fields with the ACF plugin and the Gutenberg editor to build the Homepage because this is the reality. Not only that, but I also want to walk you through how a Plugin like ACF gets integrated with your theme.

Now, this approach only works if you are developing the theme for a client. But if you are creating a theme for mass distribution, you have to go with “Using Multiples Pages” approach or some better new approach than that. 

Anyway, we will be using “Multiples Pages and their content” approach when building the About Us page of our Dosth site.

By the time you are done with this course, you’ll be mastering both the techniques.

In the next lesson, we will start building the important content of the Homepage using the Gutenberg Editor.