I recently started work on a new site for a photographer and we decided to try the Deep Focus theme from Elegant Themes. Since this theme utilizes the Custom Field function to create galleries based on Posts, I thought this would be a good opportunity to create a tutorial for adding images to a gallery page and editing the gallery as well.

For purposes of brevity I will assume that you have already downloaded and installed the Deep Focus theme from Elegant Themes as well as uploading some images that you want to use in some galleries into your dashboard’s Media Library. I would recommend pre-loading images because: a) with the new Media Uploading function you can upload multiple images at once and b) this will make step 1 go a lot smoother; especially if you open a second tab in your browser for creating your new post(s) and then you can switch between the two tabs to make your work-flow quicker.

How Does The Gallery Get Created?

Deep Focus as well as the Envisioned theme use a combination of Posts and Pages in their theme functions to create gallery pages for a site. If you want to create a gallery for Portraits, for example, what you do is create a new Page in WordPress, title it Portraits and then select a template for that page (Gallery or Portfolio). Once you have selected that template, you will see a dropdown menu appear that allows you to select which Category of Post will be used to create the photo gallery on the page. For example, on the site I am currently working on, I created a Page called Newborn Portraits and then a Category called Newborn Portraits.

Once you have your Page and your Category set up, it’s time to start adding images!

STEP 1: Sign into your WordPress dashboard and go to Media Library.

Choose an image that you would like to place in a gallery page. Hover over the image to get the quick-edit menu to pop up and select “Edit”.

STEP 2: When the edit window for that image opens, you need to grab the url for the image (see below)

Just click and drag across the url to grab it and copy it to your computer’s clipboard.

STEP 3: Now go to Posts > Add New to create a new Post that will contain that image. When you are in the New Post window, give the Post a title. This will be what appears as the image’s title as it appears in its gallery Page. Also, make sure to select what Category the Post will be (i.e. Newborn Portraits). This is what tells the theme where the image should appear.

Wait! Shouldn’t I write something in the edit window?
You can if you want some information about the image to show when a viewer clicks on it in its gallery Page. When a viewer is looking at the gallery Page and hovers over an image, there are two options to view the image: the “magnifying glass” option will open up a slideshow window on the same page so they can view all the images that way. The “zoom-window” option will go to the image’s Post in a different window and they can see the image in Post format with the text that you added.

STEP 4: Now you are going to tell the Post which image to show. Scroll down past the edit window and you should see an option called Custom Field. (If you don’t see it, don’t worry, just go to the top right corner of the dashboard and click on “Screen Options” to select “custom fields” and add it to your editing options). There should be a dropdown menu of Custom Fields that you can choose from. You need to choose the field “Thumbnail”.

But I don’t see Thumbnail!?
No worries, you may need to simply add it in yourself. Just click “Add New” and type Thumbnail.

STEP 5: Now, next to the Thumbnail custom field, you are going to paste in the url of the image as the value. Make sure you click “Add Custom Field” when you are done!

STEP 6: Add tags if you like, (I think it’s good practice to stay in for SEO and Search purposes) and click “Publish” in the top right.

Now the image should appear in the gallery!

And that’s basically it. Any questions?

How can I change the order that my images appear in?
This can be done using the edit function for the date the post was published. In the Post’s edit window, simply click the word “edit” next to the “published on” date and alter it so that its date/time is before or after the image that you want it next to. Then, click “Update” and check that the new order is showing.

How can I remove an image from a gallery Page?
You can change the Publish status to “Draft” in the edit window and click “Update”. This will remove it from the lineup.

How can I show the same image in two gallery Pages?
Easy, just select more than one Category in that image’s Post.