For some reason, I think related to WordPress 3.0, the jQuery that was being bundled was interfering with my own google-loaded jQuery. I had deliberately kept that version lower than the official version, because of some of the scripts that were being included.

But after upgrading to WordPress 3.0, it appears that this then started overriding my own version, causing some scripts to really screw up (jQuery.easing mostly).

So after looking around for a fix, I found this post by Falcon1986-Online, and he had written about a solution, which worked well, which was to deregister the script like so:

<?php wp_deregister_script(‘jquery’); ?>

Put that before the wp_head() call and it fixes the problem. Now only if jQuery.easing would be fixed to work with a higher version of jQuery…

On a site I’ve recently redesigned, GRS Sign Company, their load times have increased because of more images and more posts. Subsequently they noticed that some of the structural layout was loading before it should, then jquery would take over to reorganize.

So I was asked to add in a splash screen. Straightforward enough.

I created a section in the admin backend functions.php file and let them choose yes/no to add splash screen. Using this I altered the header.php to add in the splash section.

Adding a small section inside the $(document).ready() area of the header, I set the splash css display to ‘none’ right at the end after everything had loaded.

Instead of a variable, I am now using a class to keep track of the div’s toggled status. In the header.php file of the theme, I have this bit of code:

$(document).ready(function() {
 $(‘.post-collapse’).click(function() {
  $(this).parent().parent().siblings(‘:eq(0)’).slideToggle(500);
  if ($(this).hasClass(‘slid’)) {
   $(this).css({backgroundPosition:”top left”});
   $(this).removeClass(‘slid’);
  } else {
   $(this).css({backgroundPosition:”0px -36px”});
   $(this).addClass(‘slid’);
  }
 });
});

The post-collapse class is the class attached to a div which is clicked to collapse the main post div. The jquery checks for the slid class. This changes the background position of the image in the post-collapse class, for aesthetic purposes exchanging a + mark for a – mark.

The structure of the html post is as follows:

<div class=”post”>
 <div class=”post-title”><h2>TITLE</h2><div class=”post-collapse”></div></div>
 <div class=”post-content”></div>
 <div class=”post-bottom”></div>
</div>

But addClass is definately a great way of keeping track of something like this, especially in a WordPress environment where there may be many post classes on the page (such as an index page, category page etc.,).

Since that theme uses jQuery I thought that the widget was interfering, and sure enough it was. It was including a prototype.js from it’s own directory. Easy enough to fix though. Edit the flickr-badge-widget.php file and at line 135:

135: function output_fbw($fbw_flickr_id,$fbw_tags,$fbw_rows,
  $fbw_cols,$fbw_size,$fbw_transition,$magisterLudi) {
136:   echo ‘<script type=”text/javascript” src=”‘ . get_settings(‘siteurl’) . ‘/wp-content/plugins/flickr-badge-widget/prototype.js”></script>’;
137:   echo ‘<script type=”text/javascript” src=”‘ . get_settings(‘siteurl’) . ‘/wp-content/plugins/flickr-badge-widget/flickr-badge.js”></script>’;

After line 136 add this:

   echo ‘<script src=”http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js” type=”text/javascript”></script>’;

That’s it, upload the file to the server with the rest and you’re ready to go.

First is the sidebar; the main content area on the left had a right grey border. I’ve removed that now, and instead of a border put definate headers on the sidebar sections, and a small shadowed section on the left side.

Secondly, the menu has been changed a lot. It is now a lot cleaner, and clearer. I separated a lot of the ‘signs’ content into it’s original sections, signs, engraving, and fitting.

Third, the blog has been updated with both these changes. New datestamps have been put in, and spacing has been drastically removed.

Fourth is the new additions that are added with the jquery, a slide viewer on content pages that let images be put in there shortening the page but without removing the image content.

All in all a lot of the spacing has been tightened up, and it’s a lot cleaner now. More images put in for the content, and new content sections added. This is a minor update, but still worthy of showing off.

I have been working on this new wordpress theme for several weeks now and in the past few days I have had the chance to release it fully. One or two tweaks here and there ensued but it’s much better now and we’re already on version 1.0.2.

The new theme ‘Shocking’ is a two column theme, with a fixed width. It supports the new threaded comments that was released in WordPress 2.7, and is backwards compatible with previous versions. It has some more premium features in it, such as jquery animated sidebar blocks, and jquery animated boxes for the post information on each post. All of the graphics are pngs, which even work with IE6. This theme is compatible with IE6, IE7, FF, Safari, and Opera.

View the Shocking WordPress Theme page, or see it in action.