How to host your own link-in-bio page

Bio link tools such as Linktree, Shorby and LinkIn.Bio all exist to make linking to multiple things in your social media bios simple. They also add their branding and change their free services, and unless you’re willing to pay a monthly or yearly fee, you lose out on a lot of features — custom CSS, analytics, unlimited links.

I already pay for hosting, and it’s eco-friendly. So I made my own.

If you don’t already pay for hosting or want something less DIY, those bio link page tools are grand and save a lot of time.

This does require HTML/CSS know-how. I want to make it a plugin, because it would follow regardless of theme, but WordPress naturally pulls page templates from the theme directory — not plugin directories — so it’s low-priority.

Benefits to hosting your own #linkinbio

  • literally any feature you can dream (provided you can add it yourself or hire a developer to do so)
  • keep & track traffic on your own site (usually a premium upgrade)
  • in-house – no third-party necessary; this means your privacy policy & terms, etc.
  • use affiliate links (usually a premium feature)
  • unlimited team member count
  • custom domain!!
  • white label branding (no third-party logo)

I like the idea of hosting my own #linkinbio page because it means I can format it however I want, design it however I want, and the options are limitless.

Some features that might appeal to other bloggers/influencers/whatever include the ability to implement affiliate links or ads, or to add an email signup field.

The point is that you can get creative with it and do what you want, which is impossible with a third-party service, since you’re on their turf and playing by their rules.

I prefer to host my own bio link page because I can better monitor the traffic and keep people on my own site longer.

Basic needs of a bio link page

So the regular blog page is redundant. I don’t think you should use the typical one, if you can help it — I think you should create a legit page template for your bio link page. When people visit it, they’re looking for quick calls-to-action (or links), not your blog menu and social media and blog header and all that jazz.

Thus, the basic needs of a bio link page:

  • simplified theme ft. list of links (skip the bells & whistles, but hide the excessive shit)
  • mobile-friendly/responsive everything
  • simple URL
  • image, mini bio

1. Page template

To create your own, you’ll need to create page-links.php and drop it into your theme’s directory — this is why a plugin would be ideal so it would exist regardless of them.

The base code for page-links.php:

<!doctype html>
<html <?php language_attributes(); ?> id="html">
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="initial-scale=1.0, width=device-width">
	<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style-links.css?<?php echo date('Ymd', filemtime( get_stylesheet_directory() . '/style-links.css' )); ?>" type="text/css" media="screen">
	<link rel="shortcut icon" type="image/x-icon" href="<?php get_site_icon_url($size = 16); ?>">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<?php wp_head(); ?>
</head>
<body>
	<div class="content">
	<?php get_template_part( 'page-meta' ); ?>
	<?php
		if ( have_posts() ) : while ( have_posts() ) : the_post();
		the_content();
		endwhile;
		else :
	endif;?>
	</div>
<script src="https://kit.fontawesome.com/YOURCODE.js" crossorigin="anonymous"></script>
<?php wp_footer(); ?>
</body>
</html>

If you choose not to use Google Fonts, remove <link rel="preconnect" href="https://fonts.gstatic.com">.

<?php get_site_icon_url($size = 16); ?> references the Site Icon, which you can set via Customize > Site Identity > Site Icon.

Customize menu and Customizing Site Identity

Additionally, replace YOURCODE for FontAwesome to make use of the social icons shortcode (#3).

<script src="https://kit.fontawesome.com/YOURCODE.js" crossorigin="anonymous"></script>

This is loaded in the footer to decrease load time.

2. CSS

If you added the template as-is, without the style file, it would display on a plain, white page with browser default font display settings. Er, there’d be an error since you reference the style.css file, but the point is that themes and templates aren’t anything without styling.

In the page template file, the CSS file name referenced is style-links.css. Edit as desired and drop into theme directory.

If you want your bio link page to resemble the premium styles on third-party websites like LinkTr.ee, consider layering backgrounds with CSS.

Selectors

To add your own styles straight from the start, the selectors are as followed:

html{}
body{}
.content{}
img{}
p{}
ul{}
li{}

A greyscale CSS base

*{
	box-sizing:border-box;
	padding:0;
	margin:0
}
html{
 	height:100%;
 	overflow-y:scroll
}
body{
 	display:grid;
 	place-items:center;
 	height:90%;
 	text-align:center
}
.content{
 	margin:.5rem auto;
 	width:95%;
 	max-width:37.5rem
}
p{
 	color:#333;
 	margin:.5rem auto;
 	text-align:center;
 	width:100%;
 	max-width:37rem
}
a{
 	text-decoration:none;
 	transition:.3s
}
a:hover{
 	transition:.3s
}
img{
    border:.25rem solid #550055;
    border-radius:8.25rem;
    box-sizing:border-box;
    margin-top:1.4rem;
    max-width:9.375rem
}
ul{
    list-style-type:none;
    margin:2rem auto;
    width:100%;
}
li{
    margin:.5rem 0;
}
li a{
    background:#333;
    border:.025rem solid #aaa;
    border-radius:.5rem;
    box-sizing:border-box;
    color:#e5e5e5;
    display:block;
    padding:.5rem;
}
li a:hover{
    background:#aaa;
    color:#333;
}
li a:focus{
    border:.025rem dashed #ddd;
}

3. FontAwesome icon shortcode

FontAwesome can’t be coded into WordPress posts as-is. I don’t use the Gutenberg Block Editor, so I can’t say for-sure that there isn’t a way that route.

My workaround was creating a shortcode. I use my personal custom plugin of snippets for this, but you can also add it to the functions.php file in your theme.

PHP

// Shortcode: FontAwesome
function fontawesome_fab_shortcode( $atts ) {
	// Attributes
	$atts = shortcode_atts(
		array(
			'class' => '',
		),
		$atts,
		'class'
	);
	// Return fontawesome icon
	return '';
}
add_shortcode( 'fab', 'fontawesome_fab_shortcode' );

CSS

I use a fade transition, from a CodePen, so other items fade when one item is hovered.

/* fade transition sauce: https://codepen.io/shshaw/pen/wWQZEB */
.social-icons{
	padding:10px 0;
	width:50%;
	margin:0 auto;
	text-align:center;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-content:center;
	visibility:hidden
}
.social-icons > *{
	visibility:visible;
	transition:opacity 150ms linear 100ms, transform 100ms ease-in-out 100ms
}
.social-icons:hover > *{
	opacity: 0.4; transform: scale(0.9)
}
.social-icons > *:hover{
	opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms
}
.fab{
	color:#fff;
}
.fab:hover,
.fas:hover{
	color:rgb(212,44,0)
}

Usage

In order to get the FontAwesome icons to display, use [fab class="class here"], e.g. [fab class="fab fa-instagram"].

To link them to the respective social channel, highlight the shortcode and link as if it’s basic anchor text.

And there you have it! If you enjoyed this tutorial, you might enjoy my interactive color palette tutorial — great anyone who shares color schemes, whether they’re a graphic designer or home decorator.~

Another fun CSS tutorial is layering backgrounds — I created a textured background using two transparent image patterns and a CSS gradient.

Love this post?

Support me by subscribing to my blog and/or buying me a cuppa:

Leave a comment

Comments on this post