How to add Flexibel content field of Advanced custom fields plugin to genesis

[glenkg]

Hi,

I bought the advanced custom fields pro version and now want to implement it into my genesis theme (genesis framework 2.0). I read the documentation on their site but could not make it to appear on my frontend site. my custom flexible content field is namend flexible_content. I read this forum and from what i read, this should make it appear.

// Display Advanced Custom Fields
add_action('genesis_after_content', 'custom_field_after_content');

function custom_field_after_content() {
if ( is_single() && genesis_get_custom_field('flexible_content') )
echo genesis_get_custom_field('flexible_content');
}

Nothing is showing up for me. I contacted ACF too, and they say I should do this. This also doesn't work..

Then I tried to work with the documentation of ACF:

add_action('genesis_after_content', 'custom_field_after_content');
function custom_field_after_content() {
// check if the flexible content field has rows of data
if( have_rows('flexible_content') ):

     // loop through the rows of data
    while ( have_rows('flexible_content') ) : the_row();

        if( get_row_layout() == 'paragraph' ):

        	the_sub_field('text');

        elseif( get_row_layout() == 'download' ): 

        	$file = get_sub_field('file');

        endif;

    endwhile;

else :

    // no layouts found

endif;
}

I get an error named: Fatal error: Call to undefined function have_rows()

I even followed this link to the teeth, https://murray.ac/adding-advanced-custom-fields-flexible-content-fields-to-genesis/.. Yet It does not work because same error. I am all out of ideas here.
Most people seem to have no problem, so it is probably me who is flawed here, but if someone could help me out with this, that would be very much appreciated. hopefully there is someone who can see an issue here.

[Brad Dalton]

Hard to test without a copy of the plugin.

What exactly do you want to achieve with custom fields?

---

Tutorials for StudioPress Themes & WooCommerce.

[glenkg]

Hi Brad,

Thank you for your answer.

Sorry for the delay, I did not get a notice. The plugin is called advanced custom fields. You can get it for free here: https://wordpress.org/plugins/advanced-custom-fields/. What i want is to getting working with genesis. With the following code I get an error on line 189 (see below the code) . I just don't get why this happens. And at AFC they could not give me a solution as off yet.

I bought this because it allows me to make a page layout with custom fields. The steps to implement the layout are this:

1)Import page-events-acf-export.json in Advnaced Custom Fields
2)Add page_event.php to your child theme
3)Create a page and choose Event page template
4)Publish
4)Advance Custome Fields will be added below page content
5) Choose which fields to add

which i have all done

These are the ingredients:

flexible_content_field_name = flexible_content
the single template page = page_event.php

in page_event.php the following code:

<?php

/*
Template Name: Event
*/

//* Force full width content layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

?>

<!-- Add our custom acf loop -->
<?php add_action( 'genesis_after_entry_content', 'acf_loop' ); ?>

