I’ve been playing with the newest version of WordPress (2.8), which is due to be released in the near future.  It features a completely new way of writing Widgets, so I’ve been testing that out.

I discovered a clash with my favourite wordpress theme, the Thesis framework.  Took me a little while to figure it out, but I think I’ve solved the problem.

[AlertBox text="Update 18 June 09: Thesis 1.5.1 has been released, and makes this patch unneccessary."]

The problem

WordPress 2.8 features an excellent Widget manager in the admin area.  But with Thesis 1.5, this area is unusable.  Widgets cannot be dragged/dropped, which is essential.  It seems that the JS provided by Thesis clashes with JS provided by WordPress on a few different screens.

The fix

Open up your Thesis files, and look in /lib/admin/admin.php.   Look for function thesis_options_js()

{code type=php}
$date_modified_js = filemtime(THESIS_SCRIPTS . ‘/thesis.js’);
$date_modified_ui = filemtime(THESIS_SCRIPTS . ‘/jquery-ui.js’);
echo ‘<script type=”text/javascript” src=”‘ . THESIS_SCRIPTS_FOLDER . ‘/thesis.js?d=’ . date(‘mdy-Gms’, $date_modified_js) . ‘” /></script>’ . “\n”;
echo ‘<script type=”text/javascript” src=”‘ . THESIS_SCRIPTS_FOLDER . ‘/jquery-ui.js?d=’ . date(‘mdy-Gms’, $date_modified_ui) . ‘” /></script>’ . “\n”;
{/code}

Thesis comes with its own jQuery UI script, which clashes with the in-built wordpress scripts.  Replace that function with this one:

{code type=php}
if (!is_admin()) { return; }
$date_modified_js = filemtime(THESIS_SCRIPTS . ‘/thesis.js’);
$date_modified_ui = filemtime(THESIS_SCRIPTS . ‘/jquery-ui.js’);
wp_enqueue_script(‘jquery-ui-core’);
wp_enqueue_script(‘jquery-ui-sortable’);
wp_enqueue_script(‘jquery-ui-tabs’);
wp_enqueue_script(‘thesis-admin-js’, THESIS_SCRIPTS_FOLDER.’/thesis.js’);
{/code}

Also look for the function thesis_admin_styles_and_scripts()

It contains this:

{code type=php}
add_action(‘admin_head’, ‘thesis_options_stylesheet’);
add_action(‘admin_head’, ‘thesis_options_js’);
{/code}

Replace with this:

{code type=php}
add_action(‘admin_head’, ‘thesis_options_stylesheet’);
add_action(‘admin_head’, ‘thesis_options_js’);
add_action(‘init’, ‘thesis_options_js’);
{/code}

And problem solved!  So far I haven’t discovered any unwanted side-affects.  You may only need to enqueue jquery-ui-sortable.

[AlertBox text="Update 18 June 09: Thesis 1.5.1 has been released, and makes this patch unneccessary."]

[NoticeBox text="This tutorial deals with the Thesis wordpress theme. It may not mean much if you haven't worked with Thesis before."]

The wonderful Thesis wordpress theme comes with two sidebars which are very configurable.  You can insert widgets into either sidebar, exactly as you wish.

But what if you want to put a widget somewhere else?  Let’s take a look at the Tailored Web Services website.  (That’s my employer).   Look at the footer of this site.  There are three columns down there, and each one contains a widget.

So how did that happen?

The key functions here are register_sidebar()and dynamic_sidebar().

Together, these functions allow us to set up an extra “sidebar”, which will be widget-enabled through the wp-admin area.

Let’s start with this:

{code type=php}
<?php
add_action(‘thesis_hook_footer’, ‘customFooter’);
function customFooter() {
?>
<div class=”footer1″>
<ul class=”sidebar_list”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer1′) ){ ?>
<li class=”widget”>Dynamic Widgets are not enabled</li>
<?php } ?>
</ul><!– sidebar_list –>
</div><!– footer1 –>
<?php
} // customFooter
?>
{/code}

The function customFooter() is designed to insert the right code for a new “sidebar”.  And yes, we’re still calling it a sidebar even though it goes in the footer.

