New2WP » Pro

New2WP Latest Posts For Custom Types Sidebar Widget WordPress Plugin

Jared — Fri, 19 Nov 2010 13:00:14 +0000

Finally, Just What We All Needed!

If you've been using WordPress custom post types at all on your site, like I have been now for about 10 months or so... since 3.0 Alpha version, then you'll probably love this.

I've created a new custom sidebar widget for WordPress, to display the latest posts for other post types besides the 'post' post type. This widget actually lets you show not only custom post types, but you can choose to display content from any public post type which includes the built-in post types 'page' and 'attachment', and of course 'post'.

So as long as your custom post types are publicly available, you can display the latest posts for them in your widgetized sidebar areas. What I mean when I say public, that means you must have specified in your code when registering your post type the property 'public' => true in the $args array which you must set up when you use register_post_type().

Since I don't use custom post type plugins I don't know if you have that capability to set 'public' => true or not. I assume you would be able to, but I'm not sure.

Plugin Features:

This plugin is similar to another plugin widget I made and recently released for showing your latest Tweets. It simply adds a new custom widget to your Widgets page in the WordPress dashboard, which you can use in your widgetized sidebars.

I have yet to see or hear about anything like this which displays the latest published custom post type posts in your sidebar. It's a replacement for the well-known Latest Posts widget which only displays the latest posts from the 'post' post type, and that's it.

Features Built Into this Plugin/Widget

Ability to choose which post type to display the latest posts from.

Able to control the heading HTML tag for formatting the widget title depending on how your theme displays the headings of widgets.

Control the number of posts to display.

Customizable widget title text.

Full localization of text to support use with non-English languages.

Link to view all posts from XXXX post type, whichever it is you have selected to display.

Plugin Installation:

You will need to Download the n2wp-latest-ptypes.zip file.

Unzip the folder `/n2wp-latest-ptypes/` to your computer.
Upload the entire contents of `/n2wp-latest-ptypes/` to the `/wp-content/plugins/` directory of your WordPress installation.
Activate the plugin through the 'Plugins' menu in the WordPress dashboard.
Go to your Widgets panel in the dashboard, and drag the New2WP Latest Custom Posts widget to your sidebar, and configure the settings to your liking.

Download Latest Posts For Custom Types

Fork Me And Watch The Git Repository...

If you like this, you might like some of my other crappy plugins that I've made.

You can see this widget in the sidebar right here showing Latest Snippets →

Let me know what you think of it in the comments, and if you find any bugs please tell me so I can fix them. I really like this widget myself, and would like to get it added to the WordPress plugin directory if I can.

Create A WordPress 3.0 jQuery Drop Down Nav Menu

Jared — Mon, 18 Oct 2010 12:00:47 +0000

Finally!! A Drop Down WP Nav Menu!

This is what you will be thinking if you're like me and have been searching the web for days on how to use the new wp_nav_menu() to create a nice drop down menu, and finally have full control over how the links are nested and arranged from the dashboard Menus page, and have probably been unable to find much of anything that is helpful in doing so. Am I right? If you know of any other sources please share in the comments.

I know this because I have been searching not just for days, but for months now for any kind of information I could find on making a drop down menu that doesn't use the disgusting way of the past using wp_page_menu(), wp_list_pages(), wp_list_categories(), or any one of the other wp_list_xxx() methods that you were able to do this in the past.

Then this week I found myself in desperate need of a custom wp_nav_menu() that dropped down and was all fancy pants, so I had to suck it up and create it from scratch. This is the WP drop down nav menu I made.

As you can see it is rather big, though I wouldn't consider it a mega menu, just a long list that I found a way to display in not only 4 colums but 2 or 3 columns as well to see which would look best. In the interest of time, I will not make you create 20 menu items for making a menu like this, but it is possible with 4 items, if displaying as 4 columns.

Got Menus?

So first thing we should do is register some menus. This I'll go over quickly since it is more documented and you probably already have it done at least to some extent.

Adding theme support for nav menus has recently changed with an update that was made. You should now be adding support to themes for menus like this.

// Theme support adding changed from 'nav-menus' to just 'menus'
add_theme_support( 'menus' );

Once that is done, you need should register a menu or 3 and give it a location for use. I recommend that when you make your menus that you don't go crazy and make a whole bunch, at least not until there is a released fix for the quirk that having more than 4 menu tabs causes. You have to scroll horizontally to view all the tabs for each menu.

Once you have added theme support for menus, you can no register some wp_nav_menus and the location they will be used to give them a context.

// Function for registering wp_nav_menu() in 3 locations
add_action( 'init', 'register_navmenus' );
function register_navmenus() {
	register_nav_menus( array(
		'Header' 	=> __( 'Header Navigation' ),
		'Sidebar'	=> __( 'Sidebar Navigation' ),
		'Footer'	=> __( 'Footer Navigation' ),
		)
	);
}

Once your theme supports the use of menus, and registered at least one which you want to use, you then need to open the template file which should display your menu. Using wp_nav_menu(), pass the arguments to it that you need to show different menus and settings.

The nav menu for will show any menu that is defined for it.
If one isn't filled out, wp_nav_menu falls back to wp_page_menu
The menu assiged to the primary position is the one used
If none is assigned, the menu with the lowest ID is used

Since this is the case, on the Menu page of the dashboard I have created a menu named 'Header'. Then added the following code to the header.php temeplate.

 'Header', // Select the menu to show by Name
	'class' => '',
	'container' => false, // Remove the navigation container div
	'theme_location' => 'Header'
	)
);
?>

You can view a list of other arguments here which can be useful depending on your needs.
Now let's check out the HTML code that is output by the wp_nav_menu() function so that you can see what we're working with. I

The HTML Output Of wp_nav_menu()

The structure of the menu that I am going to be building for this tutorial will be able to have custom post types, custom taxonomies, pages, categories and tags, and custom links combined in one menu that I'll be able to reorder simply by dragging and dropping them on the menu page in the dashboard.

Here is what my example menu structure looks like:

The HTML code that this menu structure will output when wp_nav_menu() is called will give me something like this, only with the links and page titles.


	

		
			No Drop
		

		
			Drop Down
			

				
					Link
				
				
					Link
				
				
					Link
				
				
					Link
				

			
		

		
			Drop Down
			

				
					Link
				
				
					Link
				
				
					Link
				
				
					Link
				

			
		

		
			No Drop

The most important part in this code are the things that can be selected using CSS and jQuery. More specifically, what selectors will select a groups of items. Anything that shows up more than once, can be used to style all that have it.

Which CSS And jQuery Selectors To Use

div.menu-header
ul
li
a
menu-main-menu
menu
ul.sub-menu
menu-item
current_page_item

For now just leave the selectors that are specific to a type alone. The selectors that indicate whether its a post_type, _page, _tag, etc. can be used for selecting a set of those items, but with the menu being easily changeable the set list of items may be altered accidently later on.

So now that we know a little more about what were dealing with, we can style it with some CSS code using these ID and class selectors. You can also enable the CSS Classes option under the Screen Options slide down menu of the dashboard menu page.

Why Won't This Menu Drop Down, Damnit?!

If you are not familiar with making drop down menus you might come to find it frustrating. If you're like me and other people I know, then you try to avoid having to make them at all costs. That is why I've made it simple for you, and have already done the work. Below is the CSS for my drop down menu, which uses CSS3 gradients, border radius and other things.

There are a few comments in this code that you should notice. First, you can control the width of the drop menu and the number of columns the list items form using the width amounts I've outlined here.

	/* Width of drop menu for changing number of columns:
	  2 columns: 424px;
	  3 columns: 638px;
	  4 columns: 848px;
	  */

The other part that is very important and one of the single things you should get from this tutorial is below. The trick to making drop menus is to make the parent item of the child items visible using display: block;. That way you can position it correctly and design the desired look and feel while it is visible without hovering. Once that's done you can hide it with display: none;.

#menu-header ul ul {
	display: none; /* For testing, change to display: block; to make visible */
	list-style:none;
	z-index:100;
}
#menu-header ul li:hover > ul {
/*  Uncomment to show drop down for testing purposes
	display: block;
*/
}

Animating The Drop Menu With jQuery

This is the jQuery code that I wrote for making my drop down menu a little more slick. It's a basic animation that simply slides up and down when hovering on and off of the tabs and drop menu.

There is a .delay() that prevents the animation from firing immediately when your mouse touch the tab buttons. Without the .delay() whenever you move your mouse over the tabs, but not intending to open the menu, it would cause it to flicker from your moving too fast for it to drop. I've made it so you have to stop on the tab for it to drop. Just thought I'd explain that since it was something I learned the hard way doing this. That's pretty much all there is to it.

Check This Out On WPHonors

You can see another example of this drop menu as a single column drop down over on WPHonors.com. The menu I made for that site is much nicer looking because I used much more CSS3 styling and customizing.

Also, I wrote this post a long time ago, and realized I never published it. So don't kill me if it turns out to be incomplete or doesn't work. If you have any questions you're always welcome to post a comment below.

OOPost Types: Objects Part 3 – Object Oriented WordPress 3.0 App

Jared — Tue, 10 Aug 2010 12:00:35 +0000

Time To Make Some Magic Happen

Continuing where we left of in part 2 of OOPost Types where we finished building a Php class for setting up methods that our Sites custom post type will use, we now need to put all that code to use.

If you haven't yet read either one of the previous tutorials, you may want to go back and do that before you continue. You will learn how to create the class and functions which are used in this part.

This part of the OOPost Types series will go over how to make use of the custom post type WordPress class created in the previous posts, to easily display the Sites post content on a custom page template. That means we will be instantiating the class to create an new object of it.

I've added a method to the class finished in part 2 that is what our object for showing the sites url and screenshot. If you haven't already, add this function below the meta_options() function at the bottom of the post type class.

    public function mshot($mshotsize) {
        global $post;
        $imgWidth = $mshotsize;
        $myurl = get_post_meta($post->ID, 'siteurl', true);
		if ( $myurl != '' ) {
			$mshoturl = '';
			if ( preg_match( "/http(s?):\/\//", $myurl )) {
				$siteurl = get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode( $myurl );
			} else {
				$siteurl = 'http://' . get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode('http://'.$myurl );
			}
		}
        $mshotimg = '';

        return array( $siteurl, $mshotimg );
	}

