Gridspace

$75

Gridspace is a clean and modern portfolio theme that is perfect for showcasing vertical, horizontal or square images. Gridspace adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads and other mobile devices. Built by photographers, for photographers, Gridspace removes unnecessary clutter and will help put the spotlight back on your content. Check out the live theme demo to see Gridspace in action.

Grid or List View


Click the icons at top right to toggle between a grid and list view. This little feature allows your site visitors to customize their viewing experience on the homepage and all archive pages. You can also set the default view that loads for your site visitors on the Theme Options page.

Horizontal, Vertical or Square Thumbnails


One size doesn’t fit all when it comes to thumbnail orientation. If you are a landscape photographer, you’ll likely prefer horizontal thumbnails. If you’re a portrait photographer, you want vertical thumbnails. If you run a music blog, you’ll likely want to show square album covers on the homepage. Gridspace makes this all possible. Simply visit the theme options or theme customizer page and select your desired thumbnail orientation.

Customization Options


Upload a logo, switch between light and dark color styles, add a welcome message and choose between horizontal, vertical or square images to customize Gridspace to your liking. Gridspace includes a theme options page and integrates with the theme customizer, which you can use by visiting the Appearance -> Customize link.

Retro, Dark & Light Color Styles


We’ve included three color styles (retro, dark and light) for you to choose from. Simply visit the theme options or theme customizer pages to select the color palette of your choice.

Custom Headers


Add a custom header image on the Appearance -> Headers page. The top menu navigation will overlay the header image, which supports flexible heights.

Custom Background

Visit the Appearance -> Background to select your preferred background color – or upload a custom background image.

Widgets & Menus

Gridspace has four widgetized areas: Sidebar, Footer 1, Footer 2, Footer 3. Add widgets to all, some, or none of the widgetized areas to customize the layout.

Social Icons

Gridspace supports three social icons (Facebook, Twitter, Vimeo) in the top menu position. To create a Facebook link icon do the following:

  1. Visit the Appearance -> Menu page
  2. Create a Custom Link called Facebook and paste the URL to your Facebook page
  3. Click the “Add to Menu” to add your Facebook menu link to a menu
  4. After the Facebook menu item has been added, click the Screen Options link at the top right of the page. (See this screenshot for help.)
  5. Under the “Show Advanced Menu Options” section, make sure CSS Classes is checked. This will add a new input field called “CSS Classes” for each menu item below.
  6. Toggle open the Facebook link that you added above.
  7. In the CSS Classes input field, add “facebook” as the css class.
  8. Repeat this for Twitter (add “twitter”) and Vimeo (add “vimeo”) menu links.

See this screenshot of a correctly filled out menu for showing Facebook, Twitter and Vimeo icons.

Initial Setup

  1. Choose vertical, horizontal or square images – Visit the Appearance -> Theme Options page. Scroll down to the “Thumbnail Orientation” option and choose whether you want to display vertical, horizontal or square images on the homepage and archive pages. Click “Save Changes”.
  2. Set how many posts to show: Visit the Settings -> Reading page. If you plan on showing vertical images, set the “Blog pages show at most” to a multiple of 3 (example: 9, 12, 15). If you plan on showing square or horizontal images, set the “Blog pages show at most” to a multiple of 2 (example: 8, 10, 12). Click “Save Changes”.

Posting Overview

Gridspace theme relies heavily on images. As a general rule of thumb, each Post should always have a Featured Image set (view instructions for setting a Featured Image). Using the Add Media Icon, upload and assign a Featured Image for each post. If your post is missing a Featured Image, the theme will display the first image attached to the post. If the theme is missing a Featured Image and you haven’t uploaded any images to the Post, you will see a dark gray placeholder image, which looks like this. Always upload and set Featured Images.

Post Formats

