One Page Theme Development Structure


(cfx) #1

I’ve built a fair number of custom one page themes with multiple sections for private clients and wondered if anyone could share some insight on how they approach this type of theme. My two main weapons of choice are Roots and Advanced Custom Fields Pro.

In the past I’ve done it two ways:

  1. Use pages as each section with page order/presence managed via WordPress’s native menu management.
    Pros: relatively easy to manage and flexible when clients need to add/remove/rearrange sections.
    Cons: management isn’t as straightforward with non-savvy clients who need to flip between pages and menu management; the need to redirect pages so they’re not visible individually.
  2. Create one page with Advanced Custom Fields tabs for each section.
    Pros: This is semantic zen because everything that appears on the home page can be managed on the home page.
    Cons: Memory issues or slow admin load times if there are too many fields/options; still leaves section order management up in the air; and clients can’t easily create/delete sections.

I’m now considering two additional approaches which I would love feedback on:

  1. Set the home page to the page_for_posts and use a non-public CPT (“Sections”) as its posts. The CPT would likely be hierarchical each section type would need its own template.
  2. Use Advanced Custom Fields Options Pages and create a subpage for each section. This is certainly pretty and gives quick access to each section’s edit screen in an admin flyout menu, but it’s a significant break from the typical data hierarchy WordPress encourages. It also doesn’t require any redirects.

Thoughts on any of the above?


(Joel Warren) #2

Good post, something I always wonder about when starting a project like this.

One thing I’d like to add is compatibility. If you need to change this site later to a new design or theme, ideally you’d have those “sections/content” available.

With that in mind my approach would be to either set the sections up as pages or a custom post - but it depends on what the content is.

Some other problems I come against is linking the sections and url routing (especially if you want to link to lightboxed content)


(cfx) #3

Thanks @joelwarren. For precisely the reason you mentioned I’m leaning towards the second #1 in my post. But I’ve now just learned that hierarchical CPTs cannot use Page Templates. Grrr!


(cfx) #4

Ha, but just writing it out I think I’ve devised a solution. Just change the existing “Pages” to be non-public and use those as “Sections” and create a hierarchical CPT for the homepage and its management. It’s so crazy it might actually work.


(Chris Carr) #5

ACF Flexible Content Field solves all these issues.


(cfx) #6

What about navbar management on the homepage itself?


(Chris Carr) #7

Just add a title to the field(s), generate some IDs and link them up in the navbar.


(Kalen Johnson) #8

Yup I’ve done that. Every flexible content field can be given a title, and you can generate an ID with that title, and have it hyperlinked automatically.


(cfx) #9

Thanks @chriscarr and @kalenjohnson, I’ve gone with the Flexible Content Field method and it’s working smoothly! Cheers!


(Tibor Paulsch) #10

I’m currently working on a (Roots) project using ACF’s flexible content fields, and I was also trying to figure out what would be the best way to automate the navigation. Could you explain a little more on how to achive this? Maybe a code sample?

Thanks in advance!


(Nate Wright) #11

Just curious, but how are you one-pagers handling all the extra page/post URLs that are generated, since these can weaken the SEO or lead to random pages being indexed by search engines? Are you just 301’ing everything to the index page in the htaccess file or is there a better trick for handling this with WordPress?


(cfx) #12

@TiborP and @NateWr both good questions. I smell a blog post I can squeeze out of this. Will write one up and post a link here when it’s published!


(cfx) #13

@TiborP and @NateWr, hot off the press: http://cfxdesign.com/one-page-wordpress-theme-workflows/


(Tibor Paulsch) #14

Awesome! Thanks for sharing!


(Kalen Johnson) #15

Awesome, thanks cfx, I look forward to reading it


(Nate Wright) #16

Thanks @cfx. All of those approaches look like they’d work with a client, where I can hold their hand through the setup process. I’ve actually used the Pages as Sections approach.

But I’d be hesitant to release a product on any of these models, as they seem like a kind of convoluted user workflow. I wonder how all those TF themes do it?


(cfx) #17

@NateWr that’s a good question. I’ve never purchased a one page TF theme. I suspect they may use a combination of page builders and an options framework…

Maybe someone who has purchased one can answer?


(Tibor Paulsch) #18

I recently got to see the Corsa theme, which used sections as a CPT. It wasn’t quite obvious how to sort those, but it turned out it ordering was depending on the order of a menu in the Menu settings. I did not find it very intuitive, nor user friendly, even for more experienced WP content managers. As a matter of fact: I was asked to have look at it because a less experienced user of it could not make her website look like the demo :smile:

Having said that; once you know how to do it, it does work well.


(cfx) #19

Interesting, thanks for sharing! It’s always tough at first when managing content for a certain page isn’t quite semantic, i.e. when you have to manage content on the home page anywhere but the home page edit screen.


(Tibor Paulsch) #20

@cfx For now I think I’ll go with suggestion no. 3 in your blogpost BTW :slight_smile:

I’ve had very positive client feedback introducing ACF’s flexible content fields so far.