Site Tutorials

Tutorials »Build a Photography Website Tutorial

This guide is designed to help you build a website for a professional photographer. It will help you:

1) Choose a theme.
2) Add content to your site.
3) Format your site so it works for a professional photographer.

Before you get started, it can be helpful to think about how you’d like to structure your site. What information and images do you want visitors to find? How would you like to organize them? This will help you decide what pages to add, and give you an idea of how you want the site to look.

You can see an example site that was built using these instructions at gladwynphotography.wordpress.com.

capture-decran-2016-11-18-a-09-47-49

Choosing a Theme

The first step is to choose a theme for your site. WordPress.com has more than 300 themes, and there are many good options for a photographer’s website. For a portfolio site like this one, we have a few specific recommendations:

For the demo site we used Orvis, but you can follow along with these instructions using any of these themes.

↑ Table of Contents ↑

Adding Your First Page

Your site is made up of Pages, along with Portfolio Projects and Blog Posts (optional). Pages are for content that doesn’t change often, like contact information, or an About page. Posts are for for content that is updated often, like journal entries, or news articles. Portfolio Projects are a special type of Post designed specifically for displaying your art or photographs.

The example site has 4 pages: Home, About Me, Pricing and Packages, and Contact. You can have as many or as few as you’d like, although most photography websites like this have 3-5 pages.

Let’s try making a new page now. Click on My Site(s) in the top left corner to access your site’s options.  To add a new page, click the Add button next to Pages.

pages

This will bring you to the Page Editor, where you’ll create and edit pages. Your site already has a few pages, such as Home and About. Now, we are adding another page, like the Pricing and Packages page.

In the editor, we set the title toPricing and Packages, then added our demo content to the Editor below. Go ahead and add your own title and content for a page on your site now. When you’re done, click the Publish button to add that page to your site.

↑ Table of Contents ↑

Editing the About page

Next, we’ll edit the About page. On the About page, you can provide a little information about yourself and your work. Let’s edit the About page. To edit a page, click on My Site(s), then on the Pages option. This will show you all of the pages on your site. Click on the About page to edit it.

There, you can add the content of your choice: text, title, pictures, etc.

↑ Table of Contents ↑

Creating a Contact page

Some themes will add a Contact page automatically. If you see a Contact page already, edit that page instead of creating a new one.

The Contact page gives the opportunity to the visitors interested in your work to contact you directly. On the Contact page for your site, we recommend you don’t include your email address. Having your email address publicly visible can attract spammers. Instead, you can use a Contact Form on your site. When visitors fill out the Contact Form, you’ll receive an email with their message, but they won’t see your email address.

The demo site has a sample Contact page.

If your site doesn’t have a Contact page yet, add one as you did with the first page. Click on My Site(s), then on the Add button next to Pages. Set the title of the page to Contact.

After adding the title, add some text explaining how visitors can contact you, and when they can expect a response. Next, add a Contact Form using the Add Contact Form button.

You can edit the Contact Form to include any fields you’d like. In our example site, we have three fields: Name, Email, and Message. You can use the Add New Field button to add a new item to the contact form. When you’re done editing the Contact Form, use the Insert button to add it to your Contact page. If you need more information about the Contact Form, take a look at our support page.

Finally, create your Contact page by publishing it using the Publish button.

↑ Table of Contents ↑

Creating your other pages

If you have other pages that you’d like to add to your site, now is the time to add them. Just as we did before, you’ll want to add a new page using the Add button next to the Pages option.

Repeat this step for each page you’d like to create on your website. On the demo site, we’ve created a Pricing and Packages page as an additional page. You can choose to add as many, or as few Pages as you need.

↑ Table of Contents ↑

Creating a menu for your website

Now that you’ve added all of the pages for your site, it’s time to add them to the menu. To do that, we’ll use the Menu Editor.

On the demo site, we’ve added 4 items to the menu, one for each page.

To visit the Menu Editor, click on My Site, then on Menus. The Menu Editor shows all of the available menus, and the area that they’re currently assigned to. A theme may have 1 menu area, or more than one menu area. You can create as many different menus as you want – but only one menu can be attached to each menu area.

On the demo site, you’ll see one menu at the top of the page. This is a Primary Menu. There is another menu at the very bottom of the site. This is a Social Menu.

Under My Sites > Menus, you’ll already see a menu created for the Primary Menu area for your site. To add a page to your menu, click the + icon next to any menu item and hit ‘Add menu item below’.

You will see a popup, with your Pages listed. Select the Page you want to add to your Menu and hit Add Item. Then, hit Save on your Menu.

For your photography site, you’ll most likely want a simple menu, with pages. However, if you want to setup a more complex menu, you can get detailed instructions at en.support.wordpress.com/menus/.

Photographers sometimes use menus to divide their work into categories, such as “food,” “portraits,” or “landscapes”. You can see an example of this in the Snaps Theme Demo.

↑ Table of Contents ↑

Adding Portfolio Projects

