Sridhar Katakam

Genesis and WordPress Tutorials

Announcing One-Pager – A one page parallax website child theme for Genesis

by 154 Comments

I am happy to release my first ever WordPress theme called One-Pager, a child theme for Genesis framework for free. It is primarily meant for single page websites that have several horizontal sections with the nav menu items scrolling smoothly to their corresponding sections.

one-pager-genesis

Live Demo

Features & Summary

  • Meant for a single page website. It is still possible to have inner pages like with any other theme.
  • Welcome, About and Contact sections are widget areas. PHP code for displaying Portfolio entries is coded in front-page.php.
  • Titles and Featured images of 6 (changeable) Portfolio CPT entries are set to be shown in the Portfolio section. Clicking on Featured images will display the images in a lightbox powered by prettyPhoto.
  • Each section has a fixed background image with Parallax effect i.e., the background moves slightly up as the user scrolls down. The Javascript for Parallax was taken from StudioPress theme, Parallax Pro.
  • Clicking on a nav menu item will scroll smoothly to the corresponding section instead of jumping sharply. Nav bar menu items will get highlighted depending on which section is currently in view.
  • Upon scrolling down a little, a up arrow button will appear at bottom right, which when clicked will take the user to the top.
  • Built-in scroll animations: fadeInDown for Welcome section, fadeInUp for Portfolio section, slideInLeft for About section and fadeIn for Contact section. These can be configured in js/waypoints-init.js.
  • Scroll animations, Lightbox for portfolio images and Parallax are set to be disabled on tablets and mobiles via mobble plugin.
  • Backstretch jQuery is used to make the background image fill the height of sections in tablets and mobiles.
  • A new ‘Header Right Inner’ widget area in case you want to use a different custom menu in the header area on inner pages.

Follow the guide below to download and set up your single page website like the demo site.

Instructions

Download

Download the theme’s zip file from here. Install and activate.

Plugins

Install and activate these plugins (all these are being used in the demo site):

  1. Page scroll to id – In settings a) Place a comma after the existing value in Selector(s) field and add .nav-header .genesis-nav-menu a (screenshot) b) Set Scroll animation speed to 1000 ms c) Tick Force single highlight.
  2. Portfolio Post Type – If you want to use Custom Post Types for Portfolio.
  3. Display Posts Shortcode – If you are using Portfolio.
  4. Dynamic To Top – Go to Appearance > To Top. Set Position to Bottom Right and tick Yes for ‘Prevent on mobile’
  5. Gravity Forms or any other form plugin or script of your choice – if you want to display a contact form in the Contact section.
  6. mobble

Populate the widget areas

Go to Appearance > Widgets and drag your desired widgets into the Welcome, About and Contact sections.

one-pager-widgets

If you want to display Gravity Forms widget in the Contact section, create a form and drag its widget into Contact Section widget area.

Add Portfolio Items

If you want to display Portfolio CPT entries in the Portfolio section on homepage, in dashboard go to Portfolio > Add New Item and add your desired entries. Make sure to add featured images.

portfolio-dashboard

The number of Portfolio entries that appear in Portfolio section can be changed from the pre-set value of 6 to any number of your choice by editing front-page.php in the following line:

<?php echo do_shortcode('[display-posts post_type="portfolio" image_size="portfolio" posts_per_page="6" wrapper="div"]'); ?>
view raw gistfile1.php hosted with ❤ by GitHub

Change background images for the sections

In wp-content/one-pager/images directory replace the following with your own:

welcome-background.jpg
portfolio-background.jpg
about-background.jpg
contact-background.jpg

Note that if you want to use background images with different names than the above or in another path, you would need to correspondingly change in style.css and in js/backstretch-init.js.

Edit js/backstretch-init.js and enter the correct image URLs of your site sections’ backgrounds.

Header Navigation

Go to Appearance > Menus. Create a custom menu and populate it with in-page #section menu items like so:

one-pager-header-menu

For the ‘Home’ menu item, enter #top as URL.

Go to Appearance > Widgets and drag a Custom Menu widget into Header Right widget area. Select the menu created earlier.

Screen Shot 2014-01-26 at 1.25.29 AM

Site title appears in the header’s left side.

That should be it.

I hope you find my two days worth of effort useful.

GitHub page: https://github.com/srikat/one-pager-genesis/

