Thematic 1.0.1 Upgrade Breaks Your Menu

By kathy | Published: May 31, 2012

After a long wait, Thematic 1.0.1 has been live in the WordPress repositories now for a couple of days now! And some issues are starting to crop up in the forum. So far the most recurring issues have to do with the menus. Oh menus, you never cease to cause trouble.

The problem is that thematic 1.0 underwent some major changes to be compliant with WordPress Theme Review Guidelines and the change with the most impact on menus in particular is our switch to properly enqueing stylesheets and scripts using wp_enqueue_stylesheet and wp_enqueue_script. This has 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.

I Upgraded and Now My Menu is Broken

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 themtatic_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 .= '';
 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! My menu 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

Posted in Thematic | Tagged | Leave a comment

How to Use Multiple WYSIWYG (TinyMCE) Visual Editors in Your WordPress Metaboxes

By kathy | Published: March 8, 2012

Ever since WordPress invented the metabox, people have been trying to put the rich text editor (in WP this is provided by TinyMCE) into their metaboxes.  And it makes sense.  Sure us uber-geeks know the HTML tags required to make some text bold, but most of the world does not., but they do know how to click on the “B” button.  So if we’re building a theme that requires multiple blocks of content it’s nice to reuse the visual editor.

I’ve been using the WP Alchemy Class by Dimas Begunoff to build my metaboxes for a while now.  It gives a lot of power to build really complicated field sets, especially repeating ones.  For a long time using the visual editor in the metaboxes was elusive.  Dimas wrote an article on How to Use Multiple WordPress WYSIWYG Visual Editors and it worked, up to a point.  Because TinyMCE is fickle (and despite their tagline being “Easy to Integrate”) this code didn’t work for repeating groups, which in my mind is the strength of Alchemy.

As of WordPress 3.3 you can finally use the built-in wp_editor() function for multiple editors in your metaboxes, but again these must be defined in advance.  You can’t use this function with WPA’s dynamically generated fields.

So, repeatable, sortable WYSIWYG (TinyMCE) rich-text editors has been the elusive, ultimate dream of WP Alchemists.  The <cough>”Holy Grail”</cough> of WP Alchemy.  But after a lot of head-banging effort, I think I have it!

I have create a Twenty Eleven child theme that shows WP Alchemy-powered metaboxes with repeatable, sortable, WYSIWYG (tinyMCE-enabled) text editors complete with media buttons.  And as a bonus, it shows a single field using wp_editor() because that also needed a little twist to work with WPA.

Dimas seems to recommend putting the WP Alchemy core files in /wp-content so they are not included in my theme.  You’ll need to do that (or change my theme to include the WPA class elsewhere), and then simply activate the theme and add a new post to see the boxes in action.  For the curious, and come on you know you are, the real magic is in the kia-metabox.js script.

Download the sample theme from for an idea of how it works:

Download876 downloads

Fork me on github!  Perhaps we can figure out how to use the quicktags editor when the visual editor is disabled.

Full tutorial to come…  maybe.

Posted in Tutorial | Tagged , , , | 53 Responses

Create an Alphabetical Glossary of Posts in WordPress

By kathy | Published: February 12, 2012

Once up a time i did a client project where i had to have archives organized alphabetically.   I ended up accomplishing by adding a query variable and targeting the posts_where filter.  However, in answering a recent question at WordPress Stack Exchange I decided that it might be neater to create a hidden taxonomy instead.  I don’t know if there is any performance benefit, but the code was a little more elegant and you get prettier permalinks:

site.com/glossary/a

instead of

site.com/?glossary=a

right off the bat without the need to do any complicated htaccess rewrite rules, since everyone knows that mod-rewrite is straight up voodoo.

Creating a Hidden Taxonomy

Pretty standard function for registering a taxonomy. Just going to accept a lot of the defaults, and not worry about labels since we’re going to hide it from the back-end by setting the ‘show_ui’ parameter to false. For this example we’re going to call the taxonomy “glossary” and we’re going to assign it to posts, but we could well have done it for any custom post type.

// Add new taxonomy, NOT hierarchical (like tags)
function kia_create_glossary_taxonomy(){
    if(!taxonomy_exists('glossary')){
        register_taxonomy('glossary',array('post'),array(
        'show_ui' => false
      ));
     }
}
add_action('init','kia_create_glossary_taxonomy');

Automatically Setting Terms for each Post on Save/Update

