How to customise the WordPress lightbox caption, show web links, link to an email address or a phone number

This tutorial will show you how to customise the CSS style of the title and description of the lightbox created with the plugin Wonder Lightbox. It will also show you how to create web links, link to an email address and a phone number in the caption.

There are 3 sections in this tutorial:

Customise the default CSS style of the lightbox title and description

The lightbox created with Wonder Lightbox can display a title and a description. You can use the title attribute to specify the title text, use data-description attribute to add the description text. For example, the following code will display a title and a description under the YouTube lightbox.

<a href="https://www.youtube.com/watch?v=dw4Riqh8zOY" class="wplightbox" title="You can display a title." data-description="You can also display a description." >YouTube Lightbox with Title and Description</a>

The created demo is as follows: YouTube Lightbox with Title and Description

To change the default CSS style of the title and description, in the WordPress dashboard, left menu, go to Wonder Lightbox -> Lightbox Options, then go to the Text tab. You can define the CSS style when the title and description are placed underneath the lightbox, inside or outside of the lightbox.

lightbox-title-style

Customise the lightbox caption using HTML code

Instead of showing plain text, you can directly use HTML code for the title and description text. By using inline CSS code, you can freely customise the text style.

For example, the following HTML code:

<p style="font-size:14px;"><span style="color:#cc0000;">Wonder Lightbox</span> is the <span style="font-size:20px;font-weight:bold;">BEST</span> WordPress lightbox plugin!</p>

Will create the following text style:

Wonder Lightbox is the BEST WordPress lightbox plugin!

The HTML code needs to be encoded before adding it to the lightbox. You can use the free online tool HTML Entities Encode and Decoder to encode it.

For the above HTML code, the encoded text is as follows:

&lt;p style=&quot;font-size:14px;&quot;&gt;&lt;span style=&quot;color:#cc0000;&quot;&gt;Wonder Lightbox&lt;/span&gt; is the &lt;span style=&quot;font-size:20px;font-weight:bold;&quot;&gt;BEST&lt;/span&gt; WordPress lightbox plugin!&lt;/p&gt;

We can then add the encoded text to the lightbox title or data-description attribute.

<a href="https://www.youtube.com/watch?v=pFaGie0xmbo" class="wplightbox" title="&lt;p style=&quot;font-size:14px;&quot;&gt;&lt;span style=&quot;color:#cc0000;&quot;&gt;Wonder Lightbox&lt;/span&gt; is the &lt;span style=&quot;font-size:20px;font-weight:bold;&quot;&gt;BEST&lt;/span&gt; WordPress lightbox plugin!&lt;/p&gt;">YouTube Lightbox with Title</a>

The created demo is as follows: YouTube Lightbox with Title

By using HTML code, we can display web links, email addresses and phone numbers in the lightbox caption.

The following code will link to a web address:

<a href="https://www.wonderplugin.com/wordpress-lightbox/" target="_blank">Wonder Lightbox</a>

The code target="_blank" will open the web link in a new tab or window. You can remove it if you want to open the link in the current web browser window.

The following code will link to an email address:

<a href="mailto:support@wonderplugin.com">support@wonderplugin.com</a>

The following code will link to a phone number:

<a href="tel:123456789">123 456 789</a>

The following HTML code:

<a href="https://www.wonderplugin.com/wordpress-lightbox/" target="_blank">Wonder Lightbox</a> is the BEST WordPress lightbox plugin! Contact us at <a href="mailto:support@wonderplugin.com">support@wonderplugin.com</a> or <a href="tel:123456789">123 456 789</a> (do not call, fake number).

Will create the text style:

Wonder Lightbox is the BEST WordPress lightbox plugin! Contact us at support@wonderplugin.com or 123 456 789 (do not call, fake number).

To show the text in the lightbox caption, encode it with the free online tool HTML Entities Encode and Decoder, then add it to the title or data-description attribute.

<a href="http://www.youtube.com/watch?v=h_MolNi06ew" class="wplightbox" title="&lt;a href=&quot;https://www.wonderplugin.com/wordpress-lightbox/&quot; target=&quot;_blank&quot;&gt;Wonder Lightbox&lt;/a&gt; is the BEST WordPress lightbox plugin! Contact us at &lt;a href=&quot;mailto:support@wonderplugin.com&quot;&gt;support@wonderplugin.com&lt;/a&gt; or &lt;a href=&quot;tel:123456789&quot;&gt;123 456 789&lt;/a&gt; (do not call, fake number).">Lightbox with a web Link, an email address and a phone number</a>

The created lightbox demo is as follows: Lightbox with a web Link, an email address and a phone number.