ACF fields with Zurb's data interchange

• Xav

• February 11, 2014 at 2:48 am

Hi,

I’m using Foundation with my WordPress install and am playing about with data interchange. I can get it working with plain old html pages and even basic php. But using ACF custom field values doesn’t seem to do anything. Is there a reason you can think of for this….other than me coding it wrong?

Here’s a code sample:

In my contact.php template –

<div data-interchange="[<?php echo get_stylesheet_directory_uri();?>/library/interchange/contact_details_small.php, (small)], [<?php echo get_stylesheet_directory_uri();?>/library/interchange/contact_details_default.php, (medium)], [<?php echo get_stylesheet_directory_uri();?>/library/interchange/contact_details_default.php, (large)]">
</div>

In my contact_details_small.php I have –

<?php
require($_SERVER['DOCUMENT_ROOT'].'/subfolder/wp-load.php');
?>

<?php echo get_sub_field('email_address') ?>

The wp-load.php template is included because it did nothing without it (from here)

Any ideas?

Thanks

• Elliot

• February 12, 2014 at 9:56 am

Hi @Xav

If you are needing to include a WP core file, then perhaps your template file is not actually a template file.

What does the URL look like to access this file / template?
Is it attached to a post?
Is it a custom page template? Or a post type template?

Thanks
E

• Xav

• February 12, 2014 at 8:54 pm

Hi Elliot,

Thanks for getting back to me.

The template is a custom include file. I have a custom template for my contact page and within that I’m calling the contact_details_small.php or contact_details_default.php that has the acf fields in. When the fields are placed directly in the contact template they work fine, but when I move them to the the include files I get nothing.

I’m beginning to think maybe I’m just using the acf code wrong as the include files are definitely being read because plain html is being output. I simplified the code above so as to make it easier to understand. The full code in the include file is below:

<?php
require($_SERVER['DOCUMENT_ROOT'].'/pwp/wp-load.php');
?>

<div class="phone_email_holder">

<p>LARGE TEMPLATE</p>

	<?php if( have_rows('phone_numbers') ): ?>
			<?php while( have_rows('phone_numbers') ): the_row(); ?>
 			<div class="contact_field_wrapper row">
	        	<div class="phone_email_label info_label"><?php echo get_sub_field('number_label') ?>:</div> 
	        	<div class="phone_email_value"><?php echo get_sub_field('tel_number') ?></div>
		    </div>
		<?php endwhile; ?>
	<?php endif; ?>
	<?php if( have_rows('email_addresses') ): ?>
			<?php while( have_rows('email_addresses') ): the_row(); ?>
 			<div class="contact_field_wrapper row">
	        	<div class="phone_email_label info_label"><?php echo get_sub_field('email_label') ?>:</div> 
	        	<div class="phone_email_value"><a class="" href="mailto:<?php echo get_sub_field('email_address'); ?>"><?php echo get_sub_field('email_address') ?></a></div>
		    </div>
		<?php endwhile; ?>
	<?php endif; ?>
</div>

The “LARGE TEMPLATE” bit is being output from the above code. Just not the rest. All I’m doing is removing links from telephone numbers for the desktop version of the site and adding them back in for mobile versions.

Thanks for looking into this.

• Elliot

• February 13, 2014 at 9:59 am

Hi @Xav

including files or ‘partials’ is a common templating task which does not usually prove so dificult. There must be something else going on here.

The require($_SERVER['DOCUMENT_ROOT'].'/pwp/wp-load.php'); code should never be included in a correct page template.

I think the issue is that you are including them in a non PHP friendly way. How does Zurb’s data interchange work?

Your origional code:

<div data-interchange="[<?php echo get_stylesheet_directory_uri();?>/library/interchange/contact_details_small.php, (small)], [<?php echo get_stylesheet_directory_uri();?>/library/interchange/contact_details_default.php, (medium)], [<?php echo get_stylesheet_directory_uri();?>/library/interchange/contact_details_default.php, (large)]">
</div>

Shows that you place urls into a data attribute on a div. Have you checked the docs to see if these can be PHP files? If so, are they loaded via an ajax request? If so, how would WP know what $post to query for that file?

Thanks
E

• Xav

• February 14, 2014 at 1:20 am

Hi Elliot,

I’ve fixed it. Interchange does indeed use ajax to switch out files and I think that’s why the acf values weren’t being loaded – because, as you correctly pointed out, wp didn’t know which post to pull them from.

I added the page ID to the repeater code and it worked:

<?php
require($_SERVER['DOCUMENT_ROOT'].'/pwp/wp-load.php');
?>

<div class="phone_email_holder">

<p>LARGE TEMPLATE</p>

	<?php if( have_rows('phone_numbers', 7) ): ?>
			<?php while( have_rows('phone_numbers', 7) ): the_row(); ?>
 			<div class="contact_field_wrapper row">
	        	<div class="phone_email_label info_label">
	        		<?php echo get_sub_field('number_label', 7) ?>:
	        	</div> 
	        	<div class="phone_email_value">
	        		<?php echo get_sub_field('tel_number', 7) ?>
	        	</div>
		    </div>
		<?php endwhile; ?>
	<?php endif; ?>
	
</div>

However, it does have to include the wp-load file to work.

Thanks for your help on this. I only recently discovered ACF and it’s bloody amazing. Good work!

Thanks,
Xav

• ingvi

• September 17, 2014 at 6:09 am

Do you think there is any change to get the page/post id if there is an ajax call so the template can be used for more than just one page. Would be awesome.

• zacksmash

• March 8, 2016 at 4:32 am

@ingvi I’ve got this working with a dynamic page ID variable. Here’s what I did.

<div data-interchange="[<?php echo home_url() ?>/path/to/file.php?page_id=<?php the_id() ?>, small], [<?php echo home_url() ?>/path/to/file.php?page_id=<?php the_id() ?>, large]"></div>

Notice the ?page_id=<?php the_id() ?> at the end of each file

Then, in your partials, you would do

<?php require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php'); ?>

<?php if(have_rows('field_name', $_GET['page_id'])): ?>
    <?php while (have_rows('field_name', $_GET['page_id'])) : the_row(); ?>
        // Your code here
    <?php endwhile; ?>

    <script>
    // You may need to reflow some javascript items when they get loaded in
    $(document).ready(function() {
        // #element would be like a tab element or accordion element
        $('#element').foundation();
    });
    </script>
<?php endif; ?>

• ingvi

• March 8, 2016 at 6:37 am

@zacksmash cool though I read somewhere that doing <?php require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php'); ?> causes major security issues so I have been avoiding this. Maybe I am wrong, any idea?