How Create Responsive One Page WordPress Theme with scrollable effects? - wordpress

Question

Where can I find a soucre that learn to create a Responsive One Page WordPress Theme so when I click on the menu item it scroll down.
Here is an example of what I want http://thememints.com/templates/?theme=Cingle%20WP.

Answer 1

I have had exactly the same question and after searching around found this post.
I was rather shocked to see the responses to this question. It seem to me like people are quick to answer questions without properly reading the question.
All the contributors have given solutions to responsive and parallax scrolling websites but not one has answered the real question.
It is not too broad, and it is not vague. All he is asking is how you go about creating a Single page theme in WORDPRESS.... no one gave any direction as to how to accomplish this.
Not sure why these answers got rated as usefull .
So after digging around with trial and error I found the following to answer the question as to how you go about to create a single page WORDPRESS theme.
One of the major aspect to understand is the Wordpress query-post function which allows you to post multiple page content such as home , about, service and content onto a single page.
To create the the menu structure to scroll to the different sections I found this tutorial to be usefull - create-a-single-page-wordpress-website
I hope this helps

Answer 2

As William Patton said this is a broad question but as far I can understand this may help :
http://www.designerledger.com/parallax-scrolling-tutorials/ for the one page theme.
and a basic start for wordpress development theme :
http://codex.wordpress.org/Theme_Development
Update : I found this awesome plugin that helps you create full screen pages
https://github.com/alvarotrigo/fullPage.js
EDIT 2016
Due to the many up votes at user3263807 answer I made a small/basic one page guide for wordpress. For css/js there are plenty good tutorials and plugins over the internet. Also I assume you are familiar with WordPress Themes.
First of all you should create a template file for your one page. Let's call it template-one-page.php. The template name, commented inside the file, is the name that will appear in Page Attributes -> Template when you creating a page inside admin panel. After that create a page, ie Home, and assign as template your template. If you want your page to appear as front page (when you enter mydomain.com this page will be shown) go to Setting->Reading->Front page displays->A static page and set as front page your page.
// File Security Check
defined('ABSPATH') OR exit;
/*
Template Name: One Page
*/
?>
Normally a one page has sections. So we want to decide what type of sections we want. It could be pages, child pages, posts, custom fields (like a repeater from ACF) etc.
<?php
$id = get_the_ID(); // The page id
$sections = get_posts(array('post_type' => 'page', 'post_parent' => $id)); // get all child pages
foreach ($sections as $key => $section):
?>
<section id="page-<?php $section->ID; ?>" <?php post_class('', $section->ID); ?>>
<h1><?php echo get_the_title($section->ID); ?></h1>
</section>
<?php endforeach; ?>
Or with a Loop
<?php
$id = get_the_ID(); // The page id
$query = new WP_Query( array('post_type' => 'page', 'post_parent' => $id) ); // get all child pages
if($query->have_posts()):
while ( $query->have_posts() ) : $query->the_post();
?>
<section id="page-<?php the_ID() ?>" <?php post_class(); ?>>
<h1><?php the_title(); ?></h1>
</section>
<?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
You can query what ever you want depending the need of your site.

Answer 3

you should take look at below link:
[1] http://www.1stwebdesigner.com/css/responsive-website-tutorial/
[2] http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/
[3] http://readwrite.com/2013/04/16/10-developer-tips-to-build-a-responsive-website-infographic#awesm=~okrhufNGLHp1mh (Best one to keep points in mind while creating )
Thanks.

Answer 4

Here is full detailed video tutorial that deals with setting a one-page scrolling Wordpress website from any theme you want. Need to join - there is a free trial. This allows you to "peek under the hood" and understand the principle of how the other one page themes and plugins were created.
http://www.lynda.com/WordPress-tutorials/WordPress-Building-One-Page-Style-Site/169876-2.html
I have looked into several ready-made themes, such as Onesie and OneEngine, and found them a nightmare to manage on the back end, very user unfriendly. The content of the long home page with several sections in both themes is managed not through the Pages section, like one would assume, but through a different admin section in the Appearance folder, with none of the usual Wordpress interface controls. The tutorial above deals with it properly, with the real Wordpress Pages assembled by a custom loop on the front page and menus working in the same way as built-in Wordpress menus.

Answer 5

I used localscroll and scrollTo jquery plugin in my one page theme, it's working fine.
The plugins link:http://flesler.blogspot.com
After you imported the jquery and plugins files into your page, just call the function like below, then if you click a anchor link, the page will scroll up or down smoothly.
$.localScroll({
target:'body',
duration:1000,
queue:true,
hash:true,
easing:'easeInOutExpo',
offset: {left: 0, top: -55}
});