SlideShare a Scribd company logo
1 of 19
Advanced Custom Fields
WP Butler’s
Ultimate Guide To
What are Custom Fields?
• Custom fields are a form of meta data that
can be used to extend posts and pages (&
CPTs).
• An example of a custom field might be a Star
Rating plugin, which assigns a rating between
1 and 5 to your posts.
You Can Already Add Custom Fields
Custom Fields are Standard Functionality
Examples of Custom Fields
• Setting an expiration date for posts
• Reference Links and Contributors
• Adding a CSS Class for styling
• Location taxonomy (like Category / Tag)
• Who’s used Custom Fields (or ACF)?
• Uses?
How Does WP Handle Custom Fields?
• While editing a Page or Post,
you can add custom fields.
• Select a field (or enter a new
one) then enter the value
• Custom Fields are added on a
per-post basis
• You need to write code to
extract the value and display it.
How Does ACF Handle Custom Fields?
• Custom fields are pre-defined on a per-
post type basis
• There are more than 20 different fields to
choose from, not just a test box
• You still need to write code to
extract the value and display it.
Types of Custom Fields
• Text
• Text Area
• Number
• Email
• Password
• WYSIWYG
Editor
• Image
• File
• Select
• Checkbox
• Radio Button
• True / False
• Page Link
• Post Object
• Relationship
• Taxonomy
• User
• Google Map
• Date Picker
• Color Picker
• Message
• Tab
• Plus Premium fields…
How To Use The Plugin
1. Create A New Field Group
How To Use The Plugin
2. Add &Configure
Fields
Enter Label, Name, Type,
Instructions, Required,
Default Value, Placeholder,
Prepend, Append, Formatting
Character Limit, Conditional
Logic, Min / Max Value
and/or Step Size!
How To Use The Plugin
2. Add &Configure Fields (example)
How To Use The Plugin
3. Configure Field Location and Options
Options: Order number, Position, Style and Hide on Screen
How To Display Custom Fields
• In order to display custom fields on your site,
you need to call them in a template file.
• This will require coding, and a knowledge of
the WordPress template hierarchy…
How To Display Custom Fields
How To Display Custom Fields
For example:
• Check which template is available: single.php,
or singular.php, or simply index.php
• Copy the file to your Child theme, and rename if
necessary: single-post.php
• Add your code to this new file
Accessing the Custom Fields
• WordPress provides a function
get_post_meta()
$expirationtime = get_post_meta($post->ID,
"expiration", false);
• It’s recommended you use ACF’s function
the_field() instead
the_field('expiration');
For Example
<div class="book-meta">
<ul>
<li><strong>Author:</strong> <?php the_field('author'); ?></li>
<li><strong>Release Year:</strong> <?php the_field('release_year'); ?></li>
<li><strong>Book Rating:</strong> <?php the_field('book_rating'); ?>/10</li>
</ul>
</div>
The Result
Ultimate Guide to Advanced Custom Fields

More Related Content

Similar to Ultimate Guide to Advanced Custom Fields

The WordPress University 2012
The WordPress University 2012The WordPress University 2012
The WordPress University 2012
Stephanie Leary
 

Similar to Ultimate Guide to Advanced Custom Fields (20)

Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
Advanced Custom Fields: Amazing Possibilities and Irritating LimitationsAdvanced Custom Fields: Amazing Possibilities and Irritating Limitations
Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
 
Structuring Content in WordPress using Advanced Custom Fields
Structuring Content in WordPress using Advanced Custom FieldsStructuring Content in WordPress using Advanced Custom Fields
Structuring Content in WordPress using Advanced Custom Fields
 
Salesforce admin training 3
Salesforce admin training 3Salesforce admin training 3
Salesforce admin training 3
 
WordPress - Open Source Overview Presentation
WordPress - Open Source Overview PresentationWordPress - Open Source Overview Presentation
WordPress - Open Source Overview Presentation
 
The Flexibility of WordPress
The Flexibility of WordPressThe Flexibility of WordPress
The Flexibility of WordPress
 
Wordpress Custom Post Types
Wordpress Custom Post TypesWordpress Custom Post Types
Wordpress Custom Post Types
 
3. HTML Forms.ppt
3. HTML Forms.ppt3. HTML Forms.ppt
3. HTML Forms.ppt
 
