Linking a classic feature box

Hi support. I need to add a link on the icon and the title of the classic feature box displayed here

I have added the link manually in the title field

I have tried this code taken fron another thread:

jQuery(function($) {
  $('.x-feature-box-text a:last-child').each(function() {
    $(this).closest('.x-feature-box').find('.x-feature-box-graphic-inner').wrap('<a href="' + $(this).attr('href') + '"></a>');

With this code the icon become linked but the title desapear.

Hello @philippe,

Thanks for writing in!

To add a link to the featured boxes, please check out this thread:

Hope this helps.

Hi @RueNel. Do I need a unique ID for each feature box?

Hey @philippe,

Yes that would be the most appropriate.
Simply follow the instruction so that the code snippet will work.

Please let us know how it goes.

Make sure you add your link to the snippet itself.

Where do I have to add the link please?

Hi @philippe,

If you’re following the snippet then you only need to add the link in the Href field of the classic feature box (see screenshot)

Then replace your JS code with the following one:

jQuery ( function( $ ) {
  $('#linked-feature-box .x-feature-box-text a:last-child').each( function() {
    $( this ).parents().find('.x-feature-box').wrapInner( '<a href="' + $( this ).attr('href') + '"></a>' );
    $( this ).remove();

If you’re not using unique ID’s then you can write a generic code for all feature boxes:

jQuery ( function( $ ) {
  $('.x-feature-box .x-feature-box-text a:last-child').each( function() {
    $( this ).parents().find('.x-feature-box').wrapInner( '<a href="' + $( this ).attr('href') + '"></a>' );
    $( this ).remove();

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

Hi @Nabeel. I have used the generic code and it has solved my problem. Thank you!

We’re glad we could help.


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.