Home/ Questions/Q 7185323
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:23:28+00:00

I am totally stumped on this. I am putting together a script that checks

  • 0

I am totally stumped on this. I am putting together a script that checks if two stylesheets are loaded into the head part of a WordPress theme, then load an internal stylesheet only if both external stylesheets are loaded first. But, the final if statement that checks if both external stylesheets “exist” runs as if there is no if statement wrapped around it. In the code, I mention the website where I got this idea from. Below is my code:

jQuery(document).ready(function() {
/* Place smaller widget design behind .widgettitle only on 3-column layout */
/* adapted from http://churchm.ag/dynamically-applying-stylesheets-using-jquery/ */
//templateDir is defined in functions.php and placed into this theme's head tag
var threeColExists = false;

    // check for blue stylesheet with 3-column stylesheets
    var blueExists = false;
    jQuery('link').each(function() {
        if(jQuery(this).attr('href') === 
        templateDir + '/layouts/3-column-right.css' ||
        templateDir + '/layouts/3-column-left.css' ||
        templateDir + '/layouts/3-column-right-magazine.css' ||
        templateDir + '/layouts/3-column-left-magazine.css') {
            threeColExists = true;
        }
        if(jQuery(this).attr('href') === templateDir + '/styles/blue.css') {
            blueExists = true;      
        }
    });

    // This is what is getting executed regardless of whether the two conditions below evaluate to true
    if((threeColExists === true) && (blueExists === true)) {
        jQuery('head').append('<style type="text/css"> .widgettitle { background: url(' + templateDir + '/images/widget-design-smaller-blue.png) bottom left no-repeat #FFFFFF; } </style>');   
    }
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t do a compound comparision the way you are doing it. It would have to be like this where you spell out each individual equality test:

    if(jQuery(this).attr('href') === (templateDir + '/layouts/3-column-right.css') ||
    jQuery(this).attr('href') === (templateDir + '/layouts/3-column-left.css') ||
    jQuery(this).attr('href') === (templateDir + '/layouts/3-column-right-magazine.css') ||
    jQuery(this).attr('href') === (templateDir + '/layouts/3-column-left-magazine.css'))

    or more efficiently without a jQuery object and without recreating the href value each time:

    var href = this.href;
if (href === (templateDir + '/layouts/3-column-right.css') ||
    href === (templateDir + '/layouts/3-column-left.css') ||
    href === (templateDir + '/layouts/3-column-right-magazine.css') ||
    href === (templateDir + '/layouts/3-column-left-magazine.css'))

    or perhaps even this would work to test them all with one regular expression:

    if (this.href.match(new RegExp(templateDir + "/layouts/3-column-(right|left)(-magazine)?\\.css$")))
    • 0