This site may contain affiliate links for which a small commission is received.
UPDATE: I found an easier way than before to create the a free WordPress Instagram Bio using a gallery in Gutenberg so read what I did and then how I improved on that.
I stumbled across this when configuring up my Instagram Bio page to link back to my blog articles. I realized that I was only allowed 1 link on my Instagram bio. So I set out to see how to maximize that and make my own creative Instagram bio using WordPress. First, I noticed that Tailwind offers a free Instagram bio if you use them to post to Instagram. While I love Tailwind and think it’s a handy tool, it’s priced per social channel. The Instagram bio with Tailwind isn’t as configurable as with Campsite or Linktr.ee (both require a monthly fee as well). I like the Instagram bio that Later offers but did not plan to sign up just to have a bio; it is a nice looking 3 column portfolio grid. Each square image can contain a link back to a web page or post.
So I decided to see whether I could create an Instagram Bio using WordPress and make it similar to what I found being offered. Here’s how it turned out. Pretty nice.
The images are 2 columns and big enough to read on a smartphone which is a little better than some of the commercial apps that show 3 columns. While 3 column looks nice the text on the images isn’t big enough to read and so the headline optimization is worthless if the title is unreadable.
For the Instagram page in WordPress, I disable the regular post title and featured image so they don’t show on the bio; now it looks more like the commercial Instagram bio pages that are available through the apps I mentioned earlier.
Here’s what I did to create it and the steps needed each time I add a post. The first thing to do was to create the page where the bio would be located.
Drive more traffic to your online store using performance based marketing.
Method 1. Create the Bio Page For The Instagram Gallery Using Gutenberg Blocks
This was the original method I used for creating the Instagram gallery with clickable links that could be used as the single URL in an Instagram bio page. The URL would be something like “https://yourdomain.com/instagram” where this would become that page. My second method is a bit better especially once the gallery is a large collection of Instagram 1080 x 1080 images. This 2nd method allows for lazy loading the images otherwise the page tends to take a long time to load with more images. However, using this first method works very well with just a page or two of images.
- Create a WordPress page called “Instagram Bio” or “Instagram”. It will hold a 3 column wide Gutenberg gallery of Instagram sized images, one for each post created.
- Add text at the top indicating that the links go to posts. I added something like “My Instagram Portfolio. Just click an image to read the article”.
- Now in Gutenberg, add a gallery and select only the square Instagram images.
- In Gutenberg, the default gallery is 3 columns and the images with auto fit the width and number per row. Instagram requires a 1080 x 1080 pixel image. I use the Astra theme so as I create each row in the Gutenberg gallery they automatically shrink to about 300×300 pixels.
- Any gallery row less than 3 images will resize to the width of the row which I not what I want for the bio page. So for example in a gallery of 4 images (4 posts) the 4th image would be the full width of the 2nd row while the 1st row of 3 images would all be about 300 x 300 pixels. The fix for this is to add 3 lines of CSS so all the images show as the same size no matter whether there were 3 images or 4 images or more.
- This step is important. In the Gallery Document settings the “Link to” is by default set to none. It must be set to “attachment” for the Page Links to URLs to work and redirect clicking on any image to it’s associated blog post.
Here’s the CSS I added (remove the double quotes). I used Google’s inspect tool to get the correct CSS Gutenberg element, the blocks-gallery-item, to modify. This forces all the gallery elements to fit on the page as 300×300 pixels even when a gallery row has less than 3 images to fill the 3 column row. You can change the margins as you need.
margin: 0 16px 16px 0;
The following code is for the optional clickable button menu that some commercial Instagram Bio apps offer. Just change the background-color to yours and add to the mid-width if you need a longer button.
min-width: 280px !important;
Method 2. Create the Bio Page For The Instagram Gallery Using FooGallery
This is the optimal method since FooGallery has a free gallery plugin that does the lazy loading of large galleries with ease. Download the FooGallery plugin (Foobox is optional) and install into WordPress. You will still perform step 1 and step 2 from above but steps 3 – 5 are replaced by using the FooGallery to create the Instagram gallery of images rather than using the Gutenberg gallery block.
Once installed, create one gallery of the Instagram images. The 2nd benefit of this plugin is that the images can be dragged and re-arranged as desired. Here are screenshots of the settings used to create the Instagram gallery. In this example. I removed the default border around the images and increased the size from 150 x150 to 300 x 300. I also removed captions because that clutters up the bio page which should just be the clickable Instagram images. In fact I made a separate FooGallery “slider” of the settings below
Create The Image Links Back To Each Post’s Featured Image
Images don’t generally link to a page or post so to make the bio images link to their respective blog post I needed to add some functionality. I used a free WordPress plugin called “Page Links To” which allows a redirect URL to each image in the Media Library. After adding it, I modified square Instagram images in my Media Library by adding the URL for the blog post the image was associated with. It’s better to add the blogpost URL as you’re creating the post but I’ll get to that shortly.
UPDATE: I have since turned off this plugin as it seems to slow down WordPress and am looking for an alternate. Will update once I find one that is suitable for replacement.
Since I also used another free WordPress plugin called “Dynamic Featured Image” to allow for a 2nd feature image on each post. This is totally optional; I needed it because my primary featured image was a Facebook 1200 x 628px image. This plugin allows me to have a 2nd Instagram 1080 x 1080 image associated with the post. By having 2 image I can auto-schedule the correct image for the social media platform. I’m able to redirect those images back to the appropriate post.
As mentioned, the 1st featured image added is my OG image or Facebook image of 1200 x 628 pixels. Once the “Dynamic Featured Image” and “Page Links To” are installed each time I create a new post I add the 2nd featured image as a 1080 x 1080 Instagram image with a Post URL. Then when it is added to my Instagram Bio page it will automatically open to the correct post upon clicking just like what I saw with the various platforms I initially mentioned at the beginning of this article.
The steps would be this.
- Create the featured images and add them to the post. Click on feature image 2, add the Instagram image and update the post.
2. Go to the Media library and select the image to edit it. On the right below the Alt text, Title, Caption, and other details is a link to edit more. Click that link “Edit more details”.
3. Scroll below the image to the “Links to” and add in the post URL. You can copy the post URL from the Gutenberg Permalink information on the Document tab and then paste into the “Page Links to” custom URL box.
When done, click the Update to update the Media image details. The image now has a redirect URL to the blog post.
Optional Clickable Button Text Categories
Several of the commercial Instagram bio options offer a nice 1 or 2 column menu will clickable Categories that redirect to webpages. This is useful for offering links to subscribe forms, homepage, contact or product sales pages. It’s fairly easy to replicate that above the gallery simply by adding a Gutenberg table with clickable buttons to each page or product to be offered. Here is an example.
1, At the top of the Instagram Page, add in a single column table.
2. In each row, add a button. Add in the optional CSS code listed above to make the buttons the same length and color as needed.
3. Configure the button with a title, redirect URL .
Here is the finished Instagram Bio . (irrelevant really because most Instagram traffic with come from smartphones).
Here is the important part; the Instagram Bio on a smartphone. Looks just like any of the commercial products and is totally free.
If you found this article useful, please consider sharing it.