Advanced Custom Fields
Flexible layouts and other cool stuff!
by Kirsty Burgoine
www.kirstyburgoine.co.uk
twitter.com/kirst...
Who am I?
New Years Eve 2012
Birmingham ComicCon 2013
Kirsty Burgoine
WordPress developer / web designer
• www.kirstyburgoine.co.uk
• info@kirstyburgoine.co.uk
• twitter.com/ki...
27th, September 2013
2013.shropgeek-revolution.co.uk
Advanced Custom Fields	by Elliot Condon
- Using the location field with Google Maps API
- Flexible Content
- Images field
www.speaktheweb.org July 24th
The Client
A little about Advanced Custom Fields ...
General Settings
• Adding the group and field
Label, Name, Type, Conditional
Logic
• Location
Show on specific pages, posts,...
Google Maps & the Locations field
What you will need:
• Location Field
• Knowledge of Google Maps API v3
The location field ...
Creating the Location field
And here’s one I made earlier....
Creating the locations
Create a new page
for each separate
location.
The location field
group is set to only
show on child
...
Displaying each location on the page
Step 1
Add the google map container <div> to content-page.php
In this case the post p...
Displaying each location on the page
Step 2
Within the loop get the locations field using get_field();
Add the javascript fo...
Displaying each location on the page
The location field is an array that allows you to use the original address inputted
an...
Displaying all locations on one map
Step 1
Create the main page template: locations-main.php
Step 2
Add the google map con...
Displaying all locations on one map
Step 3 continued.
Create a new loop that
finds all of the location
coordinates.
This lo...
Displaying all locations on one map
Step 3 continued.
The Javascript.
This example shows how each
marker is created and wh...
The Flexible Content field
What you will need:
• Flexible Content Field
• Repeater Field
Both are premium fields and cost $2...
Creating the Flexible Content field
And here’s one I made earlier....
Editing the Fields
• Layouts - This will display in popup when editing the page
• Create sub field within the layout that c...
Adding flexible content to the page
And here’s one I made earlier....
Building the flexible content into our theme
Step 1
Create the main page template: flexible-content.php
In that template cre...
The page template
Step 2
Create the template part for each layout.
content-flexible-text.php
content-flexible-carousel.php
C...
The template part
Example used here is content-flexible-text.php
First of all we need to get all of the content from the Te...
The template part
Then display the content:
The template part - CSS
Step 3
Setup the columns to create their class dynamically
$columns is our repeater field. $text_co...
The template part - CSS
Making the columns responsive:
As well as the CSS I also used fitvids.js to make the videos respons...
Dealing with Images
What you will need:
• Gallery Field
The gallery field is a premium add on and costs $25.00 AUD.
http://...
Dealing with Images
And here’s one I made earlier....
Images and the Gallery field type
Image Return
Values
The Image Object
array returns a lot of
information we can
use:
Gallery field type
Gallery field automatically stores all information about each image in an
Image Object.
This allows us to...
Creating a gallery of images
Create the flexible content field for the gallery.
Here’s one I made earlier ...
Creating a gallery of images
Create the template part for the layout. This will be a flexible layout as well.
content-flexib...
Creating a gallery of images
To create the carousel I used flexslider 2 from Woothemes:
http://flexslider.woothemes.com/inde...
Thank you.
Credits	and Resources
• www.advancedcustomfields.com
• fitvidsjs.com/
• flexslider.woothemes.com/index.html
• placekitten.com...
WP London Meetup - August 2013
Upcoming SlideShare
Loading in...5
×

WP London Meetup - August 2013

349

Published on

Slides to accompany talk at the London WordPress Meetup

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
349
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WP London Meetup - August 2013

  1. 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. 2. Who am I?
  3. 3. New Years Eve 2012
  4. 4. Birmingham ComicCon 2013
  5. 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
  6. 6. 27th, September 2013 2013.shropgeek-revolution.co.uk
  7. 7. Advanced Custom Fields by Elliot Condon - Using the location field with Google Maps API - Flexible Content - Images field
  8. 8. www.speaktheweb.org July 24th
  9. 9. The Client
  10. 10. A little about Advanced Custom Fields ...
  11. 11. 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
  12. 12. 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/
  13. 13. Creating the Location field And here’s one I made earlier....
  14. 14. 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.
  15. 15. 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%; }
  16. 16. Displaying each location on the page Step 2 Within the loop get the locations field using get_field(); Add the javascript for Google maps
  17. 17. 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.
  18. 18. 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 ...
  19. 19. 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.
  20. 20. 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
  21. 21. 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/
  22. 22. Creating the Flexible Content field And here’s one I made earlier....
  23. 23. 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
  24. 24. Adding flexible content to the page And here’s one I made earlier....
  25. 25. 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()
  26. 26. 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
  27. 27. 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
  28. 28. The template part Then display the content:
  29. 29. 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
  30. 30. The template part - CSS Making the columns responsive: As well as the CSS I also used fitvids.js to make the videos responsive
  31. 31. 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/
  32. 32. Dealing with Images And here’s one I made earlier....
  33. 33. Images and the Gallery field type Image Return Values The Image Object array returns a lot of information we can use:
  34. 34. 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.
  35. 35. Creating a gallery of images Create the flexible content field for the gallery. Here’s one I made earlier ...
  36. 36. 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
  37. 37. Creating a gallery of images To create the carousel I used flexslider 2 from Woothemes: http://flexslider.woothemes.com/index.html
  38. 38. Thank you.
  39. 39. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×