Git Product home page Git Product logo

wordpress-blocklink-shortcode's Introduction

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.

wordpress-blocklink-shortcode's People

Contributors

ryannutt avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.