Improved Script and Style Loading in Thematic 1.0.1

After a long wait, Thematic 1.0.1 has been live in the WordPress repositories now for a couple of days now!

Thematic 1.0 underwent some major changes to be compliant with WordPress Theme Review Guidelines and best practices as recommended by the WordPress Codex. The issue most likely to have effected your upgrade experience was the switch to the proper enqueing of stylesheets and scripts using wp_enqueue_stylesheet and wp_enqueue_script respectively. This led to some changes to existing functions and the removal of a few old filters that didn’t make sense anymore given the new approach. You can see the massive changelog in the readme.txt file that comes with Thematic, but really, its huge, so it would be easy to miss the ones that are effecting you.

If you’ve been following along with WordPress development, it is likely that you were already using wp_enqueue_script and wp_enqueue_style and this upgrade didn’t cause you any trouble whatsoever. But, if the upgrade didn’t go smoothly for you, then it is quite likely one of the following changes is to blame and hopefully this article will help you sort it out. ¬†We’re going to need to diagnose what went wrong based on what you used to be doing and what has changed.

* Changed: Filter thematic_dropdown_options.

Were you serving your own modified version of the thematic-dropdowns.js script to tweak the widths of the dropdowns, add arrows, or change the delay on the hover? If so, then you might have been filtering thematic_dropdown_options. This filter used to work like so:

function childtheme_dropdown_options() {
$newscript_uri = "\n" . '<script type="text/javascript" src="' . get_stylesheet_directory_uri() . ' /scripts/thematic-dropdowns.js"></script>' . "\n";
 return $newscript_uri;
}
add_filter('thematic_dropdown_options','childtheme_dropdown_options');

in that you needed to return the whole script tag. That is no longer the case and now you need only to return the URL of the script like so:

function childtheme_dropdown_options() {
 $newscript_uri = get_stylesheet_directory_uri() . '/scripts/thematic-dropdowns.js';
 return $newscript_uri;
}
add_filter('thematic_dropdown_options','childtheme_dropdown_options');

* Removed: Variable thematic_use_superfish. * Added: add_theme_support('thematic_superfish')

We’ve switched to using the WordPress function add_theme_support to determine whether to load the superfish scripts. Previously there was a filter called thematic_use_superfish, that you could target to remove the dropdown scripts if you didn’t need them.

function childtheme_no_superfish(){
 return FALSE; // we don't want any of your vegetables!
}
add_filter('thematic_use_superfish','childtheme_no_superfish');

or if you were being super elegant, perhaps you killed the dropdowns with this:

add_filter('thematic_use_superfish','__return_FALSE');

But, we’ve ditched this filter in favor of using WordPress’ theme support feature. It is an easy switch. If you don’t want to load any of the superfish, dropdown scripts then you should now do it this way:

function childtheme_no_superfish(){
 remove_theme_support('thematic_superfish');
}
add_action('thematic_child_init','childtheme_no_superfish');

Note that thematic_child_init is a new action hook, that is specifically placed to remove any theme supports added by Thematic.

* Removed: Filter thematic_head_scripts.

To be fair this one isn’t in the readme as far as I can see, but the problem is similar to the issue with thematic-dropdowns.js. Maybe you were using this filter to you maybe wanted to remove all the superfish and supersubs scripts because you don’t use dropdowns. Or perhaps you were adding your own scripts here.

function childtheme_scripts($scripts){
 return FALSE; //we don't want any of your vegetable scripts!
}
add_filter('thematic_head_scripts','childtheme_scripts');

or if you were adding a scripts of your own, maybe you did something like this:

function childtheme_scripts($scripts){
 $scripts .= "\n" . '<script type="text/javascript" src="' . get_stylesheet_directory_uri() . ' /scripts/thematic-dropdowns.js"></script>' . "\n";
 return $scripts;
}
add_filter('thematic_head_scripts','childtheme_scripts');

As before, we are now using using wp_enqueue_script, so thematic_head_scripts() is now only a function that is added to the wp_enqueue_scripts hook. You can remove it entirely the same way you remove any action:

function childtheme_remove_scripts(){
 remove_action('wp_enqueue_scripts','thematic_head_scripts');
}
add_action('init','childtheme_remove_scripts');

or possibly you were using the override:

function childtheme_override_head_scripts(){
 // absolutely no bacon here
}

However, that is a bit of a nuclear bomb approach and will also wipe out an important script for handling comment replies, which you may or may not need. But thematic is super granular and you can use a scalpel to kill the drop downs scripts quite easily instead of using a viking war hammer with the remove_theme_supportscrap of code from earlier.

If instead, you need to load more scripts, then you should make like Thematic and use wp_enqueue_script.

