Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

Block Link Shortcode

I was looking for a nice, easy way to embed internal links on a site without going to just plain text links. Lifehacker does a really good job of internal links, and I modeled this plugin a bit from their style.

What's it do?

With the code from block_link.php added to your theme functions.php you'll get a new shortcode [block_link]. You can use it in 3 different ways.

  • [block_link id=#] will embed the post or page by database ID
  • [block_link slug="permalink"] will embed the post or page by permalink
  • [block_link url="url_to_page"] will embed the post or page by trying to determine by URL. It does need to be a URL on your site.

Assuming that it can figure out what post you're trying to embed it'll kick out the HTML to build the block link.

What's it look like?

Block Link Example

I originally wrote this shortcode snippet for my site CompSci.rocks. You can see a block link in action on the page for a square root curve calculator.

Be sure to look at the SASS file in this repo to see how the link is styled. The actual link is wrapped in quite a few styles, and the included SASS makes it look like the screen shot with some help from flexboxes.

Installation

It didn't seem worthwhile to split this off into a separate plugin, so I just dumped the code from block_link.php in this repo into the functions.php file for my theme. Such a small little snippet just didn't seem to warrant a separate plugin.

To use with your theme just paste the code from block_links.php into your theme functions.php file. If that doesn't make sense to you, there's a pretty good explanation on WordPress.org.

Images, Title and Excerpts

The title comes from the post title that you're linking to.

The subtext is pulled from one of several different places, in this order. It will first look for an excerpt that you've entered for the post. If the execrpt is empty it will look to meta data from the Yoast SEO plugin. First meta description, then the Facebook description and then the Twitter description.

The same thing happens for the image. First choice is the featured image. Then it will look to Yoast Facebook and Twitter images.

Customization

Do whatever you want with the SASS in block_links.scss. What's there is what I'm using on my sites, but you can tweak it however you want.

Why not a plugin?

This was originally going to be a plugin, but since it's pretty likely you're going to want to add the CSS to your theme instead of loading a separate external file just for this little block it made more sense to just toss the code into functions.php instead.

Releases

No releases published

Packages

No packages published