Twenty Seventeen one page parallax scrolling website style, is it possible to achieve this? Yes, it is possible. I will show you how to have Twenty Seventeen with Parallax style with two methods, using a plugin, and manual method.
Before we start it, it is important to know, that a lot of people seem to discuss about the “SEO” (Search Engine Optimizations) effect of one page website. This includes the website that uses Twenty Seventeen one page style that we will achieve in this post. So I recommend you doing research about “Parallax one page SEO” in your preferred search engine first without the quotes, before you follow this tutorial. I try to minimize the effect with my tutorial, but if you have different opinion than I do, please leave a comment below. Or comment in my video on my social media profile, I will be happy to hear your opinion.
After you are sure that you want to have a website that uses Twenty Seventeen parallax style, then we can continue to achieve our goal with a plugin and manually. In the WordPress Twenty Seventeen demo website (shown in below video) where we will work with, I do not have any sections assigned yet. Also have no menu setup for the Top Menu location. But, I have already existing menus, and pages, as well as its contents, they are just not yet assigned to Twenty Seventeen. So make sure, before you actually follow this tutorial, you have your pages, with its contents already setup.
Let’s continue..
Twenty Seventeen One Page Parallax Scrolling with Page scroll to id Plugin
I chose this method, because it is quick, easy and it works. Don’t forget to click “Save” buttons and clean your cache plugin if you use any cache plugins in each steps below to see the changes.
1. Set your website to have “static front page”. To do this, you can go to your Customizer – Static Front Page – check A static page. Here, I use my “Welcome” page as my Front Page, and my “Blog” as my Posts Page. You can also change this in your website reading settings, as I posted a tutorial years ago but still works in this page. For the static page setting, I also posted a tutorial on changing your home page post.
2. Set your sections, in the Customizer – Theme Options – assign your pages to section 1, 2, 3, 4. I set my pages as shows in the screenshot below.
3. Optional, if you want to put featured images, then you can add “featured images” to all of your pages that you assigned theme to Twenty Seventeen’s Theme options except the front page, which is in my case “Welcome” page that I assigned in step 1 above.
4. Install, and activate the Twenty Seventeen one page parallax plugin which is called Page scroll to id plugin.
5. Now, we will create a new menu that we will assign to our top navigation bar. I prefer to create a new menu, to separate this menu from other menus, because this menu will have ids that other menu links don’t have.
Twenty Seventeen Auto Scrolling Menu Creation
I named my menu to be, “Dynamic menu”. Then add items, which are “Custom Links” to this menu. These are my menus as example. I use the panel ids to target the scrolling. Also, I add “nofollow” attribute to these menu links. My reason is because this URL has also another URL that has the same content.
Change yourdomain.tld to your domain name, mine is wpvidZ.com
Home -http://yourdomain.tld/#masthead (this target the header part of Twenty Seventeen theme)
About – http://yourdomain.tld/#panel1
Blog – http://yourdomain.tld/#panel2
Terms of Use – http://yourdomain.tld/#panel3
Contact -http://yourdomain.tld/#panel4
6. If you do not use featured image, you can skip this step, but if you use featured images for your sections pages, then navigate to your “Page scroll to id” plugin setting in your dashboard, add “-400 in the “Offset” field. For your personal preference, you can adjust this number accordingly to your liking.
Twenty Seventeen Parallax Auto Scrolling Homepage is Done, What is Next?
If you want, and I think it will be better for your site for your visitors and Search Engines, because both your visitors and SE bots like well-structured website. So you may want to add your important pages links to your homepage.
To do this, we need to create a custom menu to your widget area, in Twenty Seventeen the widget area is on the footer or sidebar for your post pages.
1. Go to your Customizer – Menus.
2. Create a new menu. I called mine as “My pages”, then I added my pages that I think they are important pages.
3. Go back to your Customizer – Widgets. You should see “Sidebar”, “Footer 1”, and “Footer 2” right here.
4. Because I want to add my menu to be in all pages of my website, so I will add my new menu to the “Footer 1“. So choose “Footer 1” (you can use Footer 2 or even sidebar, but as mentioned earlier, sidebar won’t appear in a static page).
5. Add a widget – Custom menu – scroll down in the Custom Menu, write the title of this widget, I typed, “Pages” and then in the drop down menu, I chose my custom menu, in my case was called, “My pages”. Re-order them if you like. Click “Save & Publish” button.
The Manual Method
The method that I wrote above is to achieve this Twenty Seventeen one page scrolling homepage with a plugin help. You can also do this manually. With above method, you can do without a child theme, but this manual method, you will need to create Twenty Seventeen child theme first. Click here to follow the step by step tutorial.
Twenty Nineteen Theme Full Tutorial – Creating a Website
Once you have the child theme, we can continue. Say, we don’t have the “Page scroll to id” plugin installed, if you have, then you need to deactivate or delete it first.
1. Access your child theme files on your server, you can use FTP client or cPanel.
2. Inside the child theme folder, create a folder, called, “js”.
3. Inside the “js” folder, create a new file, called, “scroll_parallax_twentyseventeen.js”. Then add this following code to this file. Thanks to CSS tricks for the snippet.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | jQuery(document).ready(function($){ //Smoothy scroll to panel $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top+400 }, 1000); return false; } } }); }); |
Save your file.
4. Then, in your functions.php, add this following code;
1 2 3 4 5 6 7 8 9 | function my_smooth_parallax_child() { if (!is_admin()) { if (is_front_page()) { wp_enqueue_script( 'my_twentyseventeen_autoscrolling', get_stylesheet_directory_uri() . '/js/scroll_parallax_twentyseventeen.js', '', '1.0', true ); } } } add_action('wp_enqueue_scripts', 'my_smooth_parallax_child'); |
Save.
5. Now, test your site, it should work. Because I use featured images, I add +400 to the .top line of code. Skip this if you don’t use featured images on your section.
You can also try to test your site in Chrome’s incognito browser window to test it on cache-less browser. Before you go, you can also check out my other tutorial on Twenty Seventeen, like changing the copyright code.
That’s all, by now, you can have Twenty Seventeen one page Parallax website style.