Instructions | Graph Paper Press

Theme Instructions

Composition

Composition is super flexible WordPress theme for creating Business, Portfolio, Store or Blog website.

Installation

Log in to your WordPress dashboard. This can be found at yourdomain.com/wp-admin
Go to Appearance -> Themes and click on the Install Themes tab.
Click on the Upload link.
Upload the zip file that you downloaded and click Install Now.
Click Activate.

Required Plugins

The following plugins are required in order to build a website like the demo:

_JetPack_ - The JetPack plugin is required in order to fully utilize the features of this theme. Key JetPack-supported features include: JetPack Custom Post Type Portfolio, JetPack Custom Post Type Testimonial, Tiled Galleries, Site Logo, and Infinite Scroll.

Recommended Plugins

The following plugins are recommended in order to build a website like the demo:

_Sell Media_ - The Sell Media plugin is recommended if you want to show your products on the homepage, like in the demo. Sell Media allows you to sell photos, prints and downloads directly from your WordPress website.
Easy Google Fonts - The Easy Google Fonts plugin is recommended if you want to change body and headline fonts on your website. After activating the plugin, visit Appearance -> Customize -> Typography.

Demo Content

Optional: You can download a demo content file from below:

To import the demo content, visit Tools -> Import.

In many cases just importing the demo content will not work since you will also have to make some manual configurations. Please go through this documentation to fully understand how the theme works in order to customize it to fit your needs.

Initial Setup

Install Jetpack

Please refer to Jetpack's offical documentation for installation instructions.

Once Jetpack is installed and active:

Visit JetPack -> Settings -> Appearance and activate Tiled Galleries.
Visit JetPack -> Settings -> Writing and activate Custom Content Types for Portfolios and Testimonials.

Set the homepage

Visit Pages -> Add new and create a new page called Homepage. Select Homepage Template under Template option.
Visit Pages -> Add new and create a new page called Blog.
Visit Settings -> Reading and select "A static page." Next, set the Homepage that you created above as your Front page and set your Blog page as the Posts page.

Customization Overview

Composition can be configured in a number of different ways to achieve the different layouts as shown in the four demo sites. Customization happens in two places:

Customizer - Visit Appearance -> Customize -> Homepage Options. This panel is where you'll customize all of the main homepage options, colors, typography, logos, widgets and menus.
Front Page - The featured image on your Front Page will become the header image on your homepage. If you add text or shortcode to the editor, it will be shown at the top of your homepage. For example, the screenshot shows the a Front Page with a featured image as the header, text and shortcode for showing the Search box for Sell Media ([sell_media_search])

Create a Website Like the Portfolio Demo

Creating a website like the portfolio demo is a three-step process: 1. Create a Front Page under Pages menu and select the Homepage Template under Template select box. 2. Go to Settings -> Reading and select your Front Page you just created as Static Front page. This should be your new homepage. If you want to run a blog, create a blog page and select that page under the Static Posts page in the same Settings -> Reading page. 3. Enable Jetpack's "Portfolio" Custom Content Types if you haven't done so already. 4. Add Portfolio entries on Portfolio -> Add New. Be sure to give each Portfolio item a title, a featured image, and a description. 5. Visit Appearance -> Customize -> Homepage Options -> Homepage Portfolio. Select "Show" from the list of display options. Select "Masonry Layout" from the list of style options. Change the number of Portfolio items to 6. Click Save & Publish.

Create a Website Like the Business Demo

Creating a website like the business demo is a multi-step process:

