Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

New, username and password while installation

Some people urgently recommend to deactivate or even to avoid using default username and password which are username : admin and default password on every installations. Cause, there were many ways you could be “hijacked” possibly use to break its default username and password on this most crucial case if you’re using WordPress before this 3rd version. But you need it no more now, you’re free to define your username and password at the beginning of WordPress installation. So you don’t need to hack on your WordPress anymore to eliminate its admin default username and password.

Twenty Ten default theme

After all this time WordPress installation has been bundled with its default theme called Kubrick, now it’s no more with. WordPress now comes with its new bundled theme which’s named Twenty Ten! It’s very good with sweet 2-column display including widgetized sidebar and footer. And believe it or not, now WordPress is equipped with explanation documentation that facilitate anyone to know more deeper about WordPress details. You can check it through the source code from this twenty ten theme. It helps, doesn’t it?

You must know that this twenty ten theme is supported with some new features from WordPress 3, which are:

Background customization

Now with WordPress 3 you can change your background with no more trouble. As twenty ten shows us, on the picture below.

Then how to apply it to a theme? Easy, just write down this codes into functions.php file in your theme folder.

    // allows users to set a custom background
    add_custom_background();

if you’re done with the codes, you’ll see background menu on the Appearance section

New editor style

Many people may find some difficulties to see the style that’s being used by wordpress (previous version) when they’re writing. If you use to write on blog using windows live writer perhaps you can also load the current style that’s being used on your theme onto your visual editor. But you need it no more now, wordpress 3 gives easiness for us to be able to see our preview style while we’re writing on our tiny mce editor, pretty cool huh? Same as before, we need to write down the scripts below to functions.php file in our theme folder.

  // Apply visual editor with and match the theme style.
  add_editor_style();

After that don’t forget to create editor-style.css file in your theme folder and copy style.css file content then paste it onto editor-style.css file you just created. I suggest you to copy on the sections where your posts will be displayed, which are all classes .entry on style.css file.

Custom menu management

Many wordpress themes developers intentionally build theme option to their customers, what is the purpose? Just in order to ease them to manage menu navigation layout on their themes. Then, what wordpress 3.0 try to offer to us on this feature, in my opinion it’s proportional with any other CMS out there which also offer this kind of feature on their back-end pages.

Then how do you apply it on your own theme? It’s quite easy, you just need to define this menu on your functions.php file.

 add_theme_support( 'nav-menus' );

then attach this onto your header section

wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) );

Example custom menu

It’s simple, isn’t it? Then how if I forget to define it on the header section? Simple, now I’ll give some instances for us to explore a bit on this menu feature and let’s just get going. First we have to define our menu later on functions.php file on themes folder.

/*
 * CUSTOM FUNCTION STARTING FROM HERE
 */

add_action( 'init', 'register_my_menus' );
function register_my_menus() {
    register_nav_menus(
        array(
            'top-menu' => __( 'Top Menu' ),
            'middle-menu' => __( 'Middle Menu' ),
            'bottom-menu' => __( 'Bottom Menu' )
        )
    );
}

As we see above, that I defined it for 3 kind of custom menus that I’d like to display it later.

Okay then, let’s create menu, give your menu a name TOP, MIDDLE, BOTTOM through “Menu Name” and choose category and page that you’re willing to include to each of your custom menus. I made an example and defined it below

After above we defined it for Top Menu, then find this script line on your header.php file

 wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );

then change those lines with your custom Top Menu

// you can use this type too to call wp_menu_nav
// wp_nav_menu( 'sort_column=menu_order&container_class=menu-header&theme_location=top-menu' );

if ( has_nav_menu( 'top-menu' ) ) {
    wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'top-menu', 'fallback_cb' => '' ) );
}

In here is the process to match if there is a matching clauses found with top-menu, then it’ll return true value. You can see, I used has_nav_menu and wp_nav_menu functions. And here it’s the preview from what we’ve just done

How’s that, get enough? Yup I guess it’s enough, but how’s the way to show the description on each menus? Very good question. What’s the use of menu description as seen on menu management picture if we couldn’t display it. In here we need to do some hackings, write down the scripts below onto your functions.php file to display the menu description

// Hook nav rules to showing description page
// Look details information by this page wp-includes/nav-menu-template.php
// or by this link - http://core.svn.wordpress.org/trunk/wp-includes/nav-menu-template.php
add_filter('walker_nav_menu_start_el', 'description_in_nav_el', 10, 4);
function description_in_nav_el($item_output, $item, $depth, $args){
    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

    return preg_replace('/(<a.*?>[^<]*?)</', "<a $attributes>" . "<span class='test'>{$item->title}</span><br><span class='test'>{$item->post_content}</span><", $item_output);
}

