Theme Instructions

About

Instamate is a flexible portfolio theme for WordPress with optional Instagram integration support. Instamate offers live theme customization previews so you can change colors, fonts, logos, header images, image orientation, and switch between a left or right sidebar.

Installation

  1. Download the zip file from your members dashboard. This will always be the most current version of the theme.
  2. Log in to your WordPress dashboard. This can be found at yourdomain.com/wp-admin
  3. Go to Appearance > Themes and click on the _Install Themes_ tab
  4. Click on the _Upload_ link
  5. Upload the zip file that you downloaded from your members dashboard and click _Install Now_
  6. Click _Activate_ to use the theme you just installed.

installing your Graph Paper Press theme

For more details about installing your themes, please view Installing Your Theme

Demo content

Optional: You can download a demo content file here that you can import in 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.

Recommended Plugin Configuration

  • Disable all lightbox/slideshow plugins, including the GPP Slideshow Plugin. This theme already comes with a slideshow script, so using another slideshow plugin will cause a conflict.
  • Install the CF Post Formats plugin. This plugin enhances the admin interface for creating Post Formats and aids in the creation of necessary post meta for styling Post Formats. Download from: https://github.com/crowdfavorite/wp-post-formats
  • For Instagram integration, download Instagrate to WordPress: http://wordpress.org/extend/plugins/instagrate-to-wordpress/. See below for more details about integrating this plugin.

Media Settings

This theme sets the media sizes automatically. You can review these sizes in Settings > Media. The default sizes for this theme are:

  • Thumbnail size
    • Width: 310 *Height: 310
    • [checked] Crop thumbnails to exact dimensions (normally thumbnails are proportional)
  • Medium size
    • Max Width: 665
    • Max Height: 0
  • Large size
    • Max Width: 1000
    • Max Height: 0
  • Embeds
    • [checked] When possible, embed the media content from a URL directly onto the page. For example: links to Flickr and YouTube.
    • Maximum embed size
      • Width: 665
      • Height: 0

_Please Note: If you are switching from another theme, you will want to install and run the Regenerate Thumbnails WordPress plugin to resize your existing images._

Theme Customizer

With the Theme Customizer, you can set your title and tagline, upload a logo, change your color scheme, choose your fonts, set a thumbnail layout size, position your sidebar, set a background image, assign your menus, and choose a static home page. You can preview your changes by clicking the Customize link below your active theme on your Appearance > Themes page.

Theme Options

Go to Appearance > Theme Options to set up your theme, upload a logo, select alternative styles, and add custom CSS. Styles added here will not be deleted when you update your theme.

CSS creates the style of your site. For example, to hide the description of your site, simply paste this code into the custom CSS box: #site-description { display: none; }.

Homepage Options

You can choose to display your Instagram page or your Portfolio archive page on your homepage. After you have created this page, you can set this in either Settings > Reading or the Theme Customizer by assigning a static front page.

Set Homepage to Portfolio Template

To use your Portfolio page as your homepage, create a new page in Pages > Add New. Assign this page to the Portfolio page template. You do not need to add any content to the content area.

Assigning the Portfolio Page Template

Set Homepage to Instagram Template

If you have chosen to integrate with Instagram via the Instagrate to WordPress plugin, you might want to show all of your Instagram photos on one page. After you have configured the Instagrate to WordPress plugin on the Settings -> Instagrate to WordPress page, create a new Page and assign it to the Instagram page template. You do not need to add any content to the content area.

Assigning the Instagram Page Template

Add a Blog Page

If you use a static front page, you may also want to create a Blog page to display all of your blog posts on your site. To do this, you can create a page called Blog and assign it to the Blog page template. All of your posts will appear on this page.

_Please Note: Do_ not _set this page as the page to display your blog posts in Settings > Reading or in the Theme Customizer as this will break the page template's code and your posts will not appear._

Widgets

This theme supports widgetized areas. For more detail about adding widgets to your site, please read Adding Widgets.

Menus

Our themes use WordPress’s custom menus option. These can be created in Appearance > Menus. To add a new menu to your site:

  1. Go to Appearance > Menus.
  2. Create a new menu item by clicking the + tab.
  3. Select the pages you want to display in your menu and click the Add to Menu button. If you do not see the type of page (category, tag, portfolio, gallery, etc) you want to display, click the Screen Options link at the top of the page and make sure the page type is checked.
  4. Once you have set your menu as you want it, click the Save Menu button.
  5. Then, assign that menu to your desired theme location to ensure your menu appears where you want it and click Save.

Add a Custom Menu

Social Media Icons

You can add social media icons to your Top menu. This theme supports four custom icons—Facebook, Twitter, Vimeo, RSS.

In your Menus panel on your dashboard, click on the arrow for each menu item to open the details box. You should see an option for _CSS Classes_. If you do not see this option, click the _Screen Options_ link at the top of the page and make sure _CSS Classes_ is checked in the menu that opens up.

To specify which icon will display, enter the corresponding class name in the CSS Classes box. Please note that these class names are case sensitive. The corresponding class names are: facebook, twitter, vimeo, and rss.

This is an image of a correctly completed menu details section:

Social Media custom menu

Always Set Featured Images

This theme relies heavily on Featured Images. If your post is missing a Featured Image, the post may not appear on the homepage or on archive pages.

To choose the image you want to set as a featured image for this post and click the _Set as Featured Image_ button. For best results use images that are at least 665 px wide.

Add a Featured Image

Portfolio

