Dynamic Form Settings with JQuery

One of the thing I like to do when creating HTML forms is to hide the input fields of features that users have not yet selected. It reduces the clutter on the screen, makes it easier for users to navigate the settings page, and for them to tell which features are currently enabled.

Typically, this is done by using a snippet of Javascript attached to the onclick attribute of a checkbox or radio button. When clicked, the code changes the CSS display property of the hidden fields from none to block (or inline):

<input type="checkbox" name="enable-scroll" 
       onclick="toggleDisplay('scroll-left'); 
                toggleDisplay('scroll-right')"/>

toggleDisplay is the following Javascript function:

function toggleDisplay(id) {
   var el = document.getElementById(id);
   if (el.style.display == 'block') {
      el.style.display = 'none';
   } else {
      el.style.display = 'block';
   }
}

This works very well, but there are two problems. First, it’s a pain to have to scatter snippets of Javascript throughout the form–even if it’s only to call a function. Second, you still have to add more code to initialize the visibility of the fields when the page is load.

Fortunately, there is a good solution to these problems–use the Javascript framework, JQuery.

Continue reading

Posted in JQuery | Tagged , , | 1 Comment

Twenty Eleven Theme Extensions version 1.2 released

As promised a new version of the Theme Extensions has been unleashed on the unwitting public, with a major new feature that gives you twelve new individual color settings (in addition to the color of the link text) on the Theme Options settings page.

The new color settings make it easy to make major color-related tweaks to Twenty Eleven, changing the whole look of the page, if that’s what you want.

I am aware, however, that I may have opened a can of worms by only providing color settings for a limited set of colors. No doubt people will soon be asking for this color, or that color to be added (comment colors especially).

But there are about 150 individual color settings in Twenty Eleven (yes, I counted them), and just imagine the tedium of scrolling through 150 settings one by one changing them to just the right shade of green, or purple, or something. So it would be impossible to capture them all on a single settings page. You can always add your own too, just take a look at the documentation in the Theme Extension part of this web site and you will find out how.

I am willing to consider adding more color schemes (like the existing Light and Dark color schemes you can already select from), but I can’t do the work of designing the scheme myself, since I don’t have the artistic skills necessary. However, if anyone has a color scheme they have put together, I will be more than happy to look at adding it to the plugin (with full credit, of course). It would have to be your own work (or have the author’s explicit permission) and be distributable under the GPL license with the plugin.

Posted in 2011 Theme Extensions Plugin | 29 Comments

A Teaser and a Request

Just as a teaser, I will be releasing version 1.2 of the Theme Extensions plugin in a day or two, and it will allow you to change twelve new individual color settings in addition to the Link Color you can change already on the Theme Options page.

The new code actually integrates with the Theme Options page, and uses the same controls and color picker as used by the Link Color setting, so the new settings blend in quite nicely Also, the menu colors you set will be used for the submenus as well as the menu bar, making their colors more consistent.

I’m just making a final few documentation updates and testing to make sure nothing’s broken, and then I should be ready to post it.

Finally, I’m thinking it would be cool to add some new color schemes to the Theme Options settings along the lines of the Dark color scheme (the hooks are there in WordPress to do it) but I am not a graphic artist and I doubt anyone would want to use anything I created anyway!

But if any of you artistic folks out there have created a new, good-looking color scheme (i.e. they have made a copy of the dark.css stylesheet and modified the colors and icons to create a pleasing overall effect) please let me know and I’ll look at integrating it into a future version of the plugin. It will appear as an option alongside the Light and Dark themes on the Theme Options page, and credit will be attributed, of course.

I can’t promise that I’ll include everything that’s submitted (if I get anything at all!) and it could be another month before it happens (got visitors coming) but I will certainly take a look at anything that is sent to me. It must be your own work, of course, and must be distributable under the same license as the rest of the plugin — GPL.

Posted in 2011 Theme Extensions Plugin | 3 Comments

Twenty Eleven Theme Extensions version 1.1.1 released

Another release for bug fixes only, but important ones:

  • I had forgotten to test the plugin with left-sidebars, and just discovered that the alignment of the content when the Widget Titles option was set was way off.  Fixed that by adding a couple more CSS style overrides for left-sidebar cases.
  • IE7′s fractional width calculations are a little different from other browsers, and was causing the right-sidebar to be pushed to the bottom when you narrowed the width of the page. I made a minor adjustment to the margin values in the CSS (not even noticeable to the naked eye) and that has fixed the problem.

That’s all for now.

Posted in 2011 Theme Extensions Plugin | 1 Comment

Twenty Eleven Theme Extensions version 1.1 released

