, , , , ,

How to create a shortcode using Advanced Custom Fields data

ACF Fields With Shortcodes

I have noticed that when Google populates the search results for this question there are actually two different questions being asked by a similar search.

The first asks:

How do I create a shortcode that outputs the value of an Advanced Custom Fields (ACF) plugin field.

The second asks:

How can I dynamically populate a short code using the Advanced Custom Fields plugin.

I was trying to find the answer to the first question, but I will try to show both answers here, so that you do not have to search again.

How do I create a shortcode that outputs the value of an Advanced Custom Fields plugin field.

 

  1. To do this you must first install and activate the ACF plugin on your WordPress website. You can download the free version here.
  2. Create a field group with the information you want to use. You can learn more about how to do this on the ACF website.
  3. Once you have your field set up you can start creating your shortcode. You are going to do this in the functions.php file of your child theme.
    • First create a function. Here is an example<
      function my_shortcode() { 
      
      	$myfield = get_field('my_field',false,false);
      	
      	return $myfield ;
      	
      }
      

      The trick here is to first create a variable using the get_field ACF function and then return that value as the output for the function./li>

    • Once that is done you need to register your function as a shortcode.
      add_shortcode( 'myshortcode', 'my_shortcode' );
      
    • Putting it all together you get
      function my_shortcode() { 
      
      	$myfield = get_field('my_field',false,false);
      	
      	return $myfield ;
      	
      }
      add_shortcode( 'myshortcode', 'my_shortcode' );
      

It is important to note that you only need to worry about this if you are using more advanced field than just a text field. If you are only using a text field you can use the inbuilt ACF shortcodes.

e.g.

[acf field="field_name" post_id="123"]

You can learn more about that here.

How can I dynamically populate a short code using the Advanced Custom Fields plugin.

 

Since I didn’t have to actually code this, I am taking it from an example I found on StackOverflow. You can read it here.

Say you have an ACF field ‘contact_form’ which is the ID of a contact form 7 form. You want to populate this ID dynamically using ACF.

Your normal short code that you would use in a template is

echo do_shortcode( '[contactform id="1457"]' );

To get this to work is as simple as

echo do_shortcode( '[contactform id="'.get_field('contact_form').'"]' );

The trick here is to use the ACF get_field() function instead of the ACF the_field() function.

Please note that the contact form 7 short code has been changed so that it is not called here, and you can see how we use it. Otherwise we get a 404 contact form shortcake showing.

I hope this helps.

If you have any questions please leave a comment below.

, , , , , , , , ,

How to redirect Contact Form 7 to a thank you page.

How To Redirect Contact Form 7 To Thank You Page

We love using the WordPress plugin Contact Form 7 for the websites we build for our clients. It is extremely easy to use but very powerful and has reasonable documentation. A big plus for us is that it is a much loved plugin in the WordPress community and so answers and solutions can be found for almost all issues on sites like Stack Overflow and WordPress support.

At Storyteller Design we help out clients drive traffic to their sites through SEO and Google AdWords as well as the other search engine marketing like Bing Ads. One of the most important metrics for us is the conversion of these visitors to our client’s sites. A conversion is whenever someone completes a contact form, downloads a pdf or information sheet or calls the client.

Contact Form 7 How To Redirect To Thank You Page

We use Contact Form 7 for most of our contact forms and download forms. Once the form has been completed and the submit/download button clicked we want to redirect the visitor to a page where we can log that conversion in Google Analytics and pass that information back to our Google AdWords campaign.

Contact Form 7 used to suggest using this easy technique to redirect to your thank you page:

Go to the “Contact” menu item in your WordPress back end side bar, click on the form you want to redirect and then click on the “Additional Settings” tab.

Add this code into the field provided:

on_sent_ok: "location = 'http://www.example.com/thank-you/';"

You need to replace the http://www.example.com/thank-you/ with the url of your thank you page.

How ever this method has been depreciated by Contact Form 7 and will no longer work after the end of 2017. This leaves two option.

  1. If you are not familiar with coding you can use a plugin called Contact Form 7 – Success Page Redirects

This plugin uses the “wpcf7_mail_sent” action hook to redirect to the thank you page, and this hook shouldn’t be depreciated soon. However this plugin has only been tested to WordPress version 4.2.16 which is over 2 years ago. It also requires Contact Form 7 version 3.9 or later.

We suggest you try this plugin first and if it doesn’t work then move onto the second option.

  1. Use some php in your child-themes functions.php file.

The method now recommended in the Contact Form 7 documentation is to use javascript to redirect when the wpcf7mailsent event occurs. The code to use is:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://yourdomain.com/thank-you';
}, false );
</script>

If you only use one contact page, or only use on thank you page then all you need to do copy and paste the code below into your child theme’s function.php file.

//This function prints the JavaScript to the footer
function cf7_footer_script(){ ?>
 
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://yourdomain.com/thank-you';
}, false );
</script>
 
<?php } 
 
add_action('wp_footer', 'cf7_footer_script'); 

Again remember to replace the http://example.com/thank-you with your thank you page.

However we often use multiple contact form 7 forms on a website with multiple thank you pages. This is because we want to know exactly which pages, forms and calls to actions are converting our website visitors into leads so we send more traffic there, and optimise our conversion funnels.

In order to redirect different contact form 7 forms to different thank you pages you need to use the code below:

<?php
//This function prints the JavaScript to the footer
function cf7_footer_script(){ 

//if page name is contact.
if ( is_page('contact')) {?>
 
	<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
			location = 'http://example.com/thank-you';
		}, false );
	</script>
 
<?php } 
	
}
add_action('wp_footer', 'cf7_footer_script');

Here is an example of the code for two different pages.

<?php

//This function prints the JavaScript to the footer
function cf7_footer_script(){ 

//if page name is contact.
if ( is_page('contact')) {?>
 
	<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
			location = 'http://example.com/thank-you';
		}, false );
	</script>

<?php } else if ( is_page('download')) /* if page name is download */ {?>
 
	<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
			location = 'http://example.com/thank-you';
		}, false );
	</script>
 
<?php } 
	
}
add_action('wp_footer', 'cf7_footer_script');

We hope this helps. It is important to note that this code will redirect all contact forms one a page to the same thank you page.

Please let us know if you have any questions in the comments below.

How to redirect contact form 7 to thank you page