For example, instead of my normal meta description being used, I see this in front of all my descriptions on a Google search results page:

Aug 13, 2010 …

The best way I found to remove this, though it may be a hackish approach, is to replace your references to the_time() and the_date() in your theme files with:

<script type="text/javascript">document.write('<?php the_date() ?>');</script>

Once you do that it’s time for the SERP waiting game. I believe it can take upwards of a month for Google to re-index your top pages, so patience is a virtue.

I hope this helps someone else out there, and special thanks to Ajith for originally posting this method.

1. Custom Post Type UI is my plugin of choice

It’s quick, easy and provides everything I need. I haven’t encountered any bugs, and have found that’s it’s a solid, reliable option for use on professional client work. Check out more over at WebDevStudios.

2. Take it to the next level by attaching custom meta boxes to your post types

I use the Verve Meta Boxes plugin for this. The newest release allows you to attach a meta box onto a post type, opening the door to endless possibilities for content management. If you go this route remember that you MUST have custom fields enabled for that Post Type. Without it your Verve meta box will not show up on your post type.

3. Leverage the Custom Field Template plugin for advanced meta box creation

If you need more advanced form fields than I would suggest the Custom Field Template. It’s great for adding multiple TinyMCE instances to a post, or an “Add Another” input setup to allow for duplicate form field entries. Using it you can attach your templates to custom post types using the “Custom Post Type” field. The meta box display isn’t that great. I often little custom CSS to improve it. A little CSS in the WordPress admin can go a long way toward making things easier to use.

I would recommend customizing the settings a bit. I always disable the initialize and save button’s to clean-up the UI and make it less error prone for clients.

4. Don’t be surprised if your plugin meta boxes aren’t supported

It’s a little tricky for plugin authors to attach their meta boxes to your custom post types. Many plugins aren’t current supporting post type meta boxes, so don’t count on plugin capabilities being available without doing your research first. One key feature people will need is SEO meta management. If you’re in need check out the most recent release of All in One SEO. It has a “SEO for Custom Post Types” option that will enable the meta manager box for all your post types once checked. If you’re a plugin author you may want to dig into the code behind the scenes, it’s a handy snippet to enable meta boxes for custom post types.

5. Add a layer of administrative CSS to clean-up the WordPress admin interface to make things as easy as possible

This is something I love to do. In my opinion, a little CSS time spent on the WordPress admin goes a long way when it comes to user experience. To do this I use two handy functions. One loads a stylesheet from my theme directory into the admin. Another add’s the page ID information to the admin body_class(), allowing you target specific pages in the admin. Have you ever wanted to show a meta box on one page, and only that page? This is a nice, although a bit hackish, method.

#5 has spawned a whole post itself… See more about “Customizing the WordPress Admin for a Better Administrator Experience”

There are many things you can do to clean-up your customized admin. Below are a few frequent methods I use on my projects.

Adding a layer of CSS to the admin

When the following function and hook are added to functions.php a stylesheet from your template folder will be loaded into the WordPress admin. Be sure to change the “THEMENAME” to the name of your theme folder.

// Admin CSS layer
add_action('admin_head', 'admin_register_head');
function admin_register_head() {
	$siteurl = get_option('siteurl');
	$url = $siteurl . '/wp-content/themes/THEMENAME/css/admin.css';
	echo "<link rel='stylesheet' type='text/css' href='$url' />\n";
}

Adding some classes to the body of the admin

The following function will add the current post ID information to the BODY class. This will allow you to customize the look of individual editing pages. For example, if your editing the page with an ID of 70, “post-70″ will be added as a class on the BODY tag. If you have a special meta box you want to display on that post, you can use CSS to make it visible.

add_filter('admin_body_class', 'base_admin_body_class');
function base_admin_body_class( $classes ) {
	if ( is_admin() && isset($_GET['action']) ) {
		$classes .= 'action-'.$_GET['action'];
	}
	if ( is_admin() && isset($_GET['post']) ) {
		$classes .= ' ';
		$classes .= 'post-'.$_GET['post'];
	}
	// Return the $classes array
	return $classes;
}

