In: On: 2008 / 05 / 12 Short URL: http://ozh.in/kx

WordPress 2.5 introduced per-user admin color schemes, letting you style and design your own admin area. This said, how easy is it to craft a nifty CSS with harmonious colors? For most of us, it's definitely not easy. With the Admin CSS Designer plugin, for all of us it's going to be fun, easy, and addictive!

COLOURlovers

COLOURlovers is a design community focused on colors and sets of colors, palettes. It's a color and design blog. It's a community of color lovers who create hundreds of thousands of colors, palettes and patterns.

Ozh & COLOURlovers' Admin CSS Designer

This plugin pulls colorful palettes from COLOURlovers, and lets you re-arrange, tweak and modify colors, then save them real time. No dirty hand CSS editing. Right below is a 3 minutes quick demonstration of how the plugin looks and what it can do :

Usage and explanations

Once you've activated the plugin, head to your Profile page, and pick the "Random CSS + Designer Tools". This very special stylesheet will load a random palette from COLOURlovers and make a color scheme for your admin area. It will also load the Designer Tool.

This colorful and powerful tool has 5 controls:
Dismiss: not happy with the palette you got? Forget it and load another one.
Rotate: looks good but it's not it yet? How about rotating colors so they apply and match differently on the page?
Lock: by default, a new palette loads on every page. Unless you lock your current palette, of course.
Save: Got something pretty? Save it as a standalone CSS that will be available in your Profile.
Pick: Found a palette you love on COLOURlovers? Enter its number and load it as a stylesheet.
Undo: (not shown here) Of course, there's an undo button. It will simply revert to the original palette if you don't like your changes.

Of course, you are in command. If you find a pretty palette but want to switch two colors, simply drag them. Or, if you want to completely change a color, click the little color swatch, and colorize the way you feel it.

The plugin comes with a handy bookmarklet: whenever you visit a palette you like on COLOURlovers, you're a click from making it an admin CSS for your blog!

Bundled with the plugin, you'll find 10 custom color schemes made from 10 COLOURlovers' palette. Play with them, preview them, delete them, then make your own!

What for ?

There are two ways to give your admin area some color love.

#1: Let the tool charm you on every page
During the few weeks of coding this baby, this is what I've been doing: just let the plugin load a new and refreshing color scheme on every page. Got something ugly or that makes things unreadable? Just click the "Dismiss" button and get another one. In about 8 times out of 10, you'll get a really cool color scheme. And you'll often get something so beautiful that you'll want to save it :)

#2: Use it to make your definitive color scheme
If you just want to make the most beautiful CSS ever with the crispiest colors ever, the Admin CSS Designer plugin is your perfect tool. Edit and modify colors real time in every page until what you see is what you love, save the palette as a standalone stylesheet, and use it forever.

Download

Download the plugin :
ozh-colourlovers-admin-css-designer.zip
Extract and upload to your blog, preserving directory structure, then activate.
Note: download counter here and stats on wordpress.org may differ and reflect the number of downloads made directly there

Credits, limitations, misc stuff

  • The cute icons used in this plugin are coming from famfamfam's silk set. Awesome work.
  • Photos here above by Cliff Robin and DailyPic
  • The cool music in the above video is "More Than a Feeling" from Boston. Used with absolutely no permission from anybody, but hey, I do own the CD :)
  • The plugin was coded for and with Firefox. I don't have access to Safari, but it should be as cool as intented. With MSIE and it's as fugly as expected, and some features are disabled. You've been warned.
  • Visit COLOURlovers and read their blog. It's truely awesome.
  • If you use and like the Admin CSS Designer plugin, blog and tell the world about it!

WordPress 2.5 introduces a neat option: per user Admin Color Scheme. This means that each user can select a stylesheet they like best for the whole admin area. Now onto the fun stuff: adding a per-user selectable custom stylesheet for your blog.

Admin Color Scheme

Concept

The new function behind this feature is wp_admin_css_color(), which is used as following:

  1. wp_admin_css_color(
  2.     $shortname, // eg 'mycoolstyle', used to store setting in the wp_options table
  3.     $longname, // eg 'My Cool Style'
  4.     $css_url, // URL to your custom stylesheet
  5.     array(
  6.         $color_code_1, // a HTML color code like '#123456'
  7.         $color_code_2, // or 'red'
  8.         $color_code_3, // or 'rgb(100,100,100)'
  9.         ... // any number of color codes you want
  10.     )
  11. );

