ESV Cross-Reference Tool

The ESV Cross-Reference Tool is a free resource created to make it easy to feature the text of the ESV Bible on your blog, personal website, or church website.

Designed for easy installation on virtually any blog or website, the ESV Cross-Reference Tool scans each page for all Bible references, automatically turning each reference into a link. When visitors to your blog or website move their cursors over the linked reference, a pop-up box will appear displaying the full ESV Bible text to which the reference refers.

What’s more, the ESV Cross-Reference Tool is intelligent enough to identify multiple variations of Bible references, including:

Full references (e.g., John 3:16)
Abbreviated references (e.g., Jn 3:16)
Multiple, sequential verses (e.g., Ephesians 1:3-14)
Multiple, non-sequential verses (e.g., Psalm 118:1, 5, 8)

In addition to making it easy for readers to read the full text of every passage mentioned on the page, this pop-up box also features quick sharing buttons as well as the ability to listen to an audio version of the passage—all without leaving your blog or website.

Examples

Hover your cursor over the linked references below to see the ESV Cross-Reference Tool in action.

John 3:14, 16; Ex 24:9
Matthew 18:19–20
Colossians 3:4-12, 18-19
Psalm 23

Installation

WordPress Sites

To install the ESV Cross-Reference Tool on a WordPress site, simply install the ESVCrossRef plugin for WordPress.

Non-WordPress Sites

To install the ESV Cross-Reference Tool on a non-WordPress site, simply copy the code below and place it at the end of the <body> element of your HTML document:

<script src="https://static.esvmedia.org/crossref/crossref.min.js" type="text/javascript"></script>

Advanced Options

Link Styling

To style the linked references, you can use CSS to declare a color on any <a> elements with the esv-crossref-link class. Copy the example code below and place it inside of a <style> element inside of the <head> element of your HTML document. You may also place it inside of an external stylesheet. Make sure to note the !important directive:

a.esv-crossref-link {
  color: #72abbf !important;
}

Pop-up Box Styling

To style the pop-up box, you can use JavaScript to declare on window a set of values for a number of available options called ESV_CROSSREF_OPTIONS. Copy the example code below and place it before the linked ESV Cross-Reference Tool script at the end of the <body> element of your HTML document. Any unneeded options can be omitted:

<script type="text/javascript">
  window.ESV_CROSSREF_OPTIONS = {
    border_color: 'CCCCCC',
    border_radius: 10,
    header_font_color: '000000',
    body_font_color: '000000',
    footer_font_color: 'CCCCCC',
    header_background_color: 'F0F0F0',
    body_background_color: 'F0F0F0',
    footer_background_color: 'F0F0F0',
    header_font_size: 16,
    body_font_size: 14,
    footer_font_size: 14,
    header_font_family: 'Arial',
    body_font_family: 'Times',
    footer_font_family: 'Times'
  };
</script>

The accepted values for the options above are:

*_color options: six-character hex-string without the leading hash
*_size options: integer representing a font size in pixels
*_font_family options: string representing a single font-family value

Invalid keys and values will be ignored.

Ignored Elements

The ESV Cross-Reference Tool will not transform references found in the following elements:

Headers (<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>)
Anchors (<a>)

To ignore additional individual elements, add the esv-crossref-ignore class to the element in your code.

Manually Triggering Linking of References

Linking of references is triggered by the window.load event, but you can also trigger it manually by dispatching the esv-crossref.trigger-linkify event on window:

<script type="text/javascript">
  window.dispatchEvent(new Event('esv-crossref.trigger-linkify'));
</script>

This could be especially useful if you are adding content to your page dynamically after the initial page load.

Note that Internet Explorer does not natively support constructing events.

Developer Resources