All Help Topics
Integrating a WordPress Blog
Overview
Through PhotoShelter's partnership with Graph Paper Press and Visual Society, which offer sleek, visually driven themes for WordPress blogs, you may easily integrate your PhotoShelter website and a blog. Without any web design experience, you can seamlessly match the look & feel of your PhotoShelter site and your blog, creating a consistent brand experience for your web presence.
Bonus: Use the following free plugins to easily and dynamically update your blog with your most recent PhotoShelter content:
PhotoShelter's Official WordPress plugin
Graph Paper Press's PhotoShelter plugins for WordPress (requires free account creation to access)
NiO Photography's "Recent Work" display plugin
Non-Graph Paper Press users can still match the look and feel of their websites/blogs through manual customization mode, but we have no tools to automate that process.
Check out these examples to see a range of what's possible:
- Bram Belloni
- Gavin Gough
- Todd Owyoung
- Jack Gruber
- Hunter Photographic
- Brad Mangin
- Many more featured in our blog
WordPress Basics: Choosing a Solution
WordPress.org is an open source publishing/blogging platform, popular for its flexibility and power. To use it properly, you need to maintain the WordPress software on your own server (or hire someone to take care of the installation and hosting).
Graph Paper Press, a subscription service with free and paid options, offers a beautiful range of WordPress themes designed with the photographer in mind, and these can be easily installed on any existing WordPress.org site. Graph Paper Press themes do not work with WordPress.com sites. (This is because WordPress.com - a lighter, free version of the blog tool that's akin to Blogger or TypePad - does not allow custom themes or plugins to be installed.)
Skittish about installing WordPress locally? Graph Paper Press's Pro service level makes that process a breeze. GPP also runs a service called Visual Society that doesn't require installation or interaction with a server, and it comes complete with PhotoShelter supported themes - all for free!
Getting Started & Pricing
Graph Paper Press has several service levels and packages designed for different types of users. Essentially, the choices can be broken down as follows:
| Service | Best For | Pricing | Considerations | |
|---|---|---|---|---|
| Graph Paper Press | Tech whizzes or those who already have WordPress installed | Four tiers ranging from $0-$299; purchased quarterly or annually. See details. | Requires self-installation of WordPress |
Sign up! |
| Graph Paper Press Pro | Users who want a fully customizable blog but who need help getting WordPress set up | $35/month for installation, hosting, and support. See details. | 2-minute setup; comes with your own email address; allows addition of any WordPress theme and plugin | Sign up! |
| Visual Society Free | First-time WordPress users with fewer customization needs | Free! Choose a Plan | Free and easy to set up, but affords you less control; video tutorial support only | Sign up! |
| Visual Society Pro | First-time WordPress users with fewer customization needs (but who want their own domain) | $199/year Choose a Plan | Easy to set up but affords you less control although you can use your own domain; access to support forums | Sign up! |
All of the above solutions include access to themes that can be easily mirrored on your PhotoShelter site.
Requirements
You will need the following ingredients for the integration:
- A WordPress blog that has one of the following Graph Paper Press / Visual Society themes installed:
- Modularity (v 2.2 or later)
- On Assignment (v 2.2 or later)
- F8 (v 2.2 or later)
- F8-Remixed (v 2.2 or later)
- Modslider (v 2.6 or later)
- Modfolio (v 2.6 or later)
- High Def (v 2.6 or later)
- Photo Workshop (v 1.0 or later)
- Widescreen (v 1.2 or later)
- A PhotoShelter Standard or Pro account. If you have a Starter or Basic account, you can upgrade here
Don't have an account yet? Please see the above section, WordPress Basics.
Are you using another GPP theme? Let us know which themes you'd like to see added.
Setup: Graph Paper Press / Visual Society with WordPress 3.0 or higher
Do you have WordPress 3.0, or an earlier version? If you have 3.0, please read on. If you have 2.9 or earlier, then please skip to the following section.
After you've got your blog looking how you'd like, your first step of the integration will be to set up your blog's navigation links within WordPress. In your case, this will require that you add links from your GPP/Visual Society blog to the various areas of your PhotoShelter site. This is so visitors can easily locate and traverse the different areas of your whole site: your portfolio, your blog posts, etc. To set up your blog's navigation:
-
Make sure you've already installed or activated your blog theme of choice.
-
Now, you'll choose whether you want to use the default set of PhotoShelter links (a bit easier and quicker to set up, but not customizable) or configure your links selectively (can include whichever links you want and name them how you'd like). If you'd like to go with the default option, please skip to step #3 in the following section (Setup for WordPress 2.9 and earlier - even though you have WP 3.0, you'll use the instructions from this section.) If you'd like to proceed with manual configuration, please read on.
-
First things first: Let's make sure that your theme supports the Menu functionality. Click on "Theme Options," which should appear beneath your theme name on the left hand menu. Locate "Navigation Settings" from the right hand menu within this section, and make sure that "WordPress 3.0 Menu" is checked. By checking this, all other navigation options will be disabled.
- In your WordPress account, click on "Menus" in the Appearance tab in the left hand menu.
- A menu is a set of links that will appear on your site, typically at the top of the page (but possibly on the left-hand side or elsewhere, depending on your blog's design). To create your menu, type the name of your menu in the text field and click the Create Menu button. This name is for internal use only and will not appear on your site.
- Activate your new menu by selecting it from the Theme Locations box on this page.
- Now, you'll need to populate your menu with the links of your choice using the "Custom Links" box on this page (below "Theme Locations").
- Now that your links are created, you may want to consider nesting them, so your PhotoShelter links are clustered within 1 or more drop-down menus. If you'd like to do this, simply drag and drop the link below the one you'd like to appear at the top. You can play around with the configuration until it meets your needs.
If you don't see a "WordPress 3,0 Menu" option here, then proceed to the next section (Setup for WordPress 2.9-) for instructions. (Even though you have WP 3.0, you'll use the instructions from this section.)
By opting to use the Appearance Menus in WordPress 3.0 or higher, you'll have to create each link to your PhotoShelter pages manually.
Create one custom link for each PhotoShelter page you wish to include in your menu. For example, to add a link to your PhotoShelter homepage, enter your PS site's the link into the "URL" field, and then enter the link title (i.e. "Archive" or "Home") into the "Label" field. When you click "Add to Menu," you'll now have a top-level navigation item in your menu.
Here is an example of a custom links in WordPress 3.0 or higher:
Setup: Graph Paper Press / Visual Society with WordPress 2.9 or lower
After you've got your blog looking how you'd like, your first step of the integration will be to set up your blog's navigation links within WordPress. In your case, this will require that you add links from your GPP/Visual Society blog to the various areas of your PhotoShelter site. This is so visitors can easily locate and traverse the different areas of your whole site: your portfolio, your blog posts, etc. To set up your blog's navigation:
- Make sure you've already installed or activated your blog theme of choice.
- Click on your theme name from the left hand menu. (Modularity in this example.)
- Click on the "Navigation Settings" section to expand the options. In GPP theme versions prior to 2.8, you'll see:
If you're using theme versions 2.8 or higher, you'll note that the Navigation Settings menu is now located on the right side.
- Check the "PhotoShelter Navigation" box.
- By opting for the default PhotoShelter navigation, you'll get six links to the basic areas of your PhotoShelter site. If you want to adjust the names or these links, you may check "Custom Links" instead of "PhotoShelter Navigation" and populate the links and link names that you'd like:
Under "PhotoShelter Name," add your site label. This is the customizable portion of your PhotoShelter website URL (the part just before the .photoshelter.com in your website address). You may find your label by looking at your site's links or in the "My Website Address" section of your account, found at Customize -> Website Settings -> Website Address.
WordPress 3.0 users may also take advantage of the Appearance Menus functionality for their site navigation.
These will appear as a drop-down list of links in your blog's navigation. Here's an example of custom links for a typical PhotoShelter site:
Please note: You will need to remove "YOUR-LABEL-HERE" from all of the above links and replace it with your label (which is essentially the customizable portion of your PhotoShelter URL -- the part just before the .photoshelter.com in your website address). You may find your label by looking at your site's links or in the "My Website Address" section of your account, found at Customize -> Website Settings -> Website Address.
For those of you with CNAMEs, remember that you may also replace the "http://www.photoshelter.com" portion of any of the above links with your CNAME. For example:
http://archive.onelouderphoto.com/gallery-list is the link to PhotoSheler's own Chris Owyoung's gallery list.
Setup: PhotoShelter Website
Once your blog is fully set up and the design is completed, you may match your PhotoShelter website's look & feel to your Graph Paper Press theme in two discrete steps.
1. Choose the "Graph Paper Press" theme for your PhotoShelter website, and click "Save Changes"
2. Select your theme from the "Theme Style" drop-down menu on the right.
3. Select "Light" or "Dark" from the "Color Scheme" drop-down menu on the right (directly below where you just chose your "Theme Style"). If your theme has a light colored background, choose "Light". If it has a dark colored background, choose "Dark". This will help us to determine the appropriate color scheme to use to match your particular GPP theme.
Click Save Changes.
4. Enter the URL of any post on your blog into our template generator.
For similar reasons, you'll want to make sure that you're satisfied with your blog's design before you run the generator. You can always re-run the generator if needed, but you'll save yourself some time if you finalize your blog before moving to your PhotoShelter design.
Installing Plugins
In addition to a seamless look and feel between your blog and PhotoShelter website, by opting for a Graph Paper Press or Visual Society blog theme you'll also have access to a variety of plugins for WordPress harness the power of PhotoShelter by:
- Adding links to your PhotoShelter site from your blog navigation
- Embedding a gallery slideshow in your blog's sidebar
- Enabling search of your PhotoShelter archive from your blog
- Automatically displaying all gallery updates in your blog
Without leaving your blog, adding PhotoShelter images and/or galleries to blog posts. (Available for all WordPress.org bloggers. You can download the plugins here:
PhotoShelter's Official WordPress plugin
Graph Paper Press's PhotoShelter plugins for WordPress (requires free account creation to access)
NiO Photography's "Recent Work" display plugin
FAQ
I have a WordPress.org site, but I don't want to use these themes. Can I still use the plugin mentioned here?
Sure thing! You may download PhotoShelter's plugin for WordPress from your PS account. Graph Paper Press has other plugins, however, that you must have a GPP account to access.
In these early stages, the WordPress plugins for PhotoShelter are only available to Graph Paper Press and Visual Society customers. Because these plugins are designed specifically for GPP/VS themes, while they may in theory function in any WordPress site, their appearance is unlikely to be compatible. We are planning to release a general WordPress plugin soon, though!
I have a WordPress.com site. Can I use Graph Paper Press with this site?
No. Because WordPress.com is a lighter, more automated version of its open-source parent, WordPress.org, custom themes (other than those available within the WordPress.com interface) are not supported. More on the difference between WordPress.com and WordPress.org.
What's the difference between Visual Society and Graph Paper Press?
See our comparison chart above for a breakdown.
How much does all this cost?
See our comparison chart above for pricing details and links.
I have a Graph Paper Press site that isn't one of the supported themes. What do I do?
No worries. You may still use the plugins that allows you to integrate PhotoShelter content (see Setup: Graph Paper Press above). As for matching the look & feel of your PhotoShelter site to your blog, this would have to be done manually using HTML/CSS (either by hand or by hiring a designer to help) or by approximating the look & feel through whichever of our themes is the closest.My foreign characters (or various non-alphanumeric) characters look fine on my blog, but they're garbled on my PhotoShelter site.
WordPress uses a different type of character encoding than PhotoShelter does, which in some cases causes distorted rendering on the PhotoShelter side. Often this can be rectified by adding a few extra characters to the code to help HTML recognize the intended character. We may be able help you out with this if needed - drop us a line if you see any problems.
I keep getting an error message when I run the generator. How do I proceed?
First, check to make sure that your theme version is supported. If you have a very old theme version (pre 2.2), you'll need to upgrade to a newer version for compatibility. If you have a very new theme version, it could be that our generator hasn't been updated to support that yet. If your version is supported and you're still seeing an error message, contact us so we can help get you sorted.
I've made manual changes to my PhotoShelter website code. How do I update my site without overwriting the custom edits?
You may use the manual template generator to view the code and selectively paste the header and footer into your manual customization templates. This way, if you make changes to your GPP site, you can update your PhotoShelter site accordingly while preserving any manual changes you might have made to your PhotoShelter pages.