This function call populates an array ($_wp_admin_css_colors) which is then used on the profile page to display the cute colorful little table cells. In your plugins, hook the function call into 'admin_init', and you're done.

Example

Say you're a Brazil fan and you want to make a plugin that adds some sunshine into your admin area. You would create a custom stylesheet that would reside into your plugin directory, and the plugin itself would be something like:

  1. <?php
  2. /*
  3. Plugin Name: Admin Custom CSS: Brazil!
  4. Plugin URI: http://planetozh.com/blog/
  5. Description: Plugin example: add a per-user custom CSS to the admin area
  6. Author: Ozh
  7. Version: 0.1
  8. Author URI: http://planetozh.com/
  9. */
  10.  
  11. add_action('admin_init','custom_admin_css_brazil');
  12.  
  13. function custom_admin_css_brazil() {
  14.     $plugin_url = get_option( 'siteurl' ) . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__)) ;
  15.     wp_admin_css_color(
  16.         'brazil',
  17.         __('Brazil'),
  18.         $plugin_url . '/wp-admin-brazil.css',
  19.         array(
  20.             '#3c940c',
  21.             '#fffc01',
  22.             '#3005eb',
  23.         )
  24.     );
  25. }
  26. ?>

Real example for the not-so-DIYers : I made this quick plugin and its very quick stylesheet (be warned, the visual result is rather ugly): Plugin Example: Custom Admin CSS.

Braziiiil

Note the cool CSS little trick in the options form :)

One of the first things I wanted to improve in the admin area of my WordPress blog, back in the 1.5 days, was the header menu. I wanted to be able to reach any admin page in one click, instead of first clicking on the first level link ("Manage" for example) and then only on a submenu link ("Comments") So came a very neat plugin : the WordPress Admin Drop Down Menu

When WordPress 2.7 and its new and optimized user interface came, I thought there was still room for improvements: a horizontal menu gave the admin area more of a "desktop application" feel, and I think it's superior to a vertical menu. So I updated the WordPress Admin Drop Down Menu.

Download

Get the plugin :

Download the plugin :
ozh-admin-drop-down-menu.zip
Extract and upload to your blog, preserving directory structure.
Note: download counter here and stats on wordpress.org may differ and reflect the number of downloads before this plugin was hosted on the plugin directory

Activate and enjoy. Another friendly install & forget piece of PHP.

Features

  • Customizable color scheme with a neat color picker
  • Normal mode for regular users, compact mode for real estate maniacs, minimal mode for those who never have enough
  • Optional cute icons from FamFamFam
  • Enhanced compatibility with handheld devices
  • Joy and happiness for every day

Javascript is involved for advanced features and to make stuff compatible with MSIE6, but on any decent browser everything works even with Javascript disabled.

Super neat color picking.

Any color you'll love.

Normal or compact display.

Browser compatibility

The plugin has been developed on Firefox 3, Chrome and MSIE7. It should do fine with MSIE6 and Safari too.

There are glitches with Firefox 2 and Camino which both use a deprecated rendering engine. There are also glitches with Opera. I won't fix these, but if anyone wants to submit a CSS patch to resolve one of these issue, you're welcome :)

Developer friendly

The plugin comes with a wickedly cool API that will allow other plugin developers to interact with it, like adding your own custom icon for your plugin. Read the API for Coders page for examples and documentation. Also, all elements the plugin produces get custom CSS classes and id's to allow easy styling or selecting.

Translations

The plugin is ready for interglobanalization and there is a .pot template file included so polyglots can even make their own translation and sent the .mo and .po files to me that I'll include in the package.

The plugin comes with the following translations, in no particular order:

And maybe more since I might totally forget to update this list :)

Older Versions

All my plugins are designed to run on the latest WordPress version available. Upgrade WordPress whenever a new version is out, or be sorry when your site gets compromised.

If for some unintelligent reason you need to get an older version of this plugin, it might be available, yet totally unsupported or recommended. Check here: Other versions.

Feedback, Bug report, Feature request

Sure. Feed me back. Like it? Blog about it. Love it? Click on the download link, see the Paypal button appear, and give it some clicks!

