page content displayed in sections in a single page website

  • I’m trying do build a single page website with a handful of sections in the manner how it is done with a nav-menu with internal links, e.g. #link1, #link2 etc.

    and the content area sectioned like this (simplified):

    Section id=”link1″

    Section id=”link2″

    etc.

    Now, for simplifyling it and taking advantage of the CMS part of WordPress, how can this be done best? Basically what I want to do is let’s say create a “link1″-page in the editor and have the content displayed in <section id=”link1”>.

    Any ideas how this can be done?

Viewing 10 replies - 1 through 10 (of 10 total)

  • I would recommend setting a static Front Page(https://codex.www.ads-software.com/Creating_a_Static_Front_Page), then create a page template for that page.

    In that page template I would use WP_Query to display a list of pages (https://codex.www.ads-software.com/Class_Reference/WP_Query#Type_Parameters)

    Then inside your Loop (the one you made with WP_Query) you can do something like this:

    <section id="<?php the_title(); ?>">
<?php the_content(); ?>
</section>
    Thread Starter gfaw

    (@gfaw)

    Hey, thank you for your comment.

    Problem with a one template solution is that I will have a lot of content & markup on this (the built-in editor is not very good for this, so I would have to copy/paste with an external editor everytime I’d make a signifcant change in the content). This is the main reason why I want to distribute it logically across several pages (home, about, services, projects, blog, contact etc.) to keep the content per page at a manageable level.

    Ah, and I thought it might be convenient to use the slug/pagename as the title might differ slightly from the slug. id is inconventient, especially with pretty permalinks.

    Maybe I’m not understanding what you’re trying to do. You said you want to have a single page website. I assumed that meant all the content for the entire site will be on that one page. Each page can only use a single template, so I’m not sure what the objection to a single template is.

    What I’m suggesting is that you have a single template which displays the content from all the pages, one after another.

    Thread Starter gfaw

    (@gfaw)

    Ah yeah, sorry. Now I got it! A static frontpage with a page template referencing the respective sections and one or more page templates for the “actual” pages (depending on the their content/layout).

    Ok, I think I’m starting to see what the issue is, and it may be more complicated still. So you have a single static front page that uses a template that grabs all the other pages and drops each into its own section. This is fine, but you also want each of those sections to have it’s own “template” that uses a unique layout/styles. Is that correct?

    Thread Starter gfaw

    (@gfaw)

    Yes, that’s corrrect.

    This would allow better control of content/layout/styling.

    I was thinking of something like a custom function in functions.php and then pulling in the output in the respective section, basically like this:

    <section id="about">
    <?php …. display content of about page … ?>
    </section>

    <section id="services">
    <?php …. display content of services page … ?>
    </section>

    etc.

    Actually differences in page templates for the content pages is not the issue. Let’s treat the template for the content pages as one-for-all. I am wondering how to grab the content from those pages and insert it in the static page in a controlled manner with as little hardcoding than possible.

    <?php the_content(); ?> will display whatever content is in the editor for that page. But if each of those pages (sections) has a fancy layout and style that you don’t want to do in the WordPress editor, you would probably need to do something with custom meta boxes. It really would depend on exactly what you were trying to accomplish.

    Thread Starter gfaw

    (@gfaw)

    I got it working now with the code snippet from here:

    basic-query-needed-using-page-id

    It works like a charm (except for the aesthetic issue of code duplication in the template file). But that’s fine for now, can take care of this later.

    If I read that right, you’ll be doing a query for each page?

    Thread Starter gfaw

    (@gfaw)

    yes, for now until I’ve come up with a better solution.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘page content displayed in sections in a single page website’ is closed to new replies.