A wider left menu

With the new 3.0 Post Types I find that the left menu is often too small, and post type names commonly span onto two lines. Adding the following bit of CSS to your admin will change the width to 200px. You can easily adjust this size to whatever you want.

/* Menu Enhancements */
#adminmenu {
	width:200px;
	margin-left:-215px;
}
#wpbody {
	margin-left:230px;
}

Better looking meta boxes

Consistency is key when it comes to UI design, and WordPress is no exception. If you clean-up the meta boxes created by various plugins, you’ll find that the admin becomes far more professional and also easier to use. I frequently use the CSS below in my admin.css to enhance the display of Verve Meta Boxes & Custom Field Template meta boxes. You can easily customize whatever you want, this is just a jumping off point!

/* Meta Boxes */
#postcustom {
	display:none;
}
 
/* Verve Meta Boxes */
.verve_meta_checkbox li {
	font-size: 11px;
}
.verve_meta_radio p * {
	display:inline;
	line-height:1.5em;
}
.verve_meta_radio p label {
	display:inline-block;
	width:33%;
}
.verve_meta_radio p span.radio {
	text-transform:capitalize;
}
 
/* Custom Field Template */
#cftdiv .dl_textarea dt * {
	display:none;
}
#cftdiv #cft_selectbox {
	display:none;
}
#cftdiv .dl_textarea dt span,
#cftdiv .dl_textarea dt span * {
	display:block;
}
body #cft dt {
	text-align:left;
}
body #cft dt label {
	line-height:2em;
}
body #cft dd {
	margin-bottom:8px;
}
body #cft dd input[type="text"] {
	width:100%;
}
#poststuff #cftdiv .inside {
	margin:12px 12px 4px;
}
#cftdiv .mceEditor {
	display:block;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	border:1px solid #DFDFDF;
}
body #cft .mceStatusbar {
	padding-bottom:1px;
}
#post-body #cft .wp_themeSkin .mceStatusbar a.mceResize {
	top:0;
}
#post-body #cft .wp_themeSkin .mceStatusbar div {
	text-transform:uppercase;
	font-size:11px;
	color:#999;
	padding:4px 6px 2px;
}

These techniques should get you started on customizing the admin. If there’s anything else you do that I should know about, or something wrong with a practice that I’ve outlined please yell at me in the comments below! I welcome your opinion’s.

The Requirements

1. SEO friendly
2. Work with a WordPress CMS backend to be output dynamically using the wp_list_pages() function
3. Have hover and current navigation states
4. Match the designer exactly

The XHTML

<ul id="subnav" class="clearfix">
	<li class="page_item page-item-259"><a href="http://www.cogenra.com/products-services/hppa/" title="HPPA">HPPA</a></li>
	<li class="page_item page-item-261"><a href="http://www.cogenra.com/products-services/system-purchase/" title="System Purchase">System Purchase</a></li>
	<li class="page_item page-item-75"><a href="http://www.cogenra.com/products-services/installation/" title="Installation">Installation</a></li>
	<li class="page_item page-item-81 current_page_item"><a href="http://www.cogenra.com/products-services/incentives/" title="Incentives">Incentives</a></li>
</ul>

The CSS

