I have WYSIWYG Widgets / Widget Blocks but would like to use it with ACF PRO to integrate a repeater field.
There are a series of pages that use similar widgets (content is the same), but these widgets are not easy to edit. There are eight elements. These eight elements are in two rows, four columns. Each elements has an image, link, and text. Instead of posting this code in every customized page template, I need the ability to create a repeater field and adapt it to Widget Blocks.
Any idea on how I can accomplish this?
Found it. I never realized that the post-type was ‘wysiwyg-editor’.
Okay. On top of that, I’m unsure of how to display the content after creating the widget.
Hi @toad78
To get the value from a widget, please check this page: https://www.advancedcustomfields.com/resources/get-values-widget/.
Hope this helps 🙂
Yes, well, that’s where I’m a tad confused. I’m using a repeater in a Widget Block and supplied images of what my Widget Block and Widget look like and the code at the bottom. Using the below code, nothing is posting.
My code:
<?php if( the_field('Industries', 691) ): ?>
<div class="industries group">
<?php
// vars
$rows = get_field('repeater');
$pagelink = get_sub_field('page_link');
$image = get_sub_field('image');
$title = get_sub_field('title');
?>
<?php if( have_rows('repeater') ): ?>
<?php while( have_rows('repeater') ): the_row(); ?>
<div class="indus col-sm-3">
<p><a href="<?php $pagelink; ?>">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /><?php echo $title; ?></a></p>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!--end container-->
<?php endif; ?><!--end 'repeater' if-->
Hi @toad78
It seems that you use a plugin for the widget. I’m afraid I’m not familiar with that plugin, so forgive me if I’m wrong.
For something like this, you need to check if a widget block is saved as a custom post or something else (I believe you can check it by using the location rule on the field group or asking the plugin author directly). If it’s saved as a custom post, then you need to get the ID of the widget block custom post to show custom field value. For example, if the ID of widget block custom post is 99, then you need to show it like this:
<?php if( the_field('Industries', 691) ): ?>
<div class="industries group">
<?php
// vars
$rows = get_field('repeater', 99);
$pagelink = get_sub_field('page_link', 99);
$image = get_sub_field('image', 99);
$title = get_sub_field('title', 99);
?>
<?php if( have_rows('repeater', 99) ): ?>
<?php while( have_rows('repeater', 99) ): the_row(); ?>
<div class="indus col-sm-3">
<p><a href="<?php $pagelink; ?>">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /><?php echo $title; ?></a></p>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!--end container-->
<?php endif; ?><!--end 'repeater' if-->
I’m not sure how you can get the ID dynamically; maybe you can ask the Widget Block author about it?
I hope this makes sense 🙂
Based on the screenshot, the Location Rule is “Post Type = wysiwyg-widget”.
Widget Block ID = 691
Custom Field Group ID = 687
So with that, the code should look like this:
<?php if( the_field('Industries Widget Blocks', 687) ): ?>
<div class="industries group">
<?php
// vars
$rows = get_field('repeater', 691);
$pagelink = get_sub_field('page_link', 691);
$image = get_sub_field('image', 691);
$title = get_sub_field('title', 691);
?>
<?php if( have_rows('repeater', 691) ): ?>
<?php while( have_rows('repeater', 691) ): the_row(); ?>
<div class="indus col-sm-3">
<p><a href="<?php $pagelink; ?>">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /><?php echo $title; ?></a></p>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!--end container-->
<?php endif; ?><!--end 'repeater' if-->
With that being said, I still cannot get the content to post. I have requested assistance from the plugin developer for further information.
Hi @toad78
It seems there’s something wrong with this line:
<?php if( the_field('Industries Widget Blocks', 687) ): ?>
Could you please remove that logic (that line and the closing tag) and see if the custom field is showing up?
Thanks 🙂
Hi @toad78
You need to use the get_sub_field() function after the the_row() function. I think it should be like this (you don’t need to pass the post ID to the get_sub_field() anymore):
<div class="industries group">
<?php
// vars
$rows = get_field('repeater', 691);
?>
<?php if( have_rows('repeater', 691) ): ?>
<?php while( have_rows('repeater', 691) ): the_row(); ?>
$pagelink = get_sub_field('page_link');
$image = get_sub_field('image');
$title = get_sub_field('title');
<div class="indus col-sm-3">
<p><a href="<?php $pagelink; ?>">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /><?php echo $title; ?></a></p>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!--end container-->
Please take a look at this page to learn how to use repeater field: https://www.advancedcustomfields.com/resources/repeater/.
Hope this helps 🙂
This worked very nicely, James. THANK YOU! I was struggling for a few days on this.
Final code, with your modifications:
<div class="industries group">
<?php
// vars
$rows = get_field('repeater', 691);
?>
<?php if( have_rows('repeater', 691) ): ?>
<?php while( have_rows('repeater', 691) ): the_row();
$pagelink = get_sub_field('page_link');
$image = get_sub_field('image');
$title = get_sub_field('title');
?>
<div class="indus col-sm-3">
<p><a href="<?php echo $pagelink; ?>"><img style="max-width: 100%; height:auto" src="<?php echo $image; ?>" /><?php echo $title; ?></a></p>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!--end container-->
YOU GUYS ARE GREAT!
Widget.png.png
Widget-Block....png
Rule-for-ACF....png
capture.png.png