WordPress Resources

Published January 22nd, 2010 under General

We often receive requests for information on where to learn more about WordPress theme and plugin development. Unfortunately, the official resource site WordPress.org is not a good place to go for information beyond the extreme basics of WordPress or encyclopaedic type information about various hooks and filters and functions used within the core software. So here is a run-down on my favourite unofficial sources of WordPress tips, tricks and support.

WP Tavern

The WordPress Tavern has become the defacto goto place for many WordPress experts. The site is run by the unofficial WordPress community superstar Jeff Chandler who is based in the USA. The site includes a blog with posts from both Jeff himself and other contributors and a terrific forum for discussing the latest news, tips and tricks of WordPress. The site is also the home of WordPress Weekly, the best podcast about WordPress.

WP Garage

Although not updated as often as it once was, WP Garage is a terrific source of information about plugins, themes and basic tricks. The site is ideally suited to those wanting to move from being a novice WordPress user to a power user as it includes a series of basic coding tricks and tips. The site is run by Miriam Schwab of Israel who is also the CEO of illuminea, an internet presence and marketing firm.

Justin Tadlock / Theme Hybrid

Justin Tadlock is one of the leading experts on theme development for WordPress. Justin is very much at the cutting edge of creating innovative themes which can be modified extensively (via child themes) without touching the core theme code. He is the author of Theme Hybrid and also written some high quality plugins for WordPress. Justin operates a theme club which includes a high quality support forum for his various (free) products.

Other resources

There are so many other resources about WordPress that we couldn’t possibly list them all. However here is a list of resources we also recommend checking out.
Theme Shaper – An excellent site by Candian based Ian Stewart, about WordPress theme development and in particular his parent theme, Thematic.
WP Vibe – A resource site about WordPress plugins and themes by Dre Armeda and Jonathan Dingman.
SitePoint – Although not a WordPress specific site, SitePoint is an excellent place to learn more about the software. SitePoint includes the most popular web development forum on the internet.
WP Mu Tutorials – One of the best places to find Mu specific information about WordPress. The site is run by husband and wife team Ron and Andrea.
Andrew Rickmann’s blog – An excellent site for opinions on the more advanced issues relating to WordPress.
Mark Jaquith on WordPress – Mark Jaquith is one of the core developers for WordPress and also the best of the core developers at dispersing information about the cutting edge of WordPress development.

Animating your dropdown menu

Published January 11th, 2010 under General

In our IE Hovers post we outlined how the Superfish jQuery plugin can be used to create a smooth flowing animated effect for your dropdown menu. However the Superfish script is reasonably large and many people don’t require the various options which are available with the Superfish plugin. So here is an explanation of a new way to create smooth animated dropdown menus with only a few lines of code (plus jQuery).

The following code will produce a clean smooth flowing animation effect just like you can see in the menu above for our own site.

function suckerfishmenu(){
	$('#suckerfishnav ul').css({display:'none'}); // Opera Fix
	$('#suckerfishnav li').hover(function(){
		$(this).find('ul:first').css({display:'none'}).slideDown(300);
	},function(){
		$(this).find('ul:first').css({display:'none'});
	});
}
 $(document).ready(function(){
	suckerfishmenu();
});

To make this work, you simply need to insert the above code after you load jQuery and between the <head> tags for your page and use a dropdown menu with an ID of #suckerfishnav. Make sure you reference the jQuery.js file correctly (available here). If you are using WordPress, then you will want to make sure you are loading jQuery via the enqueue method to avoid clashes with plugins which use jQuery and add var $ = jQuery; to ensure that jQuery works with the non-conflict mode of the version of jQuery version bundled with WordPress.

If all of that seems too complicated, don’t despair as the new version coming soon of our PixoPoint Menu plugin has this new animation method built in so that you won’t need to touch any code to get it working.

What the heck are Superfish and Suckerfish?

Published December 15th, 2009 under General

Many people get confused when working with our WordPress menu plugins and CSS generator as to what exactly “Suckerfish” is and what the difference is between it and “Superfish“. Most of you will never need to understand the difference, but for those of you keen to dive in and either custom build your own menu or tinker around under the hood of our plugins, here is a brief run-down on what they are and how they work.

Suckerfish

The original Suckerfish javascript code was posted on A List Apart by Patrick Griffiths and Dan Webb. As outlined in our :hover pseudo class post, it simply adds support for the same effect as the :hover pseudo class in Internet Explorer 6 and older browsers.

The following code is based on the most popular form of the Suckerfish script, the “Son of Suckerfish” by HTML Dog. This code works with any unordered list with an ID of #suckerfishnav.