This returns an array consisting of the site url which was entered for each site, and the output of the screenshot image that is created with the use of that url.

Creating Custom Page Template

In order to display the content of our Sites post type, we need to either create a custom query to be used in the default WordPress theme templates, or better yet, create new custom WordPress page templates. To learn the best and most stress free way to create new custom templates you should read a previous post I wrote on making custom WordPress page templates.

The format mentioned in that post to create new page templates using page-[slug].php, so what we need to do for displaying the list of submitted Sites is create a new file named page-sites.php.

In order to display the information of the Site posts, we need to make a custom query which we pass to the Loop.

First create your page-sites.php template. You can copy and paste the code from page.php or index.php into this new file and remove the IF statement that loops through the posts. It should be something like if( have_posts()) : while( have_posts()) : the_post();

Custom Post Type Queries For The Loop

Below is the loop which will display the sites. It first checks to see if were on the right page, and then if so it runs the code. We create an object of the class we made to display the screenshot image of the sites, which is done just with the use of the site url entered when posting. The custom loop query will be done by using WP_Query() to query the post_type.

I've commented the code for further explanation. Pay specific attention to the part that instantiates the custom post type class that was made in the previous posts. The $s = new TypeSites(); and $a = $s->mshot(250); are important for showing the submitted site information.

query( 'post_type=site' );

	/* Begin the Loop */
	if ($q->have_posts()) :
		while ($q->have_posts()) : $q->the_post();

			/**
			 * Now instantiate the Sites class we made in posttypes.php setting the $s variable
			 * Create a new variable $a set to the value of the mshot(250) function from the class.
			 */
			$s = new TypeSites();
			$a = $s->mshot(250);

			/**
			 * Output the content of the Site posts
			 */
			?>

Make A Custom Single Template

We also need to create a new custom single post template which is what will display the single posts for the Sites. So also create a new file named single-site.php. You might remember the reference to single-site.php was made in the template redirect function we made in the class. If you neglected to create this single template, then later down the line you might find yourself getting a Php error saying that it does not exist.

So create another new file named single-site.php and use this code for the Loop.

	
	mshot(600);
	?>

	
		
		
			Added by:  on  |

This is all you need to display your custom post types in WordPress. This is more specifically used for the particular post type we've set up using the class, but you can use this same idea to display custom post types that are not created using a class as well.

Full page-sites.php Code




	

	$q = new WP_query();
	$q->query( 'post_type=site' );

	/* Begin the Loop */
	if ($q->have_posts()) :
		while ($q->have_posts()) : $q->the_post();

			/**
			 * Now instantiate the Sites class we made in posttypes.php setting the $s variable
			 * Create a new variable $a set to the value of the mshot(250) function from the class.
			 */
			$s = new TypeSites();
			$a = $s->mshot(250);

			/**
			 * Output the content of the Site posts
			 */
			?>

Full single-site.php Code




	

	
	mshot(600);
	?>

	
		
		
			Added by:  on  |

If you have any questions on this let me know in the comments below. Also, let me know if there are any errors in my code. I have tested this, and it does work for me but based on the last post there may be issues for other people that I was not aware of.

« Part 2

Part 4 »

3.0 Basics WordPress Theme Framework

Jared — Mon, 02 Aug 2010 12:00:05 +0000

Develop It Or Use As A Social Bookmarking Site

This is a New2WP 3.0 theme framework that started out as more of a basic starter theme to use when making new WordPress themes and quickly became a bigger project than was planned. In it I have included the Sites custom post type which I wrote about in the first two parts of my OOPost Types series tutorial. With this, and many other added features make this theme truly 3.0 ready.

Well one thing led to another and it sort of became not just a theme to use as a starting point for theme developers, but it can now be used the way it is out of the box as a sort of social bookmarking type of theme. So whether you're a theme dev, or just someone looking to make a somewhat unique style WP site, you should check out 3.0 Basics.

Built-In Features

Included in this theme are numerous features that are working and functional as soon as you activate the theme, and there's tons of various functions, code customizations, CSS and CSS3 styles and jQuery scripts that will make your life easier.

Custom Post Type

Custom post type for submitting Sites.
Custom page and single templates for Sites posts
Simple site live Site screenshots generated on the fly from the URL of a posted Site. No need to upload thumbnail images.

Pre-made Nav Menus

Pre-registered menu locations (Top, Header, Footer).
Pre-created WP nav menus to go with each registered location.
Default Home menu item for each menu. (prevents the default 'show all' if menu is empty).

Other Features

User login form in header
Custom background image
Custom dashboard styles
CSS 3 Styling
Ajax live screenshots and post thumbnails
Over 50 different useful functions
And so much more!

There's way to much to list here, so you'll have to download it and see for yourself all the great things it has, and what it's capable of doing.

3.0 Basics Theme Screenshots

Sites Custom Post Type

Upload Background Images

Custom Dashboard

A Blog Post

Downloading 3.0 Basics

I will be adding it to the theme repository on WordPress.org and should be downloadable soon from there. I have also made a repository for it on Github, and you can download it from there now, as well as watch or fork it if you want.

View 3.0 Basics Demo Site

Github repository for 3.0 Basics

Download 3.0 Basics from Github

Found Bugs or Have Suggestions?

This theme is not perfect of course. Here's a list of some things you may find buggy that I am working on fixing for future version releases. Please let me know of any not listed here that you come across by posting a comment below, so I can add them to this list and keep track of what needs to be done still.

Of course I am always open to suggestions, so let me know what you'd like to see included in this in the comments below as well.

Change log

* Version: 1.5.6 ~ 12/5/2010

- Updated theme to meet the requirements and suggestions from the theme review on WP.org for adding it to the WordPress theme directory.
- Added custom post type functions for the Right Now dashboard widget, and showing custom post types on the user manage panel.
- Fixed existing bugs and error Notices.

* Version: 1.5.5 ~ 8/10/2010

- First official release of this theme.

Thoughts?

If you like this theme, be sure to recommend it, share it, tweet it, and comment below. It is still a work in progress. After all, it is a development theme. So I will be updating the repositories with new version releases.

Now that this is done, I can get back to writing part 3 of OOPost Types. If you don't want to wait for that, I'll be finishing the makings of this themes custom post type object, so you can download this and use it now.

OOPost Types: Methods Part 2 – Object Oriented WordPress 3.0 App

Jared — Wed, 21 Jul 2010 11:00:33 +0000

Second Day Of Classes And OOPost Types

In the first tutorial - Classes part 1 of OOPost Types, I showed you how to start building the class for a custom post type to submit sites, essentially making a type of social bookmarking sort of post type. If you didn't read through that post and just skipped to this one I would recommend that you go back and review it first. Otherwise here is the code that I left off with in posttypes.php.

 array(
                'name' => __( 'Sites', 'post type general name' ),
                'singular_name' => __( 'Site', 'post type singular name' ),
                'add_new' => __( 'Add New', 'site' ),
                'add_new_item' => __( 'Add New Site' ),
                'edit_item' => __( 'Edit Site' ),
                'new_item' => __( 'New Site' ),
                'view_item' => __( 'View Site' ),
                'search_items' => __( 'Search Sites' ),
                'not_found' =>  __( 'No sites found in search' ),
                'not_found_in_trash' => __( 'No sites found in Trash' ),
			),
			'public' => true, 'show_ui' => true,
			'_builtin' => false,
			'capability_type' => 'post',
			'hierarchical' => false,
			'rewrite' => array('slug' => 'site'), // Permalinks. Fixes a 404 bug
			'query_var' => 'site',
			'taxonomies' =>  array('category', 'post_tag'), // Add tags and categories taxonomies
			'supports' => array('title','editor','author','comments')
        );

        register_post_type( 'site', $siteArgs );	

	}

} // end of TypeSites{} class
?>

Adding Methods To The Class Madness

Starting where I left off, let's continue building our class by adding some methods, or functions as many people call them. First let's set up some custom columns for the Sites manage page. You've probably seen this code before but here it is again.

UPDATED!

	// Create the columns and heading title text
	public function site_edit_columns($columns) {
        $columns = array(
			'cb' 		=> '',
			'title' 		=> 'Site Title',
			'url'	 	=> 'URL',
			'category'	=> 'Category',
			'post_tags' => 'Tags',
			'siteurl' 	=> 'Screenshot',
        );
        return $columns;
    }
	// switching cases based on which $column we show the content of it
    public function site_custom_columns($column) {
		global $post;
        switch ($column) {
            case "title" : the_title();
                break;
            case "url" : $m = $this->mshot(150); echo ''.$m[0].'';
				break;
            case "category" : the_category();
				break;
            case "post_tags" : the_tags('',', ');
                break;
            case "siteurl" : $m = $this->mshot(150); echo $m[1];
				break;
        }
    }

The difference with this custom column code compared to other custom columns codes is that it is invoking a method to generate the content displayed in two of the columns. This is a method that I have added below as an update to this post.

It sets the variable $m to the method mshot() with a size of 150. The number is used to make the image size. It is required, but will not affect the output when just getting the Url. The mshot() function returns an array containing the values of the url and image output. In order to retrieve them, we echo $m[0] for Url, and $m[1] for the auto generated site screenshot. This might be difficult to follow, as it is hard to explain. It took me a while to figure out how to get it to work, hence the lateness in my update.

Now let's add two more functions. First is a function for hooking into the template redirect action in WordPress, which will be used for setting up use of custom templates for Sites, which I'll explain more when we create new objects of this class.

UPDATE: $wp variable should be $wp_query or you get Notice: Undefined index 'post_type' in... I just realized this sorry.

	// Template redirect for custom templates
    public function template_redirect() {
        global $wp_query;
        if ($wp_query->query_vars['post_type'] == 'site') {
            include(TEMPLATEPATH . '/single-site.php'); // a custom single-slug.php template
            die();
        } else {
			$wp_query->is_404 = true;
		}
    }

