How To Add Custom Bookmark Links to WordPress

There are plenty of plugins available for WordPress that quickly and easily add a range of social links to the bottom of your blog posts. These are great if you don’t mind sticking with the original markup and styling that comes with the plugin, but if you’re building your own theme you might want to play close attention to the details and create your own custom set of bookmarking links. Let’s take a look at how we can write our own XHTML markup into our theme file, add the functionality to posts the URL and title of the article and style up the links exactly how we’d like.

For this example, we’ll create this nice, clean bookmarking links layout complete with the visual cue in the form of an icon and reinforce text link. All laid out in the horizontal format to run right across the bottom of a blog post.

The HTML Markup

Start by opening the single.php file from your theme, navigate down to an area after the post content where you would like your custom set of links to appear.
The collection of links would be most suited to being displayed in an HTML unordered list, jot out the markup like so:

This all looks well and good, but there’s one problem; our site no longer validates! This is because of the special characters used in the URL, as well as spaces being left in the URL from the title tag. Luckily there’s some quick and simple work around.
Firstly, swap out any ampersands with the following entity:

The Styling

Firstly, download the awesome icons from IconsPedia for use in our bookmarks list. Arrange them into a new document to form a CSS sprite, reducing our five requests down into one single file. Save the file as a PNG.

This is really cool. May I ask a slightly related question? How do you create the wider ‘footer’ area of each post? You have three boxes which includes your profile, social bookmarking and similar posts.

Subscribe for email updates

About Line25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs. Be the first to see new posts by subscribing by RSS, have new content delivered by Email, or join Line25 on Twitter.