The WordPress University 2012
The WordPress University 2012The WordPress University 2012
The WordPress University 2012
 
Custom fields in joomla
Custom fields in joomlaCustom fields in joomla
Custom fields in joomla
 
Working with the Latest Tendenci Modules
Working with the Latest Tendenci ModulesWorking with the Latest Tendenci Modules
Working with the Latest Tendenci Modules
 
19 09-26 source reconfiguration and august release features
19 09-26 source reconfiguration and august release features19 09-26 source reconfiguration and august release features
19 09-26 source reconfiguration and august release features
 
Salesforce admin training 1
Salesforce admin training 1Salesforce admin training 1
Salesforce admin training 1
 
Custom Fields in Joomla - JoomlaDay UK 2016 - Marco Dings
Custom Fields in Joomla - JoomlaDay UK 2016 - Marco DingsCustom Fields in Joomla - JoomlaDay UK 2016 - Marco Dings
Custom Fields in Joomla - JoomlaDay UK 2016 - Marco Dings
 
Html predestination - must everyone have
Html predestination - must everyone haveHtml predestination - must everyone have
Html predestination - must everyone have
 
SFDC Database Basics
SFDC Database BasicsSFDC Database Basics
SFDC Database Basics
 
WordPress 3 Custom Post Types
WordPress 3 Custom Post TypesWordPress 3 Custom Post Types
WordPress 3 Custom Post Types
 
Advancing Your Custom Fields - WordCamp 2014
Advancing Your Custom Fields - WordCamp 2014Advancing Your Custom Fields - WordCamp 2014
Advancing Your Custom Fields - WordCamp 2014
 
BrightGen's Salesforce Summer 21 release webinar
BrightGen's Salesforce Summer 21 release webinarBrightGen's Salesforce Summer 21 release webinar
BrightGen's Salesforce Summer 21 release webinar
 
Web Development - Lecture 5
Web Development - Lecture 5Web Development - Lecture 5
Web Development - Lecture 5
 
Java development with the dynamo framework
Java development with the dynamo frameworkJava development with the dynamo framework
Java development with the dynamo framework
 

More from Andrew Marks

More from Andrew Marks (13)

Wordpress for Business
Wordpress for BusinessWordpress for Business
Wordpress for Business
 
Google Analytics Essential Training
Google Analytics Essential TrainingGoogle Analytics Essential Training
Google Analytics Essential Training
 
Learn to Think Like a Coder
Learn to Think Like a CoderLearn to Think Like a Coder
Learn to Think Like a Coder
 
Why Code Is Cool (And Why You Should Learn It)
Why Code Is Cool (And Why You Should Learn It)Why Code Is Cool (And Why You Should Learn It)
Why Code Is Cool (And Why You Should Learn It)
 
A Guide to Google My Business
A Guide to Google My BusinessA Guide to Google My Business
A Guide to Google My Business
 
How WordPress Sites Get Hacked
How WordPress Sites Get HackedHow WordPress Sites Get Hacked
How WordPress Sites Get Hacked
 
An Introduction to Gutenberg, WordPress's New Editor
An Introduction to Gutenberg, WordPress's New EditorAn Introduction to Gutenberg, WordPress's New Editor
An Introduction to Gutenberg, WordPress's New Editor
 
An Introduction to WordPress Hooks
An Introduction to WordPress HooksAn Introduction to WordPress Hooks
An Introduction to WordPress Hooks
 
Processing Client Payments from your WordPress Website
Processing Client Payments from your WordPress WebsiteProcessing Client Payments from your WordPress Website
Processing Client Payments from your WordPress Website
 
GDPR - What You Need To Know
GDPR - What You Need To KnowGDPR - What You Need To Know
GDPR - What You Need To Know
 
10 Tips for Optimising WordPress
10 Tips for Optimising WordPress10 Tips for Optimising WordPress
10 Tips for Optimising WordPress
 
An (Updated) Introduction to Gutenberg
An (Updated) Introduction to GutenbergAn (Updated) Introduction to Gutenberg
An (Updated) Introduction to Gutenberg
 
Ultimate Guide to WordPress Multisite
Ultimate Guide to WordPress MultisiteUltimate Guide to WordPress Multisite
Ultimate Guide to WordPress Multisite
 

