WordPress Colorbox Plugin

WP Colorbox plugin enables lightbox functionality on your WordPress blog using Colorbox. It allows you to pop up image, YouTube video, Vimeo video, external page, custom inline content beautifully.

WordPress Colorbox Plugin Installation

  • Login to your WordPress admin dashboard
  • Go to Plugins->Add New
  • Enter WP Colorbox in the search box
  • Once you find the plugin hit the install button

Option 2

  • Download the zip version of the plugin
  • Go to Plugins->Add New and switch to the Upload tab
  • Select the zip file on your computer
  • Upload and install it

Option 3

  • Download the zip file and extract it
  • Connect to your website via FTP (you can use a software like Filezilla to transfer files to your server) and browse to the “/wp-content/plugins” folder
  • Select the folder containing the plugin files on your computer and upload it
  • Once all the files have been uploaded to your web server you can activate the plugin from the Plugins menu (WordPress admin dashboard)

WordPress Colorbox Plugin Usage

You can pop up your media file from either a text or image (it’s called hyperlink in the shortcode) by using a shortcode.

Photo/Image in Lightbox

[wp_colorbox_media url="http://example.com/wp-content/uploads/image/lightbox.jpg" type="image" hyperlink="click here to open image"]

screenshot of image in lightbox using WordPress ColorBox plugin

YouTube Video in Lightbox

[wp_colorbox_media url="http://www.youtube.com/embed/nbp3Ra3Yp74" type="youtube" hyperlink="click here to open youtube video"]

screenshot of YouTube video in lightbox using WordPress ColorBox plugin

In order to enable autoplay on a YouTube video you can add “autoplay=1” to the URL.

[wp_colorbox_media url="http://www.youtube.com/embed/nbp3Ra3Yp74?autoplay=1" type="youtube" hyperlink="click here to open youtube video"]

Vimeo Video in Lightbox

[wp_colorbox_media url="http://player.vimeo.com/video/1084537" type="vimeo" hyperlink="click here to open vimeo video"]

screenshot of vimeo video in lightbox using WordPress ColorBox plugin

External Page in Lightbox

[wp_colorbox_media url="http://wikipedia.com" type="iframe" hyperlink="click here to open external page"]

screenshot of external page in lightbox using WordPress ColorBox plugin

Inline HTML in Lightbox

[wp_colorbox_media url="#inline_content" type="inline" hyperlink="click here to open inline HTML"]

Now switch to “Text” editor, create a div (The ID needs to match one specified in the url parameter) and enter your HTML content that you want to pop up in lightbox. For example:

screenshot of inline html in lightbox using WordPress ColorBox plugin

When you click the text link your custom HTML content will pop up in lightbox.

screenshot of custom HTML popup in lightbox using WordPress ColorBox plugin

Using Thumbnail as Hyperlink

To trigger lightbox from a thumbnail image you need to specify your thumbnail image URL in the hyperlink parameter. For example:

[wp_colorbox_media url="http://example.com/wp-content/uploads/image/lightbox.jpg" type="image" hyperlink="http://example.com/wp-content/uploads/image/thumbnail.jpg"]

Showing Title in Lightbox

In order to show a title for your media file you need to specify it in the title parameter. For example:

[wp_colorbox_media url="http://example.com/wp-content/uploads/image/lightbox.jpg" title="overlay image" type="text" hyperlink="click here to open image"]

If you really like the plugin please give it a rating here (I will really appreciate it)
Users who like Colorbox also like Lightbox Ultimate plugin.

132 thoughts on “WordPress Colorbox Plugin

  1. Hello, this plugin is great … so first of all i want to thank you. But i have a little problem on mobile devices. I used your plugin within wordpress and on desktop screen everthing works fine. But if I open the colorbox on a mobile device, the colorbox floats left and is too small. My website is not responsive, so i think it has something to do with that. Any help would be appreciated. thanks in advance.

      1. oh, i was wondering why i cant post anything …
        I found a solution that works for me.
        If anyone else runs into the same problem, i changed to in the header.php file

      2. that was fast :)
        [wp_colorbox_media url=”#fenstertype-popup-1fluegel” type=”inline” hyperlink = “”]
        wildundkienle.de/fensterkonfigurator –> go to “Anzahl Flügel und Bauform bestimmen” and then click
        to the images

  2. Hello there, I don’t get any text in my colorbox…is working fine. There is a pop-up… on the page with title and all.. BUT NO TEXT?!

    I made a page and in the text editor instead of visual I put: texting aa a ikaiksadsak iasao

    No effects? Would love to get this thing working ;)

  3. Hello. I wanted to ask you a question . It would be possible to use your plugin to open on lightbox a map of google ?

    Thanks for reading me

  4. Others have left a similar issue to what I am seeing, but I don’t see a solution in the comments. I have linked to a YouTube video, and when the colorbox window pulls up you very briefly see a loading icon, then nothing but white; it’s almost like the video is blocked or not found.

    The code is added as:
    [wp_colorbox_media url=”https://youtu.be/6_yeUa2M9rI” type=”youtube” hyperlink=”http://www.clientrunner.net/wp-content/uploads/2015/08/Thumbnail-Reets-Drying-Academy.png”]

    What could be causing this?
    See the three images below my rotating header at: http://www.clientrunner.net/?page_id=2984&preview=true

      1. wpguide, I apologize for the code/video changes. You were right that they were all YouTube videos as I had to make changes for approval purposes on my end (I didn’t want to wait an entire day for a response before moving forward).

        I do need to figure out why YouTube videos do not play in the window when using Colorbox. I have updated the page to display the middle video using the colorbox (image as the hyperlink rather than a YouTube video in an iframe).
        The code for the middle image is:

        [imageframe lightbox="no" lightbox_image="" style_type="bottomshadow" bordercolor="" bordersize="0px" borderradius="0" stylecolor="" align="none" link="" linktarget="_self" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""][wp_colorbox_media url="https://www.youtube.com/watch?v=YOyrL6kfGB0" type="youtube" hyperlink="http://www.clientrunner.net/wp-content/uploads/2015/08/Thumbnail-Phoenix-Restoration.png"][/imageframe]

        I have wrapped the wp_colorbox within a supported theme element, which shouldn’t impact functionality at all. You can see that I hav elinked the media url to my YouTube video, but my hperlink is a hosted image on WordPress. When previewing the page at http://www.clientrunner.net/home-testimonials-sample/, you see the image (middle), but when the colorbox opens it spins momentarily as if loading and then display blank white.

        My guess is that colorbox is not connecting to the YouTube url properly. I have tried the browser url when the video is open and playing (https://www.youtube.com/watch?v=YOyrL6kfGB0) as well as the ‘share’ url (https://youtu.be/YOyrL6kfGB0), both of which have the same unintended result. Is this an issue with the url?


    1. Try this link for Youtube

      and if you want to autoplay just put this behind ?autoplay=1

      So your snip looks like this:
      [wp_colorbox_media url="http://www.youtube.com/embed/YOyrL6kfGB0?autoplay=1" type="youtube" hyperlink="http://www.clientrunner.net/wp-content/uploads/2015/08/Thumbnail-Reets-Drying-Academy.png"]

      But for me i have the Problem that if i klick the link the Video shows up in the box but it still obens in a new tab as well. No idea why. Thats the reason i used this Code:

      [wp_colorbox_media url="#open_youtube_001" type="inline" hyperlink="click here to open inline HTML"]

      But in this case i cant use the autoplay funktion because this iframe is still hide in the background untill you klick the Colorbox link.

      Any Solove for my Problem ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s