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.
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):
- 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.
- Portfolio Post Type – If you want to use Custom Post Types for Portfolio.
- Display Posts Shortcode – If you are using Portfolio.
- Dynamic To Top – Go to Appearance > To Top. Set Position to Bottom Right and tick Yes for ‘Prevent on mobile’
- Gravity Forms or any other form plugin or script of your choice – if you want to display a contact form in the Contact section.
- mobble
Populate the widget areas
Go to Appearance > Widgets and drag your desired widgets into the Welcome, About and Contact sections.
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.
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"]'); ?> |
by 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:
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.
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/