If you're reporting bugs, you're welcome, but please provide a screenshot and informations about your browser & your OS. I'm not supporting deprecated blogs or plugins or browsers, and I can't respond to incomplete bug reports.

If you're suggesting a feature, you're welcome too, but I won't add an admin menu on the public side of the blog, on top of pages. If you're looking after having this menu fixed on top of page, check this companion plugin that works as a plugin to this plugin: Admin Menus Fixed.

The essence of plugins is giving to WordPress users more control over their blog, that is, most of the time, more options. Typically, a plugin adds a page under the Settings menu, where you can modify the options (see this article on register_setting() for best practices).

But if you think about multi user blogs, it can make sense to implement per user options instead of "global" settings. And guess what? It's dead easy.
Read More

As you may know already (and if you don't, dude, follow me) I was one of the judges in the WordPress Plugin Competition held by Weblogtoolscollections.

The podium for this year's comp has been finally revealed so, as promised, I'm now publishing the 43 reviews of the 43 contestant plugins. Warning: this is going to be a long one.

Read More

Short intro for readers who don't follow me or this blog's feed: I've been a judge in the annual WordPress Plugin Competition, and as such I have reviewed a number of plugins. Read more about this.

As promised, I'm going to share a list of the most common mistakes, errors, misunderstandings, bad habits or wrong design decisions I've encountered while reviewing all these 43 plugins. Some are highly critical stuff (I've contacted 3 plugins authors after finding serious security holes in their plugin), some are more potential annoyances than real bugs, or are just causing a waste of server resources that could be avoided, but all have something in common: they're trivial to fix.

wtf-code
(Image stolen from Thom Holwerda without permission)

I've classified them in two parts: 10 bad code signs, plus a bonus with design decisions that suck. If you consider yourself a semi experienced coder or better, be sure to skip this article, you're not going to learn a thing :)

Read More

With the recently launched WordPress 2.7, bloggers now marvel at how clean, beautiful and usable is the new interface. But do you remember what it used to be a couple of months ago? For those who started using WordPress years ago, can you remember what your admin area looked like?

Since I have an archive of all versions of WordPress on my development computer for function implementation historical purpose, I thought it could be fun and interesting to install them all and get reminded of what we used to use.

Ready for five years of UI evolution, from 0.7.1 in 2003 to 2.7 in 2008? Let's go!
Read More

Here is part 2 (of 2) of my "reviewing", mostly from a plugin coder's point of view, the plugins running in the WordPress Plugin Competition.

Please, please and puh-leaaase, if you are a contestant and if you didn't read Part One, do read it before you proceed to part 2. There is a mandatory disclaimer that you and me don't want you to miss before you read any comment I could have made on a plugin of yours :) Thanks in advance. Now, let's go:
Read More

In: On: 2005 / 09 / 03 Short URL: http://ozh.in/ko

In every WordPress theme there are places that are supposed to be edited and customized by the end user who is using the theme : an "About you" block to fill in, a loop to customize when you want to add "Asides" post style, some CSS to tweak to use an personal image in header, etc…

The problem is : most bloggers are not PHP or HTML expert, can't tell the difference between an HTML tag and a PHP tag, and simple editing of templates can be hazardous and tedious to them. Adding an admin menu in your theme ensures that end users can customize things without editing source files, just as naturally as changing a WordPress option in the admin area.

WordPress Theme Toolkit is a PHP class that gives WordPress theme authors the opportunity of creating a persistent admin menu for their theme as easily as editing 3 lines in a file.

You are a theme author ? Have enough skills to edit three lines ? Add an admin menu to your theme ! (click to enlarge)
Theme Toolkit : admin menu example

Just to be sure : WordPress Theme Toolkit is not a theme with an admin menu. It is something that makes adding an admin menu to an existing theme as easy as 1-2-3.

This long article is divided in shorter sections :

  1. Intro : well, here.
  2. Overview : a quick tour about features and how easy things are.
  3. Manual : detailed features and how-to
  4. Download ! : files and credits.
  5. Ideas and Examples : suggestions and ideas of what you could add to your theme … and a real WordPress Theme as an example of use.
Page: #1 #2 #3 #4 #5

This is were I centralize all my coding projects. You will find here: WordPress plugins, Themes stuff for WordPress, other WordPress related projects, and other projects or bits that are not related to WordPress.

