Support » Fixing WordPress » How do I make a single-page-layout in WP?

  • averstedt

    (@averstedt)


    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 πŸ™‚

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

    (@orpatech)

    Let me know if u want a theme like this πŸ™‚

    Nasir Zia

    (@mnasir79)

    you will have to buy this theme.. or create one πŸ™‚

    averstedt

    (@averstedt)

    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?

    Moderator Jan Dembowski

    (@jdembowski)

    Brute Squad and Volunteer Moderator

    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

    johnfotios

    (@johnfotios)

    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).

    olyma

    (@olyma)

    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.

    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();
    ?>

    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…

    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?

    invot, you posted your index.php?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How do I make a single-page-layout in WP?’ is closed to new replies.