wp london meetup - august 2013

Advanced Custom Fields

Flexible layouts and other cool stuff!

by Kirsty Burgoinewww.kirstyburgoine.co.uk twitter.com/kirstyburgoine info@kirstyburgoine.co.uk

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/kirstyburgoine

Organiser of Shropgeek

• Monthly socials• Rebellion - mini conferences• (R)Evolution web conference

27th, September 20132013.shropgeek-revolution.co.uk

Advanced Custom Fieldsby 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 fieldLabel, Name, Type, Conditional Logic

• Location Show on specific pages, posts, taxonomy etc.

• OptionsPosition, Style, hide on screen

Creating Custom Fields

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/

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 pages of the main locations page.

Displaying each location on the page

Step 1Add 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%; }

Displaying each location on the page

Step 2Within the loop get the locations field using get_field();

Add the javascript for Google maps

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.

Displaying all locations on one map

Step 1Create the main page template: locations-main.php

Step 2Add the google map container <div> to the page

Step 3Create the map and add the markers ...

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.

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

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/

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

Adding flexible content to the page

And here’s one I made earlier....

Building the flexible content into our theme

Step 1Create the main page template: flexible-content.phpIn that template create a new loop for the flexible content within the main loop using has_field()

The page template

Step 2Create 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

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

The template part

Then display the content:

The template part - CSS

Step 3Setup 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

The template part - CSS

Making the columns responsive:

As well as the CSS I also used fitvids.js to make the videos responsive

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/

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 do some cool stuff with them.

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

Creating a gallery of images

To create the carousel I used flexslider 2 from Woothemes:http://flexslider.woothemes.com/index.html

Thank you.

Creditsand 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