This function is used for inserting new Site posts using the wp_insert_post() function now available in WordPress 3.0. It will be extremely useful later on in the series, too.

	// For inserting posts
    public function wp_insert_post($post_id, $post = null) {
        if ($post->post_type == "site") {
            foreach ($this->meta_fields as $key) {
                $value = @$_POST[$key];
                if (empty($value)) {
                    delete_post_meta($post_id, $key);
                    continue;
                }
                if (!is_array($value)) {
                    if (!update_post_meta($post_id, $key, $value)) {
                        add_post_meta($post_id, $key, $value);
                    }
                } else {
                    delete_post_meta($post_id, $key);
                    foreach ($value as $entry) add_post_meta($post_id, $key, $entry);
                }
            }
        }
    }

Notice that the wp_insert_post() function uses the $meta_fields variable we've set up in the first tutorial. It is referred to using $this->meta_fields since it is being used inside the class method.

Adding Custom Meta Boxes

Using the add_meta_box() function you are able to hook into the posting page and add form fields. I plan to do a separate post for meta boxes as part of this post series so I am not going to go into much detail here.

Basically what is going on here is the admin_init() function initializes the meta_options() function. The meta_options() function gets the Url if one exists in the input field, and runs it through a wacky little script I created for allowing submitted Urls to work whether they include the http:// part of the Url or not. So http://new2wp.com AND new2wp.com will both be accepted, and work with the following.

The Url is then used to create a new Url that is encoded and appended to http://s.wordpress.com/mshots/v1/ to create a live screenshot of the page which the Url points to.
The input fields are then added. The first one is where you enter the Url, and the second one is just for making the new Url. The screenshot or properly known as, mshot, image it generates is then echoed out below the two input fields with the '?w=250' parameter appended to the end of it. This is to tell the mshot image it should have a width of 250 pixels. This code took me quite some time to compile and get working so enjoy it.

	// Add meta box
	function admin_init() {
        add_meta_box("siteS-meta", "Site", array(&$this, "meta_options"), "site", "side", "high");
    }

	// Admin post meta contents
	public function meta_options() {
		global $post, $url;
		$custom = get_post_custom($post->ID);
		$url = $custom["siteurl"][0];
		$myurl = trailingslashit( get_post_meta( $post->ID, 'siteurl', true ) );
		if ( $myurl != '' ) {
			if ( preg_match( "/http(s?):\/\//", $myurl )) {
				$siteurl = get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode( $myurl );
			} else {
				$siteurl = 'http://' . get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode( 'http://' . $myurl );
			}
			$imgsrc  = '';
		} ?>
		Clean Url: 
		Mshot Url: 
		'.$imgsrc.''; ?>
	
UPDATE: This Is A Newly Added Method
I apologize for not including this originally, my bad. Here is one more method to include after the meta_options function. This will output either the Url of a site post, or the image source including the size of the image by passing the object a number for the size. An example of for how to use this, refer to the custom columns code above. You will notice that the Url and image are output to create the separate columns for each site post. $m = $this->mshot(150); echo $m[1];
    public function mshot($mshotsize) {
        global $post, $url;
        $imgWidth = $mshotsize;
        $myurl = get_post_meta($post->ID, 'siteurl', true);
		if ( $myurl != '' ) {
			if ( preg_match( "/http(s?):\/\//", $myurl )) {
				$siteurl = get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode( $myurl );
			} else {
				$siteurl = 'http://' . get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode('http://'.$myurl );
			}
		}
        $mshotimg = '';

        return array( $siteurl, $mshotimg );
	}


Initializing it for Takeoff
We need to initialize the class functions, and add them to the dashboard admin, and then instantiate the class with a new object of it for hooking into the 'init' action. To do that you can add the following to your 'register_post_type() function just before the closing bracket.
UPDATED! The correct hook for the 'site_edit_columns' should be manage_edit-site_columns().
        add_action( 'admin_init', array(&$this, 'admin_init') ); // this must be first
        add_action( 'template_redirect', array(&$this, 'template_redirect') );
        add_action( 'wp_insert_post', array(&$this, 'wp_insert_post'), 10, 2 );

		// add custom columns
		add_filter( 'manage_posts_custom_column', array( &$this, 'site_custom_columns' ));
		add_action( 'manage_edit-site_columns', array ( &$this, 'site_edit_columns' )); // manage_edit-{post_type}_columns used for custom post types

To make custom columns for custom post types, WordPress manage_post_custom_columns() also uses manage_edit-{post_type}_columns to edit the custom post type manage post page columns. Just using manage_post_custom_columns for custom post types will cause your 'post' manage page to be overwritten with your custom columns.
After that you need to create a new object of the class to instantiate the class. This function will be used to make a new instance of the class. The function is then added to the init hook for WordPress.
/* Initialize Post Types */
add_action('init', 'pTypesInit');
function pTypesInit() {
    global $sites;
    $sites = new TypeSites();
}

The pTypesInit() function will be used to instantiate more post type classes later on in this series. By the time the series is over, the posttypes.php will be a work of art if ever one existed for custom post types.
The Full Sites Custom Post Type Class
This class is now complete. Of course you can always add or alter it however you like. Here is the full complete code.
 array(
                'name' => __( 'Sites', 'post type general name' ),
                'singular_name' => __( 'Site', 'post type singular name' ),
                'add_new' => __( 'Add New', 'site' ),
                'add_new_item' => __( 'Add New Site' ),
                'edit_item' => __( 'Edit Site' ),

                'new_item' => __( 'New Site' ),
                'view_item' => __( 'View Site' ),
                'search_items' => __( 'Search Sites' ),
                'not_found' =>  __( 'No sites found in search' ),
                'not_found_in_trash' => __( 'No sites found in Trash' ),
			),
			'public' => true, 'show_ui' => true,
			'_builtin' => false,
			'capability_type' => 'post',
			'hierarchical' => false,
			'rewrite' => array('slug' => 'site'), // Permalinks. Fixes a 404 bug
			'query_var' => 'site',
			'taxonomies' =>  array('category', 'post_tag'), // Add tags and categories taxonomies
			'supports' => array('title','editor','author','comments')
        );
        register_post_type( 'site', $siteArgs );	

	// Initialize the methods
        add_action( 'admin_init', array(&$this, 'admin_init') );
        add_action( 'template_redirect', array(&$this, 'template_redirect') );
        add_action( 'wp_insert_post', array(&$this, 'wp_insert_post'), 10, 2 );

		// add custom columns
		add_filter( 'manage_posts_custom_column', array( &$this, 'site_custom_columns' ));
		add_action( 'manage_edit-site_columns', array ( &$this, 'site_edit_columns' )); // manage_edit-{post_type}_columns used for custom post types

	}

	// Create the columns and heading title text
	public function site_edit_columns($columns) {
        $columns = array(
			'cb' 		=> '',
			'title' 		=> 'Site Title',
			'url'	 	=> 'URL',
			'category'	=> 'Category',
			'post_tags' => 'Tags',
			'siteurl' 	=> 'Screenshot',
        );
        return $columns;
    }
	// switching cases based on which $column we show the content of it
    public function site_custom_columns($column) {
		global $post;
        switch ($column) {
            case "title" : the_title();
                break;
            case "url" : $m = $this->mshot(100); echo ''.$m[0].'';
				break;
            case "category" : the_category();
				break;
            case "post_tags" : the_tags('',', ');
                break;
            case "siteurl" : $m = $this->mshot(150); echo $m[1];
				break;
        }
    }

	// Template redirect for custom templates
    public function template_redirect() {
        global $wp_query;
        if ( $wp_query->query_vars["post_type"] == "site" ) {
            include( TEMPLATEPATH . "/single-site.php" ); // a custom single-slug.php template
            die();
        } else {
			$wp_query->is_404 = true;
		}
    }

	// For inserting new 'site' post type posts
    public function wp_insert_post($post_id, $post = null) {
        if ($post->post_type == "site") {
            foreach ($this->meta_fields as $key) {
                $value = @$_POST[$key];
                if (empty($value)) {
                    delete_post_meta($post_id, $key);
                    continue;
                }
                if (!is_array($value)) {
                    if (!update_post_meta($post_id, $key, $value)) {
                        add_post_meta($post_id, $key, $value);
                    }
                } else {
                    delete_post_meta($post_id, $key);
                    foreach ($value as $entry) add_post_meta($post_id, $key, $entry);
                }
            }
        }
    }

	// Add meta box
	function admin_init() {
        add_meta_box( "sites-meta", "Site", array( &$this, "meta_options" ), "site", "side", "low" );
    }

	// Admin post meta contents
	public function meta_options() {
		global $post, $url;
		$custom = get_post_custom($post->ID);
		$url = $custom["siteurl"][0];
		$myurl = trailingslashit( get_post_meta( $post->ID, 'siteurl', true ) );
		if ( $myurl != '' ) {
			// Check if url has http:// or not so works either way
			if ( preg_match( "/http(s?):\/\//", $myurl )) {
				$siteurl = get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode( $myurl );
			} else {
				$siteurl = 'http://' . get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode( 'http://' . $myurl );
			}
			$imgsrc  = '';
		} ?>

		Clean Url: 
		' . $imgsrc . ''; ?>

	ID, 'siteurl', true);
		if ( $myurl != '' ) {
			if ( preg_match( "/http(s?):\/\//", $myurl )) {
				$siteurl = get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode( $myurl );
			} else {
				$siteurl = 'http://' . get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode('http://'.$myurl );
			}
		}
        $mshotimg = '';

        return array( $siteurl, $mshotimg );
	}

} // end of TypeSites{} class
?>

This concludes the building of your first fully functional and intuitive Php Class for constructing a WordPress 3.0 custom post type. Save the posttypes.php file, and make sure to include it into your functions.php file. Then go to your dashboard to check out the new post type that should be added and working as a new section of the site. Please let me know of any mistakes I may have made or bugs that might be found. Cutting this code up and disecting it makes it easy for this to happen.


