You’ve seen them all over the web, from TikTok to Twitter it seems like just about everybody has a Linktree pointing to various places around the web where they can be found. Influencers typically link to all their social media accounts while professionals link to their LinkedIn and Github pages.
What is Linktree?
Linktree is deceptively simple service that allows non-technical users to create a simple, free landing page that’s pretty decent looking. Users can then put a single “Link in the bio” of all their accounts to funnel their fans and followers to where they want them to go. Linktree makes money when users upgrade to one of their premium packages that allow more customization, better analytics, and opportunities to sell products.
This is all great for non-technical users, and the packages are fairly affordable ranging from $5 to $24 per month, but what if you’ve already got your own webpage on your own custom domain? Wouldn’t it be better to funnel traffic to a channel that YOU own? Wouldn’t analytics be better if they were linked to your own Google Analytics account? The answer is yes, and with a little knowledge building your own Linktree page on your own domain with WordPress is pretty darn easy.
What is Flexblocks?
Flexblocks is a set of WordPress blocks built for the Block Editor (sometimes referred to as Gutenberg). With a few simple blocks and a little knowledge of the Flexbox layout system, Flexblocks can be used to build nearly any page layout in WordPress. This makes Flexblocks the perfect tool to build a Linktree clone.
Where to get Flexblocks
There is a free version of Flexblocks in the official WordPress Repository and it can be downloaded here. There’s also a pro version offered on Gumroad. The pro version is currently being offered on a pay what you want basis, so go ahead and grab it for free while this offer stands (reviews on either Gumroad or the WordPress repo are appreciated). This tutorial can be completed with either version, although some features like reveal animations are only available in the Pro version.
Step #1 – Create a New Page In WordPress Called “linktree”
If you work with WordPress on a regular basis you’ll already know how to do this, if not it’s really easy. From your WordPress dashboard click on Pages, then click on the Add New button at the top of the page. That’s it, the new page is created and is ready to be built. In the Add Title field let’s name the page “linktree”. This will create an easy to share url similar to the following – www.yoursite.com/linktree (depending on how your permalink structure is set up).
Step #2 – Create a Flexblocks Container
Our first step will be to add a Flexblocks Container block in the WordPress Block Editor. In the Block Editor the first line will say “Type / to choose a block” with a plus sign button to the right side of the screen. Click the plus sign button to add a new block and select Flexblocks Container from the block inserter dialog. Next we’ll need to change a couple settings for the Flexblocks Container. Under the Flex Options tab, change Justify Content to center and Align Items to flex-start. This will ensure that any content that is added to the Flexblocks Container will be centered in the viewport (just like it is in Linktree).
Step #3 – Add a Flexblocks Item To The Flexblocks Container
Next, we’ll add a Flexblocks Item to the Flexblocks Container we created in the previous step. This Flexblocks item will hold all of the content for our Linktree page. To do this, click the Plus button in the previously created Flexblo68-cks Container. In the Add Block dialog select Flexblocks Item. If you completed the previous step correctly, the Flexblocks Item should be centered in the middle of the Block Editor. Next we’ll change a couple settings for the Flexblocks Item, but before we do that we need to decide what our goal for the block is. If we look at a sample Linktree (I’m using writing guru Ray Edwards’ Linktree as a reference point), we’ll see that their containers grow to a max width of 680px and shrink as necessary when the viewport shrinks. We also notice that all of the content flows from the top of the page to the bottom of the page, the perfect use case for Flex Direction of column.
To accomplish these two tasks in Flexblocks is actually quite easy. First in the block settings for the Flexblocks Item we’ll navigate to the Flex Options tab and set Flex Direction to column, Justify Content to flex-start, and Align Items to center. Next, we’ll navigate to the Dimensions tab and set the Flex Basis to Custom and 680px. You’ll notice the Flex Item grows to 680px in width. We’ll also set some margins on the Flexblocks Item. Under the Margin and Padding tab we’ll set the top margin to 1rem and the left and right margins to .75rem to allow some space between the block and the top and sides of the viewport. We’ll leave bottom margin at 0.
Step #4 – Start Adding Content
Now we get to the fun part. We can see on Ray’s Linktree that the first thing at the top of the page is a sharing button. There’s about a billion different sharing buttons in the WordPress Plugin Directory. You can use whichever one suits you, but for this tutorial we’ll use the Social Squares blocks from Flexblocks Pro. It won’t look exactly the same but let’s try to make it look great.
The first step we’ll take is to create a new Flexblocks Item inside of the Flexblocks Item we created in the previous step. Each piece of content we’ll be adding will be wrapped in a Flexblocks Item so we can align the content however we’d like. In the previously created Flexblocks Item click the plus button and in the block inserter choose another Flexblocks Item. In this case we want our block to stretch to the full width of our parent container. To do this let’s navigate to the Dimensions tab and set the Min-Width to 100%. To match the layout of Ray’s Linktree, lets add another Flexblocks Item in the Flexblocks Item we just created. You’ll notice the new Flexblocks Item is aligned to the left side of its parent container. To align it to the right side we’ll simply change the Justify Content property of the parent container to flex-end.
Step #5 – Build The Share Block
Let’s add some content to the share block. First we’ll add a sharing image icon (I found one at svgrepo.com) with an image block wrapped in a Flexblocks Item block, and then add whatever social buttons we’d like with Social Squares blocks. I decreased the size of each of the Social Sharing blocks to 25px, added a 50% border radius to make each of the sharing blocks round. I also set a 0.33rem gap on the parent share block to separate the icons, and I also added 1rem of right margin to the sharing icon block to separate it from the other icons. Now we’ve got a block that looks pretty good:
Step #6 – Add the Bio Block
Next we’ll add a Bio Block which will consist of a thumbnail image, a heading, and a subheading. The first step is adding a Flexblocks Item block to be our container for our Bio Block. In our main content block we’ll click the Plus Button to add another Flexblocks Item. We’ll set the Flex Direction of this Item block to column, set Justify Content to flex-start, and Align Items to center. We’ll also set a gap for this block of 1rem to separate the image, the heading, and the subheading.
Next we’ll add an image block of a headshot and set the width and height to 96px. We’ll also use the image block’s built in block style of rounded to create a round image. We’ll then add a heading block and paragraph block and say whatever we want our messaging to convey. For both of these text blocks we’ll set the top and bottom margin to 0 since we’ve already set a gap in our parent block. Also, now is a good time to set a gap for our main content block to separate each of our sections. I set the gap to 1rem. Here’s what we’ve got so far:
Step #7 – Add Our Links
By now you should be used to working with Flexblocks items, which is good since each of our links will be a Flexblocks Item. We’ll only need to create and style one link and then paste and modify the block’s text and link url for the rest. Beneath our Bio Block we’ll add a Flexblocks Item, then set the Justify Content property to center and Align Items property to center. We’ll also set the Min Width of the block to 100%.
Next we’ll add the link text with a paragraph block and style it however we’d like. I changed the background color to dark gray and the text color to white. I added 1rem of padding to the link block as well. I also added an 8px spacer block between the Bio Block and the first Link Block. Finally we turn the Link Block into an actual link by navigating to its General Settings tab, clicking on the Enable Link switch, and populating the Link Url input field. Once our first link is created and to our liking, we can copy and paste it below as many times as we need to and then go back and customize each link by updating the link text and link url.
Step #8 – Add Social Links To The Bottom Of Our Linktree
Our last step will be to add our own social links to the bottom of our Linktree page. These will link directly to our social profiles. I went to svgrepo.com to find images of each of the social networks I needed. For our social links container I added another Flexblocks Item with Min-Width of 100%. I set Flex Direction to row, Justify Content to center, and Align Items to center. I also added a Gap of .5rem to separate the social links.
Each social link will consist of an image block with a link attribute. In this case I chose not to wrap each image block in a Flexblocks Item, but that would work too. I added 1rem of gap to separate the social links from each other and I also added a 16px spacer block between the social links and the last Link Block. And voila here’s the finished product! Check it out live here.