FAQ: https://github.com/srikat/one-pager-genesis/wiki

  • This looks great, i look forward to testing it out this week.

    Would love to see you build some cool looking Dynamik skins for us, less technical, Genesis users who love to mess around with layouts & styling. I’d be more than happy to pay for good quality DWB skins 🙂

    Reply

  • Srikat: With all of your great tutorials, I knew it would not be long be for your published your first theme for Genesis. Original, visual, very interesting. Glad to finally be able to add you to the GenesisThemes.ca catalogue

    Reply

  • Great work! I am a huge fan of yours. Thanks for all your work and expertise! There have been many times where I’ve been frantically searching for a Genesis answer and you provide not only a great answer, but a thorough and pinpoint explanation. Please keep up the good work!

    Reply

  • wow just through this theme on my blog site to see what it looks like and it looks fantastic! super easy for newbie like me just need to do some tinkering, how do i use the portfolio pics to link straight to my blog posts?

    Reply

  • Hello, great theme! I am viewing the demo on an ipad and the parallax effect doesn’t seem to be working , that is , the fixed background image in each panel is not fixed.

    Reply

  • Thank you very much! I’m glad that somebody FINALLY game up with a one-page theme for Genesis owners!

    Just one question. I’m having trouble getting anything BUT the image to show up in the portfolio section; none of the typography or anything else is showing.

    Is it possible to replace the portfolio section, and use my own portfolio plugin I purchased instead? If so, would that require a lot of customization, or is it a relatively easy process?

    Thanks again for making this available!

    Reply

  • Is it just me? I created a fresh WordPress w/ a fresh Genesis, and installed the requisite plugins. But I still cannot get anything in the portfolio description to show up; only the image shows up. So I can list a project’s image, but I cannot describe the project.

    Could/should I install a separate portfolio plugin? I have a couple of premium portfolio plugins.

    Any guidance in how to rectify this situation would be greatly appreciated! The working example will be on my homepage (linked).

    Thanks!

    Reply

  • Hi Sridhar,

    Love your great value add work for the the Genesis Framework!

    I’ve installed the parallax Pro theme and all is well, except for trying to navigate the “home sections” of the Home Page.

    I can understand you’re using the “page scroll to id” plugin for retrofitting the Parallax Pro theme code into existing sites. Would expect this would be built in functionality when using the full Parallax Pro Theme?

    In any case I’m attempting to process the following code to navigate from “home-section-1” to “home-section-2” – Continue Reading. And it isn’t working.

    There’s no mentin in the Parallax Pro documentation on how to navigate the home page sections. And the demo theme at http://demo.studiopress.com/parallax/. Shows the “continue” buttons linking to the sample pages, so no help there.

    My next step would be to just bite the bullet and install the plugin and see how it goes, what are your thoughts?

    Cheers,
    John.

    Reply

  • Hello,

    Great theme, but here is a mystery for me.

    I ve changed the background pictures,

    but on ipad and android, they still appear to be the demo ones….

    with mobble plugin desactivated, i get the new pictures, but with no responsiveness.

    Why is that ?

    Thank you

    Reply

      • Hello

        thanks for the response,

        bur arff no ! no changes

        where do this images (original) come from since i deleted them the theme ?

        mystery…

        Reply

        • You need to change the links defined in backstretch-init.js in order to change the mobile images.

          J.

          Reply

  • Hi, Thank you for this theme… I have installed it and can figure out most things, but the menu is not showing up for some reason. If you look at this site in firebug..
    http://www.evelynfassett.com/sierracommons/

    The right widget area in the header is not working right. The menu is not showing up.. and it looks like the items want to be at the left, not floating right.

    Do you know what might be causing this?

    Many thanks,
    Evelyn

    Reply

  • Hi,

    I installed your One-Pager, but now there is something wrong.
    Following your instructions one by one, I installed the Portfolio Post Type, but after activating the plugin I saw and realised that I already had a Portfolio in my existing website, so this plugin didn’t show them.
    So I deactivated the plugin and installed the Display Posts Shortcode plugin.
    Ok, now my portfolio items do show up as intended.
    But the weird thing is, that in my WP Dashboard I don’t see my Portfolio tab anymore…
    I’m a bit of a newby with WordPress, but I guess that one of the two plugins changed something in the way my Portfolio section shows up in the WP Dashboard.
    Do you know how I can get my Portfolio items back (probably some PHP file I need to change…)

    Thanks in advance, and hey, I like the theme very much!!!

    Reply

  • Forgive my ignorance: can I/should I make a child theme for this child theme? How?

    It’s truly elegant work; I just wasn’t sure that, if you update it, I would avoid overwriting any modifications I make.

    Thanks,

    Reply

    • Vit,
      I think if you go to the images folder within the theme folder and put your own images and name them the same as the existing images (rename those first to something like “old-about-background.jpg,” etc.) this would be the simplest way to change out the images with your own.

      Reply

      • thank you, but I cant see where these original images are, in Media? Where do I find them?
        (Im newbie sorry for this silly question)

        Reply

  • Forget the dashboard for a moment. Go to your file manager. Where a listing of your files is. You may need to open your FTP program if it’s on your hosting server.

    Look inside your root directory to find the ../wp-content/themes/one-pager-genesis-master/images folder.

    Hope that helps,

    Reply

  • I didn’t see a place to add a logo so I added this to the functions

    //* Add support for custom header
    add_theme_support( ‘custom-header’, array(
    ‘default-text-color’ => ‘ffffff’,
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ‘height’ => 76,
    ‘width’ => 320,
    ) );

    Now I can add a logo image in the dashboard but the GENESIS FRAMEWORK title shows up also.

    Reply

    • Still tryin to work this out. Deleted whole theme and re uploaded it. I still see the logo image there so I made new logo and new logo@2x and ftp’d those.

      Can’t get it back to the way the demo is with the simple 80px high header.

      Reply

  • First of all, thank you for releasing this theme!
    Both this release and the huge amount of information on your site have helped me get started with Genesis framework and are a source of inspiration and motivation.

    There’s one quick question I have:

    When putting a text widget in the welcome section the wrapper seems to overlap the portfolio section.
    Is there any way to ‘push down’ the content so that portfolio has a lower starting point on small screens? (since no floats are being used clear:both; obviously won’t work)

    Thanks in advance.

    Reply

    • Hi Heather,

      To add a logo, simply name it logo.png and overwrite the one in ‘/theme-folder/images/’.
      After doing this go to your wp-admin -> Genesis -> Theme Settings and under the section Header Settings set is to ‘Image Logo’.

      If you want to resize the size of your header image using css you’ll find the following CSS section around line 880 of style.css:

      /* Logo, hide text */

      .header-image .site-header .wrap {
      background: url(images/logo.png) no-repeat left;
      padding: 0;
      }

      To resize your image just add a background-size property like so:
      background-size: 180px auto;

      Kind Regards,
      Joris

      Reply

  • That is amazing! I wish I was a photographer, just so I could use a theme like that! I work with words though.. can you suggest how to use a theme like this with articles in the portfolio?

    Reply

  • I have just downloaded the One Pager as I am about to attempt to build a website for my new Swiss Cad Design website. I am a freelance Design Engineer and use 7 different versions of CAD software. I have travelled to and worked at some very famous companies all over Europe and Scandinavia. This is my attempt to work from home. I have done IM as a hobby for about 10 years so all of the SEO I have learnt just might come in handy. Here goes.
    Cheers,
    Ozzy

    Reply

  • Hi Sridhar! I really love this theme and will be using it for my new website. Everything works perfectly, but I can’t get the navigation bar to show up. The Header Right bar is hiding somewhere, but the Header Right Inner bar shows up. Any ideas? Thanks so much, again!

    Reply

  • Hello, thanks for the amazing theme. I have an issue.

    I added a logo by overwriting logo.png with my own logo. It works well on desktop, but on tablets and mobile devices, it still shows the generic Genesis logo, even though I have overwritten the image.

    Additionally, I changed the parallax images as directed by overwriting the ones in the images folder. It again works great on desktop, but on mobile devices, the default images that came with the theme are shown.

    Please see http://www.lolomgwtgdairyqueenbbq.com/reed-hein/ for an example.

    Finally, I had to add an offset of 150 pixels in the “page scroll to id” plugin after adding the image logo, as the header area grew too tall to accommodate the image. This solution works fine for desktop, but for mobile devices, it doesn’t. Clicking nav links sends me to the wrong areas on mobile devices (tested on ipad mini and iphone 5).

    Please help me out with your otherwise amazing theme.

    Thanks!

    Reply

    • Did you ever find resolution for this issue? I’m also have trouble with my images not showing up on the mobile devices correctly. Reverts back to the template images. Thanks for any help. Ardel

      Reply

  • Hi,
    i’d like to know if it’s possible to add a fullwidth video down the menu.
    Thx,
    Picavecchia

    PS: good job!

    Reply

  • Love love love this theme! Thanks so much for offering it free. One problem though, I added my logo with css and it’s not showing up in Chrome, works great in Firefox. Any ideas why that would happen?

    Reply

  • Hi the parallax image is not working in http://www.deyb.info/.

    how can I fix this?

    I installed genesis then the child theme.
    Installed an configured Page scroll to id
    then configured menu.

    all is working except the parallax effect of the background.

    I hope for your reply. thank you.

    Reply

  • please help me.

    everything is working except the background parallax effect.

    I installed genesis and the child thme
    configured menu
    and installe the plugin Page scroll to id

    thank you.

    Reply

  • Hello Sridhar. Thank-you for sharing your theme!

    One problem: the animations (sliding in) don’t seem to work on our website. Not sure why?

    Reply

  • Hi Sridhar, I love this theme, thank you so much! I do have two problems;

    On internet explorer, nothing is displaying correctly – the menus, background images and links are all mixed up. Any advice on how I can fix this?

    Also, when I view the website on my mobile phone, the menu at the top appears twice. How do I get rid of this?

    Any help with these issues would be gratefully appreciated.

    pristinecleaning.com.au

    Reply

  • I like this theme very much! Thanks for your great work. But i found a problem: when i click on “submit” with some required fields empty, the focus jumps to the top of the site, and the error notifications are not visible to the visitor. So he does not know that the message is not sent.

    Reply

  • I love this theme…
    However, I can’t seam to get anything to show up in Portfolio. All I have is this short code that displays.

    [display-posts post_type=”portfolio” image_size=”portfolio” posts_per_page=”12″ wrapper=”div”]

    I have installed the plugin and added 2 items.
    Am I doing something wrong?

    Thanks

    Reply

  • Hello Sridhar,

    I recently found this theme and have started using it for a new client project I’m working on. I think you have done an awesome job on putting this together, along with very thorough information on how to implement it. thank you for your work, and for sharing it with the community. You a truly a very talented individual.

    Working my way through your theme while implementing most of the code customizations you offer is greatly enhancing my own WordPress/Genesis focused skill set.

    All the best,
    Matt

    Reply

  • Hello Sridhar

    I’m trying to figure out if it’s possible to align the content more to one side rather then centred. The background image I am using is of a person’s profile on the right side and the text flows in over it. so I would like to have it adjusted so that it only fills in one side of the page. Is that possible?

    thanks

    Reply

  • Do you have any tutorials on minimizing the image size you used for this demo? I can see that their sizes are no more than 200kb.. can you share your secret?

    Reply

  • I’ve been trying to use hooks to move the top navigation below the welcome section with no luck.

    Is this possible to do? Another option would be to add a section before the nav.

    Any feedback would be great!

    Reply

  • Hi Sridhar,

    I hope you are well. Thank you for releasing this theme for free.

    I have a quick question that, perhaps you may have already heard, but I wanted to run it by you since I didn’t see it in the comments.

    I have a client, she does not need a portfolio. Instead, I wanted to replace that area with a “Latest Blog Posts” section. Can you please point me in the proper direction of how I might be able to do that? I’m thinking it has something to do with conjuring the native blog excerpts much like I’ve seen in other theme front pages…

    Any advice you may have to offer would be much appreciated.

    Breklin

    Reply

  • Hello Sridhar. Great great theme!

    I’m facing a difficulty with the One-Pager when viewing it on mobile. Instead of showing my custom header (Title and Subtitle) it shows “Genesis Framework
    Supports HTML5 & Mobile Responsive Design”

    Could you point how to change that?

    Best regards

    Reply

  • Hi. Love the theme but the Custom Menu / Header Right is not working. It shows no menu and I’ve set things up (I think) exactly how you instructed. It makes the title text smaller as if a menu should be on the right but there is no menu. I’ve tried everything. any help? there is just nothing there.

    Reply

  • Hi Sridhar,

    This was a great find and this page is so well laid out and detailed that I am whipping along even though it is my first time using genesis. I saw this question posted above also. The menu displays twice on mobile and the welcome section is very squeezed.

    Any tips?

    Reply

  • Hello again Sridhar and fellow users!

    How could I replace Portfolio Post Type for another Portfolio plugin?

    I tried to use coolio, replacing:

    on front-page.php

    by:

    The new portfolio appears, but the navigation got screwed. If I click on Portfolio in navigation menu, portfolio section appears, but lower than it should be.

    Any help is welcome!

    Best regards and great 2015 for everyone!

    Reply

    • Hello again Sridhar and fellow users!

      How could I replace Portfolio Post Type for another Portfolio plugin?

      I tried to use coolio, replacing:

      ?php echo do_shortcode(‘[display-posts post_type=”portfolio” image_size=”portfolio” posts_per_page=”6″ wrapper=”div”]’); ?> on front-page.php

      by:

      ?php echo do_shortcode(‘[colio id=”portfolio”]’); ?>

      The new portfolio appears, but the navigation got screwed. If I click on Portfolio in navigation menu, portfolio section appears, but lower than it should be.

      Any help is welcome!

      Best regards and great 2015 for everyone!

      Reply

  • Hi Sridhar,
    Thanks for your time “Excellent work..”
    I need help with portfolio appears. I wanted to show some images like a gallery and couple of YouTube videos in Lightbox. How can I get this to work?
    regards
    Baburajan

    Reply

  • Hello,

    Thank you for such a fantastic theme – it’s just beautiful! I’d like to use it for a new website I’m designing but I have a question I can’t find the answer to. I’m new to WordPress, that could be my issue. 🙁

    I’d like to have the “Portfolio” area be blog posts instead of just images. Is it possible to have each of the 6 portfolio boxes link to actual blog posts (that contain a photo)? I’d like my navigation bar menu items to be: Home, Blog, Store, About & Contact, where “Blog” replaces ‘Portfolio’ but has the same look as the demo site.

    Thank you in advance to anyone that can offer advise on this and whether or not this change is even possible on this theme.

    Reply

  • thank you for this great theme, I have made some of the changes you have served us and they all works fine. Now my Portfolio featured images link to CPT single portfolio page.
    But how can I setup a Portfolio-archive-page? can I use another portfolio page template of yours?

    Reply

  • Hi Sridhar. This looks super-slick! You mentioned that you can still have inner page navigation with this, which was designed to a be a one page. Would the navigation to the regular inner pages still be in the same menu that the auto-scrolling sections are in? Or would they have to go in another menu?

    I’m trying to get a one pager with NO scrolling, and just use navigation to go to the inner pages. Can this theme do that?

    Thanks!

    Reply

  • Hello.

    Thank you for this great theme.
    I installed it yesterday and I have one question.
    How do I specify the portfolio category to show in the front page as I have made few categories and only want to show 1.

    I am looking forward to your answer.

    Thank you

    Reply

  • Thinking of switching over. We’re already on Genesis, but I think this theme is much better suited to our purposes and we do love the focus on a good portfolio on the homepage. Two quick question – 1) do you do customizations / are you still doing customizations / are you available and 2) assuming we can do a “blog” for the site, just like you can on any other WP site, correct?

    You are welcome to reply in the comment here, or feel free to send us the email we’ve give.
    Thanks…

    Reply

    • Hi Brick and Cornice.

      “1) do you do customizations / are you still doing customizations / are you available”

      The answer is “yes”, “yes”, and “yes” to all 3 of these questions. I would go to http://genesiscustomizations.com/ (recommended) …. that’s Sridhar’s website, and just fill out the form there.

      The other option is to use the Paid Support forum in here. See this thread by Sridhar: https://sridharkatakam.com/forums/topic/please-read-this-before-posting/

      “2) assuming we can do a “blog” for the site, just like you can on any other WP site, correct?”

      Yes. This is a one-page Genesis child theme, but of course you can have a blog, pages, posts, and everything else.

      Good luck!

      Reply

  • Hello!

    Thanks very much for the theme, Sridhar!

    I would like to know how do I change the site logo… When I try to change in the “personalize” of WordPress, it enters the Genesis Framework logo and I don’t know how to change it.

    In the mobile, the website is appearing with the original images of the theme, not with the ones that I added… Why is this happening?

    Thank you again for the great job,

    Tayra.

    Reply

  • Love this one-pager Sridhar! I have two issues and then it will be perfect. One is that my background images are not showing up on mobile devices. Working great on computer. The second question is how to edit the footer to include a copyright for my client. When I tried to edit this content, the website flaked out 🙂 Thanks for any help, Ardel

    Reply

  • Thanks for your generosity to the community!

    Is there a way to tweak the menu so that is closes when you click on a page?

    Reply
    • >