Getting started guide
Below you’ll find all the articles you need to go through first to get started using ProPhoto and one of our designs. We’ve put them in the order that you need to view them to better help with deciding what to do next.
This process is super simple with ProPhoto’s new on boarding walkthrough that guides you through the setup process once you install the design.
Click the video below to play.
Unzip the file you originally downloaded from your purchase. When you unzip you’ll see all the files like so, though it maybe a little different if you purchased one of our designs from a different store like ProPhoto.
Go to: ProPhoto > Manage Designs > In the customizer.
Upload the file in the box that says import a design, your design will be named something like; design_designname.zip (designname will be replaced with the name of the design you bought, so: “design_express.zip”.
To get started with customizing, scroll over the green bar beneath the design and click create new design.
Click copy to copy the design and move onto the next step of the installation process.
The first thing we want to do is determine if you should upload the included .xml file that came with the design or not. The .xml file included with your design is an export of the WordPress pages included with the demo design.
Option A – Upload the .xml file following the tutorial we’ve linked below and continue on with the customization process.
Option B – If you already have existing pages setup in your WordPress install, just skip right to the customization process. Any pages you’re missing you can create and assign during the setup process.
See the guide to installing the .xml file below.
To start the setup process for the design, start by clicking the “customize” button on the copied template you made. If the copied template isn’t showing up for you right away, refresh the page so it will show up and you can begin the process.
From there you can start the setup process for the design. The first step asks you to select what page you want to show as your front page. By default it’s selected as “page”.
You can then select a WordPress page as your home page. If you imported the .xml file you’ll find one in the list named “home”. If you already have a page created just choose that one, and if you don’t have either one, you can scroll to the bottom of the dropdown list and create a home page.
For the blog portion, simply type in blog or journal or whatever you want your blog page to be named. This will assign the blog page template in our design to the page.
When you click “next” you’ll be brought to the template assignment screen. On the left you’ll see our page templates that are included in the design, and on the right are the dropdowns to assign the page templates (page layouts) to the matching WordPress pages.
When you’re done, it should look like screen below. *Note we didn’t need to assign the gallery page a template.
On the next part you’ll be connecting the menu items in the design to their WordPress page links. This means when you visit your site and click a menu item, it’ll be linked to the page already. You can of course edit that any time later in the customizer.
Lastly, you can simply click “finish” or just click the link to go directly to the ProPhoto customizer to get started on your design.
If you HAVE installed ProPhoto before at some point, then you probably have clicked that tutorial once before and set it to never show again, so when you click into the customizer, that tutorial won’t show.
If you get an error code like the one below,”Could not decode design json” two things might be happening.
1. You’ve uploaded the wrong zip file. Make sure you’re uploading the design file and not the zip file you got when you purchased. That file needs to be opened/unzipped first, and in that file you’ll see the design zip file which you need to upload.
2. There maybe some sort of bug involved with your host or you may need to install the latest version of ProPhoto. You can contact ProPhoto support HERE to get it resolved.
If you’re getting this “The Package could not be installed. The theme is missing the style.css stylesheet.” error then you’re installing a ProPhoto design in the wrong place. ProPhoto designs aren’t WordPress themes. They’re templates to the ProPhoto WordPress Theme. That being the case, you’ll need to install the design to ProPhoto > Manage Designs, not under WordPress Themes.
In this tutorial you’ll learn how to create a contact page from scratch. Your design will include one already setup for you by default if you purchased one.
Go into WordPress > Pages > Add new and add a brand new page titled “Contact” – or whatever you want your contact form page name to be.
Since we’re not adding the content to WordPress page, and we’re adding the content in ProPhoto, you don’t have to add anything to the page here.
Make sure to check the two boxes under the ProPhoto title/content hiding section before clicking publish.
Go into the ProPhoto customizer and switch to the design level by clicking the rounded button in the top left hand corner of the sidebar.
From there you’ll click “Templates” and “Manager” to manage your child templates and create a new one.
Make sure you’re on the base template or site settings template and click “create child template.”
Set a name and a description if you want one, then click save details.
Now go back to your WordPress dashboard and pages and edit the contact page so we can assign the new child template to the page you created earlier.
On the right hand side you’ll see a block with a ProPhoto template option, there you’ll assign your new contact template you just made in the previous step.
Now that your contact page is made and the template is assigned, you can now go back into the customizer to add a contact form. Make sure you’re on the design level again and choose the forms tab on the left hand sidebar.
From there you can add new form elements, and change the form settings before saving. You can see in the screenshot below what our general contact form consists of.
Full name (Short text field)
Telephone Number (Short text field)
Email (Email field)
Session type (Multiple choice field)
Message (Long text field)
To customize the form’s overall look, switch to the template level by clicking the rounded button in the prophoto sidebar on the left hand side, then click forms again.
There you can change font styles, padding, settings, add background images to the form itself, etc. We recommend just playing around with it to get what you want.
After adding your contact form to ProPhoto from the previous step, you can now use a ProPhoto forms widget in any ProPhoto template wherever you want.
We’ve gone back to the customizer and selected our contact template we made earlier from the dropdown menu at the top of the window.
Now that you’re on the template you created earlier, scroll to the bottom of the customizer and click the + symbol to add a new block.
Now that we have our block we can add a ProPhoto forms widget to the block to add our contact form to the page. Click the round + symbol in the block you just made, to add a widget, then select the “P6 Form widget” option.
In the widget settings you can set the animation, the form title, and add the form from the dropdown that you added earlier. Make sure to click create widget when you’re finished.
That’s it, no more steps, you’ve just created a contact form/template/page for your website using ProPhoto!
Adding a Prophoto Instagram Widget is super easy to do, in this example we’re going to be creating a block just for the widget, and adding the settings to show what we usually do in our designs.
To save a few steps later, you’ll want to do this first. In WordPress (not ProPhoto) go into the WordPress sidebar, and click ProPhoto, then settings. From there, click “site settings.” From there you’ll be on the social media tab.
Scroll down to the instagram options section and click the big “authorize” button. If you’re already logged into Instagram on the desktop, you won’t need to do anything. If you’re not, it will ask you to login to Instagram to connect.
Once you’ve authorized, you can go into ProPhoto to add a Instagram to your pages.
The first thing to do is to add a new block to the template. If you want it to show up on every page in your design, then you would place it in the “Site Settings / Base Template”. Which would inherit down to the other templates. If you just wanted it on an individual page, then you would add it to the template page you wanted instead. i.e “home, about, etc.”
Create a block to house your Instagram widget by scrolling to the bottom of your template and clicking the add new block button.
Rename the block so you can identify with what your block content is, then you can hover over the block to bring up the customization bars, and click and drag the block to a different spot in the customizer.
Click the add new widget button in the block you created and then add a “P6 Grid Widget”
When you click the widget that’s been placed, you can name your widget so you can identify with it, for this we just named it “Instagram widget” then in the grid settings, select the “instagram feed” from the dropdown.
Our settings are generally like so, but keep in mind you can set these up anyway you want.
8 Grid Items to Display
Grid Style: Overlaid
Max Columns: 10
Item Width: 98
Item Ideal Width: 175
Item Max Width: 225
If you chose the “overlaid” option instead of the text below option, you might want to change the color of the overlay when hovered over, then you’ll do that under the grids section in the customizer.
Click the grids option in the sidebar, then choose the Style: Rollover tab.
Scroll down to the section labeled: Grid Item Overlay Background Color & Image. Then click the edit icon to edit the overlay background color.
Be sure to click save when you’re finished!
Below are tutorials for creating a gallery in WordPress, and ProPhoto along with options on ways to add the galleries into ProPhoto.
It’s easy to create a gallery in WordPress, the first step is to login to your WordPress site and click the “galleries” button in the WordPress sidebar. Then click the “add new” button.
You’ll want to name your gallery first. After naming your gallery, add your images.
The third option on this screen allows you to apply the gallery style we’ve created for you in the design. This is a ProPhoto setting. The styles have already been setup for you in our designs, so you only have to apply the style you want to add.
You can always go into ProPhoto later and adjust or edit the gallery styles settings and customizations. You’re never locked in to what we want it to look like!
After uploading images, you can always drag and drop them to place them in the order that you like, and you can select multiple to delete photos as well.
Don’t forget to click “publish” when you’re finished.
There are several ways to add a gallery to your page, this method uses the actual WordPress page to add one. The first step is to simply add a new WordPress page.
In WordPress, click Galleries in the sidebar, then click add new.
Make sure to name your gallery first, and check the ProPhoto option to hide the page title.
Be sure to click publish when you’re done!
Next you’ll click the ProPhoto dropdown tab and select “insert gallery” to add the gallery you created to the page.
If you’ve already created a gallery from step 1, click “insert gallery.” If you haven’t, then simply click “new gallery” instead.
Choose the gallery you want to add via the dropdown, then choose one of the options. One option “using gallery style” adds the style you selected when you created the gallery. The other option doesn’t add a gallery at all, it just simply inserts the images into the page vertically.
Once the gallery is added click the publish option when you’re done.
You’ve just created your first gallery page in WordPress! From there there’s a ton of ways to add the page in ProPhoto, you can use the page’s URL to link to it anywhere in the customizer. Example: An image or ProPhoto tile that links to the gallery page. You ca can also add a Prophoto page widget in the customizer in any template which allows you to choose which pages to display.
In your design you’ll always have a “portfolio” template included with your design, we’re going to use that template as our base to insert our galleries we’ve created from step 1.
First, make sure you’re on the Portfolio page template included with your design, then scroll down to the block we’ve labeled “portfolio block.”
In the block, you may notice a “grid placeholder” widget. We can view that widget and see what settings we had placed for the grid in our demo, or we can just delete the widget and create a new gallery widget.
Once you’ve deleted the widget, you need to click the add widget icon in the row.
Now you’ll have two different options to go with.
If you want only ONE gallery to show up on your portfolio page, then you’ll insert a “P6 Galleries” widget.
To add a single gallery click the P6 gallery widget to bring up the options.
If you want to add multiple galleries to the page template, you’ll want to find and add a “P6 Grid” widget instead.
Click the P6 grid widget to add the widget and bring up it’s settings.
Our settings are usually like so, but you can do whatever you like!
Be sure to click “create widget” when you’re finished. You’ve now added your galleries to your page!
In these examples we had already started with a page template that already existed in our design, but let’s say you wanted to start from scratch. See our related articles below on how to add a page and apply the template. (Coming Soon)
Currently some of our designs have the blog set to a grid, or sometimes it shows the current normal method of displaying blog posts. This article teaches you how to switch from blog post view to the excerpt (read more post type) or the grid post type and vice versa.
To change the blog post type to a grid and vise versa follow the steps below.
In the ProPhoto customizer make sure you’re on the “template” level by clicking the rounded button in the customizer sidebar at the top left to the blue template option, and you’ll need to be on the “site settings” template for this customization.
After doing those two things, click the “content” tab in the left hand sidebar and then the “excerpts” tab in the white bar at the top. This brings up all the options to change from blog post view to grid.
The “Show excerpts on blog pages” option allows you to turn the excerpts on for the blog page and any other post types you choose by having them checked. When you turn them on, a truncated or excerpt view will show instead of the standard post layout default in WordPress.
There are two options you can choose from currently: Standard, and Grid. Each option has a bunch of customization options to choose from. We recommend switching between the two so you can see what they look like and choosing which one you want!
Example of a standard post in WordPress / ProPhoto with excerpts unchecked in one of our designs.
Example of excerpts turned on with the grid option checked in one of our designs.
When you download a design from our site, this is what to expect to have in each zip file. You’ll always unzip the file you download first to get to the files you need.
If you’re downloading the file from the ProPhoto store the files look a little different, but are similar.
This guide will explain how to update your current design to the latest version.
Periodically we update all our designs to add the latest features from ProPhoto to the design, make small changes, fixes or additions based on customer feedback.
These updates ARE NOT the same as ProPhoto updates! Theme updates are distributed by ProPhoto, and no matter what, you’ll always have those available to you, regardless of what or when we update the design. We don’t add features to the design, we’re only changing the design to accommodate the updates ProPhoto releases.
As an example, when we released a few of our designs, contact forms hadn’t been added to ProPhoto yet, after ProPhoto added contact forms into ProPhoto 6, we went back into our designs and added contact forms to those designs that didn’t already have one as part of an update.
Regardless of whether you update the design or not, you’ve got the contact form feature in a ProPhoto update, and you can add it to your design at any time you’d like, without re-downloading files or updating the design itself. Same for any features that gets added to ProPhoto at a later date. You can check out ProPhoto’s roadmap here.
That being said, we have to warn you that if you decide to update your design, YOU’LL BE STARTING FROM SCRATCH. There is no feature that allows ProPhoto designs to only import the changes we’ve made, there’s no update process for us to push an update to users either, these are features that ProPhoto just doesn’t have yet, but if you’d like for these to be added, then please send ProPhoto a message about being able to get pushed updates to designs. You can contact them HERE. The more people who want them, the higher priority those features get added.
Simply log back into your ProPhoto account and re-download the file. You can login here.
Simply log back into your account on our site and re-download the file. You can login here.
The first step is to download the new files (see the top of the tutorial for where you purchased from.)
Once you’ve got your new files, let’s make a backup of the design we’ve ALREADY customized so that if you decide to switch back you’ll have all your customizations already made.
Login to your WordPress dashboard, and click ProPhoto > Manage designs.
Now hover over your Live Design, and click the “copy” option.
On the copy screen, name your copy backup, and put the current date in the description.
Make sure to click copy when you’re done!
Once your backup is made, you’ll delete the design out of the purchased-add-ons section and install the new one like you would if you were installing a brand new design.
After you run through the setup process you can activate and begin customization like you would any time you activate a new design. If you don’t feel like doing it all over or customizing from scratch, you can always go back and activate your backup design again.
If you don’t remember how to go through the design setup process see the related article below.
Importing the WordPress XML file or (pages) into WordPress is really super easy.
If you purchased from us, when you unzip the download file the XML file will be available there.
If you purchased from ProPhoto you’ll look in the “resources” folder and the .XML file will be located there.
Login into your WordPress site and navigate to:
WordPress > Tools > Import
Click the WordPress link. If you haven’t already installed the WordPress importer plugin go ahead and do so by clicking the install button then “run importer” when finished.
Navigate to the .XML file we mentioned earlier and upload into place either by selecting it manually or dragging and dropping the file into place.
On the next screen it will ask you if you want to create a new user or assign the pages to an existing user. Make sure to assign it to your current user name for your site!
Then click “download and import file attachments”
Once it’s finished uploading you’re all done, you can navigate to your pages section in WordPress and they’ll all be there!
Be sure when you crop images, to crop them at standard crop ratio, like 2:3 (Vertical) or 3:2 (Horizontal). Why crop them this way? Because it gives you a standard crop ratio, which is a 4 x 6. If you have mixed crops and sizes and upload the images into WordPress or ProPhoto the galleries are going to size oddly or not correct because of the mixed ratios. Ideally, it’s best to keep all images at the same size for verticals, and the same size for horizontals no matter what those sizes may be.
The only time the crop ratio should be ignored is when you’re trying to crop or resize an image that isn’t a standard ratio (like a really wide panoramic image).
Always save images at DPI (dots per inch) of 72, which is a web based quality, you can do this in any image editing program when saving, like Adobe Photoshop or Adobe Lightroom. If you don’t have a program like that, there are some web alternatives and of course other apps like Sketch which are just as good as Photoshop but cheaper on the price spectrum.
Saving images at 72dpi prevents someone from grabbing your image and being able to print the image at a good quality at a large size, but it also saves on disk space and website load time.
For web, we usually save our images at these sizes. For horizontals this size is pretty large, but not too large, this allows some upscaling and still retaining quality when someone is viewing the image on a larger screen and sees a sharper image on a smaller screen. For verticals, we sized them at a size that we think fits most screen types as well.
For Horizontals: 2000 x 1333 @72dpi
For Verticals: 600 x 900 @72dpi
Both of these use standard 3:2 and 2:3 ratios (4×6) crops before resizing.
In Photoshop, you would change the resolution FIRST, then the width, then the height. You do this so that it doesn’t miscalculate how the image should be auto sized when adding the dimensions.
When saving in Photoshop we always save at usually 6 quality, but you can go a little higher if you need to, just keep in mind this makes the file size larger. After we save the image, we drag and drop the image into JPEGMINI Pro to reduce the file size. In this example below, our image was 245K when we saved it from Photoshop, but only 125K after dropping it into JPEGMINI.
With Adobe Lightroom Classic, we usually set the quality at 60 with the dimensions and resolution we mentioned above and save as a jpeg. **We don’t turn on file size limiting. After saving the image, we do the same thing and run it through JPEGMINI Pro.
With Adobe Lightroom CC (2018) the save dialog is a little different, but you can get nearly the same result. While this one doesn’t have settings to change the DPI or the quality, you can resize your image down if needed, which we reccommend if you plan on saving for web.
When saving, make sure that you select “custom” for the size setting so that you can enable the downsizing. Here, you can follow our recommendations above or simply enter in your own. Afterwards we do the same thing we always do when saving for web by running it through JPEGMINI Pro.
If you don’t have either of the options above, you can always resize images quickly in JPEGMINI Pro. It’s especially easy if you’re already going to use it to compress your images safely and easily.
To do that, open up JPEGMINI Pro, and click the options icon in the left hand corner.
From there, click “export to folder”, set your folder, then change the max width to the width that you need, and you can press the + icon to add another size setting, for that one, you’ll want max height.
Be sure to click “apply” when you’re done.
Now, with the new settings applied, simply drag and drop your images into JPEGMINI Pro and your images will resize and export to the folder you set.
After saving our images, we’ll do an even further optimization by bringing them into JPEGMINI Pro which you can do individual images on their site for free, but we purchased the standalone mac edition. It allows you to simply drag hundreds of images into an app and optimize the images at no risk of degradation or quality. This program can really save you a lot of issues of spacing on your host and website speed.
If you’re using .PNG images for say icons or graphics, like we do sometimes there’s also a solution on the web. We use COMPRESSPNG or TINYPNG which have both worked, again optimization on images is always best to save space and speed. These two sites are also free of charge.
To assign a template to a WordPress (any page) in the WordPress sidebar, click pages, you can either add a new page, or to edit an existing one, hover over the page name and click the edit button.
On the page edit screen on the right hand side, there’s a “ProPhoto Template” option. You can choose the template you’ve created in the ProPhoto customizer in the dropdown.
Once you update the page and preview the page on the front of your website, you’ll see your ProPhoto template being applied to the page.
Usually if you’ve activated a new template for the first time, you’ll have already completed these steps, but if not, these are the steps to do it manually.
You’ll need to create your home and blog page under WordPress > Pages first.
Leave those pages BLANK, (don’t insert any text or images into the content area) and optionally, you can turn on these settings (we do in our templates) which show up at the bottom of the editing screen.
The first option turns off the page title for the page (Don’t worry this doesn’t effect SEO).
The second option makes only the widgets set in the Pro Photo customizer show up instead of the content added to the WordPress page. If you needed both to show up then leave it unchecked.
The next step is to set your blog and home page to be the front page and blog posts pages.
In the ProPhoto customizer, make sure you’re on the design level by switching the circle icon in the left bar to green. There, you’ll pick the front page tab in the sidebar at the bottom.
Make sure it’s set to “a page” which is usually set by default. Click the dropdown and select the home page you created earlier in WordPress for your home page, and likewise, type in the page you created earlier for the blog page.
To double check that they’re assigned correctly, in the ProPhoto sidebar click “Templates > Assignments”, then assign the home page you created earlier to the front home page template, and likewise for the blog.
The blog will have additional templates you’ll need to assign as well, like posts, and everything in the “Archive Templates Assignments” section and “Post Assignments” section.
The very first step you should take when purchasing a design should be to backup the design after downloading the files. The example below was done on a Mac with the latest version of High Sierra.
Create a new folder on your desktop.
Rename the folder to something you’ll remember.
Right click the file you downloaded and select “copy.”
Go into the folder you made earlier, and right click, then paste the file into the folder.
Store the folder somewhere safe so you’ll always have a copy of your download.