Gridspace supports the following “post formats” which are basically unique layouts for specific types of posts: gallery, image, video, audio, quote, link, standard. Here is more info on Post Formats in WordPress. These unique layouts only show up on individual single post pages.

  • Posting Images – Create a new Post, assign it to the Image Post Format (see screenshot for help) and use the Add Media Icon to upload and assign a Featured Image to the Post. Add a caption if you prefer and click Save Changes. Finally, click the Insert into Post button to embed the image into the Post. Here is an example Image Post.
  • Posting Galleries – Create a new Post, assign it to the Gallery Post Format (see screenshot for help) and use the Add Media Icon to upload a collection of images. Choose one image to be the Featured Image for the Post. This is the image that will be used to represent the Post on the homepage and on archive pages. After setting the Featured Image, click Save Changes. Finally, click the Insert Gallery to embed the images you just uploaded into the Post. Here is an example Gallery Post.
  • Posting SlideshowsNote: “Slideshow” is not a Post Format, but rather just an option for displaying a gallery of images inserted into a Post. Create a new Post and use the Add Media Icon to upload a collection of images. Choose one image to be the Featured Image for the Post. This is the image that will be used to represent the Post on the homepage and on archive pages. After setting the Featured Image, click Save Changes. Finally, click the Insert Slideshow to embed the images you just uploaded into the Post. Here is an example Slideshow Post and here is a link to more Slideshow posting tutorials and help docs.
  • Posting Videos – Create a new Post, assign it to the Video Post Format (see screenshot for help) and paste a link to a YouTube or Vimeo video into the visual editor, like this: http://vimeo.com/48502577. Make sure that the video link is not hyperlinked. Here is an example Video Post and here is a link to more video posting tutorials and help docs.
  • Posting Audio – Create a new Post, assign it to the Audio Post Format (see screenshot for help) and use the Add Media Icon to upload an audio file, such as an MP3 that you own the rights to. The Audio Post Format template will automatically pull out any attached MP3 audio files and display them in the post using an HTML5 audio player. Do not insert the audio file into the post, or else you’ll see a duplicate audio player. The audio player will appear at the top of the Post. Here is an example Audio Post.
  • Posting Quotes – Create a new Post and wrap a chunk of text in a blockquote (see screenshot for help). Assign the Post to the Quote Post Format. Here is an example Quote Post.

Live Theme Customizer

This theme integrates with the new Live Theme Customizer. Change theme colors, upload a logo and change theme layouts before making those changes live for your visitors. It’s totally addictive, so give it a try on the Appearance -> Customize page. Keep in mind that the options that appear on the Theme Customizer page include the same options that appear on the Theme Options page.

Theme Options

The Appearance -> Theme Options page contains many of the same options that appear on the Theme Customizer page. The theme options page contains options that allow you to configure and customize your site, such as uploading a logo, selecting color styles, add a welcome message to your homepage and select your desired thumbnail orientation. Keep in mind that the options that appear on the Theme Options page are also included on the Theme Customizer page.

Logos

You can upload you logo on either the Appearance -> Theme Options or the Appearance -> Customize link. Logo images should be transparent png format. The logo will appear above your Site Title and Site Logo located at the top of the left-hand sidebar. If you upload a logo and prefer to hide your Site Title and Site Description, visit either the Appearance -> Header or the Appearance -> Customize link and make sure the “Display Header Text” option is NOT checked.

Widgets

There are 4 widgetized areas in Gridspace (Sidebar, Footer Widget 1, Footer Widget 2, Footer Widget 3). You can add a variety of Widgets to this theme on the Appearance -> Widgets tab in WordPress.

Menus

Visit the Appearance -> Menus page to create custom navigational menus.This theme supports 2 Theme Locations for your Menus: Primary Menu (the main navigation for your website located under the site title or logo on the demo site) and Top Menu (used to display social media icons, About and Contact links on the demo site). Theme Locations are specific areas in this theme where your menus can appear. After creating your menu, be sure you add it to a Theme Location.

Social Icons

Gridspace supports three social icons (Facebook, Twitter, Vimeo) in the top menu location. To create a Facebook, Twitter or Vimeo link icon do the following:

  1. Visit the Appearance -> Menu page
  2. Create a Custom Link called Facebook and paste the URL to your Facebook page
  3. Click the “Add to Menu” to add your Facebook menu link to a menu
  4. After the Facebook menu item has been added, click the Screen Options link at the top right of the page. (See this screenshot for help.)
  5. Under the “Show Advanced Menu Options” section, make sure CSS Classes is checked. This will add a new input field called “CSS Classes” for each menu item below.
  6. Toggle open the Facebook link that you added above.
  7. In the CSS Classes input field, add “facebook” as the css class.
  8. Repeat this for Twitter (add “twitter” to the css classes field) and Vimeo (add “vimeo” to the css classes field) menu links.

Here is a screenshot of a correctly filled out menu for showing Facebook, Twitter and Vimeo icons:

Custom Headers

Gridspace supports custom header images. Gridspace comes with one default image header image of the Manhattan Bridge shot from the top of the Graph Paper Press office in the Dumbo neighborhood of Brooklyn, NY looking west towards the financial district in Manhattan. This image is creative commons licensed and you are free to use it for both personal and commercial projects. To add your own custom header image, visit either Appearance -> Header or the Appearance -> Customize link to upload your own header image. Images should be at least 1050 pixels wide. Suggested width is 1050 pixels. Suggested height is 500 pixels. Here are more instructions for using the Custom Header interface in WordPress.

Custom Background

Visit the Appearance -> Background or the Appearance -> Customize link to change background colors or upload your own custom background image. Here is more info on adding custom backgrounds.