How To Create Your Own Instagram Bio Link With GeneratePress

Ah, the Instagram Bio link. The holy grail of links, why?

You only get one link in your Instagram profile. Choosing the right one is key to your following.

So what do you go for in terms of links in your Instagram Bio? Contact page, about page, perhaps something else?

It’s a tough choice, after all it’s one link, you’ve got to make it count.


There are several services out there that allow you to add multiple links to your Instagram Bio. Some are free but with caveats, such as keeping their logo at the base of the footer, run ads etc.

You then have to pay to have them removed and become a premium member. Some have analytics and other features.

Pricing varies with these services if another subscription-based service isn’t for you or you’d like to keep your Instagram Bio link on your domain; I have a solution for you.

What if I told you could create your own Instagram Bio link in WordPress using GeneratePress premium?

Interested? Good.

I’m going to show you how to do just that with this quick and easy tutorial. There will be code available in this tutorial, and you’re free to copy and paste at your leisure.

What you will need for this guide: The GeneratePress theme which is available for free here and we will need the GeneratePress premium plugin, which is $49.95.

As I will be using GeneratePress premium for this tutorial, we will need to make sure we have a few options enabled. To do this head on over to the appearance menu in your WP admin bar, click on GeneratePress and make sure the following are activated:

Make sure these are activated

Ensure disable elements and elements are activated.

*For the record I’ve signed up as to beta test GeneratePress premium and as such have version 1.8.0 rc.1 enabled.

As of this tutorial, the current version of GP premium is 1.7.8 and does not have one salient feature needed to get this working with minimal fuss.

So if you’d like to your Instagram Bio link to work, you should wait till the official 1.8.0 version of GP premium is live.

With me still? Good.

Create post to house your Instagram Bio link

You will need to create a page to house your Instagram Bio link. I’m using the Gutenberg editor (I’ve come to kind of love it of late) so the post editor will look different to you if your not using Gutenberg.

Don’t worry though. If you’re steadfast against using Gutenberg, I will show you how to add links etc using the classic editor.

Keep your page url short. For example mine would be https://lyrwp.com/ig that way it shouldn’t look too out of place on our Instagram Bio.

The reason we are using a page for our Instagram Bio links instead of a post, is posts will be shown throughout the site, in archives and could show up on your front page etc. So go for a page instead!

That’s all we will do for now. Save your page as it is, don’t publish it. We will come back to it later.

Choose your element

For step three we need to create a new layout. So head on over to your appearance menu and click on elements on the hover menu.

From here you need to choose the layout from the dropdown menu. This part is really easy and shouldn’t take you too long at all. I’ve called my new layout IG Bio Layout, that way I can refer back to it easily when viewing all the elements I have created.

Choose content no sidebars

We want our Instagram bio page to be small and have no sidebars. So firstly in your new layout, choose content (no sidebars).

Choose no widgets

I’ve purposefully chosen no widgets for my new layout. I want to keep it clean and to the point.

Disable, disable!

Here you need to get rid of all of the above, so go ahead and disable the page title, navigation, content title, footer and so on.

The feature missing from 1.7.8 of GeneratePress premium

As I mentioned earlier, this feature is not available in version 1.7.8 of GeneratePress premium.

In version 1.8.0 of the premium plugin “content width” will be available. Now I wouldn’t recommend you using the development version of the plugin on your site. I am and probably more fool me; personally, I’d wait till 1.8.0 gets officially released.

I know Tom (the creator of GeneratePress) is working hard on the latest version with a host of new features!

Anyway, I’ve set the content area to default as you can see, and gone with a content width of 600px (pixels) which I think should look good on a mobile device.

Where to show our new Instagram bio layout

We need to set some display rules for our Instagram bio link. As I’ve already created the page (even though it’s in draft stage), you need to select Page from the dropdown menu, then choose your IG Bio page (or whatever you’ve decided to call it).

Step 3 is now complete, next we’re going back to our Instagram Bio link page.

Our Instagram Bio link page is going to house multiple links, so have a clear idea in your mind what links you think will be of interest.

As I mentioned you only get one link in your Instagram Bio, so it’s important to highlight other links you want to drive traffic to.

Building out your page for your bio link on Instagram

