Theme development: menu links a tabbed page with page jumps

by

This sounds awful from an SEO perspective but you could do this:

Note

The reason ( I believe ) you’d have to do this in a query is because of the fact WordPress doesn’t by default have a “Page Archive” so you wouldn’t be able to do this with changing some .htaccess and “easy-peasy” it’s done… It would be a little more involved.

Create a page or page-template. From there you could create a new WP_Query that call all your pages or a group of pages. Loop through your pages and give each a specific <div> or <h1> with an ID of the page slug, then create your menu using the hash.

<?php
    $my_pages = new WP_Query( array(
        'post_type'      => 'page',
        'posts_per_page' => -1,
        'orderby'        => 'menu_order'
    ) );

    if( $my_pages->have_posts() ) : 
?>
    <?php while( $my_pages->have_posts() ) : $my_pages->the_post(); ?>

        <div id="<?php echo $page->post_name; ?>" class="page-section">
            <h1><?php the_title(); ?></h1>
            <?php the_content(); ?>
        </div> <!-- class="page-section" -->

    <?php endwhile; ?>
<?php endif; ?>

What we get could look something like this:

<div id="about" class="page-section">
    <h1>About</h1>
    <p>Blah blah blah blah. . .</p>
</div> <!-- class="page-section" -->

<div id="details" class="page-section">
    <h1>Details</h1>
    <p>Blah blah blah blah. . .</p>
</div> <!-- class="page-section" -->

<div id="contact" class="page-section">
    <h1>Contact</h1>
    <p>Blah blah blah blah. . .</p>
</div> <!-- class="page-section" -->

Now whenever you go to http://www.your-url.com/#contact you’ll jump down to the “Contact” section of that page since it has the same ID. This sort of menu is called a “Jump Menu” and it’s what many websites, such as Wikipedia uses for it’s large sections. If you go to that wikipedia link and click one of the characters in the Alphabet, you’ll notice the page jump and the URL add a #. Finally to express how the menu would work here’s a JSFiddle of the actual Menu.

So, according to that JSFiddle you now need to create a menu of #page-slug. You have a few options on how you want to do this which is entirely up to you. I’ve layed out these options in no particular order.

  1. Create a new WP Nav Menu ( Appearances -> Menus ) and create a custom menu of #page-slug all by hand. This could be tedious and is only automated if you’re paying somebody to do it.
  2. Custom create your menu.
    1. You could create 1 WP_Query at the top of your page, loop through it to create your menu, rewind_posts(), then run your query again to generate the page and it’s contents.
    2. You could also use wp_list_pages() which I think may be a bit redundant if you’re going to run a WP_Query anyway.

Hopefully that gets your started or I’ve misinterpreted your question entirely ( which is entirely possible ) in which case lemme know!