Build a photography portfolio site that is easily editable by a client using Oxygen & Advanced Custom Fields.
The photographer can edit existing galleries or create new galleries without having to pick up the phone and call you, and they'll never have to touch Oxygen - they can do it all from the WordPress dashboard.
This is an extremely simple introduction to Advanced Custom Fields - so if you're looking to level up your WordPress game and are unfamiliar with Advanced Custom Fields, this is the tutorial to get you started.
OVERVIEW
We'll use Custom Post Type UI to create a custom post type for the galleries, and the Advanced Custom Fields Gallery field for the galleries themselves. In Oxygen, we'll create a template that renders the galleries, and set Oxygen's Gallery element to pull the images from the ACF gallery field.
Brief descriptions of everything done are below, but the actual step-by-step instructions are in the video above.
REQUIRED PLUGINS
Advanced Custom Fields Pro ($25) - for creating the gallery field
Custom Post Type UI (free) - for creating the gallery custom post type
Contact Form 7 (free) - for creating the contact form
Oxygen - for designing the site
BulkPress - not required, but a useful tool to have to create posts in bulk. Yeah, it hasn't been updated in 2 years, but that's because it works perfectly - so there's no need for updates.
Redirection - for redirecting the homepage to a gallery CPT.
SETTING UP THE CUSTOM POST TYPES & ADVANCED CUSTOM FIELDS
First create a custom post type for the galleries using Custom Post Type UI.
Add an ACF Gallery field to the newly created custom post type by creating a new Field Group in Advanced Custom Fields and set it to show if post type = Gallery. Add a Gallery field to the Field Group.
Use BulkPress to create each Gallery, and then edit each Gallery and upload your images to the Gallery field.
DESIGNING THE SITE WITH OXYGEN
Now that the Galleries have been created, it's time to design the site with Oxygen.
Create a template that applies to all of your pages. This template should contain a sidebar with the logo, menu, etc. and then a content area using the Inner Content element.
Then, create a Gallery template that applies to the Gallery custom post type. This template should inherit the previous template, and contain a Gallery field set to pull its images from ACF gallery field.
CONTACT PAGE
Add a contact page and paste in the contact form shortcode from Contact Form 7.
The form itself can be styled using Selector Detector.
FINISHING TOUCHES
Create a menu and put your contact page and all your galleries in it.
Use the Redirection plugin to redirect the homepage to one of the galleries.
Consider disabling the client's access to Oxygen so they can't mess up the site with Role Manager.
Consider allowing the client to add their own pages to the site using Gutenberg.
