The possibilities and limitations of the spreading of digital signature (in Hungarian)
Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
-
Upload
east-bay-wordpress-meetup -
Category
Internet
-
view
222 -
download
1
Transcript of Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
Our Meetup.com Page
http://www.meetup.com/Eastbay-WordPress-Meetup/
INTRODUCTIONS
1. Name
2. Company (if appropriate)
3. WordPress background
4. Favorite Premium Plugins
What Is ACF? • Intuitive UI for creating and managing
custom fields
• Free & Pro versions
• 20 field types
• Uses the_field(), get_field(), the_sub_field(), and get_sub_field() to retrieve field content
• Shortcode: [acf field="{$field_name}"]
http://www.advancedcustomfields.com/pro
Fields in Free Version
• Checkbox
• Color Picker
• Date Picker
• Google Map
• Image
• oEmbed
• Page Link
• Post Object
• Relationship
• Select
• Tab
• Taxonomy
• Text
• Textarea
• True/False
• Wysiwig Editor
Additional Fields in ACF Pro The Repeater Field The repeater field allows you to create a set of sub fields which can be repeated again and again.
The Gallery Field The gallery field provides a simple and intuitive interface for managing a collection of images.
The Flexible Content Field The flexible content field is a complete content layout manager.
Options Pages All data saved on an options page is global and can be displayed on any page.
Select Field Group Location
You can choose to show your field groups for pages, page templates, post types, taxonomies, options pages, and widgets.
Set Field Group Options
This is handy if you want to hide the page/post content editor when you display your fields.
Display Your Fields
1. <?php
2. if(get_field('field_name')
) {
3. echo '<p>' .
get_field('field_name') .
'</p>';
4. }
5. ?>
CUSTOM HOME PAGE LAYOUT Tutorial from Elliot Condon
Code for the Page Template
To see the code used to create this page template in the Genesis Sample theme, go to http://acfdemo.rhymeswithsketch.com/code-for-condon-custom-page/
(There’s no way to show it in PowerPoint.)
CUSTOM HEADER RIGHT CONTENT FOR PAGES
Tutorial from Sridhar Katakam
Display Fields in Template 1. if(have_rows('premium_plugins')) {
2. echo '<h3 class="colophon">Premium Plugins</h3>';
3. echo '<ul class="plugin-list">';
4. while(have_rows('premium_plugins')) {
5. the_row();
6. echo '<li><a href="'.get_sub_field('premium_plugin_url').'">'. get_sub_field('premium_plugin_name') .'</a></li>';
7. }
8. echo '</ul>';
9. }
DISPLAY ACF GALLERY AS SLIDER
Tutorial from Elliot Condon
Code Your Template
Updated instructions include proper enqueuing of flexslider.js
Details at http://acfdemo.rhymeswithsketch.com/gallery-slider-page-template-code/
PAGE WITH MAGNIFIC POPUP GALLERY
Tutorial from Tribeswell.com
Get Magnific Files
Go to http://dimsemenov.com/plugins/magnific-popup/ and click “Build Tool”
Enqueue Magnific 1. function magnific_popup_files() {
2. wp_enqueue_style( 'magnific',
get_stylesheet_directory_uri() .
'/css/magnific-popup-gallery.css' );
3. wp_enqueue_script( 'magnific',
get_stylesheet_directory_uri()
.'/js/magnific-popup-
gallery.min.js', array('jquery'),
false, true );
4. }
5. add_action( 'wp_enqueue_scripts',
'magnific_popup_files' );
Create Page Template 1. <?php
2. /* Template Name: Page with Magnific Gallery */
3. add_action('genesis_entry_content', 'magnific_gallery_loop', 8);
4. function magnific_gallery_loop() {
5. $images = get_field('image_gallery');
6. if($images):
7. echo '<div class="popup-gallery">';
8. foreach( $images as $image ):
9. echo '<a href="'.$image['url'].'" class="lightbox-
link" title="'. $image['caption'].'" data-
description="'.$image['description'].'">';
10. echo '<div class="image-wrap"><img
src="'.$image['url'].'"></div></a>';
11. endforeach;
12. echo '</div>';
13. endif;
14. }
15. genesis();
Add Script to Page
• Put the JavaScript from the tutorial into the “Script” metabox.
• Be sure to change “$” to “jQuery” for non-conflict mode
Here’s Your Popup Lightbox
http://acfdemo.rhymeswithsketch.com/page-with-magnific-popup-gallery/
PAGE WITH CONTENT, WIDGET AREA & FULL-WIDTH SECTIONS
Tutorial from Sridhar Katakam
HERO / CHECKERBOARD PAGE Tutorial from Sridhar Katakam
Create Field Group
• Location
• Options
• Flexible Content
– Hero Layout
– Text-Image Layout
– Image-Text Layout
Layouts Don’t Style Themselves
You need to write CSS for things like
• Making section full-width
• Hero image stretch display
• Overlay for the hero image
• Positioning of hero text over image
• Color of hero text
• Width of Image & Text sections
FRONT-END POSTING & EDITING Tutorial from The Stiz Media
Add Field Keys to Template
Replace the keys shown in the demo template with your own. (Full template is too long to show.)
Apply Template to a Page
Content that you add in the content editor will appear above the posting form.
Just a Few Caveats
• ACF does not replace custom post types, but it works well with them.
• Retrieving field data is harder than retrieving CPT content.
• Fields created by ACF are stored either in the post_meta table or the wp_options table.
• You can’t search on custom fields
About the Presenter Sallie Goetsch (rhymes with ‘sketch’)
Got online in 1985. Started building websites in 1995. Discovered WordPress in 2005. Organizer of the East Bay WordPress Meetup.
@salliegoetsch
salliegoetsch
http://wpfangirl.com
510-969-9947