Очерёдность выполнения переменных
 

Как сделать чтобы сначала выполнялась var mql, а потом var img?

<!-- xmas_lights [ start ] -->
<script type="text/javascript">
document.write("<div id='lights' style='position:absolute;width:956px;height:180px;top:-20px;background:url(<?php echo plugins_url() . '/xmas-lights/'; ?>light.png) no-repeat;left:50%;margin-left:-478px'></div>")

setInterval( "xmasLights();", 1000 );
var lights = "active";
function xmasLights(){
	var img = document.getElementById('lights');
	if(lights == "active"){
		img.style.backgroundPosition = "0 -180px";
		lights = "inactive";
	}else{
		img.style.backgroundPosition = "";
		lights = "active";
  	}
        var mql = window.matchMedia('all and (max-width: 1000px)');
             if (mql.matches){
                 img.style.display = "none";
         }else {
                  img.style.display = "block";
               } 
}
</script>
<!-- xmas_lights [ end ] -->

Поменяй их местами.

А зачем там вообще document.write? Или скрипт не твой? setInterval и без строки работает хорошо. getElementById не нужно вызывать циклически. Скрытие на узких экранах лучше делать через css. Также как и смещение background-position.