<?php function acf_loop() { ?>

	<style type="text/css">

	.acf-map {
		width: 100%;
		height: 400px;
		border: #ccc solid 1px;
		margin: 0;
	}

	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script type="text/javascript">
	(function($) {

	/*
	*  render_map
	*
	*  This function will render a Google Map onto the selected jQuery element
	*
	*  @type	function
	*  @date	8/11/2013
	*  @since	4.3.0
	*
	*  @param	$el (jQuery element)
	*  @return	n/a
	*/

	function render_map( $el ) {

		// var
		var $markers = $el.find('.marker');

		// vars
		var args = {
			zoom		: 16,
			center		: new google.maps.LatLng(0, 0),
			mapTypeId	: google.maps.MapTypeId.ROADMAP
		};

		// create map	        	
		var map = new google.maps.Map( $el[0], args);

		// add a markers reference
		map.markers = [];

		// add markers
		$markers.each(function(){

	    	add_marker( $(this), map );

		});

		// center map
		center_map( map );

	}

	/*
	*  add_marker
	*
	*  This function will add a marker to the selected Google Map
	*
	*  @type	function
	*  @date	8/11/2013
	*  @since	4.3.0
	*
	*  @param	$marker (jQuery element)
	*  @param	map (Google Map object)
	*  @return	n/a
	*/

	function add_marker( $marker, map ) {

		// var
		var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

		// create marker
		var marker = new google.maps.Marker({
			position	: latlng,
			map			: map
		});

		// add to array
		map.markers.push( marker );

		// if marker contains HTML, add it to an infoWindow
		if( $marker.html() )
		{
			// create info window
			var infowindow = new google.maps.InfoWindow({
				content		: $marker.html()
			});

			// show info window when marker is clicked
			google.maps.event.addListener(marker, 'click', function() {

				infowindow.open( map, marker );

			});
		}

	}

	/*
	*  center_map
	*
	*  This function will center the map, showing all markers attached to this map
	*
	*  @type	function
	*  @date	8/11/2013
	*  @since	4.3.0
	*
	*  @param	map (Google Map object)
	*  @return	n/a
	*/

	function center_map( map ) {

		// vars
		var bounds = new google.maps.LatLngBounds();

		// loop through all markers and create bounds
		$.each( map.markers, function( i, marker ){

			var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

			bounds.extend( latlng );

		});

		// only 1 marker?
		if( map.markers.length == 1 )
		{
			// set center of map
		    map.setCenter( bounds.getCenter() );
		    map.setZoom( 16 );
		}
		else
		{
			// fit to bounds
			map.fitBounds( bounds );
		}

	}

	/*
	*  document ready
	*
	*  This function will render each map when the document is ready (page has loaded)
	*
	*  @type	function
	*  @date	8/11/2013
	*  @since	5.0.0
	*
	*  @param	n/a
	*  @return	n/a
	*/

	$(document).ready(function(){

		$('.acf-map').each(function(){

			render_map( $(this) );

		});

	});

	})(jQuery);
	</script>

	<!-- check if the flexible content field has rows of data -->
	<?php if( have_rows('flexible_content') ): ?>

	     <!-- loop through the rows of data -->
	    <?php while ( have_rows('flexible_content') ) : the_row(); ?>

	    	<!-- button field -->
	        <?php if( get_row_layout() == 'button' ): ?>

	        	<a class="button" href="<?php the_sub_field('link'); ?>"><?php the_sub_field('text'); ?></a>

			<!-- title field -->
	        <?php elseif( get_row_layout() == 'title' ): ?>

	        	<h2><?php the_sub_field('title'); ?></h2>

			<!-- category titles -->
	        <?php elseif( get_row_layout() == 'category_titles'): ?>

	        	<h2><?php the_sub_field('category_title'); ?></h2>

			<!-- column full width -->
        	<?php elseif( get_row_layout() == 'column_whole' ): ?>
        		
        		<div class="acf-columns">
        			<?php the_sub_field('whole'); ?>
    			</div>

			<!-- column halfs -->
			<?php elseif( get_row_layout() == 'columns_half_half' ): ?>

        		<div class="acf-columns">
	        		<div class="one-half first"><?php the_sub_field('half_first'); ?></div>
	        		<div class="one-half"><?php the_sub_field('half_last'); ?></div>
        		</div>

			<!-- columns one third, two thirds -->
        	<?php elseif( get_row_layout() == 'columns_one_third_two_thirds' ): ?>

        		<div class="acf-columns">
	        		<div class="one-third first"><?php the_sub_field('one_third'); ?></div>
	        		<div class="two-thirds"><?php the_sub_field('two_thirds'); ?></div>
        		</div>

			<!-- columns two thirds, one third -->
        	<?php elseif( get_row_layout() == 'columns_two_thirds_one_third' ): ?>

        		<div class="acf-columns">
	        		<div class="two-thirds first"><?php the_sub_field('two_thirds'); ?></div>
	        		<div class="one-third"><?php the_sub_field('one_third'); ?></div>
        		</div>
        		
        	<!-- columns thirds -->
        	<?php elseif( get_row_layout() == 'columns_one_third_one_third_one_third' ): ?>

        		<div class="acf-columns">
	        		<div class="one-third first"><?php the_sub_field('one_third_first'); ?></div>
	        		<div class="one-third"><?php the_sub_field('one_third_middle'); ?></div>
	        		<div class="one-third"><?php the_sub_field('one_third_last'); ?></div>
        		</div>

			<!-- google map (two thirds), content area (one third) -->
        	<?php elseif( get_row_layout() == 'google_map_content' ): ?>

        		<div class="acf-columns">
	        		<div class="two-thirds first">
		        		<?php 

						$location = get_sub_field('google_map');

						if( !empty($location) ):
						?>
						<div class="acf-map">
							<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
						</div>
						<?php endif; ?>
					</div>

	        		<div class="one-third"><?php the_sub_field('map_content'); ?></div>
	    		</div>

			<!-- content area (one third), google map (two thirds) -->
        	<?php elseif( get_row_layout() == 'google_content_map' ): ?>

        		<div class="acf-columns">
	        		<div class="one-third first"><?php the_sub_field('map_content'); ?></div>
        			        		
	        		<div class="two-thirds">
		        		<?php 

						$location = get_sub_field('google_map');

						if( !empty($location) ):
						?>
						<div class="acf-map">
							<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
						</div>
						<?php endif; ?>
					</div>
	    		</div>

	        <?php endif; ?>

	    <?php endwhile; ?>

	<?php else : ?>

	    <!-- no layouts found -->

	<?php endif; ?>

<?php } ?>

<?php

//* Run the Genesis loop
genesis();

THE ERROR:

Fatal error: Call to undefined function have_rows() in D:\xamppwordpress\htdocs\mooidordrecht\wp-content\themes\mooidordrecht\page_event.php on line 189

Line 189 : <?php if( have_rows('flexible_content') ): ?>

Is this helpful to understanding where the problem might be?

Hope this helps. Thank you.

[Brad Dalton]

I don't know because i don't have the ACF Pro plugin and haven't tested your template code however have_rows is not a genesis or WordPress function.

I assume you would need to make sure the plugin is active and that the plugin version you use defines the function have_rows.

Your question relates to the use of ACF Pro functions and isn't caused by Genesis or WordPress.

As far as i know have_rows is a ACF Pro function that checks to see if the field (repeater or flexible content) has any rows of data to loop over. Without the ACF Pro plugin active, it will return an error.

---

Tutorials for StudioPress Themes & WooCommerce.

[glenkg]

Hi Brad, that is the problem.. It is active, but yet it is not showing up. I asked for support at ACF, they looked at the demo page I made especially for this problem, but still it would not show up. I would rather use get_meta, but that also did not work for me or I am doing it wrong. You helped others before with the get_meta code here I saw, and I used that code (with my field name), but still it does not show. Must be some kind of bug, just frustrating that it will just not show up, tried everything, and I don't understand why, just not logical, because I followed all the steps.

Thank you for looking into it at least, I appreciate it. Have a nice day.

[Author]

Posts