WordPress Plugins

  • Plugin: Always Remember Me

    Less login forms because your blog will not forget you.

  • Plugin: Ozh’ Tweet Archiver (Backup Twitter With WordPress)

    Backup all your tweets in a WordPress powered blog.

  • Plugin: YOURLS Plugin

    YOURLS is a Bitly clone (see below). This plugin is the bridge between YOURLS and WordPress, to create personalized short URLs for your posts.

  • Plugin: Liz Strauss Comment Counter

    A highly configurable badge (similar to Feedburner badges, but more flexible!) to show how many comments you have on your blog. Made for Liz Strauss from Succesful Blog.

  • Plugin: No Login

    A plugin for localhost developers: never log in, you're always the admin.

  • Plugin: Admin CSS Designer

    This plugin pulls colorful palettes from COLOURlovers, and lets you re-arrange, tweak and modify colors, then save them real time. No dirty hand CSS editing, everything is done simply visually. My sexiest plugin.

  • Plugin: Better Plugin Page

    Less clutter on the "Manage Plugins" page with tiny icons and quick action links, plus a filter to sort/display plugins. Useful if you're running a lot of plugins.

  • Plugin: Absolute Comments

    Managing comments, the way it was meant to be. Reply to comments from your "Manage Comments" page, or from the notification email, without having to visit the post page first. Supports threaded comments, and fully translated in several languages. A must-have for any blog with more than 10 comments.

  • Plugin: No Howdy!

    Some people don't like that WordPress says "Howdy!" in the admin interface.

  • Plugin: Who Sees Ads

    The ultimate ad management plugin. Manage all your ads and decide who will see them, depending on the context: first time visitor or long time reader, search engine visitor, timeframe, ad view count, age of post, etc… Comes with an advanced user interface to visually create display rules.

  • Plugin: Correctly Spell WordPress

    Simple plugin to never write again WordPress, Word Press or whatever. One word, capital W and P, it's WordPress!

  • Plugin / Widget: Your Youtube Favorite Videos

    Publicize and share the favorite videos you bookmarked on Youtube. Comes with a very clean Widget interface.

  • Script: Hooks and Filters Flow

    Not a plugin, but a debug help : lists every filter / action for every hook on your blog. Lets you hunt down plugin priority conflicts.

  • Plugin: FAQ Auto Responder

    Have a blog where readers often ask the same questions ? Give the Auto Responder a try and save your support time !

  • Plugin: WordPress Admin Drop Down Menu

    The lazy and the productive will love it : all admin links available in a neat CSS driven drop down menu. No need to click on “Manage” then “Comments” to edit comments, go to any admin page from any admin page. Demo.

  • Plugin: Better Feed

    Your feed, on steroids : add a custom footer to RSS items with, for example, a copyright notice, a “Read More (400 words)” links, an “Add to del.icio.us” link, a list of related entries. Improve connectivity between your feed and your site.

  • Plugin: Random Words

    Want a random quote plugin ? Want to change the old boring comment pages full of “Joe said” with something random like “Joe thought“, “Joe wrote” and “Joe replied” ?
    Random Words is a WordPress Plugin allowing you to manage a number of lists with any items, and display random items from these lists. Everything is managed from within the Admin interface of your blog, in a very neat interface.

  • Plugin: Avatar Popup

    Personalize, if not humanize, your posts, adding (CSS) popups containings avatars next to mailto links, as well as next to any word. You can chose avatar images, or let Gravatar chose it for you.

  • Plugin: Auto Moderate Comments

    When a post gets old, instead of simply closing it, send comments and trackbacks to the moderation queue.

  • Plugin: taga.licio.us : a Way to Integrate del.icio.us

    Taga.licio.us is a tag filter for del.icio.us/ : it produces a page with links from selected tags, allows to integrate del.icio.us links for one or more tags into an existing page, limited to a specified "freshness" (links of the day ? of the hour ?), and comes with gazillions of options. If you are a WordPress user, it is also able to directly post into your database to, say, run the script daily at fixed hour and print links on a given subject right into your blog. Not only your links. Everyone’s links.

  • Plugin: WordPress Category Map

    Before “tag clouds” or “heat maps” were famous, this plugin created a … tag cloud, or heat map, from your Categories !

  • Plugin: Click Counter for WordPress

    You have a blog. You have stats telling you how many people read it. You post links. But do you have something telling you how many people click on your links ?

  • Plugin: IP to Nation

    Guesses your visitor's Country from his IP.

