Creating a Single Page WordPress Theme correctly

Question

I had asked this on the WordPress Exchange yesterday but it has received no attention so I'm now posting here.

I created a single page WordPress theme to learn the process of creating a theme, and it all works great and all, but it's done in a very hack-ish way where if I wanted to distribute this, I'd have people wondering how the hell it works.

In short, you create pages like you would any other theme, and then you add them to your main menu. My code then reads the menu contents and loads the page content in the order the pages are on the menu. (See code below)

Obviously this is not how it should be done. What I'd like to know is how am I supposed to do this? I've yet to find a good guide for single page themes and how they're supposed to work. Any help would be greatly appreciated.

And now my entire index.php file:

<?php
/**
 * @author Spedwards
 * Date: 2020-01-20
 */
get_header();

$menu_slug = 'header-menu';
$locations = get_nav_menu_locations();
if (isset($locations[$menu_slug])) {
    $menu = get_term($locations[$menu_slug]);
    $menu_items = wp_get_nav_menu_items($menu->term_id);
    if ($menu_items) {
        foreach ($menu_items as $item) {
            $page = get_page_by_title($item->title);
            ?>
            <section class="section-page" id="<?= $page->post_title ?>">
                <div class="container">
                    <h2 class="page-section-heading text-center text-uppercase mb-0"><?= $page->post_title ?></h2>
                    <div class="divider">
                        <div class="divider-line"></div>
                        <div class="divider-icon">
                            <div class="fas fa-crown"></div>
                        </div>
                        <div class="divider-line"></div>
                    </div>
                    <?= $page->post_content ?>
                </div>
            </section>
            <?php
        }
    }
}

get_footer();

Live example

Wordpress is originally a blogging platform, it has a simple yet limited feature of its default templating. But you can do whatever you want it with it, and I dont see anything wrong with your approach except that you are creating multiple duplicate content with your approach as all the posts & pages has its own actual front-end page. but you should be able to hide those original page by either a redirect or setting it to private — silver
@silver That's the problem. Individual pages don't exist with this approach. If I create a new page and go to it, it just shows the index page. It might be something unrelated to this though. — Spedwards
its because you don't have a page.php template, different pages will have different template they will load by default, archive pages will look for archive.php, page will look for page.php, posts will look for single.php if none of those exist, it would fallback to index. php, checkout template hierarchy developer.wordpress.org/themes/basics/template-hierarchy — silver

Karol Sobański Karol Sobański · Accepted Answer · 2020-02-07T07:55:02

The problem with WordPress is that their main goal is to support compatibility with old assets. This means over 10 years old technologies, that we are made to work on. WordPress has not ever implemented any software design pattern, nor even any 'best practices' guides have been released.

Official learning materials are the theme development handbook available at https://developer.wordpress.org/themes/getting-started/ , which was first posted in about 2007, and has not changed much.

Working with WordPress will never feel similar to what you may be used to after using PHP Frameworks. Sadly, you need to develop your own structure based on the guide mentioned above, and make it the most transparent you can.

One tip though, try to stick to some coding style, like e.g. PSR-12. It will help you manage even complicated code in a readable way. https://www.php-fig.org/psr/psr-12/

Creating a Single Page WordPress Theme correctly

1 Answers