Create a Front Page under Pages menu and select the Homepage Template under Template select box.
Go to Settings -> Reading and select your Front Page you just created as Static Front page. This should be your new homepage. If you want to run a blog, create a blog page and select that page under the Static Posts page in the same Settings -> Reading page.
Enable Jetpack's "Portfolio" and "Testimonial" Custom Content Types if you haven't done so already.
Add Portfolio entries on Portfolio -> Add New. Be sure to give each Portfolio entry a title, a featured image, and a description.
Add Testimonial entries on Testimonials -> Add New. Be sure to give each Testimonial entry a title (client name), a featured image, and a description. The description becomes the actual testimonial.
Visit Appearance -> Customize -> Homepage Options -> Homepage Slideshow and upload some images. The slideshow replaces the header section/image. All slideshow images will be resized to 2400px wide by 1200px tall, with mobile breakpoints. Low resolution images will not look good in the slideshow area, so please upload images of adequate size for the best display.
Give each image in your slideshow a title, a caption, and optionally provide a Slideshow Link URL. The title and caption will be displayed as an overlay on the image in the slideshow.
Visit Appearance -> Customize -> Homepage Options -> Homepage Call To Action. Select "Show" from the display options and add your call to action title, message, button text and button url.
Visit Appearance -> Customize -> Homepage Options -> Homepage Portfolio. Select "Show" from the list of display options. Select a layout, set the number of Portfolio items to show and click Save & Publish.
Visit Appearance -> Customize -> Homepage Options -> Homepage Services. Select "Show" from the list of display options and add a title and an image for each service you want to showcase on the homepage.
Visit Appearance -> Customize -> Homepage Options -> Homepage Blog. Select "Show" from the list of display options and optionally give the blog section a custom title.
Visit Appearance -> Customize -> Homepage Options -> Homepage Testimonials. Select "Show" from the list of display options and optionally give the testimonials section a custom title. Composition will display the three most recent testimonials that you add in the Testimonails -> Add New page.
Visit Appearance -> Customize -> Homepage Options -> Homepage Clients. Select "Show" from the list of display options and add a title and an image for each client you want to showcase on the homepage.
Visit Appearance -> Customize -> Homepage Options -> Homepage Contact Info. Select "Show" from the list of display options and add a title, address, phone and office hours. A Google Map will automatically be displayed based on the provided address.
Visit Appearance -> Customize -> Widgets and add widgets to be displayed at the bottom of the footer. These widgets will be shown throughout your website.

Create a Website Like the Store Demo

Creating a website like the store demo is a multi-step process:

Enable our free Sell Media plugin if you haven't done so already.
Edit your Front Page and set a featured image. This image will become the header image on your homepage. The title becomes the big text, and any text or shortcode to the editor will be shown at the top of the featured image. For example, the screenshot below shows the a Front Page with a featured image as the header, text and shortcode for showing the Search box for Sell Media ([sell_media_search])
Select the Homepage Template under Template select box while saving your Front page.
Go to Settings -> Reading and select your Front Page you just created as Static Front page.
Visit Appearance -> Customize -> Homepage Options -> Homepage Store. Select "Show" from the display options and choose either "Collections" or recently added "Items" to show. If you don't activate the Sell Media plugin, the Homepage Store option will not be displayed in the Customizer.
Visit Appearance -> Customize -> Widgets and add widgets to be displayed at the bottom of the footer. The store demo shows a Text Widget, Sell Media Featured Items and Sell Media Recent Items widgets respectively. These widgets will be shown throughout your website.

Create a Website Like the Blog Demo

Creating a website like the blog demo is dead simple. Visit Settings -> Reading and assign your "Front Page displays" option to "Your Latest Posts", if thats not already set. All your posts should appear on the homepage.

Gallery Layouts

If you have JetPack enabled, you'll have 7 different gallery layouts to select from including:

Thumbnail Grid
Tiled Mosaic
Square Tiles
Circles
Tiled Columns
Masonry Gallery
Slidehow

There gallery layout options appear in the right-side of the Gallery Editor after you're selected your images.

Menus

To learn how to use Menus, please see this video.

This theme supports two menu locations:

Header Primary Menu (in header)
Footer Social Menu (in footer above the credits)

Composition can display both dropdown and "mega menus." A Mega Menu is a menu dropdown that spans the full width of the page with horizontal columns. The "Demos" menu link on all the Composition Demo sites is a Mega Menu.

You can create your own Mega Menu by creating a menu item with three levels of nesting. Please see the screenshot below for help creating you own Mega Menu. Only the Header Primary Menu Location supports a Mega Menu.

The configuration above would result in the following Mega Menu layout:

Here is how we recommend you setup your menus:

Use the Header Primary menu for all your main site navigation links (Home, Portfolio, Services, Store, About, etc.) Try to limit the number of list items to no more than 5. Any more than that and it creates a confusing UX for your visitors.
Use the Social menu for social media links. Give each link a name and paste the urls to your social media websites. The theme will automatically convert the link to an icon for these sites: WordPress, Facebook, Twitter, Dribbble, Google Plus, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, Codepen and LinkedIn.

Featured Images

If you are using the Portfolio Content Type from JetPack as we recommend, you will want to make sure to set a Featured Image for all entries.

Changelog

1.0.2 - December 05, 2016 - Fixed slideshow flickering issue in Safari

1.0.1 - November 16, 2016 - Customization option for header text color

1.0 - October 7, 2016 - Initial release

Graph Paper Press

premium WordPress photography themes

Composition Instructions