I know how to add the scrolling effect, I just needed help that how should I code the onePage.php template by which I can handle different themes for the divs i.e. ABOUT, EVENTS ... each div has a different layout & background color..

Hardcoding the divs is not the solution .. I can also dynamically add the divs to the homepage .. but the main question is how to handle different layouts for each div?

Right now using this as my Home Page Template

Template Name: Home Page
<div id="container">
    <a name="top"></a>
    $args = array(
        'sort_order' => 'ASC',
        'sort_column' => 'menu_order', //post_title
        'hierarchical' => 1,
        'child_of' => 0,
        'parent' => -1,
        'exclude_tree' => '6',
        '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;
        $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $page_data->ID ), 'index-post-thumbnail' );
    <div class='page' id='<?php echo "$slug" ?>'><a name='<?php echo "$slug" ?>'></a>
        <div class="page-content">    
            <h2 class="entry-title"><?php echo "$title" ?></h2>
            <?php echo $content; ?>
        <div class="page-featuredImage">
            <img src="<?php echo $thumb[0]; ?>" />

    <?php } ?>

<?php get_footer(); ?>
  • Use CSS and style the IDs that you've assigned here <div class='page' id='<?php echo "$slug" ?>'> – corygibbons Aug 26 '14 at 14:39
  • I can do that too, but the page layout is different for each div – Hassan Alvi Aug 26 '14 at 14:42
  • Just got an Idea, I can use get_template_part('template-name'); instead of directly calling the content .. and add a custom post type to select template-name while adding a new page .. I hope it works .. – Hassan Alvi Aug 26 '14 at 14:54
  • 1
    Brother Hassan Alvi, Lynda.com and Treehouse both have courses on how to develop one page style site using wordpress, I think that will be a nice start for you. Wish you Good Luck ! – – Bangash Aug 28 '14 at 12:35
  • Dear Arif, thanks for the suggestion ... its quite helpful, but need kind of detailed customization ... I have another question, while adding the menu items, I want to modify the wp_nav_menu to use href="#<slug>" instead of regular permalinks .., is there anyway to achieve that?? – Hassan Alvi Aug 29 '14 at 9:51

You have it right @Hassan Alvi, you should use get_template_part() for each stage of your one pager.

Dont use id use specific class instead, it's more object oriented.

It will make you code a lot more readable and more easy to maintain!

  • Got it .. is there any way I can select the template without using a custom post type? – Hassan Alvi Aug 26 '14 at 18:54
  • You can use page ID it's depend if you need to call multiple things of the same type like Job or Employee bio for example. – Beauceron Aug 26 '14 at 19:01
  • I want it to be dynamic.. So I want to select different template for different pages while creating a new one.. – Hassan Alvi Aug 26 '14 at 19:23
  • Do you create a theme that can be use everywhere or it's only for one website if it's for a website only you can use Advanced custom field plugin you create a custom field to select your templates part. I think you should consider to use shortcode too. – Beauceron Aug 27 '14 at 15:20
  • I already know about that.. Just needed to know if there is any other better way to achieve this functionality? – Hassan Alvi Aug 27 '14 at 15:23

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.