WordPress Colorbox Plugin

Last updated on by admin

special SiteGround WordPress hostingspecial Bluehost WordPress hosting

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.

Colorbox is a jQuery lightbox script developed by Jack Moore. This plugin makes this customizable and lightweight lightbox script available for WordPress.

Colorbox Plugin Summary

Plugin Name: WordPress Colorbox Lightbox
Compatibility: WordPress 4.6
Version: 1.0.9
Description: A free WordPress plugin for viewing image, video (YouTube, Vimeo), page, inline HTML, custom content in lightbox. Add jQuery Colorbox lightbox effect to your WordPress site.
Icon of WordPress Colorbox Lightbox
Price: 0 USD
Availability: instock
Rating: 4.0 out of 15 votes

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"]

Alternate Text for an Image

If you have a thumbnail image as the hyperlink, you might also want to specify an alternate text for it using the alt parameter. This is very useful for SEO. For example:

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

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 like WP Colorbox please leave it a rating. A huge thanks in advance!
Users who like Colorbox also like Lightbox Ultimate plugin.

190 thoughts on “WordPress Colorbox Plugin”

  1. 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 ?

  2. 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

  3. 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 😉

  4. 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. 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. 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

  5. Hello,

    a perfect plugin for my site. Is it possible to use a shortcode to show a picture and not the link text but open the popup with th external url.

    I found nothing about this.

    1. @Joachim, It’s possible. You just need to specify your thumbnail image URL in the hyperlink parameter. Check the Using Thumbnail as Hyperlink section for details.

  6. Hi! I’m trying to use this plugin on a website but can’t seem to get it to work. What the client needs is to have an image that you click that opens up a lightbox window where custom HTML can be displayed. It looks like your Inline HTML in Lightbox would be what I need, except instead of a text link we need the visitor to click on an image to open the lightbox for more info.

    But when I tried to use your code for the Inline HTML in Lightbox, and just change the code so that there’s an image instead of a text link, it wouldn’t open when I clicked it. So then I followed your exact Inline HTML in Lightbox instructions, to test the text link option instead of using an image, but even the text link won’t open to custom HTML in a lightbox. The lightbox won’t open at all. What am I doing wrong and how can I get it to work?

    This was the code I tried first, to see if I could use an image to click, to open a custom HTML lightbox:

    [wp_colorbox_media url="#test" type="inline" hyperlink="http://www.mxcreativeradio.com/wp-content/uploads/2015/12/mx_creative_final-02-302x100.png"]

    My custom HTML content goes hereTEST TEST TEST

    And this was the code I tried second, to see if I could at least get a text link to work:

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

    My custom HTML content goes hereTEST TEST TEST

    Thanks for your help!

      1. Thanks for the super fast reply!

        The site we’re working on is in maintenance mode while the new site is being built, so I can’t link to that page or you’ll get a “coming soon” screen instead of the actual page where we’re trying to get the plugin to work.

        Let me see if I can re-create it on a test site and send you a link to that. Stay tuned!

        1. @Sherry, It seems the link is not being able to target the div. Even without the plugin it should at least go to the div. So the page URL should change to this:


          Have you tried switching to a default WordPress theme temporarily (e.g. Twenty 16 or 15)? Do you have any plugin installed that might be causing this issue?

  7. Hello, possibly my previous question was overlooked 🙂 Is there a way to reduce the size of the lightbox/popup when opening an external page?

    1. I’m interested in almost the same thing. I have an external page that loads inside the colorbox, that I would like the height to adjust according to the content. The page that it loads is a dynamic page that the height can change, but width will always be the same. Any detail on how this is possible to be appreciated.

  8. How do I switch these?

    My current colorbox is example5, i want it to be example3?

    1. @shubhamgmath, Open the main plugin file (wp-content/plugins/wp-colorbox/main.php) and search for the following line of code,

      wp_register_style('colorbox', WP_COLORBOX_URL.'/example5/colorbox.css');

      Now change the name of the folder from “example5” to “example3”. For example:

      wp_register_style('colorbox', WP_COLORBOX_URL.'/example3/colorbox.css');

  9. Hi,

    I am posting this short code: [wp_colorbox_media url="http://s28.postimg.org/m8f1m5svx/MAPFINAL.png" type="image" hyperlink="11 states"]

    but it shows up as the entire code on my site for customers to see, whereas I only want 11 states to show up.

  10. After reading through the comments, I see that a couple of others have asked if this can be made to automatically popup on page load, but I don’t see an answer. I looked over the code to see if I can tweak it to do that, but I’m not so great with jquery. Could you offer a hint as to where or how one might modify the code, just to give me a head start? Any suggestion would be much appreciated.

  11. I’m loving the plugin.

    I was wondering if I could place a link within my menu of the page.

    For example, if a link had “Submit a Reservation”… instead of going to the reservation page, then clicking on the link to open the iframe popup link [wp_colorbox_media url="https://www.mydomain.com/secured/reservation/" type="iframe" hyperlink="click here to open external page"] , that it would simply just have the IFrame popup load directly after clicking on the menu bar.

    I hope that makes sense.
    Simply trying to place an Iframe pop up in menu structure.

    Thank you,

      1. @Chris, Please try this tweak and see how it goes.

        1) Go to Appearance->Menus->Edit Menus->Custom Links.
        2) In the “URL” field enter your page URL. In the “Link Text” field enter your hyperlink text. Now click “Add to Menu”.
        3) At the top of the page there is a “Screen Options”. Click on it and enable “Link Relationship (XFN)” (This property should now appear in the menu).
        4) Edit the newly added link. In the “Link Relationship (XFN)” field enter wp-colorbox-iframe
        5) Save the menu

  12. Hi, Is it possible to have a hover image open an iframe? I can make the image open it but I’d like the image to darken upon hover so the user can see it’s a button. Here’s what I have currently:

    [wp_colorbox_media url="http://google.com/" type="iframe" hyperlink="http://simcave.iconic.marketing/wp-content/uploads/2016/01/Party-Ideas-1-copy.jpg"]

    Also, I’d like to open a Pinterest feed in the iframe but it doesn’t pull. Do you know why that would be?


  13. Hi, I think this is exactly what I need for my page but I’m running into a small snag.

    If you look at http://www.brownelltravel.com/cruise-chronicles/crystal-cruises/ you’ll see that I used WP Colorbox under Recommended Voyages for Helsinki Highlights. It works perfectly the first time I click but anytime after that it just displays a small box with no copy inside.

    Any insight?

    1. @Brandi, There is a JavaScript error coming from your theme: http://www.brownelltravel.com/wp-content/themes/dataperk/js.js

      Uncaught TypeError: Cannot read property 'id' of null

  14. Hi there – I love the plugin, but for some reason the X that one clicks on to close the image file I am popping up moves from the bottom right of the image to the top right when you click on it to close the popup, then when you click on the X in the upper right corner it actually does close the popup.

    I am wondering if you could supply me a bit of code to hide the X completely, and the thick grey bar below it do that they do not show up. As long as one can still click into the dark area around the image to close it, that would work fine for me.

    This is the code I am trying to use (I have my own link in the version I am using, of course):

    [wp_colorbox_media url="http://example.com/wp-content/uploads/images/overlay.jpg" type="image" hyperlink="VIEW A SAMPLE IMAGE"]

    Any help would be most appreciated.

    1. Hi there – I forgot to mention – I am using Beaver Builder. You can see the site at the following link temporarily:


      If you go to the STATIONERY page, you will see some sliders with links that read: VIEW A SAMPLE IMAGE.

      I am using your plugin to make those links show a sample of what the customer will be ordering.

      You should be able to see the issue I am talking about when you try to close the image by clicking on the X.

      Could really use some help hiding the grey bar and the X, or alternatively, fixing the X so it works right. Either works for me, but whichever is easiest for you, if you are willing to help. 🙂

  15. Hello again – I could really use some help on that pesky X closer issue. Again, I appreciate any help you can give me on the matter.

    1. @Dave, Try this piece of CSS code with this custom CSS plugin: https://wordpress.org/plugins/simple-custom-css/
      display: none !important;

      I didn’t really write the colorbox library. So I’m not sure if this will work.

      1. Works like a charm – I used a different CSS plugin that I prefer that comes up in a search for CSS DUo Leaf. It lets you create CSS additions as individual elements that you can toggle on and off as required.

        Thank you soooooo much for getting back to me and helping me with my issue!

  16. Hello,

    I’m using the popup to show a contactform7 with a image-link, and works perfectly, with this code:
    [wp_colorbox_media url=".the_content" type="inline" hyperlink="http://my-web/uploads/staff.png"]

    [contact-form-7 id="5602" title="Test Staff contactform"]

    But now i’m trying to put this code in the header.php with a image fixed, and it’s not working, it’s printing the shortcode [wp_colorbox…] directly in text.
    Any suggestion to do it?

      1. I solved it by myself adding this code when it’s opened and closed

        //colorbox .start
        $("body").css("overflow", "hidden");
        //colorbox .end
        $("body").css("overflow", "auto");

  17. This plugin seems awesome i just have one difficulty though. I need the iframe to pop up on pageload. Is there a way to o this without linking to an href and having to click on the link to open it. Also i d like to make the whole page close and returnt o the previous page when the lighbox modal is closed. Are these two things possible ? if so how?

  18. Hi there
    Thank you for the nice Plugin, it works fine and I am happy with it. One thing causes me some difficulties: when I open the lightbox on the iPhone it fills the whole screen, because I use much text. When I try to close the lightbox with the close-button on the bottom of the screen, I can’t do it because the footer-navigationbar of Safari appears an covers the close-button area. So it is not possible to close the lightbox, I have to relaod the page to get back.
    Is there a solution for this – maybe with a padding for the x-button oder placing it on top ot the lightbox?
    Thanks a lot and kind regards

  19. Hi!
    First things first. I Really love your plugin!
    I got a little issue, I’m using your plugin and have a button setup to pop-up a html text page.

    The content already is in the page and when you press the button pop-up nicely with the html text in it.
    This works fine with desktop and laptops but not on my mobile device such as my iPhone.

    The code that I’m using is:

    [wp_colorbox_media url="#inline_content" type="inline" hyperlink="MEER PRODUCT INFO" class="x-btn moreinfo"]

    blablabla html content
    Hope you can help.
    Thank you!

    Kind regards,


          1. @martino, The button link doesn’t seem to work on smaller devices. It just scroll upwards. There is no error in the console either. All I see is this warning:

            Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

            What happens if you temporarily switch to a default WordPress theme (e.g. Twenty 16, 15 or 14)?

          2. Thank you for your response.
            I tested it and it works fine.

            I’m using Theme X. Maybe Visual Composer doesn’t let me activate the action.
            Any ideas how to fix it?

          3. @martino, It’s a theme issue then. I’m not really sure how it can be fixed. All the necessary scripts and the JavaScript codes there (even on smaller devices). May be the theme is including some additional scripts on smaller devices that are causing this conflict.

          4. No problem.
            I’ll try and find a way and when I do. I’ll let you know 😉
            Thanks again for the support!


    1. @MIKE, I think the plugin is not being able to determine the top coordinates of the page on this theme. Do you see the same issue if you temporarily switch to a default WordPress theme (e.g. Twenty 16 or 15)?

  20. hey this is awesome but I did not see any way to make it work with soundcloud, I messed around using the you tube formula and the soundcloud api/link found inside the embed code, it works awesome over and over but at times it lags a whole bunch. could you guide me to what could be done or how the shortcode should be written to work. Once again awesome plugin, thanks in advance for any guidance you can throw my way to perfect the soundcloud approach.

    1. @David, How are you trying to integrate this with soundcloud? There is no direct integration option with soundcloud at the moment. So you will need to manually insert the embed code into an inline div and pop up in lightbox.

      Please check the “Inline HTML in Lightbox” section for details.

Leave a Reply

Your email address will not be published. Required fields are marked *