Theme development: menu links a tabbed page with page jumps

Question

This might sound like a basic question, but It is my first time developing for wordpress:

I am developing a theme, I need to have:

• A landing page with navigation menu
• Another page that the landing page redirects to on each navigation menu item clicked

I can have several tabs in the navigation menu; So for example on main page let's say we have a navigation menu:

Details | About | contact

I want when a user click on say for example: "Details" to change the page's main content (not header or footer) and display different tabs with content.

So Details | About | contact should ALL point to the same Page along with a #menuitem append to url.

For example if user clicks details:

==> it should go to url:

host/permanent-page/#details

and so Details tab will be loaded on page.

if user clicks About:

==> it should go to same url:

host/permanent-page/#about

and so About tab will be loaded on page.

How can I make this mechanism?:

• All pages point to same url
• the url will have #itemname appended to it

Any guidance/hints will be very helpful to know where to start.

Answer 1

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!