I have just updated the Twenty Eleven Theme Extensions plugin with a small, but important fix. Turns out that I was erroneously injecting the plugin’s Javascript code into all the admin pages. The code itself is innocuous, but I was compounding that error by embedding a specific version of JQuery with it (instead of the version WordPress embeds by default) which must be incompatible with some of the drag and drop Javascript code WordPress uses, and breaking the Appearance >> Menus page, for one.

Anyway that’s all fixed now. Thanks to David L. for reporting the problem. The new version with the fix has already been posted to the WordPress Plugin Repository.

Posted in 2011 Theme Extensions Plugin | Leave a comment

Twenty Eleven Tips: Using Featured Images in the Header

When I was playing with the new Twenty Eleven Theme Extensions plugin I noticed that the header of the Twenty Eleven theme looks to see if there is a featured image associated with the individual post or page being displayed. If it finds one, and it is wide enough, it will automatically place that image in the header.

That’s a very nice feature of Twenty Eleven, but it’s a little on the quirky side, since:

  1. The image has to be at least as wide as the default header image width–which is typically 1,000 pixels unless you have specifically changed it–otherwise the default header shows up, and
  2. The original set of header images that come with the theme are not in the site’s Media Library, nor can you select them as a feature image by URL, so you will have to copy them to your Media Library before you can use them.

But as long as you understand the limitations, it’s a nice way of varying your header image according to the page or post you’re displaying, and here’s how you do it:

Continue reading

Posted in 2011 Theme Extensions Plugin | Tagged , , , | 2 Comments

New Plugin: Twenty Eleven Theme Extensions

Well, I’m back, as a certain hobbit once said. Apologies to anyone who has been asking questions about Embedder while I’ve been away. I have no real excuse other than I just lost interest in the whole business of writing code for a while, and when I do that I tend to ignore everything completely.

Anyway, I’ve just posted a brand new plugin at WordPress.org, called Twenty Eleven Theme Extensions. (I have this overwhelming urge to type “Twenty Twelve” every time I type the name for some reason, probably because all the nonsense about the supposed end of the world got it stuck in my head!) It’s not as ambitious as Embedder, but hopefully some people will find it useful.

It all came about when I was fiddling with a new installation of WordPress for a friend, and I saw that others had the same reaction as I did to the missing sidebar on some pages. I understand the reasoning behind doing that, but it can be a little jarring at first, and in some cases I’m sure it would make more sense to keep the sidebars there.

I’m not sure how yet whether I will be updating this plugin much. I guess it depends on whether there is enough demand for new options that will help make the theme more usable and flexible. If you have any ideas, feel free to let me know — preferably in the Support Forum for the plugin.

Posted in 2011 Theme Extensions Plugin | Tagged , , , , | Leave a comment

Embedder version 1.3.2 released

Yup, another bug-fix-only release.  It seems that my attempts to make Embedder compatible with PHP4 introduced a problem for some people trying to create embeds, which is not good, obviously, so I’ve posted a quick fix for the problem.

Please continue to let me know if any of you are having problems (and successes!). Without any feedback I can’t tell (beyond my own testing) whether the plugin is being used successfully by everyone of if it’s breaking hopelessly as soon as you install it!

Posted in Embedder Plugin | 4 Comments

New Parser Features — The Default Attribute

The new parser introduced into version 1.3 does everything the old parser could do, and more. Perhaps the most useful new feature is the default attribute. (Note: this is different from “attribute defaults” which were also in the old parser.)

If you have even posted comments in forums, you may have noticed that they usually provided a set of text formatting tags like [b], [i], and [quote], very much like embeds and WordPress shortcodes. The tags belong to a widely used tag language called BBCode, which is essentially a simplified version of HTML.

Continue reading

Posted in Embedder Plugin | 1 Comment

Embedder version 1.3.1 — (um — Fixes Ahoy?)

Okay, thanks to Phil’s feedback I have rooted out a couple of major problems when running on PHP4 and when you’re running the WordPress server on Windows. The fixes were just a few single line code changes here and there, so nothing too much to worry about, though I would recommend you upgrade from 1.3 since it will keep you up-to-date.

I can’t promise that I have fixed everything with the new parser in every possible configuration, but the plugin will now run much better in configurations running on PHP4 and Windows.

BTW: If you are still running PHP4, you really should consider moving to PHP5 as soon as possible, since WordPress is going to be dropping support for PHP4 altogether next year (about time, really!). I believe the majority of web hosts now provide a very quick and easy way to upgrade your server to PHP5, and it should only take a couple of minutes to do.

Posted in Embedder Plugin | 4 Comments