#subnav {
	list-style:none;
	padding:0;
	margin:1.6em 0;
}
#subnav li {
	list-style:none;
	margin:0;
	padding:0;
	float:left;
}
#subnav li a {
	font-size:14px;
	margin:0;
	text-decoration:none;
	display:block;
	color:#424a53;
	letter-spacing:0.01em;
	padding:3px 18px 4px 3px;
	line-height:1.2em;
	background:#e0e1e3 url(subnav-bg.gif) top right no-repeat;
}
#subnav li.previous-current a {
	background-image:url(subnav-bg-left.gif);
	background-position:top right
	background-repeat:no-repeat;
}
#subnav li.previous-current a:hover {
	background-image:url(subnav-bg-double.png);
	background-position:top right
	background-repeat:no-repeat;
}
#subnav li.first a {
	padding-left:10px;
}
#subnav li.last a {
	background-image:url(subnav-bg-farright.png);
	background-position:top right
	background-repeat:no-repeat;
}
#subnav li a:hover,
#subnav li.current_page_item a,
body.pageid-91 #subnav li.page-item-178 a,
#subnav li.last:hover a {
	color:#fff;
	background:#FE9914 url(subnav-bg-right.gif) top right no-repeat;
}
#subnav li.last a:hover,
#subnav li.current_page_item.last a,
body.pageid-91 #subnav li.page-item-178.last a,
#subnav li.last:hover a {
	color:#fff;
	background:#FE9914 url(subnav-bg-farright.png) top right no-repeat;
}
#subnav li.current_page_item.previous-current a {
	background-image:url(subnav-bg-double.png);
	background-position:top right
	background-repeat:no-repeat;
}
#subnav li span {
	color:#FE9914;
	margin:0 6px 0 9px;
}

JavaScript/jQuery

(function($){ 
	// Preload method for jQuery
	var cache = [];
	// Arguments are image paths relative to the current page.
	$.preLoadImages = function() {
		var args_len = arguments.length;
		for (var i = args_len; i--;) {
			var cacheImage = document.createElement('img');
			cacheImage.src = arguments[i];
			cache.push(cacheImage);
		}
	}
	$(function(){
		// Subnav jQuery
		if ($('#subnav').length > 0){
			jQuery.preLoadImages('subnav-bg-farright.png', 'subnav-bg-double.png', 'subnav-bg-left.gif', 'subnav-bg-right.gif', 'subnav-bg.gif');
			// First and last classes
			$('#subnav li:first').addClass('first');
			$('#subnav li:last').addClass('last');
			$('#subnav li a').mouseover(function(){
				$(this).parent().prev().addClass('previous-current');
				$(this).parent().next().addClass('next-current');
			});
			$('#subnav li a').mouseout(function(){
				$(this).parent().prev().removeClass('previous-current');
				$(this).parent().next().removeClass('next-current');
				$('#subnav li.current_page_item').prev().addClass('previous-current');
				$('#subnav li.current_page_item').next().addClass('next-current');
			});
			$('#subnav li.current_page_item').prev().addClass('previous-current');
			$('#subnav li.current_page_item').next().addClass('next-current');
		}
	});
})(jQuery);

See the sample / demo!

If you have any suggestions or questions, as always fire away!

1. Easy Post Types

Easy Post Types by New Signature Labs provides a simple visual interface for creating the new WordPress 3.0 Post Types. It also allows you to create your own custom meta boxes for use in your custom post types.

2. Custom Post Type UI & WP Post Type UI

Custom Post Type UI by Web Dev Studios is what I’ve currently been using. It’s a simple visual interface for creating custom post types, much like Easy Post Types. With this plugin you can quickly create custom taxonomies for use within a post type, something that Easy Post Types doesn’t seem to currently offer. You cannot, however, create meta boxes or custom fields for your post types. Combine this with Verve Meta Boxes and you have a heavy hitting post type creation combination.

A branch of the Custom Post Type UI project is also available over at CodeWork, it’s called WP Post Type UI. The goal is to create a similar setup that uses the traditional, simplified WordPress UI.

3. Contemplate

Contemplate by Press Coders is a new plugin that allows us to modularizing snippets of content across an entire site. I’ve seen this approach used in Business Catalyst, and if used correctly I know it can be a highly effective way to maintain a large scale site with repeating content. I believe there’s also a Contemplate Drupal module out there too. Using Contemplate you can store a snippet of HTML in one centralized options page, and then reference that snippet in the TinyMCE editor, or widgetized sidebar, anywhere in the site. If you change the HTML on the options page, it will change throughout the site wherever a snippet is reference. Right now the repository shows this as being supported up to 2.8, but I recently heard from the author that full 3.0 support is in place, giving it the potential to be a viable plugin for use into the future.