Now we can see the condition from our custom menu.

And these are the source codes after we hacked walker nav menu above

<li id="menu-item-43" class="menu-item menu-item-type-post_type"><br>
<a href="http://localhost/wp30/portfolio/"><span class="test-menu-title">Portfolio</span><br><span class"test-menu-desc">See my work!</span></a></li>

You can see it, if there’s a description then it’ll be displayed, but if there’s no menu description found then it’ll only return empty value (space). In here we see that we break title from menu and description from the menu itself, so that we’re free to customize the class from test-menu-title and test-menu-desc with bold, color, italic and anything you want! I think that’s enough for now. Have fun with your menu folks!

Further information about New Menu System:

• Excellent article on nav menus by Justin Tadlock
• WordPress 3.0: Checking out the New Menu System
• Function Reference: wp nav menu – WordPress Codex

Custom Post Types for Content Management

This feature is the most awaited feature by wordpress users and developers, the reason is through this feature we’re be able to use wordpress not only as a blog machine but also as full Content Management System. What I like from this feature is the content classification is run separately, for example when we build a portfolio. How, let’s just study it step by step.

Custom post types, in its usage for a portfolio it’s very ease us for content sorting which has particular posting category/type. There are so many things that we can create and develop through this custom post types, and I’ll give some instances to you how to create portfolio page using this custom post type and combining with your custom field. First of all, we need to write down the scripts below onto our functions.php file.

/*
 * custom post for super porto
 */

add_action( 'init', 'create_my_post_types' );

function create_my_post_types() {
    register_post_type( 'pf_cpt',
        array(
                'labels' => array(
                'name' => __( 'Portfolios' ),
                'singular_name' => __( 'Portfolio' ),
                'add_new' => __( 'Add New Item' ),
                'add_new_item' => __( 'Add New Portfolio' ),
                'edit' => __( 'Edit Item' ),
                'edit_item' => __( 'Edit Portfolio' ),
                'new_item' => __( 'New Portfolio' ),
                'view' => __( 'View Portfolio' ),
                'view_item' => __( 'View Portfolio' ),
                'search_items' => __( 'Search Portfolio Items' ),
                'not_found' => __( 'No Portfolio Items found' ),
                'not_found_in_trash' => __( 'No Portfolio Items found in Trash' ),
                'parent' => __( 'Parent Portfolio' ),
            ),
            'public' => true,
            'show_ui' => true,
            'menu_icon' => get_stylesheet_directory_uri() . '/images/picture.png', // icon defined
            'menu_position' => 20, // 5 - below Posts | 10 - below Media | 20 - below Pages
            'hierarchical' => true,
            'supports' => array( 'title', 'editor', 'custom-fields', 'thumbnail' )
        )
    );

    register_taxonomy( 'charge-type', 'pf_cpt', // in-case you do for commercial or free (such as foundation etc)
        array(
             'hierarchical' => false, // or true
             'label' => __('Free or Commercial'),
             'query_var' => 'charge',
             'rewrite' => array('slug' => 'charge' ) ) );

    register_taxonomy( 'client', 'pf_cpt', // in-case you have 2 or 3 boss (clients) at one project
        array(
             'hierarchical' => false, // or true
             'label' => __('Clients'),
             'query_var' => 'client',
             'rewrite' => array('slug' => 'client' ) ) );

    register_taxonomy( 'project-type', 'pf_cpt',
        array(
             'hierarchical' => false, // or true
             'label' => __('Project Type'),
             'query_var' => 'project',
             'rewrite' => array('slug' => 'project' ) ) );

    register_taxonomy( 'tasks', 'pf_cpt', // for specified your tasks
        array(
             'hierarchical' => false, // or true
             'label' => __('Your Task'),
             'query_var' => 'task',
             'rewrite' => array('slug' => 'task' ) ) );
}

Another reference about register post types, Function Reference/register post type. And then after we wrote down the codes above onto functions.php file, let’s now see the back-end display for custom post types that we’ve just created.

And our this editor page we’ll be looked like this after we clicked Add New Item

Click to see full size image

You can see what we’ve done through the preview above. On the bottom-left side Menu Pages (because we gave value 20 before) there’s our new menu including its taxonomies custom for controlling based on its related custom post type. On the middle section, we have title, editor, and custom field for editing needs. On the right side coloumn, there are custom taxonomies input for Project Type (Logo, Website, etc), Charge (Commercial, Non-Commercial, etc), Clients (Company A, B, C, etc) Your Task (WordPress integration, xHTML and CSS design, PSD Design, etc)

