Description

New Flexibility plus Enhanced User Experience

We all know that sometimes 404 Errors happen on our sites. And sometimes users search but get no results. I believe it’s better to serve users some highly customized and maintained pages/content areas for these cases. What better to do that with Widgets in WordPress? — In my opinion Genesis Framework could improve here so that’s why I just made this little plugin to FINALLY have these two cases maintainable EASILY via your widgets admin. Just place in a search widget, your last blog posts, an image widget, some explanation via text widget, some galleries… You got it. The possibilities are endless. Finally.

Translations

For custom and update-secure language files please upload them to /wp-content/languages/genesis-widgetized-notfound/ (just create this folder) – This enables you to use fully custom translations that won’t be overridden on plugin updates. Also, complete custom English wording is possible with that as well, just use a language file like genesis-widgetized-notfound-en_US.mo/.po to achieve that.

Note: All my plugins are internationalized/ translateable by default. This is very important for all users worldwide. So please contribute your language to the plugin to make it even more useful. For translating I recommend the awesome “Codestyling Localization” plugin and for validating the “Poedit Editor”, which works fine on Windows, Mac and Linux.

Idea Behind / Philosophy

I always wanted the 404 and search not found content easily customizeable! The standard messages like “Sorry, no posts matched your criteria.” are a shame and lame user experience. Widgets in WordPress are powerful and allow for adding really diverse and custom stuff. So, when building my “Autobahn” child theme for Genesis I really came across this idea and technique. I also implemented it in a lot of my client projects. Now I am really happy to represent this tool in form of a plugin to make more webmasters and especially users/visitors really happy – and help them stay longer on your site!

Screenshots

Genesis Widgetized Not Found & 404: the plugin in action on a live site - displaying here the "Search not found" case - three widgets placed in (Text widget, Search Form widget, recent Posts widget). (Click here for larger version of screenshot)

Got the “Widgets” admin page and configure your widgets for the “404 Error Page” and the “Search Not Found” page.

Hope the new widgets will never be needed, but in case, you’re prepared now! 🙂

Note: The “Genesis Framework” is required for this plugin in order to work. If you don’t own a copy it yet, this premium parent theme has to be bought. More info about that you’ll find here: http://ddwb.me/getgenesis

Own translation/wording: For custom and update-secure language files please upload them to /wp-content/languages/genesis-widgetized-notfound/ (just create this folder) – This enables you to use fully custom translations that won’t be overridden on plugin updates. Also, complete custom English wording is possible with that, just use a language file like genesis-widgetized-notfound-en_US.mo/.po to achieve that (for creating one see the tools on “Other Notes”).

FAQ

How can I change the layout of the ‘404 Error Page’ (i.e. go full-width)?

You can use my “Genesis Layout Extras” plugin for that, which has an option for the 404 case built in. Or you can also use my built in helper function and add this little line to your functions.php of your child theme (backup file before!) or to the “Custom Function” section of Prose Child Theme 1.5+:

How can I change the layout of the ‘Search not found’ Page (i.e. go full-width)?

You can use my “Genesis Layout Extras” plugin for that, which has an option for the search case built in. — Or you can also use my built in helper function and add this little line to your functions.php of your child theme (backup file before!) or to the “Custom Functions” section of Prose Child Theme 1.5+:

Note: The above code is restricted to the case when NO search results are found! It doesn’t effect your search results display IF THERE ARE any results!

How can I style the content/widget areas?

It’s all done via your child theme. Maybe you need to add an “!important” to some CSS rules here and there… For more even better styling I included some IDs and classes:

“404 Error Page” section:

the whole content area, before and after all widgets is wrapped in a div with the ID: #gwnf-404-area

each widget in this area has its own ID depending on the widget (regular WordPress behavior!)

each widget gets an additional class: .gwnf-404 — which allows to set some common styles for all widgets in this area

“Search not found” section:

the whole content area, before and after all widgets is wrapped in a div with the ID: #gwnf-notfound-area

each widget in this area has its own ID depending on the widget (regular WordPress behavior!)