We will be using much of this same code with some minor changes, and replacing certain functions with others according to the different post type classes. But first let's try out this new class by adding some objects to a couple custom WordPress templates.
The next tutorial shows how to instantiate the class, and build a custom post type WordPress loop to query the custom post types posts that have been submitted.
« Part 1
Part 3 »
Related Posts
OOPost Types: Objects Part 3 – Object Oriented WordPress 3.0 App
Create A Simple Metabox For Custom Post Types
New2Tip: Allow Visitors To Search By Category
OOPost Types: Classes Part 1 – Object Oriented WordPress 3.0 App
Making Your RSS Feeds Sexy With Custom Content In WordPress

OOPost Types: Classes Part 1 – Object Oriented WordPress 3.0 App

Jared — Mon, 19 Jul 2010 11:00:09 +0000

An OOP Post Series On WordPress 3.0 Custom Post Types

I noticed how extremely in demand posts about custom post types are when I realized my previous post is apparently the most popular page of this site almost doubling the homepage in page views.

So if it's post types you people want to know about or just what WordPress 3.0 is now really capable of, then I will share with how to create classes for your post types, custom taxonomies, other various yet useful methods you can create for your classes, and then show you how to create objects which you can use in your WordPress theme to create a completely custom section of your site. I'll be incorporating some jQuery and Ajax even if all of that wasn't already enough.

I'll share with you some of the code that I've been writing and re-writing you don't even want to know how many times over again, in an effort to create what I want to call a super class for post types, but more on that later.

What you will learn

How to create classes for custom post types
Creating methods within your post type classes
Using new objects of your classes in theme templates
Plus much more to come...

I have been developing a complete application as a theme using multiple post types and taxonomies, classes and objects, and jQuery custom post forms which submit using the built in Ajax functions used to submit new posts in the dashboard, plus tons of other cool custom made capabilities.

It's a rather BIG project of mine that I started when 3.0 was still on the first beta version. Not sure how long ago that was, but I've been coding/designing this theme/app for MONTHS now, and it grows more complex and abstract every time I work on it. But enough about that, I could go on for days.

The OOPost Types Class Is Now In Session!!!

Since I don't really have a set number of posts planned for this series I'm not sure how to break it up. So I'll just start by showing how to build a class for a new custom post type.

You'll need to create a new file that will contain the code for the post type class and just name posttypes.php. In your theme directory create a new folder called /functions and save the posttypes.php file in there. This becomes useful in organizing your Php files and any custom code.

1. Prepare your functions file

Open your functions.php template for your theme and add the following code to the top before everything else.

// Create a variable to the path to functions directory
$functionsdir = TEMPLATEPATH . '/functions';

// Include your posttypes.php file
require_once ( $functionsdir . '/posttypes.php' );

The functions directory variable will be useful, and while were here you might as well include your posttypes.php file so WordPress knows to do something with it.

2. Declaring A Post Type Class

Now you can start creating the class in posttypes.php. In Php you declare a class with the word class followed by the name of the class followed by curly brackets { }. It's similar to the way you create functions in php only you can't use parenthesis like functions do for passing variables. It's common for class names to start with a Capital letter unlike functions too.

Within the brackets you can create methods which are really just functions, but are called methods. I may use both to refer to them just so you know what I mean. They are the same thing.

So now let's drop the code in here that you may have seen many times before for creating custom post types. Here's how I have set up the labels and other vars for a post type called Sites using the $labels like you are supposed to now.

 array(
                'name' => __( 'Sites', 'post type general name' ),
                'singular_name' => __( 'Site', 'post type singular name' ),
                'add_new' => __( 'Add New', 'site' ),
                'add_new_item' => __( 'Add New Site' ),
                'edit_item' => __( 'Edit Site' ),
                'new_item' => __( 'New Site' ),
                'view_item' => __( 'View Site' ),
                'search_items' => __( 'Search Sites' ),
                'not_found' =>  __( 'No sites found in search' ),
                'not_found_in_trash' => __( 'No sites found in Trash' ),
			),
			'public' => true, 'show_ui' => true,
			'_builtin' => false,
			'capability_type' => 'post',
			'hierarchical' => false,
			'rewrite' => array('slug' => 'site'),
			'query_var' => 'site',
			'supports' => array('title','editor','author','comments')
        );

        register_post_type( 'site', $siteArgs );	

	}

} // end of TypeSites{} class
?>

I won't explain what all of these are for since there's 2000 articles on the web about it, but you can see that I set the rewrite to use 'site' for the slug, and the query variable is set to 'site', and finally what the post type supports is 'title', 'editor', 'author', and 'comments'.

We can use the title and TinyMCE editor that posts use instead of having to create meta boxes for, and we want to allow for showing the author of a site post as well as let people post comments to the posts. In another custom post type later in the series I'll show you how to utilize the TinyMCE editor as a custom meta box, not the way the default one is used.

The only thing that we need now is an input field for the site url. For that we create a custom meta box which we'll create in part 2 of Classes.

Instead of adding a custom taxonomy for this post type so that we can organize the sites submitted properly, let's just use the built-in Tags and Categories in WordPress. This seems to be the best way to organize different sites I've found, unless you know a better way then please share.

The way you incorporate the tags and categories taxonomies is by adding the following to the $siteargs array we've created.

'taxonomies' =>  array('category', 'post_tag'),

So now our class should look like this.

 array(
                'name' => __( 'Sites', 'post type general name' ),
                'singular_name' => __( 'Site', 'post type singular name' ),
                'add_new' => __( 'Add New', 'site' ),
                'add_new_item' => __( 'Add New Site' ),
                'edit_item' => __( 'Edit Site' ),
                'new_item' => __( 'New Site' ),
                'view_item' => __( 'View Site' ),
                'search_items' => __( 'Search Sites' ),
                'not_found' =>  __( 'No sites found in search' ),
                'not_found_in_trash' => __( 'No sites found in Trash' ),
			),
			'public' => true, 'show_ui' => true,
			'_builtin' => false,
			'capability_type' => 'post',
			'hierarchical' => false,
			'rewrite' => array('slug' => 'site'), // Permalinks. Fixes a 404 bug
			'query_var' => 'site',
			'taxonomies' =>  array('category', 'post_tag'), // Add tags and categories taxonomies
			'supports' => array('title','editor','author','comments')
        );

        register_post_type( 'site', $siteArgs );	

	}

} // end of TypeSites{} class
?>

What's this public stuff?

We will be creating some public variables and functions in this class. What that means basically is they are accessible from anywhere in your script. It is the easiest to use access control modifier because of this.

Quick Overview of Access Control Modifiers

Used for Variables or Functions...

Public - Can be used from anywhere in the script.
Private - Can only be used by the object it is part of, it cannot be accessed elsewhere.
Protected - Can only be used by the object it is part of, or descendants of that class.
Final - Cannot be overridden in inherited classes.

Used for Functions or Classes...

Abstract - Cannot be used directly. Must inherited from the functions or class first.

We need to create a public variable that is used to store an array of the post data 'title', 'content', 'siteurl', 'category', and 'post_tags'. Add the variable to the top of the class just after the first curly bracket like this.

class TypeSites {
    public $meta_fields = array( 'title', 'description', 'siteurl', 'category', 'post_tags' );

The class should now look like this.

 array(
                'name' => __( 'Sites', 'post type general name' ),
                'singular_name' => __( 'Site', 'post type singular name' ),
                'add_new' => __( 'Add New', 'site' ),
                'add_new_item' => __( 'Add New Site' ),
                'edit_item' => __( 'Edit Site' ),
                'new_item' => __( 'New Site' ),
                'view_item' => __( 'View Site' ),
                'search_items' => __( 'Search Sites' ),
                'not_found' =>  __( 'No sites found in search' ),
                'not_found_in_trash' => __( 'No sites found in Trash' ),
			),
			'public' => true, 'show_ui' => true,
			'_builtin' => false,
			'capability_type' => 'post',
			'hierarchical' => false, // like 'post' not 'page'
			'rewrite' => array('slug' => 'site'), // Permalinks. Fixes a 404 bug
			'query_var' => 'site',
			'taxonomies' =>  array('category', 'post_tag'), // Add tags and categories taxonomies
			'supports' => array( 'title', 'editor', 'author', 'comments' )
        );

        register_post_type( 'site', $siteArgs );	

	}

} // end of TypeSites{} class
?>

Notice how the first function that has the post type registration code and stuff has the same name as the class itself. This is one way of creating the class __construct() method for the class, making it run automatically when the class is instantiated. I'll go over __construct() and __destruct() methods later on in more detail.

Building The Class Methods

In the next part of this series we will add some methods to this class, and really start to boogie down with some Object Oriented Php custom post types.

Continue To OOPost Types Classes Part 2 »

WordPress Custom Post Types And Taxonomies The Right Way

Jared — Fri, 25 Jun 2010 13:00:35 +0000

An Important Update: WordPress 3.0 Post Types And Taxonomies

I remember posting about this important update that was made to the way custom post types and custom taxonomies could and should be created in order to properly set them up for full customization. I wrote about it the day after the update was pushed to the WordPress SVN in one of the beta versions.

I don't think this change got enough exposure. At the very least I didn't expect to be the only one to explain it as I did here as the only other article explaining it besides what the Codex says on it. Because of this and Antonio mentioning to me yesterday after he noticed that out of all his bookmarks for post types, no one has explained this, I decided to post a complete how-to, in setting up custom post types and taxonomies the RIGHT way. If I had known this would've been so highly overlooked down the line, I would've written a post like this instead of the less in-depth explanation I did when the change was first made.

Quick Jump Menu:

Custom Post Types Done Right
Working With Post Types: Functions You Should Know

Custom Taxonomies The Right Way
Working With Taxonomies: More Useful Functions For You!

Use the links listed above to jump down to the part of this post you're interested in.

Using Labels For Post Types

The use of labels for custom post types and taxonomies is important for the fact that it helps differentiate your custom stuff from the other things in WordPress that already exist. When you go to add a new post, page, category or tag, at the top of the page it says Add New _Thing_, depending on what it is your adding. If you don't use labels to change this to read whatever the custom thing you create is, then it will default to Post for post types, and Category or Tags for taxonomies that are either hierarchical or not, respectively.

Here's what you see without using labels:

This is collage of different places post type labels are used in the dashboard, like when you add new, search or edit posts, tags categories, etc. It's also what you will see if you create custom post types or taxonomies the way everyone else has said to create them besides me, without the use of labels.

