I am using latest trunk code for WordPress 3.3 for a week now, and even now, I can feel the performance improvements that are continuation of the work done with WordPress 3.2. These are not drastic changes, but many things in WP are improved: improved permalinks performance, some meta and navigation menu changes and many UI improvements. CSS used by WP is optimized further to load less files and have less of it, so that also is noticeable during page load.

Admin bar is looking a bit different, with darker look and few pixels less height (you can see it in action already on WordPress.com). Some of the important admin bar elements use improved dropdown and some of the admin side elements are further integrated into admin bar. So, admin side pages don’t have normal header as before: website name is now also part of the admin bar, and same goes for tabs for Screen Options and Help. This makes admin pages looks cleaner, but it makes admin bar a must have element on the page, and disabling it will leave you without many options you are used to have by now in the page header. Is this good or bad, it depends on you, but it will take some time to get used to. New admin bar can’t be disabled from Profile page for admin side anymore.

Improved Menus

But, there are two great additions to UI: improved menus and pointers.  As you can see on the image on the left, if the menu is active, it is displayed as before (Users menu in this case). But if you hover over the menu (Appearance) you will get nice popup menu for it. This way, you can find much quicker page you need.

Pointers are nice addition to admin side UI, and they are used to inform user about some changes in the WordPress or plugins (there is a way for plugins and themes to use it). So, after WP is upgraded, you will get a pointer with info and links on update. If a plugin gets updated, it can use similar pointer to let know user about changes. Image below shows a pointer to admin bar with Screen Option and Help icons in the bar and the new admin bar slimmer and darker look.

Pointers and Admin Bar

Dashboard now has auto size option, allowing it to resize based on the display used, so it can have different number of columns on different devices. This also means that menu will automatically collapse if the screen is smaller.

New uploader

But, most important changes are in the editor and uploader. Uploader dialog now supports drag’n'drop and uses Plupload library instead old Flash based one. Depending on the browser this new library can downgrade to different upload methods. Firefox and Chrome support drag’n'drop, and it is expected that Opera will get it soon.

Post editor uses latest version of TinyMCE, but the code behind it is changed to allow better re-usability of the editor. Right now there are few methods (none of them working well) to have rich editor on the admin page, but with latest changes this should be really easy to do. New WP will have jQuery 1.6.4, jQueryUI 1.8.16 (finally complete version with all components), editor API for easy use of editor anywhere and improvements to scripts enqueue process.

Many of these new features  are still in development, and WP is not yet usable for live websites, but it is stable enough for testing and for improving plugins to use new features. I will be adding support for it into Dev4Press plugins in the next month, but for now, there are only few visual issues with my plugins and new WordPress.

Current WordPress development cycle is working nicely, smaller set of changes for faster development, and changes coming in 3.3 for the most part are really great. I think that new admin bar will get mixed reception, but the rest of UI changes, API and performance improvements are gold.

Editor Example

Sometimes is very useful to be able and use existing WordPress rich editor within your plugins. TinyMCE editor built in WP can be easily reused and you can even set some elements. Following example will work in WordPress 2.8 and newer including latest WP 3.0.

There are two parts to this procedure. One is to load needed JS and CSS files, and other to call the editor where you want it displayed.

Loading Editor

To load TinyMCE you need to use the following code. First two lines attach hooks to init and head actions. Two functions hooked follow after. One loads JavaScript needed, and second actually loads the editor. Line that enqueues the media upload element is needed only if you use media buttons.

<?php
add_action('admin_init', 'editor_admin_init');
add_action('admin_head', 'editor_admin_head');

function editor_admin_init() {
  wp_enqueue_script('word-count');
  wp_enqueue_script('post');
  wp_enqueue_script('editor');
  wp_enqueue_script('media-upload');
}

function editor_admin_head() {
  wp_tiny_mce();
}
?>

Display editor

Editor is displayed using one function. This function is defined as follows:

the_editor($content, $id = ‘content’, $prev_id = ‘title’, $media_buttons = true, $tab_index = 2)

First parameter, $content will be displayed inside the editor. Next is $id, and the textarea element created will have that ID. You can use it to get the content from the editor. Next parameter can be used the specify previous element in the form for tab moving (last parameter). And, $media_buttons allow you to display or hide media upload buttons above the editor.

Here is an example:

<div id="poststuff">
<?php
  the_editor("", "content", "", true);
?>
</div>

This you need to add on your panel where you want editor displayed. It will fit into any DIV you want so that you can limit the size and dimenzions. Using “poststuff” DIV is important so that all elements are styled properly.

Content of the editor is available as part of the form on submit named as content, or whatever you set as ID in the code above. If you want to access to content from JavaScript use this:

tinyMCE.activeEditor.getContent();

That’s all you need to know (for now), you can use anything tinyMCE object offers from JavaScript. If you need more help, leave a comment.

To begin all this, I will be using 3 WordPress version. With each version you can see the size of the installation without wp-content folder:

1. WordPress 2.6.5 (4.2MB)
2. WordPress 2.7.1 (5.3MB)
3. WordPress 2.8 (6.7MB)

All 3 versions will be set the same, all will use exact duplicate of this website, including Arthemia Premium theme, all plugins, posts, comments, settings, pages and everything else:

1. Posts: 34
2. Pages: 16
3. Comments: 215

After inserting all posts, with no plugins activated, I measured the size of databases for all 3 WP installations. WP 2.8 has significantly larger Options table mostly due to the new transient settings and new feeds format. I will post another similar chart after all the tests are done. And here is the list of installed plugin on all 3 test WordPress version.

Database Sizes

1. Akismet 2.2.4
2. GD Press Tools 1.4.0
3. GD Simple Widgets 1.2.0
4. GD Star Rating 1.4.7
5. Google XML Sitemaps 3.1.4
6. HeadSpace2 3.2.28
7. MiniMeta Widget 4.2.0
8. SABRE 0.9.0
9. SEO Booster Lite 1.6.5
10. Sociable 3.1.3
11. SyntaxHighlighter Plus 1.0b2
12. TinyMCE Advanced 3.2.4
13. Twitter Tools 1.6
14. WordPress.com Stats 1.4
15. WordPress Download Monitor 3.1.4
16. WP-Slimbox2 0.9.7.1

GD Press Tools is always active an all test blogs and with this plugin, and benchmarking code added in it (only for these tests, it will not be added as a standard plugin feature) all measurements will be taken. All tests will be done on localhost setup on MS Windows Vista SP2 64bit with XAMPP 1.7.1.

1. Apache 2.2.11
2. PHP 5.2.9
3. MySQL 5.1.33

Test machine is very fast, AMD/nVidia based with strip mode RAID arrays and a lot of RAM:

1. CPU: AMD Phenom Black Edition 9850+ (QuadCore)
2. RAM: DDR2 8GB Kingston HyperX 800MHz
3. Motherboard: Gigabyte GA-M750SLI-DS4 with nForce 750a SLI chipset
4. HDD: 2x500GB RAID1, 2x160GB RAID1

So, now you have all the basic facts, and expect first post with benchmark results in the next 3-4 days.