Call to Actions with Advanced Custom Fields

In the Advanced WordPress group on Facebook, someone asked about setting up custom call to actions for their client. I have this set up on this website using Advanced Custom Fields and a little PHP. Sharing my field setup, and code! Hope it’s helpful.

How it looks when editing a page

The output (see at end of this page)

The setup for ACF fields

This displays the fields shown on most pages on my website. The default call to action is the newsletter sign-up. That is set up separately using an ACF Options page. If you don’t want to use an ACF Options page you could include the default call to action content in this field set.

Feel free to download these ACF fields and import them into a website you’re working on.

The code that displays the call to action: footer.php

I like keeping repeatable code in their own files. The call to action code is referenced on line 13 of my footer.php file:

<?php
/**
 * The footer template
 *
 * Contains the closing of <div id="main"> and all content after.
 *
 * @package MelissaJClark
 */
?>

</div><!-- #page -->

<?php get_template_part('inc/footer-call-to-actions'); ?>

<a href="http://www.bloglovin.com/blog/14716433/?claim=mhc4dqm9ywt" style="display:none;"><?php esc_html_e('Follow my blog with Bloglovin', 'melissajclark'); ?></a>

<footer id="colophon" role="contentinfo" class="siteFooter">
	<nav role="navigation" class="container">
		<ul class="siteCredits" role="menu">
		    <?php wp_nav_menu( array( "theme_location" => "footer", "container" => '', 'items_wrap' => '%3$s' ) ); ?>
		    <li><a class="siteIcon--Link" href="<?php echo esc_url( home_url( "/" ) ); ?>">© <?php echo date("Y"); ?> <?php echo bloginfo( "name" ); ?></a></li>
		    <img class="siteIcon--Light" src="<?php echo get_template_directory_uri(); ?>/assets/images/MJC-icon-white.svg" alt="">
		</ul><!-- .siteCredits -->
	</nav><!-- .container --> 
</footer><!-- #colophon -->

<?php wp_footer(); ?> 
</body>
</html>

Call to Actions file: inc/footer-call-to-actions.php

<?php 
/**
*
* Call To Actions
*
*/
?>

<?php if ( get_field('what_cta_should_be_used_for_this_page') ) : ?>

	<?php $cta = get_field('what_cta_should_be_used_for_this_page'); ?>

	<?php if ( $cta == 1 && $cta != 2) : ?>
		
		<?php // Newsletter Me Call To Action ?>
		<section class="footerCallToAction" id="newsletter-subscribe">
			<div class="container footerNewsletterSubscribe">
				<?php if ( get_field('blog_call_to_action_content', 'options') ) : ?>
					<h2 class="footerCallToAction--Title footerCallToAction--NewsletterTitle"><?php the_field('blog_call_to_action_content', 'options'); ?></h2>
				<?php endif; ?>
				
				<?php $mailchimpShortCode = get_field('blog_call_to_action_mailchimp', 'options'); ?>
				<?php echo do_shortcode($mailchimpShortCode); ?>
			</div><!-- .container -->
		</section><!-- .footerCallToAction -->

	<?php elseif ( $cta != 1 && $cta == 2 && $cta != 3 ) : ?>

		<?php // Contact Me Call To Action ?>
		<section class="footerCallToAction">
			<div class="container footerCallToAction--Content">
				<?php if ( get_field('main_call_to_action_content', 'options') ) : ?>
					<h2 class="footerCallToAction--Title footerCallToAction--MainTitle"><?php the_field('main_call_to_action_content', 'options'); ?></h2>
				<?php endif; ?>

				<?php if ( get_field('main_call_to_action_button_text', 'options') && get_field('main_call_to_action_button_link', 'options') ) : ?>
					<?php $buttonLink = get_field('main_call_to_action_button_link', 'options'); ?>
					<a class="button button--light footerCallToAction--Button" href="<?php echo esc_url($buttonLink); ?>"><?php the_field('main_call_to_action_button_text', 'options'); ?></a>
				<?php endif; ?>
			</div><!-- .container -->
		</section><!-- .footerCallToAction -->	

	<?php elseif ( $cta != 1 && $cta != 2 && $cta == 3  ) : ?>

		<?php // Custom Me Call To Action ?>
		<?php if ( get_field('custom_cta_headline') ) : ?>
			<section class="footerCallToAction">
				<div class="container footerCallToAction--Content">
					
					<h2 class="footerCallToAction--Title footerCallToAction--MainTitle"><?php the_field('custom_cta_headline'); ?></h2>

					<?php if ( get_field('custom_cta_button_text') && get_field('custom_cta_button_link') ) : ?>
						<?php $buttonLink = get_field('custom_cta_button_link'); ?>
						<a class="button button--light footerCallToAction--Button" href="<?php echo esc_url($buttonLink); ?>"><?php the_field('custom_cta_button_text'); ?></a>
					<?php endif; ?>
				</div><!-- .container -->
			</section><!-- .footerCallToAction -->
		<?php endif; ?>

	<?php endif; // end check of CTA choice ?>


<?php elseif ( !get_field('what_cta_should_be_used_for_this_page') && is_post_type_archive('projects') || is_singular('projects') ) : ?>

	<?php // Contact Me Call To Action ?>
	<section class="footerCallToAction">
		<div class="container footerCallToAction--Content">
			<?php if ( get_field('main_call_to_action_content', 'options') ) : ?>
				<h2 class="footerCallToAction--Title footerCallToAction--MainTitle"><?php the_field('main_call_to_action_content', 'options'); ?></h2>
			<?php endif; ?>

			<?php if ( get_field('main_call_to_action_button_text', 'options') && get_field('main_call_to_action_button_link', 'options') ) : ?>
				<a class="button button--light footerCallToAction--Button" href="<?php the_field('main_call_to_action_button_link', 'options'); ?>"><?php the_field('main_call_to_action_button_text', 'options'); ?></a>
			<?php endif; ?>
		</div><!-- .container -->
	</section><!-- .footerCallToAction -->	

<?php  else :  // no info for the field ?>

	<section class="footerCallToAction" id="newsletter-subscribe">
		<div class="container footerNewsletterSubscribe">
			<?php if ( get_field('blog_call_to_action_content', 'options') ) : ?>
				<h2 class="footerCallToAction--Title footerCallToAction--NewsletterTitle"><?php the_field('blog_call_to_action_content', 'options'); ?></h2>
			<?php endif; ?>
			
			<?php $mailchimpShortCode = get_field('blog_call_to_action_mailchimp', 'options'); ?>
			<?php echo do_shortcode($mailchimpShortCode); ?>
		</div><!-- .container -->
	</section><!-- .footerCallToAction -->

<?php endif; ?>

Melissa Jean Clark