Conditionally load TablePress stylesheets

  • Resolved frisco

    (@frisco)


    11 years, 10 months ago

    Great plugin. You are to be commended for your ongoing development, improvements, and support. Top notch among WP plugins here.

    I notice that TablePress loads its stylesheets on every page, and I think WP-Table Reloaded loaded JS on every page, even if no table was on the page.

    How about loading TablePress components (styles, JS, etc) conditionally if there’s a table on the page? Otherwise, it’s just unnecessary page weight.

    https://www.ads-software.com/extend/plugins/tablepress/

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post. It’s nice to hear that you like TablePress ??

    You are right that both WP-Table Reloaded and TablePress load the CSS stylesheet on all tables.
    Both do load their JS conditionally though. (In TablePress, this is true for all JS files, including jQuery, in WP-Table Reloaded, jQuery was loaded on all pages).

    Now, unfortunately, it’s not possible to load the CSS conditionally as well. The reason is that the CSS has to be loaded in the <head> of the page. However, when that part of the page is generated, TablePress does not yet know, if there will be a table on the page (e.g. from a Shortcode, Template Tag, or in a text widget). So, there’s not no way to reliably find out if there’s a table on the page, and therefore the CSS is loaded on all pages.
    I agree that this might then be unnecessary page weight, but as the CSS (evne the “Custom CSS”!) is minified and loaded from files, this is not too much of a problem. Also, the files are then cached, so that this really only is a problem on the first visited page of the site.

    For most sites, there are other optimizations that bring higher performance benefits, like reducing/compressing images better.

    Regards,
    Tobias

    Thread Starter frisco

    (@frisco)

    Thank you for the quick reply. On further thought, I agree with your conclusion. I didn’t pick up on the fact that TablePress is now conditionally loading JS.

    However, your statement that “it’s not possible…” to conditionally load CSS isn’t quite accurate, AFIK. See https://beerpla.net/2010/01/13/wordpress-plugin-development-how-to-include-css-and-javascript-conditionally-and-only-when-needed-by-the-posts/. The problem is that although it is possible, the solution offered by that article may not represent a real improvement/optimization, and may break something.

    Also, I’ve only used the table shortcode on a single post or page, so I could remove CSS, and then conditionally load it if the single template were being displayed. That’s still not a perfect optimization, but it removes the CSS from other templates, such as archives.

    Still, you’ve done a lot by conditionally loading JS, and although one could apply some of these tweaks, I agree that they’re going to provide very little, if any, optimization.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, you are right that searching through the posts that are going to one the page could be beneficial here, but that approach has a few drawbacks: It does not account for tables that are inserted in a custom WP_Query (i.e. it only catches the main page query), it does not catch tables that are inserted by the Template Tag functions, and it does not catch tables in text widgets.
    Additionally, the method is not always reliable in some themes, that have a weird post loading behavior :-/
    The risk of suddenly having a table without styling is much higher with this approach, than to just “bite the bullet” and always load the CSS file.

    For the JS, all of this is no problem, as that’s loaded in the footer anyway and can therefore be enqueued whenever a table is being shown on the page (just as it’s done in TablePress).

    For your specific case, you could indeed use a filter hook maybe (note that this implementation only accounts for the Default CSS):

    add_filter( 'tablepress_use_default_css', 'tablepress_css_conditional_load' );
