One Page WordPress Theme | The Best way ?

WordPress Bedouin

(N.b.: This post was first published in 2016. However,it is still a relevant topic.)

The question that was bugging me since I started converting one page parallax HTML templates to WordPress theme, that “What is the best way?”, “How to convert an one page HTML template to a perfect WordPress theme?”

The first thing that came to mind is using a theme options page and get all settings from there for the whole page, keep section on/off option and other settings that remain there even if we don’t need all of them at all. Suppose a client don’t want the ‘team members’ section at his healthcare website and you don’t know how to remove ‘Team’ page from admin panel? Another problem with this approach is, adding and removing new sections require lots of work to do. Third problem was that one single page contains lots of code, even if you use ‘get_template_part()’ very cleverly. It’s a messy solution for a premium theme.

Next idea was using pages for each ‘section’, so that we can use ‘page templates’ there. Each section can be reused. Now we can create as many section as we want and rearrange them using page order. We can also use ‘Drag & Drop’ plugins like ‘Visual Composer’. But the same problem with admin pages and theme settings remains and a new problem arises. To use each page template as sections, we have to remove ‘header’ and ‘footer’ to separate files. But we always do this right, where’s the issue? One of my clients wanted a separate ‘Blog’ page other than the home page. After development, they assigned another developer to add a mini blog section to the parallax home page. He added the ‘Blog Page Template’ to the home page and guess what happened?

We can’t use ‘get_template_part()’ statically, we have to sort out an way for the other developers to work easily. That’s what WordPress is all about, remember?

Another thing we can do is using ‘custom posts’ for sections. Then we won’t face any contradiction with the pages or posts. But in this case, we don’t have the option to change page templates. Not fair.

Have I forgot to tell you about navigation? Oh yeah! Every time you make a new section, you have to change your precious ‘menu’ from admin and set a custom ‘hashtag’ in URL. Also set the same ‘hashtag’ as the ID of that specific section from our code. This is the part where every developer and data entry operator gets wrong.

So, I tried to find out the best solution for one page WordPress theme (which is not obviously not 1 page in real life) instead of eating dozens of eggs or breaking keyboards with trampoline!

  • I used custom posts for sections to save my pages. We can now use normal page templates for regular uses like: blog page, shop or donation, contact page etc. Also use any WordPress theme out there as one page.
  • I needed templates for the custom posts. I used custom templates and keep it similar to page templates, so that anybody can make a new section by just writing a simple comment /* Section name: Blog */ and get a dropdown selection at admin with page/section order, as simple as that.
Section templates and attributes
  • Next, I needed some options for each section. One section might have team members, another one may have only an image on the left and text on the right. Used CMB2 Metabox conditionally for that. Thus, when a template is selected, only specific meta options will be displayed.
Template specific options
  • I had to make sure anyone will be able to use plugins like ‘Visual Composer’ on ‘the_content()’, so used it as much as possible, kept ‘the_post_thumbnail()’ for main/background image depending on the section and ‘the_title()’ for the section title.
Auto-set URL in menus for sections

We got rid of setting hash every time, we can easily change contents and any beginner level developer can maintain the theme you developed. WordPress is all about growing together as a community. Let’s share our ideas.

Thanks for reading. Please comment & share.

WordPress Bedouin
1st August, 2016

The Invisible Man | Machine Learning Engineer, Programmer, Tech Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store