Question

I need to make a WordPress template for a client where they define multiple nested (2-level) pages and display them on a single page. The nested pages will be in tabbed sections so users can navigate between those sections by changing tabs. They would also like to have a couple of page displayed normally (on separate pages). To handle that I figured I could just use a different template for pages that go in one page or pages that are separate.

I figured out how to display the pages, but I don’t know how to get WordPress to generate the links I want. I want to use the built-in WordPress menus if possible to build the menu with links to anchors (like <a href="#section"> I can’t remember the terminology).

I wasn’t able to find any example of a single page layout in WordPress except for paid themes (and I’m not paying just to see how someone else did it). I was hoping to use the WordPress built-in menu if possible but if not I guess I could just build the menu myself.

Here is how I display the page:

<?php
/**
 * Template Name: One Page Template
 */

get_header(); ?>
    <div id="primary">
        <div id="content" role="main">

            <?php query_posts(array(
                'post_type' => 'page',
                'post_parent' => 0,
                'orderby' => 'menu_order',
                'order' => 'ASC'
                // would also like to check something like 'template' => 'one-page'
            )); ?>

            <?php while (have_posts()) : the_post(); ?>
                <article class="page" id="<?php echo $post->post_name; ?>">
                    <h1><?php the_title(); ?></h1>

                    <?php the_content(); ?>

                    <?php $sub_pages = new WP_Query(array(
                        'post_type' => 'page',
                        'post_parent' => $post->ID,
                        'orderby' => 'menu_order',
                        'order' => 'ASC'
                    ));
                    while ($sub_pages->have_posts()) : $sub_pages->the_post(); ?>
                        <h2><?php the_title(); ?></h2>

                        <?php the_content(); ?>
                    <?php endwhile;?>
                </article>
            <?php endwhile; // end of the loop. ?>

        </div><!-- #content -->
    </div><!-- #primary -->
<?php get_footer(); ?>

Answer 1

Here is what I figured out

function one_page_permalink($permalink, $id)
{
    $template = get_post_meta($id, '_wp_page_template', true);
    if ($template == 'one-page.php') {
        $post = get_page($id);
        return '/#' . $post->post_name;
    }
    return $permalink;
}

add_filter('_get_page_link', 'one_page_permalink', 10, 2);

It’s not perfect but it does what I need.