Now that we have a few pages and a menu, it’s time to start adding your work!

The themes we’ve chosen work best with Portfolio Projects. However, you can also add your images to any Page or Post you’ve created. Here’s some more information about adding media to your Posts or Pages: en.support.wordpress.com/add-media/

For any photo shoot you want to showcase on your site, add it as a Portfolio Project. The most recent work will be shown on your home page.

To get started, head to My Site(s) → Portfolio, and click the “Add” button. This will open a new Portfolio Project. Give it a title, and add some text if you’d like to describe this photo shoot or image.

Then, on the left side of the Editor, click on “Featured Image”. Here, you can add an image that represents this particular photo shoot.

Now add any Project Types (these are like Categories) or Project Tags you’d like.

Then, click publish. Add a few more Projects now, with featured images.

↑ Table of Contents ↑

Setting up the Home Page

The demo site is setup to display all the most recent Projects in your Portfolio on the front page. The first step is to make the Home page us the Portfolio Template. Start My Sites → Pages and select Home to edit. Then, change the page template to “Portfolio” in the Page Attributes section. Click the “Update” button to save the change.

The next step will be designating this new Home page as the static front page. To do this, open the theme customizer at My Sites → Customize (it’s the button next to Themes). Locate the Static Front Page section. Under “Front Page Displays,” choose “A Static Page.” Then, choose the Home page in the Front page drop down menu. Click Save & Publish.

Now, take a look at your site by clicking My Site(s) and then clicking on your site’s title.

For more information on setting up a Static front page, see en.support.wordpress.com/pages/front-page/.

↑ Table of Contents ↑

Editing the Widgets on your Pages

Another way to enhance your site’s layout is by using widgets. Widgets are additional content you can add to your site’s sidebars, header and footer and can be tailored for each of your pages.

In this example, we are using widgets in the sidebar, on individual pages. You can see an example on the Pricing and Packages page, on the right hand side.

capture_decran_2016-11-18_a_09_57_26

Adding widgets to the sidebar

If you take a look at pages on the demo site, you’ll notice they have a sidebar with a search box and a gallery. These are widgets located in the sidebar area.

Notice how they’re showing on individual pages and not on the front page? That’s because the sidebar is only available on regular pages in this theme.

The demo site’s sidebar uses the Search and Gallery Widgets. To add these widgets, go to My Site → Customize → Widgets. There, click on one of your pages in the preview pane and you’ll see “Sidebar” appear as an option in the Widgets areas.

Take a look at this article to learn more about Widgets: en.support.wordpress.com/widgets/

↑ Table of Contents ↑

Your Brand, Your Identity

Adding a Domain

Now it’s time to give your website a unique address, via a custom domain. Custom Domains are included with any paid plan on WordPress.com. To add a custom domain:

1) Go to My Sites → Domains → Add.

2) Type the domain name you wish to use into the search field. You can register a brand new domain by choosing one of the available options. If you already own a domain at another provider, you can ‘map’ or redirect it at WordPress.com. Hit the Map It button to do this.

3) Follow the remaining steps to complete the setup process. Mapping a domain you already own requires updating its name servers, so that it points to WordPress.com.

For more help with adding a custom domain, see our Domains support doc.

For more help with adding a custom domain, see en.support.wordpress.com/domains.

Custom Logo

The Sela Theme allows you to add a custom logo to the header of your website. This can be added via My Sites → Customize → Site Identity. In the Site Identity section, you have the option of hiding your Site Title and Tagline. You can also choose how you to display the WordPress.com footer credit.

Custom colors

Your brand may have custom colors you would like to use on your website. With a Premium Plan or higher, you have access to a theme’s custom colors. This can be found in My Sites → Customize → Colors & Backgrounds. The number of colors available to customize will vary depending on the theme you choose. The Orvis theme gives the option to change the background color, along with accent colors.

To customize a color, click on the color circle you wish to change. Then, choose a preselected color or click the “pick your own color” link to open the color picker tool. The color picker tool allows you to use a color based on a specific hex value. This list of common colors and hex values may may be a good place to start.

For more help with custom colors and backgrounds, see en.support.wordpress.com/custom-design/custom-colors/

Additionally, there are preselected color pallets in the Colors & Backgrounds section that will apply a pre-made pallet of colors to your website.

↑ Table of Contents ↑

Turning off Sharing for Pages (optional)

As you create your website, one final decision to make is about how your site will be connected to other sites and social media. WordPress.com provides Sharing buttons at the end of posts and page, which you can turn off it you don’t want them.

Typically, Sharing buttons are used for posts, but aren’t used always on a page. You can turn off the Sharing buttons for your pages by going to My Site → Sharing → Sharing Buttons.

show-sharing-buttons-options

Conclusion

That’s it! You’ve successfully created and setup your business website. Congratulations!

In the future, if you’d like to add to or grow your site, you can do that with WordPress.com too. Try searching our support site, available at en.support.wordpress.com, for the thing you’d like to do!

Not quite what you're looking for?

Get Help