It has been nearly twenty years since I built my first ever photography website (www.jasonfriend.co.uk). Back then, at the start of the millennium, the internet was a very different space; social media didn’t exist and you needed to be a closet geek if you wanted to be part of the .com bubble. Before I could even build my first ever site, I had to learn how to code HTML (just in case you are wondering, that stands for HyperText Markup Language), pay a small fortune for a domain name (the actual website address so people can find it easily) and web hosting (basically a computer storing and serving your website pages), as well as getting a small selection of my favourite transparencies (slide photos) digitised (i.e scanned) so that they could be displayed on the world wide web. This probably took about a week. Today, I am going to show you to how build your first photography website in less than an hour!
There are a couple of things that you need to do before you can start building your site. First of all you need to order a domain name and web hosting. Please note that not all web hosts are equal and, confusingly, simply because one costs more than the other does not make it actually better. In fact, a large hosting company with thousands of hosted websites may actual perform far worse than a smaller company with only hundreds. You should also be on the look out for a WordPress dedicated hosting company, as your new website will be built using this piece of software. There are a few reasons why WordPress currently powers over 35% of the websites on the internet with flexibility and reliability being a couple of them. I use Ark Internet to host all of my websites.
Before you can actually construct your site, you will need to decide what photos you are planning to display. You will then need to get them web ready by resizing them down (to save storage space and speed up website loading times – I generally resize all of my photos to 2500px on the longest dimension) and then saving them as jpegs.
We are going to build a simple three page website with the following pages: Home, Portfolio and Contact. Once you have built these pages, it will be easy enough to start adding more content and experimenting with different options. Are you ready to build your first website?
1. Install WordPress
If you are using a dedicated WordPress web host, it should be really simple to install WordPress. Here, the host has automatically installed the WordPress software so all I had to do was type in the domain name of my website into the address bar of my web browser. Once my page has loaded, I simply selected the language, entered a site name (here I am building the website for The Legacy Project), username, email address and choose a secure password. All I needed to do then was log into my new website!
2. Choose a theme
The Dashboard is the starting point for accessing all of the admin options for your website and it is displayed whenever you log into your website. When you first login to your site, you will be greeted with a ‘Welcome to WordPress’ message and the option to ‘Customise your site’ or ‘change your theme completely’, which is what you should select.
From here you will be taken to a page showing your currently installed themes. Themes control the actual appearance of your website and are a very powerful feature of WordPress, with an ever growing collection of themes being available to search and download directly from within your dashboard. Select ‘WordPress.org’ on the left bar and then search for ‘Page Builder Framework’ and select ‘Install & Preview’. Press the blue ‘Publish’ button once the preview has loaded (don’t worry about any of the content for the site at this point).
The beauty of the WordPress theme system is that you change the entire appearance of your site simply by selecting ‘Appearance > Themes’ from the main WordPress menu on the left hand side of your admin dashboard. So, if you wish to change the site once you have entered some content, you can return to the theme manager and choose a different theme to preview and install.
3. Build the first page
Right – Let’s do it. It’s time to build your first page!
From within the admin area, navigate to the side menu and select ‘Pages > Add New’. When the page editor has loaded, you will be greeted with a pop-up box explaining to you how the ‘Block Editor’ works and brief instructions of how to use it. The page editor included in WordPress is very flexible and can be used to build some quite complicated page designs. However, we are going to keep things simple for this website and we are going to build a basic two column page.
First of all you will need to give your page a title. Next, click on the + symbol in the top right corner of the first block (directly below the title bar) and scroll down to ‘Layout Elements’ and select ‘Columns’. Now select the two column option.
We can now add out first image! If you click on the + symbol on the left hand side box and then choose ‘Image’ from the ‘Most Used’ section. The you just need to select you photo and upload. I am using quite a lot of text in the next column, so I decided to use a portrait orientation image.
Once the image has finished uploading, you can click on the right hand side box + symbol and this time choose ‘Paragraph’. I am planning for this page to be my homepage, so I have inserted text telling the visitor all about the project so that it acts as an introduction to the website. It would also make a good ‘About’ page and it is quite possible that I will construct a different homepage in the future and indeed use this as an ‘About’ feature. The beauty of WordPress is that this can be done very easily in the future.
Once I have added the content, I double check the ‘Layout’ options on the right hand side. As it is my homepage, I decide to disable (i.e. hide) the page title and the sidebar. I also make sure that the layout is contained (full width would adapt to the page of the browsers screen which can be really effective for some content. However it can also be quite complicated to maintain a consistent design on all desktop monitor sizes which is why I decided to use a contained view).
Once I have done this, I press the ‘Publish’ button (top right hand side of the screen) and then view my new page. I am not entirely happy with the layout so I press ‘Edit Page’ which is now showing on the admin bar at the very top of the screen. Back in the editor mode, I click on the left hand column which triggers the ‘Block’ options to appear on the right hand side. I scroll down to ‘Column Settings’ and adjust the width of the column. I then republish the page by clicking on the ‘Update’ button and re-view the page to check that I am happy with the final result.
4. Add the image gallery
Before we can add our first gallery, we need to make some additions to the admin area of our website. WordPress is an amazing platform but it doesn’t offer all of the options that every user could possibly require – and we wouldn’t want it to because this would make it remarkably difficult to learn how to use. However it is possible to extend on the core functions of WordPress by using ‘Plugins’ although it would be advised to keep the number of plugins installed on a website down to the absolute minimum as they can slow down the load speed and general performance of your website.
Navigate to the WordPress side menu and select ‘Plugins > Add New’ and then search for ‘Envira Gallery’. Once the results have loaded, locate the plugin and click ‘Install Now’. Activate the plugin once it has loaded. If you now look to the WordPress side menu, you will notice that a ‘Envira Gallery’ option has been added. Navigate to ‘Envira Gallery > Add New’ and, once the page has loaded, give your new gallery a title and upload some photos – It really is that simple! Don’t forget to press ‘Publish’ once the upload has completed.
Now it a just a case of adding a new page (Pages > Add New), giving it a title and then pressing the + symbol in the first block. You will now find that there is a new ‘Envira Gallery’ option. Click on it and then type the name of your gallery and select it once found. Double check that your page layout is contained and that the sidebar is disabled before pressing the ‘Publish’ button. You can now view your new gallery!
5. Final WordPress configuration
There are now a handful of small jobs we need to do before the site can be finished. First of all, navigate to ‘Pages > All Pages’ and delete (move to trash) all of the pages apart from the two which you have made previously and the ‘Contact’ page. Once you have done this, select and edit the existing ‘Contact’ page. There are a number of plugins available which can be used effectively for contact forms, however that is probably beyond the scope of this article so I am going to keep my contact page nice and simple!
Next, on the side menu, navigate to ‘Settings > General’ and change the ‘Tagline’ of your website. Staying with the settings, next select ‘Settings > Reading’ and you will see at the top of page the option to select a static page for ‘Your homepage displays’. We are only concerned with the Homepage option, so click on the dropdown list and select the first page that we made and then press save changes.
Finally, the menu can be configured. View the front page of your website and you will see the option to ‘Add Menu’ in the top right hand side of the header bar. Click on this and then proceed to ‘create a new menu’.
The process now is quite straightforward. All you need to do is name the menu and select the pages from the left box which you wish to include. You can change the ‘Navigation Label’ of the pages, as well as re-ordering the links, which gives you full control over the appearance and usability of your websites navigation. Don’t forget to press the ‘Save Menu’ button once you have finished.
Next you will need to manage the menu locations. This is a quick choice, simply select the menu you have just created for the ‘Main Menu’ and ‘Mobile Menu’.
And that is it, you have built your first website! Although I am going to let you into a secret – Any website always seems to be a work in progress! I have been changing mine for two decades and I can’t imagine that will be changing anytime soon!
ARK INTERNET ARE OFFERING ALL TELEPHOTO.COM READERS A 20% DISCOUNT ON THEIR WORDPRESS DEDICATED WEB HOSTING SERVICES. USE THE DISCOUNT CODE TELEPHOTO2020 DURING THE CHECKOUT PROCESS TO RECEIVE THE DISCOUNT.