WordPress.org

Ready to get started?Download WordPress

Forums

How do I make a single-page-layout in WP? (11 posts)

  1. averstedt
    Member
    Posted 2 years ago #

    I want to make a WP-site as a single-page-layout. You know with vertical-scroll and all that.

    I have tried searching in google and in the forum but I don't seem to find the answer to my question:

    How do I get all the pages/posts on the same page like this site?

    If someone just can point me in the right direction, that would have been awesome :)

  2. orpatech
    Member
    Posted 2 years ago #

    Let me know if u want a theme like this :)

  3. Nasir Zia
    Member
    Posted 2 years ago #

    you will have to buy this theme.. or create one :)

  4. averstedt
    Member
    Posted 2 years ago #

    I donĀ“t want to buy a theme like that. I want to create one. So how do I do it? What do I need to do to put all my posts on a single page?

  5. If you haven't already done so, give this a read as a starting point.

    http://codex.wordpress.org/Theme_Development

    Then proceed onto this one.

    http://codex.wordpress.org/Stepping_Into_Templates

  6. johnfotios
    Member
    Posted 2 years ago #

    Of the top of my head I can imagine that would be quite easy to code.

    All you'd need is index.php, functions.php and style.css

    Maybe a loop.php as well and whatever other little features you'd like.

    Design the site and build it in html. Include many custom queries throughout the index.php to take the text and images from different pages within the WordPress.

    eg

    <?php
    	$my_id = 206;
    	$post_id_206 = get_post($my_id);
    	$content = $post_id_206->post_content;
    	$content = apply_filters('the_content',$content);
    	$content = str_replace(']]>', ']]', $content);
    	echo $content;
    ?>

    Use Jquery to slide to certain element ids.

    That would be pretty much it for a start.

    (although it'll take a bit of knowledge of how WordPress works and you'll have to understand how to build your own themes from scratch etc).

  7. olyma
    Member
    Posted 2 years ago #

    Do a web search for "how to build a wordpress theme" and you'll get lots of great tutorials, though a lot of older articles may come up in your search, the core functions and files are pretty reliably the same. If you have more detailed questions about a function or file, always be sure to check the codex.

  8. ecarbonated
    Member
    Posted 1 year ago #

    This will work for what you need. It's a few snippets I found here and there but it will get the job done.

    <?php
    get_header();
    // define how pages will display
    $args = array(
    	'sort_order' => 'ASC',
    	'sort_column' => 'menu_order', //post_title
    	'hierarchical' => 1,
    	'exclude' => '',
    	'child_of' => 0,
    	'parent' => -1,
    	'exclude_tree' => '',
    	'number' => '',
    	'offset' => 0,
    	'post_type' => 'page',
    	'post_status' => 'publish'
    );
    $pages = get_pages($args);
    //start loop
    foreach ($pages as $page_data) {
        $content = apply_filters('the_content', $page_data->post_content);
        $title = $page_data->post_title;
        $slug = $page_data->post_name;
    ?>
    <div class='<?php echo "$slug" ?>'>
            <h2><?php echo "$title" ?></h2>
    			<?php echo "$content" ?>
    </div>
    
    <?php
    }
    get_footer();
    ?>
  9. invot
    Member
    Posted 1 year ago #

    Ecarbonated, you win my person of the week award. The code is tested and working!

    I did make some modifications so that the page works with anchored links:

    <?php
    get_header();
    ?>
    <div id="container">
    <a name="top"></a>
    <?php
    $args = array(
    	'sort_order' => 'ASC',
    	'sort_column' => 'menu_order', //post_title
    	'hierarchical' => 1,
    	'exclude' => '',
    	'child_of' => 0,
    	'parent' => -1,
    	'exclude_tree' => '',
    	'number' => '',
    	'offset' => 0,
    	'post_type' => 'page',
    	'post_status' => 'publish'
    );
    $pages = get_pages($args);
    //start loop
    foreach ($pages as $page_data) {
        $content = apply_filters('the_content', $page_data->post_content);
        $title = $page_data->post_title;
        $slug = $page_data->post_name;
    ?>
    <div class='<?php echo "$slug" ?>'><a name='<?php echo "$slug" ?>'></a>
            <h2><?php echo "$title" ?></h2>
    			<?php echo "$content" ?>
    </div>
    
    <?php
    }
    get_footer();
    ?>

    If you use jQuery.ScrollTo for page transition then I don't think you'll need to do this though, my client just doesn't want transitions...

  10. initialsbr
    Member
    Posted 1 year ago #

    I'm interested in doing the same. I'm exploring this _s theme as a starter...

    underscores.me

    ...and wondering where I'd put this code. If I put it in the functions.php file, I'd have to modify it, right?

  11. n4zgul
    Member
    Posted 1 year ago #

    invot, you posted your index.php?

Topic Closed

This topic has been closed to new replies.

About this Topic