Creating a Linktree-style page in Wordpress

If you’ve ever wanted a straightforward way to display a list of important links on your WordPress site, you might find this useful! Using Advanced Custom Fields (ACF), we can create a Linktree-style page that’s both customisable and dynamic. This approach is particularly useful for social media bios, email signatures, or even simplified mobile navigation to get visitors into useful parts of your website or digial persona.

Why build a LinkTree-style page?

Dynamic: Easily update links without touching the code.
Customisable: Add icons, descriptions, and control link behaviour.
Centralised: Keep all your important links in one place.

What You’ll Need

Basic understanding of PHP
WordPress site
Advanced Custom Fields Plugin

Step 1: Install ACF and Create Fields

Firstly, install the ACF plugin and create a new field group. Add the following sub-fields:

Link Name (Text)
Link URL (URL)
Icon (Text)
Open in New Tab (True/False)
Link Description (Text Area)

Step 2: Add PHP Code

Add the following PHP code to your page template where you want the links to appear.

<div class="quick-links mt-5">
  <?php
  if( have_rows('links') ):
    while( have_rows('links') ): the_row();
      $link_name = get_sub_field('link_name');
      $link_url = get_sub_field('link_url');
      $icon = get_sub_field('icon');
      $new_tab = get_sub_field('new_tab');
      $description = get_sub_field('link_description');
      $target = $new_tab ? 'target="_blank"' : '';
  ?>
  <!-- Your HTML markup here -->
  <?php
    endwhile;
  else:
    echo 'No links found';
  endif;
  ?>
</div>

Step 3: Add HTML Markup

Inside your PHP code, add the HTML structure for each link. You can also add classes for styling.

<div class="quick-link-item">
  <a class="quick-link-link mb-3" href="<?php echo $link_url; ?>" <?php echo $target; ?>>
    <?php if( $icon ): ?>
      <i class="fa-sharp fa-solid <? echo $icon; ?>"></i>
    <?php endif; ?>
    <?php echo $link_name; ?>
  </a>
  <?php if( $description ): ?>
    <p class="quick-link-description"><?php echo $description; ?></p>
  <?php endif; ?>
</div>

How to Extend

Here’s a few ways to extend what I’ve created and add your own flare and features.

Multiple Groups: Create multiple ACF groups for different types of links (e.g., social, work).
Conditional Styling: Use ACF to control the colour or size of each link.
User-Specific Links: Make the links display conditionally based on user roles or activity. Hamdy for when you have dedicated-author pages and want to showcase some of their favourite links.

Creating a Linktree-style page with ACF in WordPress is simple but offers powerful customisation. It’s a dynamic, centralised, and easy-to-manage solution for showcasing important links on your site.

Photo by Tamanna Rumee on Unsplash