Slides from the presentation given at WordCamp Lancaster 2013

1. Advanced Custom Fields
Flexible layouts and other cool stuff!
by Kirsty Burgoine
www.kirstyburgoine.co.uk
twitter.com/kirstyburgoine
info@kirstyburgoine.co.uk

2. Who am I?
• Web developer / designer
• Run my own business in
Shrewsbury / Shropshire
• Organiser of Shropgeek which
includes:
- Socials
- Rebellion (mini conferences)
- (R)Evolution (annual
conference)
• and I ‘~ grin!’ alot

3. A little about Advanced Custom Fields ...

4. General Settings
• Adding the group and field
Label, Name, Type,
Conditional Logic
• Location
Show on specific pages,
posts, taxonomy etc.
• Options
Position, Style, hide on
screen
Creating Custom Fields

5. The Flexible Content field
What you will need:
• Flexible Content Field
• Repeater Field
Both are premium fields and cost $25.00 AUD each.
http://www.advancedcustomfields.com/add-ons/

6. Creating the Flexible Content field
And here’s one I made earlier....

7. Editing the Fields
• Layouts - This will display in popup when editing the page
• Create sub field within the layout that could be used for Flexible
content.
• For multiple columns set as a Repeater Field
• Add repeater fields inside the sub field
• Set a maximum number of rows. This will make your CSS easier to
manage.
• For more layouts, click Add New under each layout and repeat
process

8. Adding flexible content to the page
And here’s one I made earlier....

9. Building the flexible content into our theme
Step 1
Create the main page template: flexible-content.php
In that template create a new loop for the flexible content within the
main loop using has_field()

10. The page template
Step 2
Create the template part for each layout.
content-flexible-text.php
content-flexible-carousel.php
Careful to use the name of the layout i.e. text, carousel
We can now automatically pull in the right type of content based on the
selection made in the admin panel

11. The template part
Example used here is content-flexible-text.php
First of all we need to get all of the content from the Text Flexible
Content Field
$columns is a repeater field so we initiate a new loop and get all of the
content from each sub field
oEmbed Tip: Make sure video links are not hyperlinked!

12. The template part
Then display the content:

13. The template part - CSS
The template part - CSS
Step 3
Setup the columns to create their class dynamically
$columns is our repeater field. $text_count counts the number of fields
created.
We originally limited our columns to 4 when creating the flexible
content field so we know the classes created here will be .span1,
.span2, .span3, .span4

14. The template part - CSS
The template part - CSS
Making the columns responsive:
As well as the CSS I also used fitvids.js to make the videos responsive

15. Google Maps & the Locations field
What you will need:
•Location Field
•Knowledge of Google Maps API v3
The location field is a free add on.
http://www.advancedcustomfields.com/add-ons/

16. Creating the Location field
And here’s one I made earlier....

17. Creating the locations
Create a new
page for each
separate
location.
The location field
group is set to
only show on
child pages of
the main
locations page.

18. Displaying each location on the page
Step 1
Add the google map container <div> to content-page.php
In this case the post parent is our main locations page.
The container has been added outside of .content-entry to avoid any
distortion caused by the CSS .content-entry img { max-width: 100%; }

19. Displaying each location on the page
Step 2
Within the loop get the locations field using get_field();
Add the javascript for Google maps

20. Displaying each location on the page
The location field is an array that allows you to use the original address
inputted and the coordinates returned.
In the example given, we used $post_code[‘coordinates’] in the
Google maps javascript.
Notice there is also a custom image for the map marker here.

21. Displaying all locations on one map
Step 1
Create the main page template: locations-main.php
Step 2
Add the google map container <div> to the page
Step 3
Create the map and add the markers ...

22. Displaying all locations on one map
Step 3 continued.
Create a new loop
that finds all of the
location
coordinates.
This loop then
needs to insert all
of the information
into an array called
$marker for later
use in a our
javascript.

23. Displaying all locations on one map
Step 3 continued.
The Javascript.
This example shows how
each marker is created
and where it is placed.
Full code can be found in
locations-main.php

24. Dealing with Images
What you will need:
•Gallery Field
The gallery field is a premium add on and costs $25.00 AUD.
http://www.advancedcustomfields.com/add-ons/

25. Dealing with Images
And here’s one I made earlier....

26. Images and the Gallery field type
Image Return
Values
The Image
Object array
returns a lot of
information we
can use:

27. Gallery field type
Gallery field automatically stores all information about each image in an
Image Object.
This allows us to do some cool stuff with them.

28. Creating a gallery of images
Create the flexible content field for the gallery.
Here’s one I made earlier ...

29. Creating a gallery of images
Create the template part for the layout. This will be a flexible layout as
well.
content-flexible-carousel.php
Once created, get all of the content from the flexible content carousel
fields
$carousel_images is an array so we need to create a foreach loop to
access all of the information

30. Creating a gallery of images
To create the carousel I used flexslider 2 from Woothemes:
http://flexslider.woothemes.com/index.html

31. Thank you.

32. Credits and Resources
• www.advancedcustomfields.com
• fitvidsjs.com/
• flexslider.woothemes.com/index.ht
ml
• placekitten.com
• www.kirstyburgoine.co.uk
• twitter.com/kirstyburgoine
• info@kirstyburgoine.co.uk
All theme files can be found on github at:
• https://github.com/kirstyburgoine/wcuk20
13