Slides to accompany talk at the London WordPress Meetup

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?

3. New Years Eve 2012

4. Birmingham ComicCon 2013

5. Kirsty Burgoine
WordPress developer / web designer
• www.kirstyburgoine.co.uk
• info@kirstyburgoine.co.uk
• twitter.com/kirstyburgoine
Organiser of Shropgeek
• Monthly socials
• Rebellion - mini conferences
• (R)Evolution web conference

7. 27th, September 2013
2013.shropgeek-revolution.co.uk

8. Advanced Custom Fields by Elliot Condon
- Using the location field with Google Maps API
- Flexible Content
- Images field

9. www.speaktheweb.org July 24th

10. The Client

11. A little about Advanced Custom Fields ...

12. 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

13. 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/

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

15. 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.

16. 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%; }

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

18. 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.

19. 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 ...

20. 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.

21. 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

22. 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/

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

24. 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

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

26. 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()

27. 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

28. 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

29. The template part
Then display the content:

30. 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

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

32. 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/

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

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

35. 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.

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

37. 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

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

39. Thank you.

40. Credits and Resources
• www.advancedcustomfields.com
• fitvidsjs.com/
• flexslider.woothemes.com/index.html
• 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/wcuk2013