...
- Added "Remove CTA" functionality
- Fixed "Populate From Post" link
- Removed aria-role=button from CTA
To implement a Remove CTA option on other cards:
- Add a "Remove CTA?" checkbox to the ACF fields in configuration. You'll want it to default to false to avoid issues with changing existing blocks.
- Add line in php for the block that defines the variable
- $remove_cta = get_field('remove_cta');
- Edit the line of code that displays the $title of the card
- Add if statement checking that there is a link, and that $remove_cta is true (checked)
- Add <a> element around the title. (You can basically copy the <a> element from the CTA in the card-footer, but remove the btn class and add a class for styling and remove the $link_title)
- Add a class onto the heading itself for styling- using if statement that checks for the $link_url, $remove_cta, and $stretch_link (class will be used to add »)
- Example:
Code Block language php firstline 78 linenumbers true <?php if ($link_url && $remove_cta) : ?><a href="<?php echo esc_url($link_url); ?>" class="<?php if ($stretch_link) : ?>stretched-link stretch-link-heading<?php endif; ?> " <?php if ($link_target) : ?>target="<?php echo esc_attr($link_target); ?>" rel="external nofollow noreferrer" <?php endif; ?>><?php endif; ?> <?php if ($title) : ?><h<?php echo ($section_title_heading_size + 1); ?> class="card-title <?php if ($link_url && $remove_cta && $stretch_link) : ?>heading-link<?php endif?>"><?php echo $title; ?></h<?php echo ($section_title_heading_size + 1); ?>><?php endif; ?> <?php if ($link_url && $remove_cta) : ?></a><?php endif; //if remove CTA is checked, place link around title/heading and add 'stretch-link-heading' class to the link and 'heading-link' class to the heading for styling?>
- Edit the line of code that displays the CTA
- Add '&& !$remove_cta ' to the if statement checking if there's a link, so that it only adds the CTA if remove_cta isn't checked
Code Block language php <?php if ($link_url && !$remove_cta) : //if remove CTA is NOT checked, add CTA link at the bottom?> <div class="card-footer"> <a href="<?php echo esc_url($link_url); ?>" class="btn <?php the_sub_field('cta_style'); ?> <?php if ($stretch_link) : ?>stretched-link<?php endif; ?>" <?php if ($link_target) : ?>target="<?php echo esc_attr($link_target); ?>" rel="external nofollow noreferrer" <?php endif; ?> <?php if ($post_object) : ?>aria-label="Read the full article: <?php echo $title ?>"<?php endif; //added aria label for more accessible link text?>><?php echo esc_html($link_title); ?></a> </div> <?php endif; ?>
Test the code on the front end to make sure it works.