each widget gets an additional class: .gwnf-notfound — which allows to set some common styles for all widgets in this area

Note, WordPress itself additionally adds body classes in the 404 case and the search not found case. So you can also use these classes: .error404 and .search-no-results

If that’s still not enough, you can even enqueue your own style, an action hook is included for that: gwnf_load_styles — This hook fires within the WordPress action hook wp_enqueue_scripts just after properly enqueueing the plugin’s styles and only if at least one of both widgets is active, so it’s fully conditional!

Could I disable the Shortcode support for widgets?

Of course, it’s possible! Just add the following constant to your child theme’s functions.php file or to a functionality plugin:

Final note: I DON’T recommend to add customization code snippets to your child theme’s functions.php file! Please use a functionality plugin or an MU-plugin instead! This way you can also use this better for Multisite environments. In general you are not abusing the functions.php for plugin-specific stuff and you are then also more independent from child theme changes etc. If you don’t know how to create such a plugin yourself just use one of my recommended ‘Code Snippets’ plugins. Read & bookmark these Sites:

All the custom & branding stuff code above can also be found as a Gist on GitHub: https://gist.github.com/2473125 (you can also add your questions/ feedback there 🙂

How can I use the advantages of this plugin for multlingual sites?

(1) In general: You may use it for “global” widgets.

(2) Usage with the “WPML” plugin:
Widgets can be translated with their “String Translation” component – this is much easier than adding complex information/instructions to the 404 error or search not found pages for a lot of languages…

You can use the awesome “Widget Logic” plugin (or similar ones) and add additional paramaters, mostly conditional stuff like is_home() in conjunction with is_language( 'de' ) etc. This way widget usage on a per-language basis is possible. Or you place in the WPML language codes like ICL_LANGUAGE_CODE == 'de' for German language. Fore more info on that see their blog post: http://wpml.org/2011/03/howto-display-different-widgets-per-language/

With the following language detection code you are now able to make conditional statements, in the same way other WordPress conditional functions work, like is_single(), is_home() etc.:

Note: Be careful with the function name ‘is_language’ – this only works if there’s no other function in your install with that name! If it’s already taken (very rare case though), then just add a prefix like my_custom_is_language().

NEW: Added support for bbPress 2.3+ forum plugin: Added widgetized content area for the “No results” state of the bbPress Forum search – now you can easily customize this “edge case” with well-known and proved regular WordPress tools (that are Widgets!).

UPDATE: All markup output by the plugin is now fully compatible with Genesis 2.0+, that means for HTML5 if the child theme supports it (is done all automatically & conditionally under the surface!).

UPDATE: Additional stylesheet now uses the WordPress convention for file names: gwnf-styles.min.css (gwnf-html5-styles.min.css) is the minified default version, plus, gwnf-styles.css (gwnf-html5-styles.css) is now the development version. If WP_DEBUG or SCRIPT_DEBUG constants are true, the dev styles will be loaded. This makes development/ customizing & debugging a lot easier! 🙂

UPDATE: Improved versioning of stylesheet, also in light of above update :).

UPDATE: All frontent relevant code is now moved into the plugin’s frontend file and only then loaded!

UPDATE: Updated German translations and also the .pot file for all translators.

1.1.0 (2012-04-23)

NEW: Added two helper functions (via child theme) for applying the Genesis ‘Full-Width’ layout option for one or both ‘not found’ cases! This is very handy for lots of use cases… — See the FAQ section for more info on that!

UPDATE: Placed widget display in conditionals only for the “404” or the “Search not found” case to avoid overlaying of more than one ‘no content messages’. This should finally cover more edge cases…

UPDATE: Improved registering of widget areas/sidebars: switching back to Genesis register function, but now properly wrapped in a conditional, checking for activated Genesis. This way we also get further improved Multisite support!

UPDATE: Improved CSS styling, handling the limition of the empty “p” (left over from the original “no content status” of Genesis).

UPDATE: Updated German translations and also the .pot file for all translators.