Does anyone know how I would automatically add <div class="table-responsive"> before every instance of a <table> on a WordPress site using filter referencing? I would also need to add a </div> to every instance of </table> as well.
Add a comment
|
3 Answers
You can filter the_content and use preg_replace() to look for instances of <table></table> and then surround them with your <div>.
add_action( 'the_content', 'wpse_260756_the_content', 10, 1 );
function wpse_260756_the_content( $content ) {
$pattern = "/<table(.*?)>(.*?)<\/table>/i";
$replacement = '<div class="table-responsive"><table$1>$2</table></div>';
return preg_replace( $pattern, $replacement, $content );
}
answered Mar 20, 2017 at 20:30
-
I tried adding this code to my functions.php file, but it doesn't seem to have any effect. Commented Mar 20, 2017 at 20:40
-
Is the
<table>part of the page, post, or custom post type? If it's not, thenthe_contentfilter won't work. If you're using a shortcode to display the table, then you may need to change the priority (10) to a higher number link 9999. Commented Mar 20, 2017 at 20:45 -
The
<table>elements are on various pages, and are not using any shortcodes. Commented Mar 20, 2017 at 21:06 -
-
Yes that is how the tables are being added. The reason I need this to work is because I have users that are not tech savvy who just need to be able to use the table generator and have it work correctly on mobile devices automatically. Commented Mar 20, 2017 at 21:47
Will this work for you? Make sure to enable jQuery before execute it.
<?php add_action( 'wp_footer', 'add_js_to_wp_footer' );
function add_js_to_wp_footer(){ ?>
<script type="text/javascript">
$(function() {
$('table').wrap('<div class="table-responsive"></div>');
})
</script>
<?php } ?>
-
This is working but the JQuery should be in this format: jQuery(document).ready( function($){ $('table').wrap('<div class="table-responsive"></div>'); });– zodCommented Nov 14, 2020 at 14:39
-
@zod Why is that? Using
jQueryinstead of$is often not necessary and various versions, including yours, of.ready()has been deprecated since 2016. The syntax used in the answer is the preferred syntax. Commented Jun 10, 2022 at 16:01 -
@hungerstar Because he is adding loose javascript code in the footer, and in WordPress you must use jQuery instead of $ to avoid initialization errors. Eventually you don't work with WordPress, I do, and I know to always wrap jQuery scripts like that, else you get errors in console, and this apply even today.– zodCommented Jun 12, 2022 at 9:12
I'm assuming you want this type of behavior to set a horizontal scroll onto the table.
If that was the case then here's what you can do.
<div class="w-[200px] overflow-hidden">
<!--
# Hack: Apply styles directly on the table.
.table {
display: block;
overflow: auto;
}
-->
<table class="table">
<tbody>
<tr>
<td>+xx xxxxxxxxxx</td>
<td>+xx xxxxxxxxxx</td>
<td>+xx xxxxxxxxxx</td>
</tr>
</tbody>
</table>
</div>
-
That might work for adding the styles but I think OP also wants to automatically add the containing divs.– RupCommented Mar 8, 2023 at 9:11