Setting up labels to show the custom post type

As I mentioned in my first post on labels, the WordPress Codex has documented this as well, if you hadn't noticed. Here's a quick review using the example they provide.

// The register_post_type() function is not to be used before the 'init'.
add_action( 'init', 'my_custom_init' );

/* Here's how to create your customized labels */
function my_custom_init() {
	$labels = array(
		'name' => _x( 'Books', 'post type general name' ), // Tip: _x('') is used for localization
		'singular_name' => _x( 'Book', 'post type singular name' ),
		'add_new' => _x( 'Add New', 'book' ),
		'add_new_item' => __( 'Add New Book' ),
		'edit_item' => __( 'Edit Book' ),
		'new_item' => __( 'New Book' ),
		'view_item' => __( 'View Book' ),
		'search_items' => __( 'Search Books' ),
		'not_found' =>  __( 'No books found' ),
		'not_found_in_trash' => __( 'No books found in Trash' ),
		'parent_item_colon' => ''
	);

	// Create an array for the $args
	$args = array( 'labels' => $labels, /* NOTICE: the $labels variable is used here... */
		'public' => true,
		'publicly_queryable' => true,
		'show_ui' => true,
		'query_var' => true,
		'rewrite' => true,
		'capability_type' => 'post',
		'hierarchical' => false,
		'menu_position' => null,
		'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
	); 

	register_post_type( 'book', $args ); /* Register it and move on */
}

It is obviously more coding this way compared to every other article you've probably read on this, but it is how you can make your post types more custom, since they are custom post types after all. It only takes 2 seconds more to do this anyways.

Now you will see the correct post type as shown here.

You get the idea I hope now, right? See how much better that looks, to you, your clients, or any other users of the site who will see the complete customization of your post types. They will think you are some kind of god, or something....

Additional Post Type Functions You Should Know About

The following are functions you can use for various things related to post types. The function name is linked to the line in /wp-includes/post.php where it is created for those that would like to check out the source code which makes them work. I've also added a short description for each that is used in the source to describe them.

Post Type Functions:

post_type_exists() - Checks if a post type is registered.

is_post_type_hierarchical( $post_type ) - Whether the post type is hierarchical. A false return value might also mean that the post type does not exist.

get_post_type( $post ) - Retrieve the post type of the current post or of a given post.

get_post_type_object( $post_type ) - Retrieve a post type object by name.

get_post_types( $post ) - Get a list of all registered post type objects.
- $args - An array of key => value arguments to match against the post type objects.
- $output - The type of output to return, either post type 'names' or 'objects'. 'names' is the default.
- $operator - The logical operation to perform. 'or' means only one element from the array needs to match; 'and' means all elements must match. The default is 'and'.
- Returns an array listing post type names or objects.

register_post_type() - Register a post type. Do not use before init.
- A simple function for creating or modifying a post type based on the parameters given.
- The function will accept an array (second optional parameter), along with a string for the post type name.

get_post_type_capabilities() - Builds an object with all post type capabilities out of a post type object.
Accepted keys of the capabilities array in the post type object:
- edit_post - The meta capability that controls editing a particular object of this post type. Defaults to "edit_ . $capability_type" (edit_post).
- edit_posts - The capability that controls editing objects of this post type as a class. Defaults to "edit_ . $capability_type . s" (edit_posts).
- edit_others_posts - The capability that controls editing objects of this post type that are owned by other users. Defaults to "edit_others_ . $capability_type . s" (edit_others_posts).
- publish_posts - The capability that controls publishing objects of this post type. Defaults to "publish_ . $capability_type . s" (publish_posts).
- read_post - The meta capability that controls reading a particular object of this post type. Defaults to "read_ . $capability_type" (read_post).
- read_private_posts - The capability that controls reading private posts. Defaults to "read_private . $capability_type . s" (read_private_posts).
- delete_post - The meta capability that controls deleting a particular object of this post type. Defaults to "delete_ . $capability_type" (delete_post).

get_post_type_labels( $post_type_object ) - Builds an object with all post type labels out of a post type object.
Accepted keys of the label array in the post type object:
- name - general name for the post type, usually plural. The same and overriden by $post_type_object->label. Default is Posts/Pages
- singular_name - name for one object of this post type. Default is Post/Page
- add_new - Default is Add New for both hierarchical and non-hierarchical types.
- add_new_item - Default is Add New Post/Add New Page
- edit_item - Default is Edit Post/Edit Page
- new_item - Default is New Post/New Page
- view_item - Default is View Post/View Page
- search_items - Default is Search Posts/Search Pages
- not_found - Default is No posts found/No pages found
- not_found_in_trash - Default is No posts found in Trash/No pages found in Trash
- parent_item_colon - This string isn't used on non-hierarchical types. (In hierarchical ones the default is Parent Page)

_get_custom_object_labels() - Builds an object with custom-something object (post type, taxonomy) labels out of a custom-something object

add_post_type_support( $post_type, $feature ) - Register support of certain features for a post type.
All features are directly associated with a functional area of the edit screen, such as the editor or a meta box:
- 'title',
- 'editor',
- 'comments',
- 'revisions',
- 'trackbacks'
- 'author',
- 'excerpt',
- 'page-attributes',
- 'thumbnail',
- 'custom-fields'
Additionally, the 'revisions' feature dictates whether the post type will store revisions, and the 'comments' feature dicates whether the comments count will show on the edit screen.

remove_post_type_support( $post_type ) - Remove support for a feature from a post type.

post_type_supports( $post_type, $feature ) - Checks a post type's support for a given feature.

set_post_type( $post_id = 0, $post_type = 'post' ) - Updates the post type for the post ID.
- $post_id Post ID to change post type. Not actually optional.
- $post_type Optional, default is post. Supported values are 'post' or 'page' to name a few.
- Return int Amount of rows changed. Should be 1 for success and 0 for failure.

get_posts() - Retrieve list of latest posts or posts matching criteria.
The defaults are:

'numberposts' - Default is 5. Total number of posts to retrieve.
'offset' - Default is 0. See { WP_Query::query() } for more.
'category' - What category to pull the posts from.
'orderby' - Default is 'post_date'. How to order the posts.
'order' - Default is 'DESC'. The order to retrieve the posts.
'include' - See { WP_Query::query() } for more.
'exclude' - See { WP_Query::query() } for more.
'meta_key' - See { WP_Query::query() } for more.
'meta_value' - See { WP_Query::query() } for more.
'post_type' - Default is 'post'. Can be 'page', or 'attachment' to name a few.
'post_parent' - The parent of the post or post type.
'post_status' - Default is 'published'. Post status to retrieve.

Alternatively to using get_posts(), you should also learn about the difference between WP_Query() and query_posts() for retrieving post information.

I plan to cover get_posts() more in a future post.

Using Labels For Taxonomies

Also mentioned in my previous post was using labels when creating custom taxonomies. This is also documented in the WordPress Codex just so you know. I will cover it a little more in-depth though.

Here's the example used in the Codex:

First snippet is hierarchical. The same thing as WordPress 'category' taxonomy.

// hook into the init action and call create_book_taxonomies() when it fires
add_action( 'init', 'create_book_taxonomies', 0 );

// create two taxonomies, genres and writers for the post type "book"
function create_book_taxonomies() {

	// Add new taxonomy, make it hierarchical (like categories)
	$labels = array(
		'name' => _x( 'Genres', 'taxonomy general name' ),
		'singular_name' => _x( 'Genre', 'taxonomy singular name' ),
		'search_items' =>  __( 'Search Genres' ),
		'all_items' => __( 'All Genres' ),
		'parent_item' => __( 'Parent Genre' ),
		'parent_item_colon' => __( 'Parent Genre:' ),
		'edit_item' => __( 'Edit Genre' ),
		'update_item' => __( 'Update Genre' ),
		'add_new_item' => __( 'Add New Genre' ),
		'new_item_name' => __( 'New Genre Name' ),
	); 	

	register_taxonomy( 'genre', array( 'book' ), array(
		'hierarchical' => true,
		'labels' => $labels, /* NOTICE: Here is where the $labels variable is used */
		'show_ui' => true,
		'query_var' => true,
		'rewrite' => array( 'slug' => 'genre' ),
	));

The next snippet is for creating non-hierarchical taxonomies such as Tags in WordPress

	// Add new taxonomy, NOT hierarchical (like tags)
	$labels = array(
		'name' => _x( 'Writers', 'taxonomy general name' ),
		'singular_name' => _x( 'Writer', 'taxonomy singular name' ),
		'search_items' =>  __( 'Search Writers' ),
		'popular_items' => __( 'Popular Writers' ),
		'all_items' => __( 'All Writers' ),
		'parent_item' => null,
		'parent_item_colon' => null,
		'edit_item' => __( 'Edit Writer' ),
		'update_item' => __( 'Update Writer' ),
		'add_new_item' => __( 'Add New Writer' ),
		'new_item_name' => __( 'New Writer Name' ),
		'separate_items_with_commas' => __( 'Separate writers with commas' ),
		'add_or_remove_items' => __( 'Add or remove writers' ),
		'choose_from_most_used' => __( 'Choose from the most used writers' )
	);
	register_taxonomy( 'writer', 'book', array(
		'hierarchical' => false,
		'labels' => $labels, /* NOTICE: the $labels variable here */
		'show_ui' => true,
		'query_var' => true,
		'rewrite' => array( 'slug' => 'writer' ),
	));
} // End of create_book_taxonomies() function.

You may have noticed that this is very similar to how labels are used for creating post types. That's because they are almost identical! You can choose to do either method, using the $args variable to set up the arguments as shown in the post types snippet, or you can just do it as shown above in the taxonomies snippets. It's up to you, however you want to organize your code.

Here's how taxonomies with labels now looks.

I'm going to assume you get the point and I don't need to take screenshots of how the non-hierarchical taxonomy will look. It's the same deal different word.

Functions For Taxonomies You Should Know About

The following are functions which you can use when working with taxonomies. I'm not going to link to the line of each function or include descriptions of each since the file which contains them is way smaller than posts.php where the post type functions are, so if you're interested in viewing the source of these you should've have a hard time finding the line they are on.

