I am developing a custom wp plugin that is using shortcode to display table in the front end. But its front end display is affected by the theme's css. So it is always following the table styling that comes with the theme.

Is it possible to protect it from being affected by any theme's css' without doing any extra work digging into the theme which the plugin is installed together with?


G.M.'s advice not withstanding, bear in mind that there is no foolproof way of isolating your table from the theme. CSS selectors with more specificity, or with rules that you haven't accounted for, or with !important rules, will always take precedence. This is actually correct behaviour, as websites should be able to style elements (including your plugin's output) as they see fit.


Add a wrapper class for the table:

<table class="my_plugin_table">

and then in the frontend enqueue your css file putting (in main plugin file)

add_action('wp_enqueue_scripts', 'enqueue_my_plugin_css');

function enqueue_my_plugin_css() {
  wp_enqueue_style( 'my_plugin_css', plugins_url( 'my_plugin.css' , __FILE__ ) );

This will put in the frontend a css file called 'my_plugin.css' that you put in your plugin folder. (if you don't have a plugin folder is the tyme to create it).

Then in the css file write all the styles prepending the table class. E.g.

/* css */
table.my_plugin_table { ... }
table.my_plugin_table th { ... }
table.my_plugin_table th a { ... }
table.my_plugin_table td { ... }
table.my_plugin_table td a { ... }

...and so on

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.