function childtheme_scripts(){
 wp_enqueue_script('bacon-script', get_stylesheet_directory_uri . '/scripts/bacon.js', array('jquery'), '1.0', true);
 wp_enqueue_script('guacmole-script', get_stylesheet_directory_uri . '/scripts/guac.js', array('jquery'));
}
add_action('wp_enqueue_scripts','childtheme_scripts');

If you are wondering about why the two lines are different, you can read more about how to use wp_enqueue_script in the WordPress Codex:

* Changed: Function thematic_create_stylesheet to wp_enqueue_style.
* Removed: filter thematic_create_stylesheet.

I saw this come up in the forum already. Someone was using the thematic_create_stylesheet filter to add extra stylesheets to the header. Something along the lines of :

function childtheme_create_stylesheet($style) {
   $style .= "\n" . '<link rel='stylesheet' type='text/css' href="' . get_stylesheet_directory_uri() . ' /styles/blue-style.css" />' . "\n";
  return $style;
}
add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');

Well that filter is gone like a bowl of my famous guacamole, so if you need to add more stylesheets, then we’ll have to add them the updated way… which by the by, will work better with any caching plugins you might be using and prevents the same style from being loaded twice (like if you were loading the supersized script’s css and then you had a plugin that was also trying to load the same stylesheet).

Thematic is now loading the main stylesheet like so:

function thematic_create_stylesheet() {
 wp_enqueue_style( 'thematic_style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts','thematic_create_stylesheet');

I can’t think of too many reasons why you’d ever need to change that. Your theme will always need a style.css in order to be a valid theme. But if you need to add more stylesheets, it is going to work just like enqueueing scripts except we use a slightly different function, wp_enqueue_style.

function childtheme_create_stylesheet() {
 wp_enqueue_style( 'blue_style', get_stylesheet_directory_uri() . '/styles/blue.css' );
}
add_action('wp_enqueue_scripts','childtheme_create_stylesheet');

Oh Noes! Something is still broken!

Well, head to the support forums and start a new thread. Here is a tip for getting better support: do NOT just say “my menu won’t work”. This tells me and the other volunteers absolutely nothing and makes it impossible to help you. Be precise when describing exactly what you are trying to accomplish, what you are seeing/experiencing now, compare that to what you were experiencing before hand, and tell us anything that you might have already tried. Screenshots can be helpful as can links to your live site.

Thematic Support Forums

5 Comments

  1. Logen
    | Permalink

    Hi,

    How do I load more than one stylesheets using:

    function childtheme_create_stylesheet() {
    wp_enqueue_style( ‘blue_style’, get_stylesheet_directory_uri() . ‘/styles/blue.css’ );
    }
    add_action(‘wp_enqueue_scripts’,’childtheme_create_stylesheet’);

    It works fine for loading one stylesheet from the parent theme (Thematic). But I would like to load others such as: default.css, reset.css, 2c-l-fixed.css, images.css and typograhy.css.

    I’m new to using child themes and new to working with functions.php.

    • helgatheviking
      | Permalink

      Support requests will not be handled in the comments. Please do as the article suggests and take all questions to the support forums. Oh and also I provided a link to the Codex entry for wp_enqueue_stylesheet. You could also do a little homework.

  2. Rob
    | Permalink

    When I search Google for “wordpress thematic”, the first result is the wordpress plugin page and the second is themeshaper.com. This led me to believe themeshaper was the maintainer of thematic. So I tried using their thematic documentation as a reference for thematic_dropdown_options . Later I found this page and realized that function needs to return a path to a javascript file rather than the javascript itself.

    Just wanted to let you know, I guess, that your page rank could be improved, or, if you have any association with themeshaper.com, perhaps you can get them to either update or take down their thematic documentation as it is now misleading.

    • Themeshaper.com is the old home for Thematic. Since Ian Stewart – the creator of Thematic – has started working for Automattic, the themeshaper site is now the home of the Automattic theme team and Thematic has moved to its own domain.

      Since the move happened in May 2012, this site is still a bit new and there is no wonder themeshaper still shows up at the top. Yes the documentation there is outdated. The docs part of this site is still under construction, I hope it will launch soon. Maybe Ian wants to wait with removing their documentation until this site’s docs are up, I don’t know. In the mean time, you can find the changelog in the readme file, watch the blog for announcements and join the forums for support.

    • Gene
      | Permalink

      Thanks Rob,

      I will be updating the Thematic Guide on Themeshaper.com shortly to better communicate what versions of Thematic that documentation covers and where to go for current documentation.

One Trackback

  • By Coding for the Web | Happy Linguist on July 6, 2013 at 5:19 am

    [...] parent theme and keep the existing stylesheets in my child theme functioning. (I’m only, oh, a year late. Better late than [...]