The functions which make up taxonomies are located in /wp-includes/taxonomy.php of the WordPress source.

get_taxonomies() - Get a list of registered taxonomy objects.
get_object_taxonomies() - Return all of the taxonomy names that are of $object_type.
get_taxonomy() - Retrieves the taxonomy object of $taxonomy.
taxonomy_exists() - Checks that the taxonomy name exists.
is_taxonomy_hierarchical() - Whether the taxonomy object is hierarchical.
register_taxonomy - Create or modify a taxonomy object. Do not use before init.
get_taxonomy_labels() - Builds an object with all taxonomy labels out of a taxonomy object
register_taxonomy_for_object_type() - Add an already registered taxonomy to an object type.
get_objects_in_term() - Retrieve object_ids of valid taxonomy and term.
&get_term() - Get all Term data from database by Term ID.
get_term_by() - Get all Term data from database by Term field and data.
get_terms() - Retrieve the terms in a given taxonomy or list of taxonomies.
is_term() - Returns the index of a defined term, or 0 (false) if the term doesn't exist.
sanitize_term() - Sanitize Term all fields.
wp_count_terms() - Count how many terms are in Taxonomy.
Default $args is 'hide_empty' which can be 'hide_empty=true' or array( 'hide_empty' => true ).
wp_insert_term() - Adds a new term to the database. Optionally marks it as an alias of an existing term.
wp_set_object_terms() - Create Term and Taxonomy Relationships.
&_get_term_children() - Get the subset of $terms that are descendants of $term_id.
get_term_link() - Generates a permalink for a taxonomy term archive.
the_taxonomies() - Display the taxonomies of a post with available options.
get_the_taxonomies() - Retrieve all taxonomies associated with a post.
get_post_taxonomies() - Retrieve all taxonomies of a post with just the names.

I don't think I can squeeze anymore about custom post types or taxonomies into this post without copying and pasting the complete source code from the taxonomy.php and post.php files in WordPress. That's just not going to happen, you got enough of the source already I'm sure.

Let me know what you think, and if you have comments...

How To Create WordPress Dashboard Themes And Styles

Jared — Tue, 01 Jun 2010 13:00:20 +0000

Giving The Dashboard Some Style

In the past I've posted similar tutorials which show how to customize the WordPress dashboard header and changing just the logo and color, but that's boring stuff.

You've probably seen these types of posts a million times all over the web. There's no other tutorial that I've been able to find which shows you what this one does. You may be able to understand why if you knew that the Stylesheet used for the WordPress dashboard has 3,242 lines of CSS code most of which contains hundreds of CSS selectors that have one single style attribute applied to them. So when you do the math, that equals a long list of selector attributes which you'd need style in order to completely alter the WordPress dashboard.

Despite the fact there were only 2 comments on the post from a couple weeks ago trying to find out how many people were interested to learn how to style the WordPress dashboard completely to match their sites theme, I've decided to make this tutorial. I checked out the page visits to that post and there were a number of people that were visited the page, but were just too lazy to post a comment since it wasn't an actual tutorial. So this is somewhat of interest to people I think just from that.

If you'd like to get an idea of how gigantically huge the Stylesheet really is, when you're logged into your WordPress dashboard and view the page source. In the source code near the top you should see a line that has something like this http://YOUR_SITE.com/wp-admin/load-styles.php?c=1&dir=ltr&load=theme-editor,global,wp-admin&ver=07053e9e82227a5c19c6d2ad36944788. This is what is loading the Stylesheet for WordPress dashboard

Just How Much You Can Change?

This is a screenshot of how I styled the New2WP.com dashboard. You can see it looks a lot like the frontend of the site.

Some Things Your Should Know

Before getting started I want to point out that this is only just a guide which you should use as a reference. If you do not know CSS very well, this may not be the best thing for you to try out at this point. If you do something that makes your dashboard screwed up, it is easy to fix, however. You would just need to remove the style attributes which you applied that screwed it up (like if something became hidden, or whatever).

One thing that I did learn from doing this is that there are many thing that will be unreadable if you choose to use a dark background color for the body of the dashboard. Doing that will mean you'll probably have to find out how to style each individual plugin options page, or several other things.

The Stylesheet for the dashboard is quite extensive, and there are many different parts which you may have not been aware of which are styled with CSS. If you think about just how many plugins there are for WordPress, then consider how many people create them, who all write code in a different way, it's easy to understand how quickly it can become a complicated situation. Many people create dashboard pages, or option pages based on the default style of the dashboard. That means you'd have to override all of their style attributes as well. So just take that into mind when doing this.

A List Of CSS Attributes For The WordPress Dashboard

This is not a complete list of ALL the attributes in the Stylesheet, just what I've come to learn about using Firebug's selection feature. It is how I was able to find specific elements of pages which I wanted or needed to style. Some were needed because of another change I wanted to make. The dark background color of the #wprap caused me to need to change several other things, and more than I had the time to do. So I changed the background back to the color #CDCDCD which is just a light gray. I suggest you don't use a dark background, you'd be better off trust me.

a, a:hover - This is for all links in the dashboard
#wpbody - The body of the dashboard
#wpwrap - The wrapper which holds both the navigation and main page content
#wpwrap div - Any div element within the wrapper
#header-logo - For changing or styling the logo in the header
#wphead - The section along the top of the dashboard
h1#site-heading a - The title heading text that's displayed in the header next to the logo
.wrap h2 - All H2 headings in the main content of the wrapper. They have a text-shadow
#wphead-info #user_info - Right side of header, top right of the dashboard
#adminmenu, .folded #adminmenu - The left nav menu, and folded
#adminmenu a.menutop - Top menu item links
#adminmenu li.wp-has-current-submenu ul li a - Menu items that have submenu
#adminmenu .wp-submenu li.current - Current page menu item
#adminmenu .wp-submenu li.current a - Current page menu link
.inner-sidebar, .has-right-sidebar .inner-sidebar - Sidebar on right side of pages
#message - The message box which displays when you make an update or change
.highlight,.highlight a -
#footer - Entire footer section
#footer-left a - Left side of footer text
table - Any table element within the wrapper
table a, table a.span - Links within tables and links in table spans

For those that just skipped down to here

You really should do you're research before you go and add this to you're site. I've talked about some important things above, and you would be better know some of what I mentioned if you plan to completely change your WordPress dashboard.

Applying Your Stylesheet To The WordPress Dashboard

The easiest way I found was to use Firebug to select the elements, and then edit or add styles to see how it will look. Then I'd add what I've changed, and what selector I made the change to, to the Stylesheet I created in a function that adds the styles to the head of the dashboard. So you will need to create a Stylesheet for your function. Here's the one I created so you can see what it looks like.

Note: Some of these things may not work if you're using WordPress 3.0. For earlier versions however, you should be able to use these for you're WordPress dashboard.

add_action('admin_head', 'custom_colors');
function custom_colors() {
   echo '';
}

There are a couple images which have .get_bloginfo('template_directory').' preceeding them. This is getting the image from your theme images directory. The images I used here are to replace the logo and to make a repeating background for the header.

You just need to make a function like that, and add it to your functions.php file, or another file for custom scripts file that is included in functions.php.

Another Way

You could make your life easier and just make a Stylesheet file, that you enqueue in your function. This is how you would do the same thing as above.

function custom_colors() {
	wp_enqueue_style( TEMPLATEPATH . '/css_path/to/stylesheet.css' );
}

