How to Replace URLs with Buttons in wpDataTables Plugin in WordPress?

PHP
,
1

Hey everyone!:slight_smile:

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!:slight_smile:

(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.)

2

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:

  • Go to wpDataTables in your WordPress dashboard and select the table where you want to replace the URLs.
  • In the cells where you have URLs, change each URL to HTML code like:
    <a href="YOUR_URL_HERE" class="btn-table" target="_blank">Download</a>
  • Replace YOUR_URL_HERE with the actual URL. The text “Download” will appear as the button text, but you can change this to whatever you’d like.

2. Add Custom CSS for Button Styling:

  • Go to Appearance > Customize > Additional CSS in your WordPress dashboard.
  • Add the following CSS to style the links as buttons:
    .btn-table {
  display: inline-block;
  padding: 10px 15px;
  background-color: #0073aa;
  color: #ffffff;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
}

.btn-table:hover {
  background-color: #005f8a;
}
  • Save the changes. This CSS will style all links with the class btn-table to look like buttons.

3. Preview and Test:

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

Thank you so much for your response! :blush:

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.

6

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