Written July 27, 2011
Tagged Advanced Custom Fields, wordpress
In this tutorial, we will create a custom gallery WordPress template which will use the Advanced Custom Fields plugin + the repeater field to populate a NivoSlider image gallery.
1. Create the Template File
Firstly, we need to create a blank template file which we can then add our Advanced Custom Fields to. Create a new file (or duplicate your page.php file or convet them like you convert word to pdf) in your theme called page-gallery.php and enter this code into it.
2. Create the Fields
Now that we have a template file ready for our custom fields, we need to create our gallery custom field group. All we need is 1 repeater field with 2 sub fields:
- Image – an image field that saves it’s value as the attachment ID (so we can get different sized images from it)
- Title – a text field or text area to enter a title which could be used in the gallery as an alt tag or caption
Once you have created the fields, add some rules to target the edit page we desire: this will be when the post type == page, and when the page template == “Gallery Page”
Take a look at the image bellow to see the complete ACF.
3. Create a Page and add some Images
Our last step is to create a new page and select the Gallery template. After you publish the page, you will see the gallery image fields we created in step 2. Below is a screenshot of my edit screen.
4. That’s it!
Expecting more code? Sorry to disappoint, but creating an image gallery is actually quite simple with the Advanced Custom Fields Plugin! Here’s a look at my Gallery Slider after some basic CSS.