I’m using Gutenberg as my post editor, mainly as I am finding it easier and easier to use. You can still use the classic editor for this, let me cover Gutenberg first. Or if you like you can skip to doing the above in the classic editor here.

Add an image to the top of the page

In Gutenberg click the place sign and add a new image see below for what it will look like.

Make your bio page pop

I’ve gone for my logo as the header image for my bio page. Boring huh? It doesn’t have to be, make sure you place a picture here that stands out to your profile visitor.

Ensure your image has a center alignment. It doesn’t have to be aligned that way; I think it looks better! Don’t forget to link your image to your home page (or whichever link your choose) chances are our Bio link visitor could could tap on it!

Add a description under your image

Keep it punchy, concise and to the point. Remember you want to give a reason for visitors to click on your links.

Also, bear in mind that a vast majority of people will be viewing your page on mobile devices. If they have to scroll down past your opening statement, you could lose them.

So keep it short and let your links do the talking. Looking at it my bio statement is overly long, so I may well end up changing it.

I suppose that’s the beauty of writing up tutorials, I make the mistakes and adapt them so you don’t do the same!

The important part. Do you know what pages/links you’d like to highlight to people?

Have a clear idea of what you want in your mind. I’d recommend your home page; first, the chances are that will be the first highlighted link they tap on.

Add some social links, perhaps add your Twitter page, Facebook page, portfolio whatever your needs are add them here.

Add multiple links to your Instagram bio profile page

Using Gutenberg click on the round icon with the plus sign in it. Then search for the “button” block, from here you have a few options to go through.

As you can see from the above screenshot, these are the options for your newly created button block. It’s here you can change the color of the background block and of course the text color.

You can also change the style of the button, with rounded corners, square or outline. So tinker around to get the right look and feel for your buttons.

Instagram Bio page complete, what does it look like?

The finished article.

That’s it. Your Instagram bio page is complete, with as many links as you like. The above is how mine looks.

Great huh? Hmmm. Maybe not.

I don’t like the way the buttons are. I want them to be full width with the text in the center.

Unfortunately, I couldn’t find a way to do it in Gutenberg. As much as I love it (and my limited abilities in terms of coding), I just couldn’t get it to work. Maybe someone could post a tip in the comments section as to how to get a full-width button block in Gutenberg?

All is not lost though.

Here’s how to get full width buttons in Gutenberg

You will see from the below image (from a desktop) that the buttons are now full width. They look better and fill the screen nicely.

The above looks better right?

How will it look on a mobile device? For this, I took a screenshot from my Samsung Galaxy, see below for how that turned out.

Mobile view of my Instagram bio links page

So much better right? I know. A bit of tinkering here and there and it looks just right. Here’s how to do the above. This will work in Gutenberg and the classic post editor as well!

First up some CSS code:

.iglinks {
    display: block;
    background: #5a3f9e;
    width: 100%;
    color: #fff;
    padding-top:10px;
    padding-bottom:10px;
    border-radius: 50px;
    border: 2px solid;
    font-size: 24px;
}

The above code deals with the width of the buttons the padding at the top and bottom and aligning the content to be in the center. I’ve also increased the font size to 24px, this way it’s clear and stands out.

I did have an issue though on the links once they had been visited, and the hover state. So I added the following CSS code to counter the issue:

.iglinks:hover, .iglinks:visited {
     color: #000000;
     background: #ffffff;
     border: 2px solid #000000;
     font-size: 24px;
}

The above code needs to reside in either the WordPress customizer via the additional CSS menu item. Or if you wanted to add it to an existing CSS stylesheet of your theme/child theme.

Creating a full width button in the classic editor

This is really simple to do, if you’re using the classic editor in WordPress switch the view to text it’s a little button on the far right of your editor, with the word “Text” on it!

Cut and paste the following code (obviously, change the wording and link, etc.)

<p style="font-size:24px" align="center"><a class="iglinks" href="https://lyrwp.com">Visit LyrWP</a></p>

You could get fancy with this, in terms of tracking if you so wished. By adding the following at the end of the href:

<p style="font-size:24px" align="center"><a class="iglinks" href="https://lyrwp.com?ig">Visit LyrWP</a></p>

By adding in ?ig at the end of the URL for your link, you can track via Google Analytics how many times this URL has been visited for your own records.

