WordPress shortcode for displaying bookmarks alongside their own favicons

show-bookmarks.js

$("#container a").each(function() {
	$(this).css({
		background: "url(//www.google.com/s2/favicons?domain=" + getDomain(this.href) +
		") left center no-repeat",
		"padding-left": "20px"
	});
});

function getDomain(url) {
	return url.match(/:\/\/(.[^/]+)/)[1];
}

show-bookmarks.md

INSTRUCTIONS

What Is This, Anyway?

This is a simple PHP snippet that you can put in your WordPress theme's functions.php file to create a shortcode for displaying all of the bookmarks you've created on that site. The shortcode accepts two optional inputs from the user. The first option is orderby and can be assigned to any value that can be assigned to 'orderby' in the $args array accepted by get_bookmarks(). The second option is order and is used similarly.

The bookmarks will:

• contain links to the appropriate URL
• be wrapped in a div (but you can change that)
• be shown alongside the favicon of the site you're linking to (or just a generic globe image, if it has none) if you include the JavaScript

How To Use It

For the basic functionality (displaying bookmarks without favicons), simply

1. Copy the code in show-bookmarks.php starting with line 4 and add it to the end of your theme's functions.php file.
2. You'll probably want to change myprefix to something more appropriate to your project.
3. If desired, edit the file to change <div> and </div> to whatever HTML tags you prefer.
4. Save your work.
5. In a post or text widget, simply type [show-bookmarks] anywhere you would like to insert bookmarks.
6. Optionally, include key-value pairs for orderby or order (or both) if the default settings of orderby=name and order=ASC are not what you want. Possible values for order are "ASC" and "DESC". Possible values for orderby are listed in the WordPress Function Reference.

If you want to display the favicons alongside each bookmark, incorporate the code in show-bookmarks.js via wp_enqueue_scripts() or by dropping it into a <script> tag near the end of the body tag. Please note the dependence on jQuery.

The only other action needed is to edit the code so that the jQuery selector is changed from #container a to a selector that targets your container element.

Acknowledgment

Props to Chris Coyier (founder of CodePen) who published the original Javascript in a JS Fiddle. I won't bother linking to it since it is now out of date due to a change in the API.

show-bookmarks.php

<?php

// INSERT THIS INTO FUNCTIONS.PHP:
function myprefix_show_bookmarks($atts, $content = null) {
	$postHTML = "";
	$orderby_options = array('length', 'link_id', 'name', 'owner', 'rand', 'rating', 'url', 'visible');
	$a = shortcode_atts( array(
		'orderby' => 'name',
		'order' => 'ASC'
	), $atts );

	extract($a);
	$orderby = ( in_array($orderby, $orderby_options) )? $orderby : 'name';
	$order = ($order === 'DESC')? 'DESC' : 'ASC' ;
	$linkArr = get_bookmarks( array('orderby' => $orderby, 'order' => $order) );
	foreach ($linkArr as $link) {
		$postHTML .= '<div><a class="' . $link->link_category . '" href="' . $link->link_url . '" title="' . $link->description . '">' . $link->link_name . '</a></div>';
	}
	return $postHTML;
}

add_shortcode('show_bookmarks', 'myprefix_show_bookmarks');