Recently uploaded

Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Chandigarh Call girls 9053900678 Call girls in Chandigarh
 
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
 
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLLucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
imonikaupta
 
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
 
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
@Chandigarh #call #Girls 9053900678 @Call #Girls in @Punjab 9053900678
 

Recently uploaded (20)

Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
 
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
 
Trump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts SweatshirtTrump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts Sweatshirt
 
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort ServiceBusty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
 
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
 
Russian Call Girls Pune (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
Russian Call Girls Pune  (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...Russian Call Girls Pune  (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
Russian Call Girls Pune (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
 
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
 
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
 
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLLucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
 
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableCall Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
 
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
 
Al Barsha Night Partner +0567686026 Call Girls Dubai
Al Barsha Night Partner +0567686026 Call Girls  DubaiAl Barsha Night Partner +0567686026 Call Girls  Dubai
Al Barsha Night Partner +0567686026 Call Girls Dubai
 
Real Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirtReal Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirt
 
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Top Rated  Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...Top Rated  Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
 
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
 
Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...
Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...
Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...
 
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
 
VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...
VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...
VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...
 
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
 
Call Girls Sangvi Call Me 7737669865 Budget Friendly No Advance BookingCall G...
Call Girls Sangvi Call Me 7737669865 Budget Friendly No Advance BookingCall G...Call Girls Sangvi Call Me 7737669865 Budget Friendly No Advance BookingCall G...
Call Girls Sangvi Call Me 7737669865 Budget Friendly No Advance BookingCall G...
 

Ultimate Guide to Advanced Custom Fields

  • 1. Advanced Custom Fields WP Butler’s Ultimate Guide To
  • 2. What are Custom Fields? • Custom fields are a form of meta data that can be used to extend posts and pages (& CPTs). • An example of a custom field might be a Star Rating plugin, which assigns a rating between 1 and 5 to your posts.
  • 3. You Can Already Add Custom Fields
  • 4. Custom Fields are Standard Functionality
  • 5. Examples of Custom Fields • Setting an expiration date for posts • Reference Links and Contributors • Adding a CSS Class for styling • Location taxonomy (like Category / Tag) • Who’s used Custom Fields (or ACF)? • Uses?
  • 6. How Does WP Handle Custom Fields? • While editing a Page or Post, you can add custom fields. • Select a field (or enter a new one) then enter the value • Custom Fields are added on a per-post basis • You need to write code to extract the value and display it.
  • 7. How Does ACF Handle Custom Fields? • Custom fields are pre-defined on a per- post type basis • There are more than 20 different fields to choose from, not just a test box • You still need to write code to extract the value and display it.
  • 8. Types of Custom Fields • Text • Text Area • Number • Email • Password • WYSIWYG Editor • Image • File • Select • Checkbox • Radio Button • True / False • Page Link • Post Object • Relationship • Taxonomy • User • Google Map • Date Picker • Color Picker • Message • Tab • Plus Premium fields…
  • 9. How To Use The Plugin 1. Create A New Field Group
  • 10. How To Use The Plugin 2. Add &Configure Fields Enter Label, Name, Type, Instructions, Required, Default Value, Placeholder, Prepend, Append, Formatting Character Limit, Conditional Logic, Min / Max Value and/or Step Size!
  • 11. How To Use The Plugin 2. Add &Configure Fields (example)
  • 12. How To Use The Plugin 3. Configure Field Location and Options Options: Order number, Position, Style and Hide on Screen
  • 13. How To Display Custom Fields • In order to display custom fields on your site, you need to call them in a template file. • This will require coding, and a knowledge of the WordPress template hierarchy…
  • 14. How To Display Custom Fields
  • 15. How To Display Custom Fields For example: • Check which template is available: single.php, or singular.php, or simply index.php • Copy the file to your Child theme, and rename if necessary: single-post.php • Add your code to this new file
  • 16. Accessing the Custom Fields • WordPress provides a function get_post_meta() $expirationtime = get_post_meta($post->ID, "expiration", false); • It’s recommended you use ACF’s function the_field() instead the_field('expiration');
  • 17. For Example <div class="book-meta"> <ul> <li><strong>Author:</strong> <?php the_field('author'); ?></li> <li><strong>Release Year:</strong> <?php the_field('release_year'); ?></li> <li><strong>Book Rating:</strong> <?php the_field('book_rating'); ?>/10</li> </ul> </div>