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 );
}
-
I tried adding this code to my functions.php file, but it doesn't seem to have any effect.NiamLeeson– NiamLeeson2017-03-20 20:40:56 +00:00Commented 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.Nathan Johnson– Nathan Johnson2017-03-20 20:45:04 +00:00Commented Mar 20, 2017 at 20:45 -
The
<table>elements are on various pages, and are not using any shortcodes.NiamLeeson– NiamLeeson2017-03-20 21:06:27 +00:00Commented Mar 20, 2017 at 21:06 -
Are you adding the tables using the post editor?czerspalace– czerspalace2017-03-20 21:27:38 +00:00Commented Mar 20, 2017 at 21:27
-
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.NiamLeeson– NiamLeeson2017-03-20 21:47:00 +00:00Commented 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>'); });zod– zod2020-11-14 14:39:38 +00:00Commented 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.hungerstar– hungerstar2022-06-10 16:01:39 +00:00Commented 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.zod– zod2022-06-12 09:12:56 +00:00Commented 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.Rup– Rup2023-03-08 09:11:00 +00:00Commented Mar 8, 2023 at 9:11