sfHover = function() {
var sfEls = document.getElementById("suckerfishnav").getElementsByTagName("LI");
for (var i=0; i&lt;sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

The following code is more suitable for situations in which you need support for multiple dropdown menus on the same page as it works on any unordered list with a class of .sf-hover (ie: you can’t have two menus with the same ID therefore this class system works better in such situations).

function sfHoverEvents(sfEls) {
var len = sfEls.length;
for (var i=0; i
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(" sfhover", "");
}
}
}
function sfHover() {
var ULs = document.getElementsByTagName("UL");
var len = ULs.length;
for(var i=0;i
if(ULs[i].className.indexOf("sf-menu") != -1)
sfHoverEvents(ULs[i].getElementsByTagName("LI"));
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);</code>

Superfish

Superfish is a plugin for the jQuery javascript framework. Unlike the simple Suckerfish methods outlined above, Superfish adds many more features to your menu than just :hover pseudo class support in IE6.

Some features of the Superfish jQuery plugin are:

  • Timed delay on mouseout to be more forgiving of mouse-piloting errors.
  • Animation of sub-menu reveal. The animation speed is customisable
  • Keyboard accessibility. Tab through the links and the relevant sub-menus are revealed and hidden as needed.
  • Supports the hoverIntent plugin. Superfish automatically detects the presence of Brian Cherne’s hoverIntent plugin and uses its advanced hover behaviour for the mouseovers (mouseout delays are handled by Superfish regardless of the presence of hoverIntent).
  • Indicates the presence of sub-menus by automatically adding arrow images to relevant anchors. Arrows are fully customisable via CSS.

To see a demo of the Superfish plugin in action, hover over the menu of the Dunedin Ice Hockey Association.

HTML

We will post another blog post soon outlining best practices and how to create your own custom HTML for your menu.

Other scripts

There are many other alternative scripts out there too. If you have any favourites, please post a link to them in the comments.

:hover pseudo class and evil IE!

Published December 10th, 2009 under General

There seems to be some confusion amongst the users of our site about exactly why our WordPress menu plugins include javascript files, yet work fine without it, so here is an explanation. If none of this makes sense to you and you are using one of our WordPress menu plugins, don’t worry! Our plugins handle all of this stuff for you automatically so you don’t need to.

:hover pseudo class

It has been known for a long time that it is possible to create dropdown menus purely using nested HTML blocks and the :hover CSS pseudo class. Unfortunately, although almost every single web browser added support for this feature a long time ago, Microsoft decided to drag it’s heels and waited a horrendously long time before eventually launching Internet Explorer 7 (IE7) which finally had support for the :hover pseudo class. Many users still do, and likely will for many years to come, use Internet Explorer 6 (IE6) as their browser. There are many, many reasons why they shouldn’t be using it, but unfortunately some users either refuse to upgrade, don’t know how or are simply stuck on an old school corporate intranet without the ability to upgrade. For this reason a slew of methods via javascript have been created to add support for the :hover pseudo class into IE6 and older browsers. This is the reason that all of our WordPress menu plugins use javascript, they work without the javascript in all modern browsers, but for Internet Explorer 6 and older browsers they use a javascript to allow the menus to still operate.

Suckerfish and conditionals

The suckerfish script is the standard script used to add the same effect as the :hover pseudo class in IE6. In the past, it was common place to simply load the file for every page load, however now that IE6 does not have a 90%+ hold on the browser market place it is advisable to only serve the scripts to those browsers that need it. The best way to serve the file only to those older browsers is to place a link to an external script via IE conditional comments like this:

<!--[if lte IE 7]>
<script type="text/javascript" src="suckerfish_ie.js"></script>
<![endif]-->

You could alternatively include the code directly on the page itself, but this increases the page load slightly for all browsers rather than just limiting it to the old clunkers like IE6. With conditionals you can save quite a few lines of code on every page load.

Once you have a Suckerfish script running on your page, you can apply a class (usually .sfhover for most scripts) to the CSS and use that for IE6 instead of the :hover pseudo class.

Why we need to use IE7, not IE6 conditionals – another Microsoft screwup

You may have noticed that the above code is written to serve the Suckerfish script to IE7 and older browsers, despite IE7 already featuring support for the :hover pseudo class. Previously this would have been considered silly as it would only slow down the loading of a page in IE7. However Microsoft being Microsoft, have decided to add a compatibility mode into Internet Explorer 8 (IE8) which it says “will behave just like IE7″. However this is entirely incorrect as IE8 compatibility mode does not support the :hover pseudo class at all. Most of the time this would not matter, but if a user is browsing your site and for whatever reason decides to click the “compatibility mode” button, they would not be able to use your menu if there was no javascript being served to it, and since it considers itself to be IE7 it will not follow IE6 conditional comments. For this reason, we must now place the script inside IE7 conditionals as above.

Coming soon will be a blog post about alternatives to the Suckerfish script, the best versions to use and how to setup your custom HTML.

Small Potato redesign

Published November 2nd, 2009 under General

Tung Do (aka Small Potato)Some you may have noticed the drastically different look we have around here. This has been thanks to the brilliant work of Tung do (aka Small Potato). Tung has recently come back from an extended break from web design and offered to redesign PixoPoint.com. We were stoked when he sent us two PSD’s with the design you see here now. After some quick coding we turned them into a new WordPress theme and the result is before you right now (unless you are reading this via RSS).

If you would like a custom WordPress theme designed by Tung Do and coded here at PixoPoint, please get in touch via our contact form for more information.

Small Potato redesign

Our new site design after Tung Do (aka Small Potato) kindly redesigned it for us.

 

PixoPoint WordPress Unzipper

Published July 14th, 2009 under General

WordPress is known for it’s “five minute installation”. However here at PixoPoint we’re found it takes me a lot longer than five minutes due to thelaborious task of uploading stacks of files via FTP on slow internet connections.

To improve the upload time, we are releasing a very simple script which allows you to upload the raw wordpress.zip file (as downloaded from WordPress.org) along with the script, and when the script is run it is able to decompress the zip file directly onto your webhost. The raw zip file is significantly faster to upload than all of the files on their own.

Download PixoPoint Unzipper for WordPress

We understand that another company is developing a product which will allow you to simply upload a script which when executed will download WordPress for you, provide an easy to use interface for writing your wp-config.php file, delete itself then run the regular WordPress installer. We will post a link back to that product on this blog post when it is available. In the mean time, our simpler tool will hopefully be of use to some of you.