The add_action() line defines where this new block of code should go.  The Thesis User’s Guide contains a reference list of all hooks provided by Thesis.  In this case, we want it in the footer.

The dynamic_sidebar('Footer1') call tells WordPress to output “Footer1″ there if present.

Next, we need to use that register_sidebar() function to let us put widgets in there.

{code type=php}
<?php
register_sidebar(array(‘name’=>’Footer1′, ‘before_title’=>’<h3>’, ‘after_title’=>’</h3>’));
?>
{/code}

By default, your widget titles will always be wrapped in <h3> tags.  You can change that if you want to.  The important argument to this function is the “name”.  The name should be the same as you used in the dynamic_sidebar() call.  Be descriptive:  We should call this “Footer Left”, or “Footer Right” to avoid any confusion later on.

Here’s one I prepared earlier

• Custom three-column widget-ready footer

Paste the code from this page into your custom_functions.php file.  When you add some CSS to float the columns side-by-side, you’ll get the same three-column footer we have on Tailored.

I’ve been battling for a while now with a certain bug on a certain site. I don’t see this bug anywhere else, and I wasn’t able to figure out what the issue was. I eventually (trial and error) narrowed it down to some javascript. If I removed the script, the site worked. (Minus the scripted functionality of course). If I kept it in, this happened:

I found a few articles discussing this issue, and linking back to Eoghan O’Brien. His fix (defer=”defer” on the javascript) didn’t help me though.

My issue was with SWFobject. Long story short, I ended up having to do this:

<script type="text/javascript">
window.addEvent('load', function()  {
var so = new  SWFObject('flvplayer.swf','mpl','240','200','7');
...
so.write('player');
});
</script>

Yes, I use mootools. Instead of doing <script src=”#” defer=”defer”> I was able to defer the EXECUTION of the script instead, by adding it to the onLoad event sequence.

Still don’t know why it works, but now my page opens in Internet Explorer (IE6 and IE7, also Avant Browser)

This is a blog, and its got an RSS feed. It feels like RSS feeds are becoming more and more common every day. Part of this is due to the growing popularity of blogs, and partly because web users are becoming a little more savvy.

Once upon a time there was a web user. We’ll call her Betty. Betty found a blog she liked to read, and she checked back daily for new posts. Then Betty found out about some more blogs she liked, so she started checking those daily too. It wasn’t look before Betty was checking 30 blogs every day – and wow, it was starting to take a while!

This is where RSS feeds come in. RSS (Really Simple Syndication) is a way for a blog to make its content available in an easily transportable format. So Betty signed up to Google Reader (or any of a million other aggregators (RSS Readers), where she could read all 30 of her blogs in one place, without wasting time visiting all of these other sites. And she lived happily ever after.

Its very common now to visit a blog and see a button linking to the RSS feed for that blog. But in most cases, when you click the icon, you saw raw code.

You see, RSS feeds are constructed from XML code. Its kind of ugly to the untrained eye! But have you ever heard of XLST? It is to XML what CSS is to HTML – only a little cooler. Take a look at the fergusweb RSS feed. Thats not unstyled content! (Its not all that pretty either, but hey – thats feedburner for you!)

Its got an info-box at the top showing ways to subscribe, and it lays out the raw data in an acceptable manner. This is done with the help of XLST. Because XLST doesn’t just dictate style rules but it also allows you to add other content in – content only visible to the web browser, not shown by the reader. Which is great for that “here’s an RSS feed, and here’s what you can do with it” message that should be at the top of an RSS feed.

You see, me – I find an RSS feed, I copy/paste the url into Google Reader. But someone who hasn’t experienced RSS before really needs an introductory note.

So, if you publish an RSS feed, visit it in your web-browser to see what your visitors will see. Does yours look as pretty as mine?

I’m going to be modifying some scripts I wrote for other projects to publish RSS feeds, and I’m going to be integrating XLST in there. Now, I’ve never done this before, so I have a bit of research/learning to do first. I’ll post again with a tutorial on the basics of XLST when I’ve done this.