Public Ticket #3509960
Adding Hyperlink to Caption


  • Alex started the conversation


    How do I add a hyperlink to an image caption? I have a photo series where every image will have a caption linking to a news article.



  •  291
    Paul replied

    Hi Alex!

    If you're talking about the images on your homepage, those are portfolio category images. By default, clicking on one of these images should redirect users to a page displaying all portfolio items within that category.

    However, when I tried clicking on a category on your site, I encountered a '404 Not Found' error. To resolve this, please navigate to 'Settings > Permalinks' in your WordPress dashboard and click the 'Save' button. This usually fixes the issue. (Also, make sure that the category in question actually contains portfolio items.)

    Let me know if this resolves your issue!


  • Alex replied

    Thanks for your response! However, I was not referring to my homepage. I was referring to images within a page. I'd like to add a hyperlink to the caption of certain images within a portfolio page. See screenshot

    Attached files:  Screenshot 2023-11-01 at 8.40.47 AM.png

  •  291
    Paul replied

    Unfortunately, by default, the theme strips out HTML tags from caption text, so adding hyperlinks directly to captions won't work.

    To enable HTML in captions, you'll need to customize the theme. Here's how you can do it:

    1. First, set up a child theme for safe customization. For detailed instructions on creating a child theme, visit: https://uxbarn.ticksy.com/article/8649/ 

    2. In the parent theme's folder, go to "includes/plugin-codes/custom-uxbarn-portfolio.php" and open the file.

    3. Look for the following function:

    function finnik_print_portfolio_image_format_content_loop( $image_id ) {

    4. Copy the entire function and paste it into the "functions.php" file of your child theme.

    5. Within this function in your child theme's "functions.php", find the following lines:

    if ( ! empty( $caption ) ) {
       echo '<div class="image-caption">' . esc_html( $caption ) . '</div>';

    Change these lines to:

    if ( ! empty( $caption ) ) {
       echo '<div class="image-caption">' . $caption . '</div>';

    6. Save the changes.

    Now, HTML tags included in your image captions will be rendered on the front-end. For instance, entering the following as a caption:

    This is <a href="https://yourwebsite.com">our wedding.</a>

    will display "our wedding" as a clickable hyperlink.

    I hope this solution meets your needs!