8 New Exciting WordPress 3.0 Features

Finally, WordPress 3.0 has been released. Now you can download the latest stable version to test it out on your localhost or development server before upgrade on your live server. This WordPress 3.0 release is packed with tons of exciting features, like custom post type, better menu management, editor style and many more. It also comes with a new default theme – TwentyTen, that is compatible with most of the new features.

WordPress 3.0 Features

Below I will highlight some of the keys features and how to implement them.

1. Post Editor Styling

In the previous version of WordPress, you will have had to use the default Georgia font and style in your WordPress post editor (TinyMCE). The default style is usually very different compare to the real style at the front-end (Public View of your Blog). When you are composing your article, you will often need to refer back and fro to preview the changes made in your post editor. You don’t need to do that any more in WordPress 3.0, it has added a functionality that allows you to change the way the text looks inside the editor.

Tinymce Editor

To get this working you need to tell your theme to support it. In your functions.php file add the following:

1 add_editor_style();

This will tell WordPress to look for a CSS file called editor-style.css in your theme folder, go ahead and create it. Next, open your style.css file look for the CSS styles that you use for your post content, copy them into editor-style.css.

Below I highlight part of the default CSS style from WordPress 3.0 theme – TwentyTen. For the full version, you can check out it out in the theme folder.

01 html .mceContentBody { max-width:640px; }
03 * { font-family: Georgia, "Bitstream Charter", serif; color: #444; line-height: 1.5; }
05 a:link { color:#0066cc; }
06 a:visited { color:#743399; }
07 a:active, a:hover { color: #FF4B33;}
09 p { margin-bottom: 18px; }
10 ul { list-style: square; margin: 0 0 18px 1.5em; }
11 ol { list-style: decimal; margin: 0 0 18px 1.5em; }
12 ul ol, ol ul { margin-bottom:0;}
14 strong, b { font-weight: bold; }
15 cite, em, i { font-style: italic; border: none; }
17 blockquote { font-style: italic; padding: 0 3em; }
18 pre { background: #f7f7f7; color: #222; line-height: 18px; margin-bottom: 18px; padding: 1.5em; }

One quick note, in post editor WordPress does not treat strong tag as bold, instead it’s using the b tag for bold. So you will need to add b { font-weight: bold; } into your style as above.

WordPress Admin comes with cache enabled, so when you are editing and making changes to your editor-style.css file, remember to clear your cache every time before you refresh so that it will load the latest updated editor-style.css file. Now you can style your post editor to make it look exactly the same at the front-end of your blog.

2. Custom backgrounds

WordPress now has an easy way to change the background image of your theme. This makes customising your blog appearance easier and will help developers with clients that are always wanting to see what the blog would look like if it had a different background.

Custom Background

To activate it you will need to include the following in the functions.php file in your theme folder.

1 add_custom_background();

Once you activate it, you will be able to use the background panel in the theme admin to add an image of your choice, colour, position and a few other things. This function will add inline CSS styling to your body tag.

3. Custom Headers

Though this is not a completely new feature it has been changed slightly, you can now add some header pictures to be selected. This means that you can have a bunch of images and the user will be able to click on the image they want and it will change at the front end of your blog. To implement this feature, first you need to tell your theme to support custom backgrounds, then create an array with information such as the URL to the large image, thumbnail URL, a description, and finally call the function.

Custom Header

First, you want to add add_custom_image_header(); and within that two required arguments , first parameter is the header callback and the second parameter is the admin panel callback.

1 add_custom_image_header( '', 'twentyten_admin_header_style' );

The second part of that function is to call it on the admin page. To finish setting it up you will need an array with the data. A useful tip is to add %s which will equal the theme directory:

01 register_default_headers(
02 array (
03 'berries' => array (
04 'url' => '%s/images/headers/berries.jpg',
05 'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
06 'description' => __( 'Berries', 'twentyten' )
07 ),
09 'cherryblossom' => array (
10 'url' => '%s/images/headers/cherryblossoms.jpg',
11 'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
12 'description' => __( 'Cherry Blossoms', 'twentyten' )
13 ),
14 'concave' => array (
15 'url' => '%s/images/headers/concave.jpg',
16 'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
17 'description' => __( 'Concave', 'twentyten' )
18 ),
19 'fern' =>array (
20 'url' => '%s/images/headers/fern.jpg',
21 'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
22 'description' => __( 'Fern', 'twentyten' )
23 )
24 )
25 );

And finally calling this feature:

01 function twentyten_admin_header_style() { ?>
02 <style type='text/css'>
03 #headimg {
04 height: 198px;
05 width: 940px;
06 }
07 #headimg h1, #headimg #desc {
08 display: none;
09 }
10 </style>
11 <?php }  ?>

Now in your theme you want to add:

1 <img src='<?php header_image(); ?>' alt='Header of my blog' />;

That is all you need to fully set up custom headers. For more details on custom headers you can read add_custom_image_header.

4. Drag and Drop Menu Management

In previous versions, when you need to rearrange your pages menu, add category link or add another link within the navigation menu, you will need to edit the code. Now in WordPress 3.0, you can do it simply by dragging and dropping a menu to be displayed, it’s just like widgets on the side bar. This powerful menu management has made it easier for many WordPress users, to organise the site navigation menu themselves.

Menu Management

To activate this feature, add the following code in your function.php file.

1 add_theme_support( 'nav-menus' );

Then in your theme add the following:

1 wp_nav_menu();

And you should be all set. You can also check out various parameters for wp_nav_menu to learn more.

If you need to add icons to each link in your custom, be sure to read Customize the new WordPress 3.0 Custom Menus Adding Different Icons to Each Link.

5. WordPress Login Form

For WordPress sites that allow signing up and login for public users, they often require a login form at the front-end of the blog. Now WordPress 3.0 lets you generate a standard login form for the WordPress site anywhere in your theme. It’s just as simple as using the following code and it will create a form with username and password.

Login Form

1 wp_login_form();

Find out more about the various parameters for wp_login_form to customise your login form.

6. Custom Post Types

A very new and exciting feature in WordPress 3.0 is the ability to create custom post type, that is maintained in the WordPress posts table. This can help developers to build a theme that relies less on custom fields and makes it easier for clients.

Post Type

To tell WordPress to register a new custom type, use the following code.

01 add_action('init', 'my_custom_init');
02 function my_custom_init() {
03 $args = array(
04 'label' => __('Quote'),
05 'singular_label' => __('Quote'),
06 'public' => true,
07 'show_ui' => true,
08 'capability_type' => 'page',
09 'hierarchical' => true,
10 'rewrite' => true,
11 'supports' => array('title')
12 );
13 register_post_type( 'quote' , $args );
14 }

This will make a new custom type “Quote” appear with just a title field and no other information available for input. This is just an example but you would be able to do more with this ability! For more detail, be sure to read the following articles.

7. Author Specific Template

WordPress 3.0 has added more functionality by giving you the ability to design different styles for the individual author template. For example, now you can create a new file called author-alex.php and it will change the style of that author page. WordPress 3.0 will first look up for author-alex.php before it renders the default author.php. It also works with author-1.php if you want to use an ID rather then the name.

Author Template

This feature is great for sites that have multi-authors to show the difference between each author’s page between various types of writers.

8. WPMU and WordPress

WordPress MU has allowed users to have the ability to run multiple WordPress sites with just the one single installation. WordPress 3.0 has merged with WordPress MU, so you will now be able to run more than one blog, each of the blogs can have its own plugins, themes and content.

WordPress MU

To enable multisite in WordPress 3.0, add the following code to your wp-config.php file.

1 define('WP_ALLOW_MULTISITE', true);

Once you have added the above code, under the tool menu, you will be able to see a new menu link: Network. Click on the Network link, to view the multi-sites installation page, enter the Network Title, Admin Email Address and click on the install button.

For full installation guide, head over to Deluxe Blog Tips, that shows you a step by step guide for setting up multisite using WordPress 3.0.


Above are just some of the new features that have been added into WordPress 3.0. To find out more about other features, you can view the full list of WordPress 3.0 features. This is great update and WordPress has pushed from a blogging platform into a well-formed CMS, be sure to test it out or upgrade by downloading the latest WordPress 3.0.

About Raashid A.

Web Designer & Front-end Developer with Social Media Marketing & SEO

One response to “8 New Exciting WordPress 3.0 Features

  1. Pingback: 2010 Year in Review | World of RADZAD « WORLD OF RADZAD

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: