How to Quickly Create a Simple, Beautiful Photography Website with WordPress

For any photographer, a professional website is critical to your job. With a good website, you have your own online space on which you can showcase your work, share your expertise and services, generate leads, and much more.

While there’s no shortage of ways you can build your photography website, I think WordPress is still the best way to go. You own your website, and you can customize it in any way. In this post, I want to walk you through some steps you can take to have a simple, gorgeous photography website up in no time.

Requirements of a Photography Website

First off, let’s determine some things we’re going to want in a photography website. These will be the “essentials,” as they are things most photographers will need on their websites.

The first thing we’ll tackle is a “Services” section. This is where you’ll let your customers know what you provide. For example, in addition to photography services, you may also offer printing and web services.

Next, we’ll cover building out a portfolio to showcase your projects.

Lastly, we’ll go over how to create a simple contact page for your users to get in touch via email.

For this tutorial, we’re not too worried about custom design. Instead, let’s stick with a pre-made theme that looks great out of the box, and will let us get set up in no time. The Meteor Theme from Array is especially suited for photography and portfolio websites, and it looks amazing!

First things first, though: Make sure to activate a child theme for Meteor. This will allow us to add any code customizations with modifying the core theme, which will preserve our customizations.

Services

For our example photography website, I’ll say we offer photography, print, and web design services for our clients. Adding services in Meteor is pretty simple, and requires only a few steps:

  1. Create a page with any title you want (I’ll use “Services”). In the “Page Attributes” section of the page editor, there’s an option for “Template.” Select the “Services” page template.
  2. Create a page for each of the services – in this example: “Photography,” “Print,” and “Web Design.” For each page, assign it’s parent as the “Services” page you created in the last step.

By assigning the “Services” page template to the Services page, Meteor knows to treat the child pages as individual services, and displays them accordingly. You can add any text you wish to each service child-page, upload featured images, and enter an excerpt to be displayed on the Services page.

After I’ve added the three service pages, and added featured images and excerpts, I have a Services page that looks like this:

Meteor Services Layout

Portfolio

Next up, let’s get our portfolio in place. With Meteor, there’s an extra couple steps to take:

  1. First, install the Jetpack plugin. This is what we’ll use to add our Portfolio entries. Once activated, go to Jetpack → Settings. Under the “Custom content types” section, toggle to enable “Portfolios.”
  2. Go in and create some Project Types and Project Tags. I’ll create a category for each service (Photography, Print, and Web Design), and a few tags like Wedding and Graduation.
  3. Add your projects. For each project, you have a few different layout options that Meteor provides. I’ll walk you through a couple in a moment.
  4. Create a new page – call it something like “My Portfolio.” The important thing to note here is that the slug of the page cannot be “portfolio” because it will cause conflicts with the Portfolio post-type’s archive (don’t worry about this, as it’s more technical than you need to worry about). Before publishing, select a page template that prefer – I’ll cover these as well next.

Meteor offers some great templates for displaying Projects. For each individual Project, you have the following options:

Default Template – Stays in line with the rest of the theme’s layout (e.g. keeps sidebar to the right).

Portfolio Centered – A simple, centered (no sidebar) layout with the Project’s featured image at the top.

Meteor Portfolio Centered

Portfolio Split – This template creates a left-right column layout. The Project’s images go on the left, and the content/meta go on the right.

Meteor Split Portfolio

Portfolio Carousel – Pretty much the same as Portfolio Centered, but this one takes the first gallery that appears in the Project’s content, and puts it at the top in a carousel that the user can click through.

Meteor Portfolio Carousel

For the Portfolio listings, these templates are available:

Portfolio Grid – A simple, tidy grid layout for displaying multiple Projects.

Meteor Grid

Portfolio Masonry – Displays projects in a cascading masonry layout (think of Pinterest).

Meteor Portfolio Masonry

Portfolio Blocks – Displays a list of projects in an alternating image/text block layout.

Meteor Portfolio Blocks

Portfolio Carousel – Displays Projects in a horizontal slider/carousel layout. The user can click the arrows to navigate through the Projects.

Meteor Carousel Portfolio

Contact Form

For the contact page, we want to show a simple contact form to capture leads from prospective customers. To create the form, we’ll use a plugin – WPForms Lite is recommended by Array.

Once you’ve created your contact form, create a new page – call it something like “Contact” (you can be more creative, of course). On the new page, insert the shortcode that was generated when you created the form. The shortcode will look something like [wpforms id=”00000″]. You’ll get something like this:

Meteor Contact Page

And that’s all you need to get a basic, yet fully-functional, photography website up and running on WordPress. Thanks for following along, and hopefully you launch your portfolio site soon! Be sure to leave a comment with your site link so we can take a look. Also, check out our other photography themes by browsing the Photography category on our site.

Published by Ren Ventura

Hey, I'm Ren. I'm a web and software developer from Cleveland, Ohio. I build cool things using WordPress, and I enjoy teaching others how to do the same. When I'm not writing code, I love to cook and eat, especially BBQ!

Leave a Reply

Your email address will not be published. Required fields are marked *

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match

[i]
[i]