Documentation

For a quick overview on creating a parallax effect and using core Five3 features, check out the welcome video below.

The rest of the articles provide more in-depth information to help you create a beautiful WordPress site with the Five3 theme.

They provide instructions for changing the colour & typography on your site, setting each post’s alignment, adding custom CSS and PHP code and adding background images to posts in order to create the parallax effect.

If you have a question not addressed here, please use the forums or the contact form.

Create Parallax

parallax |ˈparəˌlaks|
the effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g., through the viewfinder and the lens of a camera.

Five3 adds a hint of magic to your site with the parallax effect.

Parallax refers to background images scrolling more slowly than the page content. This creates the illusion of depth on the page. For example, notice the clouds moving more slowly than the statue of liberty on this page?

To use parallax on your own site, simply add a background and/or overlay image to a post.

Five3 provides 3 levels of depth – background, overlay and content. Post content sits in the foreground. An image can be set to sit in the background and/or the space between the background and the content, referred to as the overlay.

For an example, refer to the freedom feature page where the blue sky and clouds are in the background and the statue of liberty is the overlay.

Setting Images

Set parallax images on the Edit Post screen.

To set an image, click the Set Background Image or Set Overlay Image link in the appropriate meta box. The media overlay will pop-up with the Post Backgrounds tab selected.

All images in your media library display in this tab. To set an image, click the Overlay or Background link under the Set Image as: heading.

The image will immediately be set as the background or overlay. No need to update or save the post.

Include Child Pages

Want a parallax scrolling page for all your pages? Five3 makes it easy, with custom page templates.

Five3 includes two templates: Index of all Pages & Index of this Page’s Children. The first of these will display all pages from your site on the one page. The second will display the current page and all of its child pages. Choose either of these custom page template in the Page Attributes metabox on the Edit Page administration screen.

For example, check out the Five3 Features page which uses the Index of this Page’s Children template.

Set Post Alignment

Variety is the spice of life and post alignment is one of the five-spices of Five3.

Being able to move a post to the left, center or right of the screen means you can use full-screen background images that have their objects positioned in the left or right of frame. Combining different alignments on a page adds another layer of motion to your site and when done well, can create the feeling that your content is dancing up the screen.

Choosing Alignment

On the Edit Post and Edit Page screen, Five3 adds an options meta box. Included within this meta box is the Post alignment option. To set your post alignment, simply choose left, center, right or full width. To save the new post alignment, you must update the post.

Set Color & Typeface

Colour and typography are fundamental to any well designed site. Five3 gives you a front-end Visual Designer to make it fast and fun to choose your site’s colour and typeface.The Visual Designer will help you experiment with different styles and find the look that suits your site.

Using the Visual Designer

Step 0

To access the Visual Designer, you must first have the Admin Bar set to display when viewing your site. To toggle the Admin Bar on and off, visit the Users > Your Profile menu page.

Step 1

Once the Admin Bar is visible, click the “Design” button on the front-end of your site.

Step 2

A new box will appear with a text field for colour & selection of typefaces – this is Five3′s Visual Designer.

Step 3

Select a colour, either by clicking the colour wheel or entering a hexadecimal colour value.

Step 4

Select your typeface – change it as often as you like and have fun seeing your site with different typefaces.

Using the Theme Options Page

If you do not want the Admin Bar showing on your site, you can use the less fun, but equally effective Theme Optionspage.Find the Theme Options page under the Appearance menu in your site’s administration dashboard.

The Theme Options page will only show if you do not have the Admin Bar showing on your site. To keep things simple, Five3 hides this options page when the Admin Bar is set to display.

Custom CSS and PHP Code

You may from time to time want to change how Five3 performs a certain task, or add something extra to Five3. There are two methods to extend Five3 – child themes & code snippets.

Child Themes

If you want to make a large number of changes or additions, the best option is to create a child theme of Five3. To learn how to create a child theme, refer to the WordPress codex’s excellent article on creating a child theme.

Code Snippets

If you only want to add or change a single function, you can create a separate file for custom code without modifying core Five3 files.

To add code snippets:

Create a file in the five3.me directory named custom-functions.php
Add your code snippets to this file.
Voilà, Five3 will include this file automatically.

Five3 will load the custom-functions.php file before its own functions.php. You can override core Five3 functions without editing a Five3 file by including a function by the same name in your custom-functions.php file.

When you upgrade Five3, remember to back-up your custom-functions.php to make sure you do not lose it.

Custom CSS

To add custom CSS to Five3, you can either use the WordPress.com Custom CSS plugin or add a new custom.css file under Five3′s /css/ directory, for example /five3/css/custom.css.

The WordPress.com Custom CSS plugin is prevents the possibility of having your custom.css file being lost when upgrading Five3; however, the plugin does not permit all CSS selectors and styles.