4. Front End Editor

Front End Editor by Scribu.net allows you to provide your administrators with a simple way to edit the content of their WordPress site inline, while browsing the site. I’ve seen this done within other CMS’s, such as the small yet powerful Unify system, and it makes editing things much easier and faster.

5. Multiple Post Thumbnails

As advertised, Multiple Post Thumbnails adds the ability to add multiple post thumbnails to a post type. This allows you to have more than one Featured Image on a post or page.

6. Bonus! WP-Table Reloaded

This beast will allow you to easily manage tabular data outside of the WYSIWYG editor using a robust table management interface. Once you’ve created and entered data into a table, you can enable JavaScript/jQuery sorting, style odd or even rows, and even export the data as a CSV, HTML or XML file. CSV, HTML, or XML Imports are also allowed during table creation.

Have a cool CMS plugin I need to check out? Let me know.

Still want more?

These sites can help…

1. Essential Plugins for WordPress 3.0
2. WordPress Plugin Releases for 07/04
3. WordPress Plugin Releases for 06/27
4. New WordPress Plugins tagged with “CMS”

1. Intermedi8 on “IM8 Exclude Pages”

   Adds a checkbox to page write panels where you can set to show or exclude each page in site navigation menus.

2. roohit on “Rooh.It Simplifier”

   Share highlights of your posts EASILY to Facebook, Twitter..100+ such sites. Autoimatically embed parts of any website on your OWN BLOG!

3. roypool on “Get Menu Joomla”

   Get Joomla menu, you get a menu and displays it in joomla wordpress plugin is specially designed for those who use wordpress joomla and in addition,

4. Andy Potanin on “WP-Simplify — Clean up the Control Panel”

   Disable comments, posts, tools, hide unapplicable dashboard metaboxes, etc.

5. gxxywj on “WP flash img show”

   wp-flash-img-show is a FLASH Image Slide plugin for WordPress. You can show your articles , photo,goods,product and other ad. or introduction.Just enj

6. tonipg39 on “MORFEO BASIC VIDEO GALLERY”

   With this plugin you can create video galleries with flv videos and/or youtube videos.

7. ooeygui on “Custom Content Types”

   Create and manage custom content types from the back-end of WordPress

8. ytruly on “YT Tree Menu”

   This plugin is designed to be a page menu for people using WordPress as a CMS

9. metamatic_wp on “Metamatic for WordPress”

   Simple friend list and friend feed functionality.

10. surfpeople on “Social Share 2.0 — Social Bookmarks”

    This plugin adds a small widget within each blog post to share blog posts on Facebook, Twitter, Google Buzz, Digg, Surfpeople, and well over 100 more

If you have any suggestions don’t hesitate to let me know!

I’m always open to feedback.

Why is Google a better option than self hosted?

1. Automated updates — Caching can be done correctly, and once, by us… and developers have to do nothing
2. Gzip works
3. Potentially the greatest benefit of using the Google AJAX Libraries CDN is that your users may not need to download jQuery at all. If they’ve visited another site that was using Google’s jQuery, then it’s already stored in their browser cache.
4. We can serve minified versions — The files are hosted by Google which has a distributed CDN at various points around the world, so the files are “close” to the user
5. The servers are fast, and use a CDN to deliver files faster than your host probably does.
6. A subtle performance (and security) issue revolves around the headers that you send up and down. Since you are using a special domain (NOTE: not google.com!), no cookies or other verbose headers will be sent up, saving precious bytes.

More Resources

• 3 Reasons Why You Should Let Google Host jQuery For You
• Announcing AJAX Libraries API: Speed up your Ajax apps with Google’s infrastructure

Rounded Corners using border-radius