Instamate supports an additional post type for your Portfolio. Portfolio items are displayed on homepage and on portfolio archive pages. To add new portfolio items, go to the Portfolio section in your Dashboard. Be sure to add a featured image to your portfolio items so they display correctly on the homepage and archive pages.

Post Formats

This theme supports the following post formats — gallery, image, audio, video, quote, link and standard — which are unique layouts for specific types of posts. Each post format has its own unique layout on the homepage, on its archive page and on the individual single post pages. Adding the CF Post Format plugin will improve the WordPress admin interface and make creating Post Formats simple and intuitive.

  • Gallery - To show a slideshow of images (an image gallery), upload as many images as you like using the media uploader tool and insert the Gallery into the post. Be sure to assign a Featured Image for that post. For best results, use images that are at least 665 pixels wide. All posts assigned to the Gallery Post Format will then display the Gallery at the top of the post, with any text added into your post's edit page displayed below.

    To insert a gallery:

    1. Switch to the Gallery tab.
    2. Click the Add Media button to launch the Media Uploader tool.
    3. Click the Create Gallery option.
    4. You can choose to upload images from your computer or you can use images that already exist in your Media Library. You cannot use an image from a URL on the web in your gallery.
    5. If you are uploading images, click the Select Files button and navigate to each of your images on your computer. Click the Open button to open each image.
    6. Once each of your images has been uploaded, you will have the option to add a title, caption, alternative text and description.
    7. After you have added all of the images you wish to display in the gallery, switch to your media library tab and select those images.
    8. Then, click the Create a New Gallery button.
    9. Set a featured image for your Gallery.

    Insert a Gallery

  • Image - To display only one image on your post, switch to the Image tab. Upload the image using the media uploader tool and assign it as the Featured Image for the post. _Do not insert the image_ into the post.

  • Video - To display a video in your post, switch to the Video tab. Paste your video's embed code in the Video URL or Embed Code field. The video will display above all post content on the homepage, single, and archive pages. This works for all interactive elements (videos, maps, panoramas) that have embed code. You can also add additional interactive elements into the content area, though these will appear inside the content area, rather than above it.

  • Audio - To add an HTML5 audio player to your post to play your audio files, switch to the Audio tab. You can upload your mp3 file using the media uploader tool, which will generate a URL of where your file can be found on the web. Paste this URL into the Audio File field. The audio player will display at the top of the post.

  • Quote - To display a quote in your post, switch to the Quote tab. Add the name of your quote's source in the Source Name field, and a link to the source in the Source URL field. Add the quote to the content area. This quote will be styled as a blockquote on your homepage, single, and archive pages.

  • Link - To create a post that is a link to another source, switch to the Link tab. Add the link URL into the URL field. Your post title will become a link to that URL.

  • Standard - Switch to the Standard post to display whatever you insert into the content area on the homepage and on single posts. Be sure to upload and assign a Featured Image for each post.

Page Templates

This theme provides five page templates: Default, Wide Page, Blog, Portfolio, and Instagram.

  1. The Default page template is the standard page layout, and will display the Sidebar if you have it activated in your widgets area.
  2. The Wide page template removes the Sidebar and stretches your content to the full-width of the page.
  3. The Blog page template will display all of your blog posts on this page. You can determine how many posts will appear on each page before the 'Older Entries' link in Settings > Reading, by setting a value for 'Blog Pages Display at Most'.
  4. The Portfolio page template displays the featured images for all of your Portfolio entries on your page. You can choose the layout for how the featured images appear on this page in your Theme Options.
  5. The Instagram page template displays the featured images for all of the posts in the category that you have assigned as your Instagram category. You can choose the layout for how the featured images appear on this page in your Theme Options.

Instagram Integration

If you use the Instagrate to WordPress plugin, any photos added to Instagram on your mobile device will be cross-posted to your WordPress site, allowing you to own your Instagram photos. Each image will create a new post using the Image post format. This theme's proportions are sized to fit Instagram photos. This

To integrate the Instagrate to WordPress plugin:

  1. Download Instagrate to WordPress: http://wordpress.org/extend/plugins/instagrate-to-wordpress/
  2. Upload and activate the plugin in your WordPress dashboard under Plugins > Add New.
  3. Go to Settings > Instagrate to WordPress
  4. Configure the settings to mirror those on this screenshot: Instagrate to WordPress
  5. You can also create a page and assign it to the Instagram page template. This page wil display all of your Instagram photos.

Embed Multimedia into Posts or Pages

For externally hosted videos (for example a YouTube or Vimeo video), you can directly paste the link of your video page into the content editor. You do not have to paste the embed code. WordPress will automatically embed the video from the link.

You can easily embed videos from a Video hosting service such as Vimeo or YouTube into your posts or pages.

To add a video:

  1. From your WordPress dashboard, add a new post or page (or edit an existing post or page).
  2. Paste in your video’s URL, for example https://vimeo.com/31985752.
  3. Publish or Update your post or page.

_Please note: If your video is not appearing correctly, remove the ‘s’ from the URL, so https becomes http._

Hooks

If you are a developer, you can use the following hooks to modify different areas of this theme:

instamate_before_page

instamate_before_header

instamate_after_header

instamate_before_article

instamate_after_article

instamate_before_title

instamate_after_title

instamate_before_content

instamate_after_content

instamate_before_meta

instamate_after_meta

instamate_before_sidebar

instamate_after_sidebar

instamate_before_footer

instamate_credits

instamate_after_footer