I am going to go straight to the point here on how you can create your page with links, similar to how Linktree works. Don’t get me wrong, Linktree is a great tool to help overcome Instagram’s stinginess i.e. not allowing you to share clickable links on your post, and if you have less than 10k followers then you’re also screwed there too.
However, if you’re like me and want to pull your sleeves up and attempt to recreate your own Linktree page then read on…
Step 1: Copy and save text below
Copy the following two pieces of text into notepad (or something) but not in apps like Word as they intend to auto-correct words.
Minimize those text windows for now as you’ll need to refer to them a little later.
Links Page Code:
<div class="instagram">
<a href="https://www.jassv.com">Homepage</a>
<a href="WEBSITE-LINK-HERE">TEST 1</a>
<a href="WEBSITE-LINK-HERE">TEST 2</a>
<a href="WEBSITE-LINK-HERE">TEST 3</a>
</div>Custom CSS Code:
body {
font-size: 1.6rem;
}
.instagram {
list-style-type: none;
text-align: center;
display: block;
font-size: 17px;
padding: 5px;
}
.instagram {
color: black;
display: block;
}
.instagram a:link {
display: block;
color: black;
font-size: 17px;
border-style: solid;
border-width: 1px;
border-color: black;
background-color: #e1b7b2;
padding: 5px;
margin: 5px;
}
.instagram a:visited {
color: black;
display: block;
background-color: #e1b7b2;
}
.instagram a:hover {
color: black;
display: block;
background-color: #b5a6b2;
}Step 2: Create a new page
Create a new page (not post), don’t worry about the Title or page name just yet.
Because this page is effectively like a landing page showing just your important page links, you want the page to be simple without any other distractions,
On the right-hand side choose a template that removes the menu, logo, other widgets, etc. As you can see below I’ve also hidden items that come with one of the plugins I have installed:
Step 3: Add custom HTML
Assuming you’re using the Gutenberg Editor, click on the blank page to enable to block editor to come up and click on the plus symbol. In the search bar type in ‘custom html’.
You should see the option for Custom HTML in the results, click on it:
Step 4: Copy and paste Links Page Code
Copy the text from the ‘Links Page Code’ notepad you obtained earlier (higher up on this page) and paste it into the editor like below.
When you click on preview it will look like below and weird, but don’t worry that’s fine. The magic will happen a little later, be patient my friend.
Step 5: Save the page
OK, for now you’re done with the page. Save it as draft (not publish) and come out of it.
Head to the section where it shows you the list of ‘All Pages’ and locate the page you just created. Hopefully, it will be near the top in draft format.
Select your page and click on ‘quick edit’.
Now you can edit the URL of your custom Linktree wannabe on the slug field like below:
Some ideas can be:
- madeup.com/bio
- madeup.com/instalinks
- madeup.com/gridlinks
This will effectively be the URL you’ll need to put into your Instagram or Twitter Bio
Step 6: Customize your theme
Now head back to the main WordPress admin menu, and click on:
Appearance –> Customise
Step 7: Additional CSS
You should be in the section to customise your WordPress theme settings. Look for the option for ‘Additional CSS‘, usually right at the end:
If your theme doesn't provide the Additional CSS option, then either its in a different place on your theme or you may need to find another way to get to it. A quick google search should help you.
Step 7: Paste Custom CSS Code
Remember the other piece of text (Custom CSS Code) that you’ve got stashed away somewhere on one of your notepads. Copy that entire text and paste it into the Additional CSS section.
Once done, don’t forget to click on Publish
If you already have some code inside the Additional CSS section, then just paste it underneath it all.
Step 8: Preview your page
If you go back to your page you created earlier and preview it, hopefully it looks something like this:
The image below will give you an idea on how the CSS code behaves when these links are presented on your page. The top part of the CSS code is what the links will look like by default. The middle part is when a link has been clicked on whilst the last part is when you hover over it with your mouse (if viewing via desktop).
Hex Colour Picker
Obviously you’d want to change the colours to suit your needs. Hex codes are used to colour the backgrounds of the links.
If you get stuck on what colour (Hex code) to use then just do a simple search on google with the words: hex colour picker and it should bring up something neat like this:
Step 9: Tweak and publish!
On your links page, amend the links according. If more links are required, just simply add another line (a href…) under the last one. You may wish to add a logo/title to your page or anything else you want but remember to keep it short so that it fits on one screen when viewed on a mobile device.
Final steps is to publish the page and copy and paste that url into your social media profile bios.
Step 10: Share the love
This step is optional but I would really appreciate if you share this post if you found it valuable.
Also, please do comment below with any feedback and I would love to see what you’ve done with your links page!
Thanks for reading.