I used this method to create the rounded tab navigation on Next Step Living. It’s well supported by browsers, and can be used in Firefox 3.5, Safari and Chrome. If you need functionality in IE check out the Curved Corner project.

div.rounded {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

Inner shadow using box-shadow

This one works great with images, or just plain text. It’s well supported by the usualy suspects, but isn’t currently supported in IE. If you need IE support take a look at adding this CSS method to replicate the effects: filter: progid:DXImageTransform.Microsoft.Shadow(color=’#969696′, Direction=135, Strength=3);.

div.inner-shadow {
	-moz-box-shadow: inset 0 0 10px #000; /* for Firefox 3.5+ */
   	-webkit-box-shadow: inset 0 0 10px #000; /* for Safari and Chrome */
   	box-shadow: inset 0 0 10px #000; /* CSS 3 Spec */
}

Drop shadow using box-shadow

This is essentially the same method used for the inner shadow above, just a different approach to place the shadow on the outside of the element.

div.drop-shadow {
	-moz-box-shadow: 2px 2px 3px #999; /* for Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #999; /* for Safari and Chrome */
	box-shadow: 2px 2px 3px #999;  /* CSS 3 Spec */
}

Awesome form buttons and submits

This is pulled directly from Dan Cederholm’s demo site used during his 2010 Event Apart Boston presentation, Things we left on the moon. It degrades gracefully accross all browsers, so it may not look the same in IE; but provides the behavioral actions needed for users to complete a task.

input[type="submit"] {
	padding: 8px 15px;
	font-family: Helvetica;
	font-weight: bold;
	line-height: 1;
	color: #444;
	border: none;
	text-shadow: 0 1px 1px rgba(255,255,255,.85);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
	background-image: -moz-linear-gradient(0% 100% 90deg,#bbb, #fff);
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	border-radius: 23px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
	box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
input[type="submit"]:hover {
	color: #333;
	-webkit-animation-name: pulse;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

Create a circle!

This creative technique is thanks to the Web Designer Wall article, Beautiful CSS3 Search Form

.circle {
	width: 100px;
	height: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}

Great resources!

1. SimpleBits: Things we left on the moon
2. Smashing Magazine: Push Your Web Design Into The Future
3. Smashing Magazine: Take Your Design to The Next Level with CSS3
4. CSS3.info
5. CSS3 Gradient Buttons
6. Beautiful CSS3 Search Form

More to come!

This article only scratches the surface of what can be achieved using CSS3. It is hopefully the first of many CSS3 related article I’ll be posting. Let me know if you have any thoughts or suggestions!

Flutter

According to many Flutter is still very much alive, but with the custom post types being built into 3.0 I think it’s apparent to Freshout, the company behind flutter, that 3.0 post types may eventually replace the demand for the plugin.

Magic Fields

Magic Fields build on the core of Flutter, taking it furthur forward and squashing some tough to tackle bugs. If you dig Flutter, but can’t seem to come to grips with some of the bug fixes that are needed to make it run properly, I highly recommend checking out Magic Fields.

Furthur Reading

If you’re interested in more I highly recommend taking a look at the following articles:

• Flutter is Not Dead Says Navid, Matt Mullenweg Takes Notice
• Flutter now Magic Fields, Adminimize
• Script for Migrating from Flutter to Magic Fields

More Fields 2.0

The highlight of this is the ability to add additional Post types besides the built in Posts and Pages. Could this bring More Fields close to the realm of Pods?

More Types 1.0

This splits off the ability to create post types from More Fields since it’s built into the core of WordPress 3.0.

More Taxonomies 1.0

This allows you to create custom taxonomies specific to your post types created with More Types. Very cool indeed.

More Roles 1.0

With More Roles you’ll be able to customized the 5 default user roles built into WordPress, and even add new ones. As best put by the development team: You could for instance create a new role for a specific department in your organization and allow only them to post items in a specific post type.

See the full post over at the Dagensskiva Labs