2

I have currently a website with a basic organisation : 5 different pages ("About us", "projects" ...etc.) with a typical menu bar.

I would now like to have all the pages into a single one. 1) How can I bring all my pages into the home page?

I would also like to keep a (sort of) menu bar: for instance, clicking on "projects" in the menu bar will bring the reader on the project part of the main page. 2) How can I build such a menu bar?

I have (unfortunately!) limited knowledge of Wordpress & coding. Detailed answers would be very much appreciated :)

Thanks, Inès

1 Answer 1

2

You could do this in two ways.

1) Leave the pages as separate pages in the WordPress dashboard and create a custom page template that lists those pages content. Assign this custom template to the homepage.

2) Move the content of those pages into the homepage editor.

Option 1:

A much cleaner option and allows you to revert to individual pages at a later stage. It also makes editing pages a lot easier.

Setup a custom page template, I'm going to call it page-home.php, but you can call it whatever you like.

You'll need to create this template inside your theme folder. The path (in a standard installation of WordPress) should be /wp-content/themes/your-theme/, where "your-theme" is the name of your theme.

NB: If you're theme is updated you will probably lose this template. To prevent this, I'd suggest creating a child theme.

It's probably easiest to copy the contents of page.php and paste it into your newly created page-home.php to retain theme markup. At the top of page-home.php insert the following.

<?php
/*
 * Template Name: Home Page
 */
?>

Look for the default loop that most likely looks something like this.

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

    <!-- Loop HTML/PHP -->

<?php endwhile; endif; ?>

Now you want to replace the default loop with the following code.

<?php
    $pages = get_pages( array(
        'sort_column' => 'menu_order', // allows you to order pages using menu order under page attributes
        'exclude' => 3, // the home page ID
    ) );
?>

<?php
    foreach ( $pages as $page ) {
        $content = $page->post_content;
        if ( ! $content ) // Check for empty page
            continue;

            $content = apply_filters( 'the_content', $content );
            ?>
        <div id="page-<?php echo $page->ID; ?>">
            <?php echo $content; ?>
        </div>
        <?php
    }
?>

Once you've saved this template in the theme, go edit your home page. (If it doesn't already exist, create one and go to your Dashboard > Settings > Reading, and change the Front page displays option to static page and select your newly created home page.) and select the template.

Option 1 Menu

Each section will have an ID that looks like this page-34 where 34 is the pages ID. If you're not sure how to find a page ID, check out this video.

Create the menu as you usually would under Appearance > Menus. Instead of inserting pages though, use links. For example let's say I want to add a page named Dummy with the ID of 34. I'd go to menus and switch to the Links dropdown. In the URL field enter "#page-34" and in the link text field, enter whatever you like, but mine would be "Dummy". Then click Add to Menu.

Rinse and repeat for all pages you'd like to add to the menu. Once the menu is saved you should have standard WordPress menu where each menu item links to the relevant section.

Option 2:

Edit the home page and switch to the text view of the WYSIWYG editor.

For each "page" add a div with a unique ID like this.

<div id="page-about">
    <!-- about page content here -->
</div>

Insert the page content between those div tags. Repeat for every page you want to add to the home page. For example:

<div id="page-contact">
    <!-- contact page content here -->
</div>

Option 2 Menu

Create the menu as you usually would under Appearance > Menus. Instead of inserting pages though, use links. To link to the about page section you'd add a new link with the URL set to "#page-about". To link to the contact page section add a new link with the URL set to "#page-contact". Rinse a repeat for all other pages.

6
  • First of all, thanks a lot for the quick (and detailed) answer! It seems clear to me, but I am missing a very important step: how (and especially where) to create a new Custom Page Template (Where exactly can I create this new file?) Feb 9, 2015 at 13:54
  • No problem! I've edited my answer.
    – Duane
    Feb 9, 2015 at 14:15
  • This path is indeed the one often given; it however doesn't bring me anywhere - I guess I am not using a standard installation...(I recently started working on the website). Is there another way to create a custom template page? Feb 9, 2015 at 14:37
  • Do you have FTP details? If so, what do you get when logging in via FTP? Do you see a public_html or www folder?
    – Duane
    Feb 9, 2015 at 16:20
  • I unfortunately do not have this information... Feb 9, 2015 at 16:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.