Now how about that? Anyone has a question?

“Yes, I have a question. How to create Custom URL for each items please?”

Okay, we have two tricks in here. The first one is with adding metabox on our editor custom post types pages.

 add_meta_box( $id, $title, $callback, $page, $context, $priority );

Write down these codes onto functions.php file to create meta box that will be our custom url

<?php
    add_action("admin_init", "pf_cpt_url");
    add_action('save_post', 'update_pf_cpt_url');
    function pf_cpt_url(){
        // http://codex.wordpress.org/Function_Reference/add_meta_box
        // add_meta_box( $id, $title, $callback, $page, $context, $priority );
        add_meta_box("portfolio_details", "Custom URL", "pf_cpt_url_options", "pf_cpt", "side", "low");
    }
    function pf_cpt_url_options(){
        global $post;
        $custom = get_post_custom($post->ID);
        $custom_url = $custom["custom_url"][0];
?>
    <div id="portfolio-options">
        <label>URL:</label><input name="custom_url" value="<?php echo $custom_url; ?>" />       
    </div><!--end portfolio-options-->   
<?php
    }
    function update_pf_cpt_url(){
        global $post;
        update_post_meta($post->ID, "custom_url", $_POST["custom_url"]);
    }
?>

And it’ll be seen like this later on your editor page

And the second one is with using custom field, I myself is prefer to use custom field. But once again, it’s all up to you. So now let’s we fill our custom post types first with some datas which will be displayed later on the portfolio page.

By default, you can display your custom post types on the portfolio page this way, write down the codes below on the template file for your portfolio page

<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
<?php
<div id="content">
<?php $p_loop = new WP_Query( array( 'post_type' => 'pf_cpt', 'posts_per_page' => 10 ) ); ?>
<?php while ( $p_loop->have_posts() ) : $p_loop->the_post(); ?>
<?php the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' ); ?>

<?php 

  $custom = get_post_custom($post->ID);
  $website_url = $custom["custom_url"][0];
  if($custom != "" ) {

  ?>

<a href="<?php echo $website_url; ?>"><?php the_post_thumbnail(); ?> </a>

<?php

  } else { the_post_thumbnail(); }

  ?>

<div class="entry-content"><?php the_content(); ?></div> 

<?php endwhile; ?>
</div><!-- #content -->

?>
<?php get_footer(); ?>

How’s the display, do you see the thumbnail that you’ve defined it before including its custom taxonomies you’ve determined on each items? Then how about to display and format the display? It’s easy. Later we’ll get it formatted based on each Project Type that you’ve defined through custom taxonomies and it’ll be indexed based on custom field with key = year and value = yyyy-mm-dd, and you have to know that in here I defined Project Type with value Website, Logo, Poster, etc where one item of portfolio is representated by one project type

Then paste these scripts into template file for the page above so it’s gonna be:

<?php
/*
Template Name: Portfolio
*/
?>

<?php get_header(); ?>

<div id="content">
<h1>Website</h1>

<?php