function tablepress_css_conditional_load( $load ) {
  if ( ! is_single( array( 'your-page-slug-1', 'your-page-slug-2' ) ) )
    return false;
  return $load;
}

    This should go into your theme’s “functions.php” or a small new plugin. If I didn’t make a mistake, this will tell TablePress to only enqueue the Default CSS on the pages/posts with the slugs your-page-slug-1 and your-page-slug-2.

    Best wishes,
    Tobias

    Hi Tobias,
    i try english, have make the Update from TBreloaded, all works fine. I have all my CSS in the Theme-CSS (style.css) see you a way for always not load the CSS from Plugin?

    Noch mal auf deutsch, ich brauch überhaupt nicht die CSS aus dem Plugin weil ich alles CSS in meiner Theme style.css drinnen habe, wie kann ich das in der functions.php h?ndeln ohne am Plugin zu hacken. Hab jetzt auskommentiert:
    // olaf wech wp_enqueue_style( 'tablepress-default', $default_css_url, array(), TablePress::version );
    in controller-frontend.php

    Zusatzfrage, es hatte die Einstellungen auch zu JS nicht übernommen, ich musste jetzt durch 50 Tabellen und es überall deaktivieren. Ich befürchte wenn ein Redakteur eine neue Tabelle anlegt ist das wieder aktiv. Gab es nicht vorher eine globale Einstellung dafür? Kannst du das wieder reinbasteln?

    Tolle Arbeit, Danke!!!!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Olaf,

    thanks for your question!
    I’ll answer in English, so that everybody can benefit from this. If you have trouble understanding, please send me an email, and we can continue in German then. (The address is in the main plugin file “tablepress.php”.)

    I don’t actually recommend putting the TablePress Default CSS into your theme’s style.css, for several reasons: After an update of TablePress, you might have to manually update the CSS again, and you take away the opportunity to easily update your theme (unless it’s a custom or child theme anyway).

    Of course, it is still possible to not load the TablePress Default CSS. To do that, please
    1. Revert that change in the controller-frontend.php! You should not modify plugin files directly, as you will lose those changes after a plugin update.
    2. Instead, just add this line to your theme’s functions.php (or create a small plugin around it):

    add_filter( 'tablepress_use_default_css', '__return_false' );

    Now, regarding the JavaScript question: Yeah, sorry that this happened. I somehow forgot to make the import process aware of this setting…
    And yes, new tables will automatically have the “Use DataTables” checkbox checked. Fortunately, this can also be changed with a small piece of code. Please see https://tablepress.org/extensions/datatables-off-new-tables/ for more information, and just install the small TablePress Extension from there as a regular plugin.

    Regards,
    Tobias

    FYI, you can also conditionally load the custom CSS file using this same technique, if you enter custom CSS and choose to save it to a file.

    // only include custom CSS file on pages with tables
add_filter('tablepress_custom_css_url', 'remove_tablepress_custom_css');
function remove_tablepress_custom_css($load) {
  if (!is_page(array('page-slug1', 'page-slug2'))) {
    return false;
  }
  return $load;
}

    Sorry, since I don’t want either CSS file loading on pages other than those with tables, I only need one function. So I ended up condensing both code snippets into one like this:

    // conditional load Tablepress CSS
add_filter('tablepress_use_default_css', 'tablepress_css_conditional_load');
add_filter('tablepress_custom_css_url', 'tablepress_css_conditional_load');
function tablepress_css_conditional_load($load) {
  return ((!is_page(array('page-slug1', 'page-slug2'))) ? false : $load);
}
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for sharing that trick, jp2112! Very nice! Indeed, if the filter returns false, no file will be enqueued.

    Best wishes,
    Tobias

    Hi,
    I found the function is_single sau has_term for posts, but isn’t any work-arround for any post that contain something in their slug? It’s not such a good practice to change the theme functions.php file any time you add a post with a table.
    I saw that others plugins css and js files are loading in header even if are not used in the specific post, so it looks to be a WordPress issue.
    Best regards

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    I don’t really understand what the problem is with “is_single”. Could you clarify this?
    And yes, having to edit a theme or plugin file is not ideal, but at least a solution :-/

    And yes, this is more of a global issue for other plugins as well. It’s however not a WordPress problem, but more are a result of how websites are structured. The CSS should be loaded in the header part, but when that is created, plugins don’t know if the CSS will be needed (because Shortcodes are evaluated much later).

    Regards,
    Tobias

    Hi there Tobias

    is_single is a function for detecting if the current item is a post, not a page.
    Simpler it should be if a plugin should call the CSS and WordPress should manage plugin loading process. Then only plugins that are needed will load on frontpage and css would be loaded only if a plugin is loaded. Probably this is utopia.

    Best regards

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, that’s what is_single() is used for, but I don’t really understand what your problem is with it. Just as with is_page() in the example, you can use that as well.

    Regards,
    Tobias

    Hi there

    As I read is_page checks only if it’s a page, probably works well with posts too, but I didn’t checked.
    Just forget about that function ??

    Best regards

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, is_page will only check for pages, for posts you’ll need one of the other functions.

    Best wishes,
    Tobias

    Tobias, you can check for shortcode on ‘save_post’ action and cache it in global set_option for all posts or local set_post_meta for single post, then use get_option/get_post_meta in ‘wp_enqueue_scripts’ to conditionally add styles. It can be done very easily.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Conditionally load TablePress stylesheets’ is closed to new replies.