Tutorials »Build a Photography Website Tutorial
This guide is designed to help you build a complete website for a photographer. We’ll start by choosing a theme, then help you add your content to your website and format it the way you’d like.
You can see an example site that was built using these instructions here. Each step will include links to the example site, too.
Choosing a Theme
WordPress.com has more than 300 themes that you could use for your website. For a photography website, there are many good choices. For a simple 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 with any of these themes. We’ll indicate where the themes are different from Orvis.
Turning off Sharing for Pages (optional)
As you create your website, one 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.
Adding Your First Page
Each separate page on your site will be a separate page on WordPress.com. The example site has 5 pages: Home, About Me, Pricing and Packages, Portfolio, and Contact. You can have as many or as few as you’d like, although most photography websites like this have 4-10 pages.
To see an example of this page on the demo site, click here.
Editing the About page
Next, we’ll edit the About page. To edit a page, click on My Site, then on the Pages option. This will bring you to a view which shows 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.
Creating a Contact page
On the Contact page for your site, you will not want to include your email address – that will get used by spammers. Instead, you can use a Contact Form on your site. When visitors visit your site and fill out the Contact Form, you’ll receive an email with their message, but they’ll never see your email address.
To see an example of this step on the demo site, click here.
To make a new Contact page, we’ll add a new page the same was as we did for your first page – click on My Site, then on the Add button next to Pages. The title of the page is Contact.
In the editor for the page, add some text explaining how they could contact you other than the Contact Form. 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.
Finally, create your Contact page by publishing it using the Publish button.
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, but you can choose to add as many or as few pages as you’d like.
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, so that they appear as links on your site. To do that, we’ll use the Menu Editor.
On the demo site, we’ve added 5 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. And you can create as many different menus as you want – but only one menu can be attached to one menu area. You’ll want to have one menu area for each menu.
You can get detailed instructions here: https://en.support.wordpress.com/menus/
For the demo site, you’ll see one menu for the Primary Menu area, which we see at the top of the page, and one menu for the Footer Menu area with social media icons, which appears at the very bottom of your site.
You’ll already see a menu created for the Primary Menu area for your site, and you can now add any other pages to this menu. To add a page to your menu, you’ll use a new menu item. To add a menu item to your menu, click the + icon next to an existing menu item. It’ll give you the option of what you want to add to the menu – in this case, we’ll add a Page to the menu.
For your photography site, you’ll probably add most or all of your pages to the menu; however, if you want to setup a more complex menu, you can find more detailed instructions on customizing your menu here: https://en.support.wordpress.com/menus/
When you’re finished adding items to your menu, remember to click the Save button to save the changes to your menu.
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 for this setup is to create a new blank page using the Portfolio Template. Start a new page at My Sites > Pages > Add. This will open a new page in the Page Editor. Give this page the title Home. Change the page template to “Portfolio” in the Page Attributes section. Then publish the page.
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. Locate the Static Front Page section. Choose to display a static front page and from locate the Home page in the drop down menu. Click Save & Publish.
For more information on setting up a Static front page, see: https://en.support.wordpress.com/pages/front-page/
Adding Portfolio Projects
For any photo shoot you want to showcase on your site, add it as a project and it will be shown on your home page.
Start new project… Give it a title… Add featured image…. Add an image and text to the content…. Add category…. Publish…..
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’ 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 here, on the right hand side.
Adding widgets to the sidebar
If you take a look at pages on the site, you’ll notice they have a sidebar with a search box and a gallery. These are widgets too and there are 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.
For the sidebar in the demo site, the widgets used are “Search” and “Gallery” and to add them, you’ll want to go to My Site → Customize → Widgets. There click on one of your pages in the preview and you’ll see “Sidebar” appear as an option in the Widgets areas.
Your Brand, Your Identity
Adding a Domain
Now it’s time to give your website a unique address by adding a custom domain name. Custom Domains are included with any paid plan. To add a custom domain, go to My Sites → Domains → Add. Type the domain name you wish to use into the search field. You can either register a brand new domain by choosing one of the available options, or choose the “Map It” option for a domain you already have registered elsewhere. Follow the remaining steps to complete the setup process. Keep in mind that mapping a domain you already own requires updating the name servers where the domain is registered so that it points to WordPress.com
For more help with adding a custom domain, see https://en.support.wordpress.com/domains.
The Sela Theme allows you to add a custom logo to the header of your website. This can be added in the Theme Customizer. My Sites → Customize → Site Identity. While you are in the Site Identity section, you have the option to disable the display of your Site Title and Tagline, and choose how to display the WordPress.com footer credit.
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 Sela theme gives the option to change the background color, and three accent colors.
To customize a color, click on the color circle you wish to change and 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 hexadecimal value.
For more help with custom colors and backgrounds, see https://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.