How to Replace URLs with Buttons in wpDataTables Plugin in WordPress? – PHP – SitePoint Forums

Hey everyone!

I’m working with the wpDataTables plugin on a WordPress site and trying to replace URLs with buttons in one of my tables. Specifically, I have columns that contain Instagram and YouTube links, and I want these to appear as “Open” buttons that, when clicked, open the link in a new tab.

I added the following function to my functions.php file to try and replace the links with buttons:

add_action('wp_footer', 'custom_wpdatatables_modifications', 100);

function custom_wpdatatables_modifications() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Select all tables within the wrapper (adjust wrapper class if necessary)
            $('.table_1_wrapper').each(function() {
                // Within each table, find Instagram and YouTube links and modify them
                $(this).find('td.column-instagram a, td.column-youtube a').each(function() {
                    var link = $(this).attr('href'); // Get the URL
                    var platform = $(this).closest('td').hasClass('column-instagram') ? 'Instagram' : 'YouTube';

                    // Replace the existing link with a button link
                    $(this).replaceWith('<a href="' + link + '" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Open ' + platform + '</a>');
                });
            });
        });
    </script>
    <?php
}

After deploying this code, the links still appear as plain URLs in the table.

Why are the URLs not being replaced by buttons, and how can I ensure the links are properly replaced by the buttons? Is there a better approach for modifying the content of the table rows generated by wpDataTables?

Thank you very much for any help!

(I reviewed the documentation of the wpDataTables plugin and found that there is an option to display links as buttons. However, when I enable this feature and export the table, the exported file shows the button label (e.g., “Open”) instead of the actual URL. I want the buttons to be displayed in the table but retain the correct link format in exports. To solve this, I tried replacing the links with custom buttons using JavaScript, but it hasn’t worked as expected.)

To replace URLs with clickable buttons in the wpDataTables plugin, you can use HTML and custom CSS. Here’s a step-by-step guide:

Steps to Replace URLs with Buttons in wpDataTables

1. Edit Your Table Data:

2. Add Custom CSS for Button Styling:

3. Preview and Test:

• Open the page where your table is embedded to ensure the URLs now appear as styled buttons.

Thank you so much for your response!

The only issue I’m facing is that the table contains well over a million links, so manually rewriting each one would be quite a challenge.