a{color:#fff;text-shadow:none;}
#wpbody{color:#dee5ed;}
#wpwrap{color:#5a6173;}
#wpwrap div{color:#000;}
#header-logo{background-image:url('.get_bloginfo('template_directory').'/images/YOUR_LOGO.png)!important; height:76px; width:272px; margin-top:0px;}
#wphead{background:#5a6173 url('.get_bloginfo('template_directory').'/images/REPEATING_BACKGROUND_IMAGE.png)repeat-x!important; height:83px;}
h1#site-heading a{font-family:Palintino Linotype;color:#7BCC02; display:none;}
#templateside span{color:#fff;}
#templateside a{color:#b7d918;}
#adminmenu a.menutop{color:#999;text-shadow:0 1px 0 #FFF;}
#adminmenu .wp-submenu a{color:#b7d918;background:#182431!important;}
#adminmenu li.wp-has-current-submenu ul li a{background:#000!important;}
#adminmenu .wp-submenu li.current, #adminmenu .wp-submenu li.current a{color:#cdcdcd; background:#61730D top left no-repeat;text-shadow:0px 1px 2px #182431!important; font-family:"Palintino Linotype"; font-size:14px;}
#message{background:#182431;color:#b7d918!important;}
#excerpt,.attachmentlinks{height:10em;}
#footer,#footer-upgrade{background:#182431;color:#cdcdcd;}
#footer #footer-left a{color:#b7d918;}
.wrap h2{color:#fff;text-shadow:0px 1px 0px #000;}
.highlight,.highlight a{padding:2px 4px;border-left:3px solid #E6DB55;background:#182431;color:#b7d918!important;}
.inside a{color:#21759B;}
.postbox{color:#000!important;}
table{color:#333;}
table a, table a.span{color:#21759B;text-shadow:0px 1px 0px #fff;}

This should be enough to get you started. Remember that Firebug is a great way to learn what changes what so any other things you try to change would be best tested using that.

Any Questions?

Just let me know below in the comments.

NOTICE:

If you chose to use this guide as an aid in customizing your WordPress dashboard, it is essential to keep in mind that this is in no way a fool-proof or exhaustive tutorial for dashboard customizations. This is NOT an official WordPress tutorial or styling guide. Before using this guide to customize your WordPress dashboard, therefore, know that any unwanted or unexpected errors/issues on a site that may result from following all or part of this guide are the sole responsibility of the individual who made the changes to that site.

Important Update: Register Taxonomies And Post Types With Labels

Jared — Tue, 25 May 2010 17:57:46 +0000

What's the news

There was an important change (see #12968) made recently that has been committed to SVN. This new update has to do with the way you create new custom taxonomies and post types. Also see ticket #13357 as well for more info.

This update allows a post type or taxonomy to register a series of custom labels, using the labels array. This was made to be backwards compatible, so you the singular_label still exists, it is just ignored if not used, and used if it is used. The label and singular_label properties were left alone so they technically still exist as they always have.

Using the new labels, or $labels array argument there are several labels you can create for a particular post type or taxonomy. You would set a $labels variable to equal the array of label options you wish to use, if any, and then use that variable as the value for the key "labels" in the array which you set up when registering a new taxonomy or post type.

For Example: How You Would Use Labels

Here's what I mean, it's really quite simple to do, and it's organized nicely so you don't get all confused by the 3D array insanity that was possible.

So first you need to create the variable and array of desired labels.


  // Add new taxonomy, make it hierarchical (like categories)
  $labels = array(
    'name' => _x( 'Genres', 'taxonomy general name' ),
    'singular_name' => _x( 'Genre', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Genres' ),
    'popular_items' => __( 'Popular Genres' ),
    'all_items' => __( 'All Genres' ),
    'parent_item' => __( 'Parent Genre' ),
    'parent_item_colon' => __( 'Parent Genre:' ),
    'edit_item' => __( 'Edit Genre' ),
    'update_item' => __( 'Update Genre' ),
    'add_new_item' => __( 'Add New Genre' ),
    'new_item_name' => __( 'New Genre Name' ),
  );

Then thisis how you'd register taxonomies, or post types to use the above $labels variable.


  register_taxonomy('genre',array('book'), array(
    'hierarchical' => true,
    'labels' => $labels, // SEE this is the $labels array from above
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'genre' ),
  ));

This is really nothing too complicated I hope if you already have a familiarity with register taxonomies or post types. (I just lost my train of thought cause I just slammed my knee into the desk, OW!) Okay, so if you are unclear about the above example, refer to the WordPress Codex - Function Reference for the functions register_post_type() and register_taxonomy() to learn more.

Possible Labels Explained In English

This update basically removes the need to use edit_cap, edit_type_cap, delete_cap, etc. They are are all gone (though still there for backwards compatibility). The function capability_type (i.e. "post", "page", "mycustomtyp" etc.), property is now what does the managing of Capabilities, and after which then builds the corresponding capabilities.

Below is a quick view of the optional labels which can be used in the array as it has been documented for both taxonomies and post types alike.


/*
 * labels
 *		(array) (optional) labels - An array of labels for this taxonomy. By default tag labels are used for non-hierarchical types and category labels for hierarchical ones.

 		* Default: if empty, name is set to label value, and singular_name is set to name value 

		* 'name' - general name for the taxonomy, usually plural. The same as and overridden by $tax->label. Default is _x( 'Post Tags', 'taxonomy general name' ) or _x( 'Categories', 'taxonomy general name' ). When internationalizing this string, please use a gettext context matching your post type. Example: _x('Writers', 'taxonomy general name');

		* 'singular_name' - name for one object of this taxonomy. Default is _x( 'Post Tag', 'taxonomy singular name' ) or _x( 'Category', 'taxonomy singular name' ). When internationalizing this string, please use a gettext context matching your post type. Example: _x('Writer', 'taxonomy singular name');

		* 'search_items' - the search items text. Default is __( 'Search Tags' ) or __( 'Search Categories' )

		* 'popular_items' - the popular items text. Default is __( 'Popular Tags' ) or __( 'Popular Category' )

		* 'all_items' - the all items text. Default is __( 'All Tags' ) or __( 'All Categories' )

		* 'parent_item' - the parent item text. This string is not used on non-hierarchical taxonomies such as post tags. Default is null or __( 'Parent Category' )

		* 'parent_item_colon' - The same as parent_item, but with colon : in the end null, __( 'Parent Category:' )

		* 'edit_item' - the edit item text. Default is __( 'Edit Tag' ) or __( 'Edit Category' )

		* 'update_item' - the update item text. Default is __( 'Update Tag' ) or __( 'Update Category' )

		* 'add_new_item' - the add new item text. Default is __( 'Add New Tag' ) or __( 'Add New Category' )

		* 'new_item_name' - the new item name text. Default is __( 'New Tag Name' ) or __( 'New Category Name' )
 *
 */

Get more information

If you want to get some more info on this new update, you could check out the thread ON WPdevel where Andrew Nacin provides bit more in-depth explanation about it. It definitely seems like a great update which expands the customizability, and overall capabilities you can have with the awesomely implemented new post type feature.

Have you worked with custom post types or custom taxonomies yet with WordPress 3.0 alpha or beta?? I would like to know what you like or dislike about the new feature so leave a comment below and let me know.

Just an FYI:

The new date for the WordPress 3.0 release is now set for "June 2010, early to mid-month, hopefully". So keep an eye out for it, (or the next beta release lol). I know I am excited for the released, and have really enjoyed just playing with the beta versions. So the official release will be great I'm sure.

Create jQuery Tabs For WordPress Login-Register-Password Reset Forms

Jared — Sat, 22 May 2010 13:10:54 +0000

This is the Ultimate Custom Login/Register Form Tutorial

Let's do away with the plain old, not very cool, default WordPress login/register form page for once, what do you say? I'm going to show you how to change the way you login to your site, and the way others join and login to your site too.

Okay, so you may be thinking what's so great about this tutorial compared to all the other one's posted on the internet. I've seen this a million times, and the all end the same, blah blah blah.

I can pretty much guarantee that there is nothing quite like this posted online, at least not available for free. You may be able to find a similar tut on the Tuts+ network, if you have a premium membership, which is great and all, but how many people actually do. Trust me, this is not like any other tutorial you may have "seen" before. There isn't anything as complete, or useful, or just plain awesome. I know because I have scoured the internet in search of how to create this when I was trying to first make it myself. It's just not out there, until now!

What you will learn from this tutorial

How to:

create a sidebar jQuery UI Tabs widget
create a custom form to show under each tab
- a WordPress 3.0 Login form
- a custom register form
- a custom password reset form
check if the visitor is logged in
change the content of the tabs if user is logged in
finally love yourself for knowing how to do this.

What you will need:

You will need to have some understanding of HTML5, CSS and jQuery or jQueryUI, though it's not required, but it does help. You will also need to either have a self-hosted copy of jQuery and/or jQuery UI on your website, if you choose to not use the Google CDN version of these, which I will be using here. If you don't know why I am using the Google hosted copies, then you need to read up on the great advantages of linking to a CDN hosted script.

Basically, CDN hosted files are faster and stuff etc. etc. It's cached on most anyone's computer who has access the internet sometime since the dawn of the modern world and the invention of the internet. Since 90% of sites out there link to a CDN copy of jQuery already, it's a pretty good chance most visitors to your site have the scripts saved already in the cache. Anyways, let's get going shall we.

1: The HTML5 Tabs Markup

I'm going to start off slow and show you how I would write the HTML for the jQuery tabs, using the new HTML5 format. You will notice that instead of the

tag which you may be used to, I am using the new

which is a more semantic way of referring to a part of your site that is considered a form of navigation.

What I have below is how you would write it if you wanted to have some unordered lists within your tabs for example. We will be removing these lists later when we create the forms that will go in place of them. But you should keep a copy of this just as a sample of code, in the case that even later in this tutorial, you may want to show list items, for when the user is logged in and there is no need to show the login/register forms.

The HTML5 Tab Markup



	
		First Tab
		Second Tab
		Third Tab
	

	
		
			This is the first tab
			This is the first tab
			This is the first tab
			This is the first tab
		
	
	
		
			Second tab this is
			Second tab this is
			Second tab this is
			Second tab this is
			Second tab this is
		
	
	
		
			Tab three here buddy!
			Tab three here buddy!
			Tab three here buddy!
			Tab three here buddy!

You may have noticed that the first unordered list was not preceded by a

element, and this is because this just happens to be how I wrote it here. You could choose to do that if you want, I just kept the tabs and the actual list items separate, so I know that the tabs aren't a navigable list of items, which link to other pages, just other lists.

They are a sort of navigation, just not what I would consider a navigation menu, personally. Also, you might have noticed that the first unordered list elements link to the #tabs-tabnumber. This is so that, 1. the tabs will match and show the correct tab to which you click on to see the content of, and 2. so that if the user has JavaScript disabled they will still be able to access the content of the tabs because of these anchors. They won't have the cool switcheroo like you would with JavaScript, but you can still see what's there and use it at least. Good practice for keeping your site progressively enhanced.

2: Styling The Tabs With CSS

The great thing about using jQuery UI to create the tabs is that it does all the styling for you, Woohoo! If you went the route of downloading jQuery UI which by the way can be customized to your needs, to host the files on your website yourself, then you also got the CSS Stylesheet that came with it in the zip file. That CSS file contains all the styles you need for the tabs to work as you want them to, ... tabs.

You can easily customize the styling as far as color and general appearance goes simply by defining a class which you can apply to the

or just use the #tabs ID attribute as your CSS selector, and apply your styling to it with that.

Although, with jQuery UI, there is the Theme Roller, which you can use any of the already created/rolled themes, or roll your own theme right on the site. It's really neat, and you should at least try it out. I didn't give it as much credit before as I should have long ago. Then I tried it, and wow... I said, now that's fresh. Check out the theme I created, which you can use it if you want.

Now, if you chose to use a CDN hosted copy of jQuery UI not to worry, you can easily en-queue the script that WordPress comes pre-packaged with out of the box. Whichever way you decided to use, here's how you can link to the CSS Stylesheet file you need for styling up your tabs.

En-queue the Stylesheet in functions.php file:

You need to link or en-queue the jQuery UI Styleseet, depending on whether you're using the jQuery UI download pack or the Google CDN copy.
(Note: If you just upload the jQueryUI.js file from the download, you will need to do the second option here to ensure that the Stylesheet is linked.)

Linking to the Stylesheet directly:


/*
 * Link to the CSS source file in your  of your site.
 */
function loadStyles() {
	echo '';
}
add_action('wp_head', 'loadStyles');

/*
 * You can add the javascript file to the footer
 * With this too if you want.
 */
function loadScripts() {
	echo ''; // needed if jQuery isnt loaded
	echo '';
}
add_action('wp_foot', 'loadScripts');

Link to the scripts on the Google Content Distribution Network by doing the following instead:


/*
 * OR DO THIS if you want to use the Google
 * CDN Hosted scripts
 */
function loadScripts() {
	echo '';
	echo '';
}
add_action('wp_foot', 'loadScripts');

En-queue the jQuery UI CSS Stylesheet included in WordPress:

Another way you can choose to load the Stylesheet, jQuery, or jQuery UI is by using the WordPress wp_enqueue_style() and wp_enqueue_script() functions.

Here you will find a list of all the scripts WordPress comes bundled with by default should you be interested to use them in your site for anything else. You would use the same word for en-queuing the style of a particular script too for most all of them if there is a Stylesheet included for any other one you may want to use.


function loadStyles() {
	wp_enqueue_styles( 'jqueryui' );
}
add_action('wp_head', 'loadStyles');

/*
 * Embed the jQuery UI javascript file in your
 * Footer using this if you choose to
 */
function loadScripts() {
	wp_enqueue_script( 'jquery' ); // You only need to add this if you do not already have jQuery embedded
	wp_enqueue_script( 'jqueryui' );
}
add_action('wp_foot', 'loadScripts')

Do keep in mind that many WordPress plugins, and even many themes do already load jQuery, most commonly anyways, though I have seen plugins embed other scripts and Stylesheets for them. Before you add the jQuery script (as well as jQueryUI script), I would highly recommend you view the source code of your site to see if you already have these loaded. Just right click on the page when viewing the site, and go to "view page source" in Firefox, or in IE it's just "view source". Check to see whether jQuery.js is in the source code either in the or near the bottom of the page source code within the

of the site. More than likely it already is at least once, if not more. Removing them all and leaving just one is a tutorial for another day though.

3: Initializing the Tabs For Takeoff

So now that we have the scripts and the styles and the HTML for the tabs all set up, lets test that they at least work before we start putting content in. To do this though, we need to still add one little bit of code which will initialize the tabs. Think of it like this, we set up all the pieces which make up a go kart (or tabs in this case), now we just need to put the key in and turn it on (random analogy I know, but it works right?).

To turn on our tabs you will need to add this line of code, AFTER the jQuery and jQuery UI scripts are loaded. If you have your own custom.js file for things like this, you could put it in there. If not, the way I would do it for now is to open your footer.php, find , and put it below that. This ensures it will run after the scripts we embedded using the above functions are loaded.

4: Testing The Tabs To Tickle Them Pink

Now that you have this set up, try testing it out by dropping the first chunk of HTML5 code I gave you into your sidebar.php file, and see if these babies work! Make sure everything is doing dandy before you move onto the rest, and if there happens to be any issues, now would be the best time to resolve them before things start to get more complex. TRUST ME!!! I learned this the hard way, repeatedly, far more than I would've liked to that's for sure.

5: Getting Down And Dirty With The Forms

To start this part off, I'd like to point out that this tutorial assumes that you are currently using WordPress 3.0. If you are not, then you will need to create your own custom login form. I am going to be using the all-new WordPress 3.0 wp_login_form() function, which is a great addition to the new version of WordPress, only thing is they didn't make a function for the other forms. For anyone still using WP 2.9.x or earlier, I will show you a quick way to make a login form at the end of this tutorial. (I'm a softy, what can I say)

First thing we need to do is

Check if the user is already logged in! To do that, we start by writing the following:

If the user is already logged in, we can then show them a totally different set of tabs and tabbed content. This is a great way to customize your site even more for your members, and to show them different content since they are a member of your awesomely coolio site of hottness!

6: Next on the list is the tabs HTML

Nothing new here from what I showed you in the beginning, except that the list items now say Login, Register, and Lost Password. This is a self-explanatory I think, I would hope so at least.



	
		Login
		Register
		Lost Password

7: Now for the first tab, the Login Form

This is the easiest tab of the three. All you have to do is put in the div for the first tab. Must simpler than the other two as you will see next.

8: Custom Coding The Register Form

That last part will seem like a breeze compared to this one. Here we create the register form and throw in a couple of PHP functions you may not have seen before, and add the content of the second tab on our list.


	
		
			
				Username

				
				
			
			
				E-mail

				
				
			
			A password will be e-mailed to you.

Lets review the above code. Nothing special as far as HTML forms go right? Just a basic HTML form, nothing you can't handle, or haven't seen in your web site making career I hope (if this part is news to you then you may want to check out the W3 for some beginners HTML tutorials). As for the new stuff the part is making use of the new WordPress 3.0 site_url() function which is a replacement of the get_option('site_url') function in previous versions of WordPress. Here we just add in the URL path of the register form along with scheme of login_post to give the site URL some context. Neither of these arguments are required by default, but in this case, they are. You could just write it like this /wp-login.php?action=register but that's not as fun is it?

One thing I am not quite sure of though think you may want to leave as is, is whether the form element ID's and name attributes as I have here are required to use these or if you can assign your own names. I just assume keeping the default register form attributes the same, so to keep it from potentially not working (because these work as is I know), and for consistency sake.

The other strange and unusual part of the register form code is the . This is the meatballs of the entire form. With out this Chicken Little would be quivering in his little chicken.... coup? Because the sky would be falling.

If you want the form to actually do something useful upon being submitted, then it needs to run this function. It tells WordPress that you want to register a new user account, as well as, the sending out of the confirmation email with the crazy randomly auto-generated password you receive when joined a WordPress site. If you have a firm grasp on that we can move on...

9: Anyone Here Lose A Password?

This is a form that is many times neglected I think, but just as important to keeping the members of your site which have already registered. I mean, I personally register an account on at LEAST one new site A DAY!! And out of all the sites which I am a registered member of and visit randomly choose to login to on any given day, I have to reset my password on average, TWICE A DAY on 2 different sites, almost without fail. For every site I sign up on each day, I have to reset my password on two other sites which I have forgotten the password for since last visiting it. It's quite annoying, but what the hell can I really do about it at this point?

It's not that unsurprising is it? It seems that every site on the internet now requires you to have an account, and not nearly enough use the Facebook Connect, Google Friend Connect or some other equivalent API available from various sites. So if you want to keep your members as part of your site, you better damn well make it easy for them to reset their passwords should they forget it amidst the library of passwords we all now must keep cataloged. The less steps they have to take to log back into your site, the more likely they even will at all.

10: Let's make a password reset form


	
		
			
				Username or E-mail:

That wasn't so bad now was it? This isn't all that dis-similar from the register form either. You already know about the site_url() function. The only difference here is it's pointing to the URL wp-login.php?action=lostpassword instead of action=register. Also, the meatballs as I called it earlier, (the do_action() function) is just doing . EUREKA!!!!

That's what I said when I figured this out for this and the register form. It just all of a sudden came to me one day, and I was finally able to make my forms work, and then in-turn, write this amazing tutorial for you. This will send the user a password reset link, which they can click to have a new auto-generated password emailed to them so they can login to their account, and set their password to something a little more memorable.

11: Finishing Up - Or Are We...?

We could just end this here and close out the if(user is logged in){ or not } statement that started before making the tabs, and that's fine if you've had enough and can't take it any longer. I am not easy on the ears, or eyes. I won't take it personal if you decide to not go any further, just go play with your new tabs and forms. Bye!

For those that want to keep going, lets add a new set of tabs for the users that are logged in so they can have some custom coolioness as a registered, AND logged in member of your site.

Remember that first chunk of HTML5 code I gave you at the beginning, which I told you to save for later? Well it's later. Grab that code, and paste it after this else statement:

Do it... or Else...!!

This says, well tickle me purple, this person is logged in!! In that case, lets show them a cooler set of tabs with some exclusive members only content only the registered and logged in visitors can see!

12: Only Showing Logged In Members Exclusive Tabs And Content

Here's what I have done to that chunk of code I told you to grab and paste here after the else statement. Did you do that? Or did you fail to follow my directions, again... It's okay, just copy this and use it instead of you want ;)



	
		Members Only
		Members Tuts
		Chat
	
	
		
			For The Members
			My Members Rule
			Members Must Read
			I Do re-Members
		
	
	
		
			Special Tut (like this one but private)
			A premium tutorial
			Something special
			Make a mustache man? wtf
		
	
	
		
			You could chuck a Chatango.com chat or something
			like that up in here, up in here, up in here.

Now maybe you want to have a list of privately published pages which you set up so only visitors that are logged in can access them. If not, here is another way to create WordPress members only pages, which you could set up, and list in the space for the first tab. Create some privately posted, members only tutorials on how to do some crazy super cool and insane shit. Yeah kinda like this tutorial, actually, exactly like this tutorial, only privately viewable to registered users.

Unlike this tutorial, but just as good. :P Last, maybe you want to have a chat for chitting away with your chatter-tat-tatters and sons. Or someone else that is registered on your site and likes talking to you. The possibilities to what these new members only tabs can hold is endless. All that we have left to do though, is END THIS!!!

13: Let's End This Schnitzel

So we need to put an endif; we plan to ever end this. Ha! Did ya get it?!?! Clever bastard, I am, eh? Okay...

That's All Folks

Hope you liked this super custy amazed ation, makes me crave some more sensational stuff...

How About A Bonus

As promised,

For Those, Less Up-to-Date WordPress Nuts

Making a custom coded login form, is simple. You may already know how to do it just in making the register and password reset forms, but if not here we go.



	
		Username

		
	
	
		Password


		
	
	 Remember Me

Finally That's it!!

We made it through this long and drawn-out tutorial. You know, this is all readily open and available for you to view anytime you want had you just taken a second to think about it, you might have already thought about it and known. Then you wouldn't have needed to come follow my shenanigans here and you could've created this on your own. Just go check out the wp-login.php file, and see for yourself. It has all the greatness I have gone through here, aside from the mustache reference Oh, and the tabs of course.

For those who are going to ask me if I have a demo set up, please check out my test site here for a working example demonstration. I have created a tabbed dialog box that displays the login/register and password reset forms which I am using on the theme I am currently developing. Click the Login button in the top right corner, and test the login out by using the following information:

Username: themedemo
Password: themedemo

Any questions??? Post a comment, let me know what you're thinking, or what you've thought already. Enjoy!