It’d be a pain if we had to actively remember to sort each post by its letter each time we wrote a post. I have enough difficulty just writing a post in the first place. But with some code we can automatically pop off the first letter of the post title and assign that letter as the term in our “glossary” taxonomy. The following is the pretty standard function for saving information from a metabox, which works perfectly for our case even though we don’t have a visible metabox.

/* When the post is saved, saves our custom data */
function kia_save_first_letter( $post_id ) {
// verify if this is an auto save routine.
// If it is our form has not been submitted, so we dont want to do anything
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;

//check location (only run for posts)
$limitPostTypes = array('post');
if (!in_array($_POST['post_type'], $limitPostTypes)) return;

// Check permissions
if ( !current_user_can( 'edit_post', $post_id ) )
return;

// OK, we're authenticated: we need to find and save the data
$taxonomy = 'glossary';

//set term as first letter of post title, lower case
wp_set_post_terms( $post_id, strtolower(substr($_POST['post_title'], 0, 1)), $taxonomy );

//delete the transient that is storing the alphabet letters
delete_transient( 'kia_archive_alphabet');
}
add_action( 'save_post', 'kia_save_first_letter' );

Auto-Assigning Terms to existing posts

If you’ve had a blog for a while and have a lot of posts the idea of going back and manually saving the posts again sounds worse than pulling our your toenails.  So you can run a little function to do it automatically.  Ideally, if this were a plugin, it’d run on the plugin’s activation hook.  Since it’s not you can just drop it into your functions.php, reload your site (probably 2x for good measure) and then delete the function.  Basically what it will do it grab all your posts, loop through them all, pop off the first letter of the title and assign it to the “glossary” taxonomy.

//create array from existing posts
function kia_run_once(){
$taxonomy = 'glossary';

$alphabet = array();
$posts = get_posts(array('numberposts' => -1) );

foreach($posts as $p) :
//set term as first letter of post title, lower case
wp_set_post_terms( $p->ID, strtolower(substr($p->post_title, 0, 1)), $taxonomy );
endforeach;
}
add_action('init','kia_run_once');

Finally, Creating the Alphabet “Menu”

Now that we have assigned a term for each existing post and for every post to come in our custom taxonomy, we should display an alphabet menu…. or some way to access the different Letter archives.  This was the one place were the code was not 10x more elegant than in my first iteration because there was no easy way to test whether a term had a post in it.  Usually, yes, it would… but if you changed a post name and there were no other posts under a certain letter you could come up with an empty section.  So what I did was get all the terms in the taxonomy with get_terms which hides empty terms by default, loop through that data and store it in an array, then check each letter of the alphabet against that array.  To avoid running through that every single page load, I used the transient API to store the resulting array of alphabet terms.  This array refreshes whenever a post is updated (this actually happens in an earlier code block for the kia_save_first_letter() function.

For my original project I wanted to have the letters with posts have an active link and the letters without posts in that section just have the letter.  Something like:

A B C D E …. and onwards, so I have re-created that effect.

$taxonomy = 'glossary';

// save the terms that have posts in an array as a transient
if ( false === ( $alphabet = get_transient( 'kia_archive_alphabet' ) ) ) {
    // It wasn't there, so regenerate the data and save the transient
    $terms = get_terms($taxonomy);

    $alphabet = array();
    if($terms){
        foreach ($terms as $term){
            $alphabet[] = $term->slug;
        }
    }
     set_transient( 'kia_archive_alphabet', $alphabet );
}

?>

<div id="archive-menu" class="menu">

	<ul id="alphabet-menu">

	<?php 
	
	foreach(range('a', 'z') as $i) :              

		$current = ($i == get_query_var($taxonomy)) ? "current-menu-item" : "menu-item";              

		if (in_array( $i, $alphabet )){ 
			printf( '<li class="az-char %s"><a href="%s">%s</a></li>', $current, get_term_link( $i, $taxonomy ), strtoupper($i) );
		} else { 
			printf( '<li class="az-char %s">%s</li>', $current, strtoupper($i) );
		} 

	endforeach; 
	
	?>
	</ul>

</div>

Future Improvements

One thing I’d like to improve upon would be ensuring that the first letter I’m popping off with the substr PHP function is actually a letter… or maybe a number, but not a character.  I’d also like to get it to skip words like The, An, and other pointless words that don’t really reflect on the subject.  But then this isn’t a solution for everyone… if you want to make sure that “A Post about Bacon” and “The Bacon Post” show up in the same archive, well you should tag them in the Bacon tag and not hope that they show up alphabetically in the right place.  Still it has its uses.  Let me know of any improvememts you make!

Posted in Tutorial | 20 Responses