How to add clickable links to logos using ACF in a custom WordPress theme

When managing logo sections in WordPress—especially those powered by Advanced Custom Fields (ACF)—you may run into a common limitation: logos display correctly, but there’s no way to make them clickable.

In this case, the issue stemmed from logos being managed via theme options, without built-in link functionality. The solution required updating both ACF fields and the theme template to support clickable URLs.

This guide walks through how to properly implement clickable logo links in a custom WordPress theme using ACF.

Issue background

A WordPress site was displaying a set of logos controlled through a theme options panel. These logos were added via Advanced Custom Fields (ACF) and rendered in a custom theme template.

  • Logos were visible on the frontend
  • There was no option to assign links to each logo
  • The logos needed to link out to external websites

Additionally, the setup involved a custom theme where logo output was controlled at the template level, with no existing ACF field for URLs.

Diagnosis

After reviewing the setup, the root cause became clear:

  • The logos were stored using ACF fields, but only as images
  • The theme template was rendering <img> tags without anchor links
  • There was no URL field in ACF to store destination links
  • Because this was a custom theme, changes required editing theme files directly

To support safe updates going forward, version control was also introduced via a Git repository.

Resolution steps

1. Add a URL field in ACF

Navigate to your ACF field group managing the logos (often under Theme Options).

  • Field Type: URL
  • Label: Logo Link
  • Field Name: logo_link

If using a repeater or group field, add the URL field within that structure.

2. Update the theme template

Locate the template file responsible for rendering the logos:

/wp-content/themes/your-theme/

Update your markup from:

<img src="<?php echo $logo['url']; ?>" alt="">

To:

<?php if (!empty($logo_link)) : ?>
    <a href="<?php echo esc_url($logo_link); ?>" target="_blank" rel="noopener noreferrer">
        <img src="<?php echo esc_url($logo['url']); ?>" alt="">
    </a>
<?php else : ?>
    <img src="<?php echo esc_url($logo['url']); ?>" alt="">
<?php endif; ?>

3. Handle ACF repeater fields

if (have_rows('logos', 'option')) :
    while (have_rows('logos', 'option')) : the_row();
        $logo = get_sub_field('logo_image');
        $logo_link = get_sub_field('logo_link');

Apply the same conditional logic when rendering each logo.

4. Test across the site

  • Confirm each logo links correctly
  • Ensure logos without links still display
  • Verify links open in a new tab if intended

5. Implement version control (recommended)

For custom themes, introduce Git version control to safely manage updates and maintain code integrity.

Final outcome

After implementing the changes:

  • Logos became fully clickable with custom URLs
  • The solution remained flexible via ACF
  • The theme structure was improved
  • Version control was established for ongoing development

Need help customizing Advanced Custom Fields or modifying a WordPress theme? Contact Freshy for expert support.