$querystr = "SELECT *
  FROM $wpdb->posts
  LEFT JOIN $wpdb->term_relationships ON($wpdb->posts.ID = $wpdb->term_relationships.object_id)
  LEFT JOIN $wpdb->term_taxonomy ON($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
  LEFT JOIN $wpdb->terms ON($wpdb->term_taxonomy.term_id = $wpdb->terms.term_id)
  LEFT JOIN $wpdb->postmeta ON($wpdb->posts.ID = $wpdb->postmeta.post_id)
  WHERE $wpdb->posts.post_type = 'pf_cpt'
  AND $wpdb->posts.post_status = 'publish'
  AND $wpdb->term_taxonomy.taxonomy = 'project-type'
  AND $wpdb->terms.slug = 'website'
  AND $wpdb->postmeta.meta_key = 'year'
  ORDER BY $wpdb->postmeta.meta_value DESC";
  // see value 'project-type' and value 'website'
  // feel free to define any value from your taxonomies, for grouping

  $result = $wpdb->get_results("$querystr");
  foreach($result as $post){

  setup_postdata($post); // remember this line, it needs cause our "foreach" statement

  ?>

<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

<?php 

  $custom = get_post_custom($post->ID);
  $website_url = $custom["custom_url"][0];
  if($custom != "" ) {

  ?>

<br><a href="<?php echo $website_url; ?>"><?php the_post_thumbnail(); ?> </a>

<?php

  } else { the_post_thumbnail(); }

  ?>

 <div class="entry-content">
<?php the_content(); ?>

<?php

  // define something
  $taxo = "";

  // Variables to store each of our possible taxonomy lists
  // This one checks for an Year classification

  $project_type_list = get_the_term_list( $post->ID, 'project-type', '<strong>Project Type(s):</strong> ', ', ', '' );
  $commercial_type_list = get_the_term_list( $post->ID, 'charge-type', '<strong>Type(s):</strong> ', ', ', '' );
  $client_list = get_the_term_list( $post->ID, 'client', '<strong>Client(s):</strong> ', ', ', '' );
  $task = get_the_term_list( $post->ID, 'tasks', '<strong>Task(s):</strong> ', ', ', '' );

  // if it's not empty, return value of each type
  // define project type value
  if ( '' != $project_type_list ) { $taxo .= "$project_type_list<br />\n"; }

  // define commercials or non commercials project type
  if ( '' != $commercial_type_list ) { $taxo .= "$commercial_type_list<br />\n"; }

  // define client list value
  if ( '' != $client_list ) { $taxo .= "$client_list<br />\n"; }

  // define task value
  if ( '' != $task ) { $taxo .= "$task<br />\n"; }

  // Output taxonomy information if there was any
  if ( $taxo != '' ) {

  ?>

<div class="entry-utility">

<?php 

  if ( get_post_meta($post->ID, 'year', true) ) :
    $date = get_post_meta($post->ID, 'year', true);
    $dateTime = new DateTime($date);
    $formatted_date=date_format ( $dateTime, 'F Y' );
        echo 'Date: '.$formatted_date.'<br>';
  endif; ?>

<?php

  echo $taxo;

  ?>

</div><br>

<?php

  } // endif

  ?>

</div>

<?php

  }

?>

</div>

<?php get_footer(); ?>

And you’ll get a display which looks like below

But after you noticed it, how’s it so the value from each custom taxonomies isn’t be formed as a link (url)..? just change the codes above become codes below

$project_type_list = strip_tags( get_the_term_list( $post->ID, 'project-type', 'Project Type(s): ', ', ', '' ) );
$commercial_type_list = strip_tags( get_the_term_list( $post->ID, 'charge-type', 'Type(s): ', ', ', '' ) );
$client_list = strip_tags( get_the_term_list( $post->ID, 'client', 'Client(s): ', ', ', '' ) );
$task = strip_tags( get_the_term_list( $post->ID, 'tasks', 'Task(s): ', ', ', '' ) );

See that strip_tags( [your_term_list] ); to ignore HTML format. Simple, right? Then it’s done, have fun with your custom post types and custom taxonomies folks!

Further information about this features:

• First Impressions of Custom Post Type
• Custom post types in WordPress
• A refresher on custom taxonomies
• Introducing WordPress 3 Custom Taxonomies
• Rock-Solid WordPress 3.0 Themes using Custom Post Types
• Create A Professional Portfolio Using WordPress 3.0 Custom Post Types

Conclusion

I think it’s pretty tempting your insight about WordPress 3.0, and what you can do with it furthermore, as a blog machine or as a CMS, that’s up to you. So now what about we’re having share about it, what do you think about WordPress 3.0 and for you that’ve already experienced with it, you may share with us here, I think that’s why sharing considered as caring.. arghh it’s pain to say it.. :p See ya!

Another References

• 10 Features to Look Forward to in WordPress 3.0
  WordPress 3.0 is scheduled to be released within the next 30-60 days. There are some great new features coming, including custom post types, a new default theme, and a menu manager. Read on Nettuts to find out what to expect in version three!
• WordPress 3.0: Ultimate Guide to New Features
  WordPress 3.0 — the newest major version of WordPress — is one of the most highly-anticipated open source upgrades this year. Good article from Saad Bassi on Six Revisions
• 9 Features We Most Want in WordPress 3.0
  Messageboards are currently awash with demanding bloggers, listing the new features they most want to see and the plugins they want shifted into core. By this article on DesignM.ag you’ll find the 9 new features that are most in demand.
• What’s Coming in WordPress 3.0 (Features)
  Another reference from WpBeginner, just check this out too guys!
• WordPress 3.0: The 5 Most Important New Features
  The list of new features in WordPress 3.0 isn’t very long in comparison to previous releases. However, the changes that are coming will certainly have a significant impact, particularly if you use WordPress as a CMS. Here is a rundown of the most important new features arriving in version 3.0. Mashable will let you know which features of WordPress 3.0 you are most looking forward to.
• 10 Great New Features in WordPress 3.0
  WordPress is by far the most popular blogging platform available and with over half a million known websites running on the software, it’s no surprise there’s a big news surge when a new version is released. Read more on Web.AppStorm