{"id":553,"date":"2019-11-22T21:38:09","date_gmt":"2019-11-22T14:38:09","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=553"},"modified":"2020-05-04T22:37:12","modified_gmt":"2020-05-04T15:37:12","slug":"tidy-up-acf","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/tidy-up-acf\/","title":{"rendered":"3 Tips to Tidy Up Your Custom Fields"},"content":{"rendered":"\n

ACF<\/strong> (Advanced Custom Fields) is a plugin to create user-friendly custom fields. Visit their website<\/a> to learn more.<\/p><\/blockquote>\n\n\n\n

ACF is very customizable, but we often overuse it. Not only it litters the database, it also makes our admin view complicated.<\/p>\n\n\n\n

In this article, we will provide tips on how to tidy your ACF fields.<\/p>\n\n\n\n

1. One for All<\/h2>\n\n\n\n

Depending on your content, a single WYSIWYG can represent multiple fields.<\/strong><\/p>\n\n\n\n

Let’s say we have 3 fields: Heading, Description, and Button. If you aren’t planning to do a special operation on individual fields, just combine them into a WYSIWYG.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Then, add default value indicating the content placement:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

2. Gallery as Pseudo-Repeater<\/h2>\n\n\n\n

Repeater is a blessing in disguise. It’s flexible and easy to edit, yet it pollutes your postmeta<\/code> table.<\/p>\n\n\n\n

If you have a simple Repeater (1 image + few texts), you can get away by using Gallery and the image’s metadata.<\/p>\n\n\n\n

Pictured below is an example of Branch Offices<\/strong> repeater that got converted into Gallery:<\/p>\n\n\n\n

\"\"
Converting a Repeater into Gallery<\/figcaption><\/figure><\/div>\n\n\n\n

Then you need to adapt your template file:<\/p>\n\n\n\n

<?php\n\/\/ ...\n\n$offices = get_field('offices');\nif( $offices ): ?>\n  <section class=\"offices\">\n  <?php foreach( $offices as $o ): ?>\n    <address>\n      <img src=\"<?php echo $o['sizes']['medium']; ?>\"\n           alt=\"<?php echo $o['title']; ?> Photo\" >\n      <h3>\n        <?php echo $o['title']; ?>\n      <\/h3>\n      <?php echo wpautop( $o['caption'] ); ?>\n      <a href=\"<?php echo $o['description']; ?>\"> View in Google Map <\/a>\n    <\/address>\n  <?php endforeach; ?>\n  <\/section>\n<?php endif; ?><\/code><\/pre>\n\n\n\n
3. Simplify Basic WYSIWYG<\/h2>\n\n\n\n
\"Simplified
 WYSIWYG Field with simplified buttons<\/figcaption><\/figure><\/div>\n\n\n\n
When creating a WYSIWYG field, you can change the Toolbar to be “Basic”. But it still has too many buttons on it.<\/p>\n\n\n\n
The snippets below will control which buttons you want to show:<\/p>\n\n\n\n
add_action( 'admin_enqueue_scripts', 'my_admin_assets', 100 );\n\nfunction my_admin_assets() {\n  $css_dir = get_stylesheet_directory_uri() . '\/css';\n\n  wp_enqueue_style( 'my-admin', $css_dir . '\/my-admin.css' );\n}<\/code><\/pre>\n\n\n\n
.acf-field-wysiwyg [data-toolbar=\"basic\"] .mce-btn {\n  display:none; \/* hide all buttons *\/\n}\n\n.acf-field-wysiwyg [data-toolbar=\"basic\"] [aria-label*=\"Bold\"],\n.acf-field-wysiwyg [data-toolbar=\"basic\"] [aria-label*=\"Italic\"],\n.acf-field-wysiwyg [data-toolbar=\"basic\"] [aria-label*=\"Bulleted\"],\n.acf-field-wysiwyg [data-toolbar=\"basic\"] [aria-label*=\"Numbered\"],\n.acf-field-wysiwyg [data-toolbar=\"basic\"] [aria-label*=\"Align center\"],\n.acf-field-wysiwyg [data-toolbar=\"basic\"] [aria-label*=\"edit link\"] {\n  display:inline-block;\n}\n\n.acf-field-wysiwyg [data-toolbar=\"basic\"] .mce-edit-area {\n  height:150px !important;\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n
Summary<\/h2>\n\n\n\n
My 3 tips to use ACF more efficiently:<\/p>\n\n\n\n
  1. Combine multiple fields into WYSIWYG.<\/li>
  2. Use Gallery as replacement of Repeater (if content is simple).<\/li>
  3. Simplify the Toolbar in Basic WYSIWYG using CSS.<\/li><\/ol>\n\n\n\n
    If you have any question or additional tips to share, please leave a comment below. I will definitely reply to you \ud83d\ude42<\/p><\/blockquote>\n\n\n\n
    Credit<\/strong>: Featured Image graphic by Pikisuperstar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    ACF is very customizable, but we often overuse it. Not only it litters the database, it also makes our admin view complicated. In this article, we will provide tips on how to tidy your ACF fields. 1. One for All Depending on your content, a single WYSIWYG can represent multiple fields. Let’s say we have 3 fields: Heading, Description, and Button. If you aren’t planning to do a special operation on individual fields, just combine them into a WYSIWYG. Then, add default value indicating the content placement: 2. Gallery as Pseudo-Repeater Repeater is a blessing in disguise. It’s flexible and\u2026<\/p>\n","protected":false},"author":1,"featured_media":814,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[20],"class_list":["post-553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-acf","tag-acf"],"blocksy_meta":{"page_structure_type":"default","page_enable_vertical_spacing":"yes","has_hero_section":"default","hero_section":"type-1","hero_alignment1":"left","hero_alignment2":"center","hero_height":"230px","page_title_bg_type":"color","aa3af7a9118ca03a7f2716e61b0cf468":"","custom_hero_background":{"attachment_id":null},"parallax":{"desktop":false,"tablet":false,"mobile":false},"single_meta_elements":{"author":true,"date":true,"categories":true,"comments":true,"updated":false,"tags":false},"has_meta_label":"yes","single_meta_date_format":"M j, Y","page_excerpt_visibility":{"desktop":true,"tablet":true,"mobile":false},"pageTitleFont":{"family":"Default","variation":"n7","size":{"desktop":"32px","tablet":"30px","mobile":"25px"},"line-height":"1.3","letter-spacing":"0em","text-transform":"none","text-decoration":"none"},"pageTitleFontColor":{"default":{"color":"var(--paletteColor4)"}},"pageMetaFont":{"family":"Default","variation":"n6","size":{"desktop":"12px","tablet":"12px","mobile":"12px"},"line-height":"1.3","letter-spacing":"0em","text-transform":"uppercase","text-decoration":"none"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"n5","size":"17px","line-height":"1.65","letter-spacing":"0em","text-transform":"none","text-decoration":"none"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"default":{"color":"rgba(41, 51, 60, 0.2)"}},"pageTitleBackground":{"default":{"color":"#EDEFF2"}},"df025ec1ea60193ce331f6f7c1d34014":"","50a26942a1fd98192a57694e6657addb":"","7967c7396b1ad820313e24527668c1d4":"","4ffa1f7924e7b1ef1efa5d66c6193fc5":"","d8c1c69a5455b1389dccef58f69702dd":"","72618133e168db0895baab1b9a77018d":"","60588f289f8eef59b3096073df4c9b8f":"","1f51635ed2696650cccdc400f54bb7d2":"","f064dc4f6d17f6cf64bf845f1a9a4e7b":"","27a552fa0aa9652d56ce095b366ffc3b":"","e0fb4f3e18205292c7468e1883c26c34":"","8104d2d9539f9b68675be1e556de5d37":"","27747e5b1be9b0bacbac713086f96e87":"","date_format_source":"custom","1ef9427abf047947c51c1da7c3b4be88":"","7580b2d0a02f75aa064b7f14a4ea7da4":"","2a443bf36e486aba6122b58b1df0bf3c":"","3d9a2368a3fd7d7c794ce5b0111cb71f":""},"_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=553"}],"version-history":[{"count":10,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/553\/revisions"}],"predecessor-version":[{"id":973,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/553\/revisions\/973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/814"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}