, , , , ,

How to create a shortcode using Advanced Custom Fields ( ACF ) 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.

/1 Comment/by
, , , , , , , , ,

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

How To Redirect Contact Form 7 To Thank You Page

UPDATED 14-02-2019

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 an easy copy and paste technique to redirect to your thank you page. However this method has been depreciated by Contact Form 7 and will no longer work after the end of 2017. This leaves two options.

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:

[javascript]
on_sent_ok: "location = ‘http://www.example.com/thank-you/’;"
[/javascript]

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

 

  1. If you are not familiar with coding you can use a plugin called Contact Form 7 Redirection. They have both a free option available through WordPress but their Pro version adds some fantastic functionality that we often use for our clients.

Contact FOrm 7 Redirection

This plugin uses the “wpcf7_mail_sent” action hook to redirect to the thank you page, and this hook shouldn’t be depreciated soon. This plugin has been tested to WordPress version 5.0.3 so it will continue to work well for you. It requires Contact Form 7 version 4.8 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

/1 Comment/by
, , ,

What is the White Screen of Death?

WordPress White Screen Of Death

Oh No…My website has disappeared!

Don’t worry your website and all your content is probably still there, you might just be experiencing the white screen of death.

WordPress White Screen Of Death Marvin The MartianThe white screen of death is something many WordPress users have stumbled upon at least once. It is very frustrating as it locks you out of your site as well as the admin area of your website.

There is also no error message explaining what the problem is or giving a hint on how to fix it, so it looks like your website has just been vaporized by Marvin the Martian.

How will I know I am a victim of the screen of death?

You might see the white screen of death on specific posts and pages only or on the WordPress admin panel only whilst the rest of the functions are working perfectly. In this article we will show you some of the reasons why the white screen of death occurs and how you might be able to fix it.

Because there are several reasons why this error might occur there is a lot of trouble shooting involved in order to correct this.

One of the biggest issues with the white screen of death is that because you cannot access your admin panel to fix the problem it is difficult to solve unless you are comfortable working from the server side of your website and have access to it, through your website host.

Why it happens?

There are mainly 3 reasons why you get this error:

  1. You have exhausted your memory limit
  2. There is a problem in the code of your theme or one of your plugins
  3. A technical issue on the web hosting server

Finding the reason for the problem

For you to find the root of the problem you need to examine where the white screen of death is showing first, it might show in either one of these 3 ways.

  1. Multiple sites– if you see the error occurring in multiple sites, then your hosting provider is having some problems. If so contact your host and they might be able to tell you what the issue is.
  2. One of your sites– if the problem is occurring in one of your sites it may be a problem with the activated theme, or from the installed plugin.
  3. Specific pages or posts– if the error is showing on specific pages or posts then there is a problem with your specific site.

Rectifying the problem

Step 1. Increasing the memory limit– There are 2 ways in Increasing the memory limit

  • Do it yourself- it is important to note that this process requires advanced knowledge of coding. You could try increasing your PHP memory limit by modifying the wp-config.php file. Simply add the following line:

          define(‘WP_MEMORY_LIMIT’, ’64M’);

  • Contact your host–  This is the option we recommend, this kind of support is something your hosting company should be comfortable with. Just call them or send them an email and ask them to increase your memory limit. The problem with this option is that it may take a few hours to be put in place, and if it was not the issue then you are back to square one.

Because you cannot access the backend of your WordPress site you are probably going to need to access your server in order to carry out the following troubleshooting issues. To do this you will need:

FTP Server details:

  • FTP Address or Ip Address
  • FTP Username
  • FTP Password
  • FTP Client to access your server

Once you have accessed your server you will need to drill down into the wp-content/ folder of your website.

Another way to access this is to log into the cPanel provided to you by your host and find the file manager. This is an inbuilt server client where you can see the files and folders stored on your server. Your website files will usually be kept in a folder named public_html or www.

NB – Be very careful when navigating through your server. Any files you delete could permanently damage your website, so move forward with care, and if you are not sure of yourself seek professional help.

Step 2. Disabling all the plugins– Find your main plugin folder that should be at the file path wp-content/plugins. Do not delete it, simply remake it so it can no longer be found by the WordPress system. I like to call it fluginsold.

Once you have done that go back to the hoe page of your website and refresh the screen using CNTRL – R. Does your website appear now?

If so one of your plugins are faulty. If you are still looking at a white screen, then your problem lies somewhere else.

Now go back into your server and rename your plugins folder back to “plugins”. You should still be able to log into the admin area of your WordPress site. If you go to the plugins section all of your plugins will now be deactivated.

This step becomes a bit tedious. You need to one by one reactivate each plugin and then check that your website is still working correctly and you do not have a white screen of death again.

If you get hit by another white screen of death you know that the plugin you previously activate is one of your problems.

Restart this process, by renaming the plugin folder again, and then undoing your name change. This time do not activate the plugin with the issue, but skip it and check the rest of your plugins. Sometimes you may have more than one plugin causing the problem.

If you really need the plugin that is causing the problem, try to delete it and then re download it. One of the causes of the white screen of death is if your plugin did not download completely.

If after renaming your plugin folder your website is still just showing the white screen of death then you need to try a similar process with your theme folder.

Step 3. Replace current theme with a default theme– if the plugin troubleshooting didn’t work then you should try replacing the activated theme with a default wordpress theme. Before replacing the theme it is advised to back up your                                                                                                     current theme file, the best way to do this without access to your WordPress backend is probably through your hosts services.

This time rename your themes folder which you can find at wp-content/themes in your server folders.

Now check the front end of your site. Does your site appear now? If so then the theme you were using was causing the issue or was clashing with one of your plugins.

When you rename your themes folder back to themes, your default theme will have been activated. This is why it is always a good idea to have a default theme as a backup theme on your site but not activated on your site. We like to use the latest WordPress theme like twenty-seventeen.

Now you should be able to log back into the admin section of your website. Again maybe try to re download your theme to see if that is what caused the problem. Another possibility is that your theme is clashing with your plugins. In this case you need to choose which is more important to you.

Step 4. Other fixes

  • If you did not find any problem through trouble shooting you should try to reinstall a fresh copy of WordPress, as the core file of WordPress might be corrupted.
  • You can also use the w/p debug function to see the root of the problem by adding the following code in your wp-config-php file. Once you add this the blank screen will have errors, warnings and notices, this way you will be able to see the root of the problem.

           error_reporting(E_ALL);
           ini_set(‘display_errors’, 1);
          define( ‘WP_DEBUG’, true);

  • Another successful trick is pasting the following code in your wp-config.php file. Or in some servers, you will be required to modify your PHP.INI file.

          1./** Trick for long posts */
          2.ini_set(‘pcre.recursion_limit’,20000000);
          3.ini_set(‘pcre.backtrack_limit’,10000000);

We hope these solutions will be of value to you, if you have found other solutions feel free to let us know, we will be more than happy to hear other ideas and add them to this post. If you have any questions or would like us to help you with your #whitescreenofdeath let us know on [email protected]

To follow along with us watch the video below:

/0 Comments/by