WordPress Themes related

  • Framework : WordPress Theme Toolkit

    Theme authors now have the opportunity of adding an admin menu to their theme as easily as editing 3 lines. And I mean it. Lots of examples provided.

  • Utility : WordPress Theme Zip

    Generate on the fly zip archive from a theme directory. Lazy theme authors use this to avoid the hassle of updating and uploading a new zip file every time they make a change to a file.

  • Theme : MiniBlog

    A tiny, grey shaded, lightweight and soft theme.

  • Theme : Problogger Clean

    I worked with Tim Yang on what has to be the first Adsense optimized WordPress theme, with unique features powered by my WordPress Theme Toolkit.

  • Theme : Minimalissimplistic

    Elastic minimalist layout with additionnal features all driven from an admin menu, integrated in WordPress admin area. This theme is an example of how easy it is to add an admin menu when using WordPress Theme Toolkit.

Other WordPress Stuff

  • Tool: WordPress Plugin Update Check

    An online tool to make sure wordpress.org will correctly detect when your hosted plugin is updated.

  • Tool: WordPress Function History

    When was this particular function introduced or deprecated? was it in WordPress 1.5 or 2.2 ? Find out.

  • RSS: planetWordPress

    An aggregation of several WordPress related websites. Just like the one in your Dashboard, with more WordPress related news.
    Celebrity Endorsement : more than 1000 readers by feed!

For more WordPress related stuff, you could also browse the WordPress archive of my blog. Many tips, tricks, links and winks.

Non WordPress Projects

  • PHP: YOURLS

    YOURLS (Your Own URL Shortener) is a set of PHP script to generate short URLs, like bit.ly or TinyURL. Very flexible, very easy to setup, with nice analytics.

  • .exe: Azertyck`

    Un clavier Azerty français avec `backtick` à la place du ²

  • Service: twtbg.me

    How does your Twitter background look like in bigger or smaller screen sizes? Check out!

  • Service: scr.im

    Sharing your email in forums, classifieds or Twitter? This cute service protects your email from spammers and harvesters

  • Javascript: LightBox Clones Matrix

    This page lists dozens of "LightBox" scripts (those that display images and other objects in somehow cool CSS popups) in a neat interface allowing for filtering and quick scanning.

  • PHP: Honey Pot's http:BL PHP script

    Use Project Honey Pot's API to ban suspicious IP's from your website.

  • RSS/Ajax: Ajax Feed Checker

    Check if RSS/XML feeds from a given list are still alive and kicking. Useful when running a "planet" aggregation.

  • PHP: Emulate Gradient Fill with GD

    Emulates a gradient fill of an image with PHP's GD library. Lots of options and examples.

  • Ajax/Javascript: AJAX Check Headers

    My first Ajax training grounds to understand how this works. Check HTTP headers sent by servers.

  • SEO: The Typo Trap

    The Typo Trap is a misspellings (aka typos) generator. While this will sound silly to most people, those who know a bit about Search Engine Optimization know how valuable this can be. Did you say “keyword spam” ?

  • Adsense: Adsense Earnings RSS Feed

    Generate an RSS feed from your daily Adsense earnings, so that you can track them within your favorite feed reader. Now part of the official Curl examples list.

  • Mail: PHP Send File By Email

    PHP Send File By Email is a script that you feed with a file URL ("http://somewhere.com/somefile.zip") and that gets this file delivered into an email box.

  • Quake3 : WebRCON : Quake3 RCON web-based interface

    PHP interface to send remote console (rcon) commands to a Quake3 server. It has about all the features a server admin should need, all packed in a compact interface.

  • Links: taga.licio.us: a Way to Integrate del.icio.us

    Taga.licio.us is a tag filter for del.icio.us/ : it produces a page with links from selected tags, allows to integrate del.icio.us links for one or more tags into an existing page, limited to a specified "freshness" (links of the day ? of the hour ?), and comes with gazillions of options. Not only your links. Everyone’s links.

One of the primary goal of my blog was to be a code repository for every one liner I was writing and didn’t want to forget. You’ll find some PHP snippets, bash bits and Perl scripts.

All these stuff are gathered inside the Code archive of my blog.