The same can be done with the header image as well, just add ?ig (or whatever you like) to the end of the URL for tracking purposes.

Well, you can do this using the existing CSS code I mentioned earlier. Copy and paste the CSS code again in your WordPress customizer, see below for new CSS:

.iglinkstwitter {
    display: block;
    background: #1da1f2;
    width: 100%;
    color: #fff;
    padding-top:10px;
    padding-bottom:10px;
    border-radius: 50px;
    border: 2px solid;
    font-size: 24px;
}
.iglinkstwitter:hover, .iglinkstwitter:visited {
    color: #000000;
    background: #ffffff;
    border: 2px solid #000000;
    font-size: 24px;
}

You will notice that I have changed the .iglinks to iglinkstwitter. Now you can add the following via a HTML Gutenberg block or the classic editor:

<p align="center"><a class="iglinkstwitter" href="https://twitter.com/lyrwp" target="blank" rel="noopener noreferrer">Follow me on Twitter?</a></p>

I’ve added the class iglinkstwitter to this button block and changed the color to : #1da1f2 which incidentally is the official blue of the Twitter logo. What does it look like?

Button color has changed!

You can repeat this process to have different color buttons and tinker with the CSS code to change things. Want square buttons? Then delete the border-radius: 50px; from the code. Want a smaller radius on your button? Change the px to something lower.

Don’t want a full border? Delete border: 2px solid; and so on. You can change the font size and change colors all through the CSS.

Adding an email button

You might want to let people email you from your Instagram bio page, doing this is easy. All you have to do is add the following:

<p align="center"><a class="iglinks" href="mailto:myemail@mydomain.com">Drop me an email?</a></p>

You will note the href=”mailto:” simply add your email address and ensure it’s wrapped in quotation marks. When a user taps/clicks on this it will open up their default email system to send you an email.

Want to change the color of your button? Just repeat the steps above and give it a different class such as iglinksemail or whatever works for you!

Looks much better than before!

If you want to get fancier and would like a color background, I’ll share a quick tip with you. Preview your Instagram Bio link page in WordPress and get the post ID. Or if you have already published your Bio page then just go back into it as if you were editing it.

In your search bar in your browser look out for the following: post.php?post=1234&action=edit

Make a note of the 1234 number we will need it in a minute.

Go to your WordPress customizer and additional CSS in the sidebar or cut and paste the following snippet into your child themes CSS:

body.page-id-1234 {
    background: #5a3f9e; 
}

By adding the page id of our Instagram Bio links page, we can change the background specifically on this page and only this page. Feel free to tinker around with hex code to get a color to suit your brand/website.

Want an image background instead? Well, use the following snippet below to do just that.

body.page-id-1234 {
  background-image:url("/wp-content/uploads/yourimage.jpg");
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
}

Thanks to an awesome snippet from W3Schools you can enable a full width image as a background if you so wished.

All you have to do is find an image you like and upload it to your media library in WordPress, copy the URL of the image and paste in everything from /wp-content/ onwards. You’re done.

This is my Instagram Bio links page, you can view it if you like here: Instagram Bio link page.

A few more things you can do if you so wished. If you don’t want Google to pick up on this page and depending on what SEO plugin you are using you could set it to no index, so it doesn’t get picked up in search results.

Benefits of having your own Instagram Bio page

  • Low cost, no subscription needed as opposed to using a Bio service.
  • On your own domain for branding purposes
  • More freedom to create
  • Swap out links whenever you like
  • No branding of a service provider

I’m a relative newbie when it comes to coding, the above has worked for me with no errors. If you know shortcuts or can recommend better coding, please do let me know with a comment.

Hopefully, this guide will help you in creating your own Instagram Bio page with multiple links, one that’s on your domain and at zero cost. Apart from maybe purchasing GeneratePress premium. If you own it already then, it really is zero cost.

This tutorial can be applied to a wealth of uses

Think sales landing pages, a Pinterest profile, Facebook Profile page, Google Adwords campaign pages and more. You just need to experiment and find out what works for you.

I hope you’ve enjoyed my guide, I’ll continue to write up tutorials that help. If you have any issues with the above and would like me to help you, please get in touch via the contact form below. I’m here to help:)

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.