WordPress.org

Ready to get started?Download WordPress

Forums

How to restrict scripts and CSS from loading except on pages that need them? (12 posts)

  1. a_johnson
    Member
    Posted 4 years ago #

    With Google Caffine, http://www.marketingsmartt.com/caffeine-rush-how-to-rank-higher-with-google-caffeine/ which is the new iteration of Googles search algorithm, load time matters in your search rank.

    Most plugins load their JS and CSS on every page and post whether needed or not. So, if I have a gallery or calendar or whatever, how do I only load those items on the page that will use them?

  2. a_johnson
    Member
    Posted 4 years ago #

    I'm thinking that it may work if I create header2, header3 etc with th e CS and JS lines and put those headers on pages that are specific to the use of the plugin, then delete from the plugin the loading of the CSS & JS.

    Can this be done or is there an easier way?

  3. vangrog
    Member
    Posted 4 years ago #

    Example:

    <?php if ( is_home() || is_category ) { ?>
    
    <script src="myscript.js" type="text/javascript"></script>
    
    <?php } ?>

    In this case, myscript.js will load only if it's home or a category.

    Cheers

  4. a_johnson
    Member
    Posted 4 years ago #

    Thanks, vangrog, I'm not sure how to do that or where but I did see a post that said to do this:

    Replace <?php get_header(); ?> with <?php include(TEMPLATEPATH."/header2.php");?> in the template files that you would like to use the alternative header

    So, I created an alternate header and page.php (calheader.php and calpage.php) for the Calendar plugin and commented out the line in calendar.php, (in the plugin) and put the CSS in the header.

    Your way sounds simpler and allows the plugin to work correctly though. If you could elaborate some, I would appreciate it.

    What I did works fine but your way is better, especially since I need to do all of this for the gallery plugins next.

  5. vangrog
    Member
    Posted 4 years ago #

    I don't know the plugin you mention, so I cant help with it specificly.

    You need to hack the plugin files, find where it sets the css and js to load and add the conditiion "php if" (as the example above).

  6. a_johnson
    Member
    Posted 4 years ago #

    Ah OK, I wasn't clear on where the change went. For this plugin, the lines in question are:

    // Add the function that puts style information in the header
    add_action('wp_head', 'calendar_wp_head');

    which I added the // to the second line to comment it out everywhere.

    In this case, I'm unclear how to integrate your hack into this plugin and how to write it for a page like http://mysite.com/?page_id=111.

  7. a_johnson
    Member
    Posted 4 years ago #

    Below is the NextGen Gallery plugin code I think. I see there is if in them already so I assume that I can do something similar to Calandar but obviously don't know anything about PHP to be able to pull it off, then do the same thing with the other plugins too.

    } else {			
    
    			// Add MRSS to wp_head
    
    			if ( $this->options['useMediaRSS'] )
    
    				add_action('wp_head', array('nggMediaRss', 'add_mrss_alternate_link'));
    
    			// If activated, add PicLens/Cooliris javascript to footer
    
    			if ( $this->options['usePicLens'] )
    
    				add_action('wp_head', array('nggMediaRss', 'add_piclens_javascript'));
    
                // Look for XML request, before page is render
    
                add_action('parse_request',  array(&$this, 'check_xml_request') );    
    
    			// Why is this not core ?
    
    			add_action('wp_head', 'wp_print_styles');
    
    			// Add the script and style files
    
    			add_action('wp_print_scripts', array(&$this, 'load_scripts') );
    
    			add_action('wp_print_styles', array(&$this, 'load_styles') );
    
    		}
  8. vangrog
    Member
    Posted 4 years ago #

    On "nggallery.php", find where it says:

    function load_styles() {
    
    // check first the theme folder for a nggallery.css
    if ( nggGallery::get_theme_css_file() )
    wp_enqueue_style('NextGEN', nggGallery::get_theme_css_file() , false, '1.0.0', 'screen');

    Add the condition before wp_enqueue ():

    function load_styles() {
    
    // check first the theme folder for a nggallery.css
    if ( nggGallery::get_theme_css_file() )
    if ( is_page() )
    wp_enqueue_style('NextGEN', nggGallery::get_theme_css_file() , false, '1.0.0', 'screen');

    If you want to add more, do something like this:
    if ( is_page() || is_single() )

    I haven't tested it, but I guess it might work.

    The same goes for other plugins...

    Have fun! ;o]

    Cheers

  9. vangrog
    Member
    Posted 4 years ago #

    Ps.:
    is_home() -- adds your main page
    is_page() -- adds pages
    is_category() -- adds categories
    is_single() -- adds single posts
    is_archive() -- adds archives (search, tags, author, date...)

    Adding a "!" before it removes the files, instead of addin them like above:
    !is_page()

    -------------

    You can also set which specific pages you want to include, by poiting their ID number:

    if ( is_page(array(2, 5)) )

    In this example, only the pages 2 and 5 will be included (other pages and all the rest -- categories, archive etc -- will be excluded)

    More info about conditional tags, check this out:
    http://codex.wordpress.org/Conditional_Tags

    seeya

  10. a_johnson
    Member
    Posted 4 years ago #

    You are full of awesomesauce! Thank you!

  11. vangrog
    Member
    Posted 4 years ago #

    I guess the conditional tag is misplaced (sorry, I don't use this plugin so I cant test).

    If that does not work, try replacing this part:

    function load_styles() {
    
    // check first the theme folder for a nggallery.css
    if ( nggGallery::get_theme_css_file() )	
    
    wp_enqueue_style('NextGEN', nggGallery::get_theme_css_file() , false, '1.0.0', 'screen');
    else if ($this->options['activateCSS'])
    
    wp_enqueue_style('NextGEN', NGGALLERY_URLPATH.'css/'.$this->options['CSSfile'], false, '1.0.0', 'screen');

    by this:

    function load_styles() {
    
    // check first the theme folder for a nggallery.css
    if ( nggGallery::get_theme_css_file() )
    
    wp_enqueue_style('NextGEN', nggGallery::get_theme_css_file() , false, '1.0.0', 'screen');
    else if ($this->options['activateCSS'])
    
    // HERE IT COMES THE HACK //
    if ( is_page() )
    
    wp_enqueue_style('NextGEN', NGGALLERY_URLPATH.'css/'.$this->options['CSSfile'], false, '1.0.0', 'screen');

    []

  12. andy009
    Member
    Posted 4 years ago #

    if one was to make these changes to each one of the plugins and i probably use about 26 when the plugin gets updated wouldnt this overwrite the changes?

Topic Closed

This topic has been closed to new replies.

About this Topic