As of WordPress version 2.8 the function can take two parameters:

/**
 * @param string $path Optional. Path relative to the plugins url.
 * @param string $plugin Optional. The plugin file that you want to be relative to - i.e. pass in __FILE__
 * @return string Plugins url link with optional path appended.
*/
function plugins_url($path = '', $plugin = '')

So far only the $ path parameter could be passed, so that required a proper definition of the folder.

$style = plugins_url( 'my_plugin_folder/css/style-frontend.css' );

With the extension in version 2.8 of WordPress it can be done like:

$style = plugins_url( 'css/style-frontend.css', __FILE__ );

The use should make it simpler and clearer. But the question will come up, how do I do backwards compatibility of the plugin? You can either use the version query:

if ( version_compare( $wp_version, '2.8dev', '>' ) )

and then supplement or write a custom function for the replacement:

// function for WP < 2.8
function plugins_url($path = '', $plugin = '') {
  if ( function_exists('is_ssl') )
    $scheme = ( is_ssl() ? 'https' : 'http' );
  else
    $scheme = 'http';
  $url = WP_PLUGIN_URL;
  if ( 0 === strpos($url, 'http') ) {
    if ( function_exists('is_ssl') && is_ssl() )
      $url = str_replace( 'http://', "{$scheme}://", $url );
  }

  if ( !empty($plugin) && is_string($plugin) )
  {
    $folder = dirname(plugin_basename($plugin));
    if ('.' != $folder)
      $url .= '/' . ltrim($folder, '/');
  }

  if ( !empty($path) && is_string($path) && strpos($path, '..') === false )
    $url .= '/' . ltrim($path, '/');

  return apply_filters('plugins_url', $url, $path, $plugin);
}

This is only an alternative, the possibilities are endless - maybe one or the other has a beautiful idea and solution?

Relating to this and because of many questions about this topic I show you two simple functions, which you insert in your functions.php of your theme. Normally they get used as output in your comments.php.

/**
 * count for Trackback, pingback, comment, pings
 *
 * use it:
 * fb_comment_type_count('ping');
 * fb_comment_type_count('comment');
 */
if ( !function_exists('fb_comment_type_count') ) {
	function fb_get_comment_type_count( $type='all', $zero = false, $one = false, $more = false, $post_id = 0) {
		global $cjd_comment_count_cache, $id, $post;

		if ( !$post_id )
			$post_id = $post->ID;
		if ( !$post_id )
			return;

		if ( !isset($cjd_comment_count_cache[$post_id]) ) {
			$p = get_post($post_id);
			$p = array($p);
			update_comment_type_cache($p);
		}
		;
		if ( $type == 'pingback' || $type == 'trackback' || $type == 'comment' )
			$count = $cjd_comment_count_cache[$post_id][$type];
		elseif ( $type == 'pings' )
			$count = $cjd_comment_count_cache[$post_id]['pingback'] + $cjd_comment_count_cache[$post_id]['trackback'];
		else
			$count = array_sum((array) $cjd_comment_count_cache[$post_id]);

		return apply_filters('fb_get_comment_type_count', $count);
	}

	// comment, trackback, pingback, pings, all
	function fb_comment_type_count( $type='all', $zero = false, $one = false, $more = false, $post_id = 0 ) {

		$number = fb_get_comment_type_count( $type, $zero, $one, $more, $post_id );

		if ( $number > 1 )
			$output = str_replace('%', number_format_i18n($number), ( false === $more ) ? __('% Comments') : $more);
		elseif ( $number == 0 )
			$output = ( false === $zero ) ? __('No Comments') : $zero;
		else // must be one
			$output = ( false === $one ) ? __('1 Comment') : $one;

		echo apply_filters('fb_comment_type_count', $output, $number);
	}
}

if ( !function_exists('fb_update_comment_type_cache') ) {
	function fb_update_comment_type_cache(&$queried_posts) {
		global $cjd_comment_count_cache, $wpdb;

		if ( !$queried_posts )
			return $queried_posts;

		foreach ( (array) $queried_posts as $post )
			if ( !isset($cjd_comment_count_cache[$post->ID]) )
				$post_id_list[] = $post->ID;

		if ( $post_id_list ) {
			$post_id_list = implode(',', $post_id_list);

			foreach ( array('', 'pingback', 'trackback') as $type ) {
				$counts = $wpdb->get_results("SELECT ID, COUNT( comment_ID ) AS ccount
							FROM $wpdb->posts
							LEFT JOIN $wpdb->comments ON ( comment_post_ID = ID AND comment_approved = '1' AND comment_type='$type' )
							WHERE post_status = 'publish' AND ID IN ($post_id_list)
							GROUP BY ID");

				if ( $counts ) {
					if ( '' == $type )
						$type = 'comment';
					foreach ( $counts as $count )
						$cjd_comment_count_cache[$count->ID][$type] = $count->ccount;
				}
			}
		}

		return $queried_posts;
	}

	add_filter('the_posts', 'fb_update_comment_type_cache');
}

If both functions in your theme are available, the usage of the 3 forms comments, trackbacks and pingbacks could look like this:

if ( function_exists('wp_list_comments') ) {

	// WP 2.7 comment loop
	if ( have_comments() ) { ?>

		<?php if ( empty($comments_by_type['comment']) ) { ?>
			<h2 id="comments"><?php fb_comment_type_count( 'comment' ); ?></h2>
			<ol class="commentlist">
				<?php wp_list_comments( 'type=comment&callback=fb_theme_comment' ); ?>
			</ol>
		<?php } ?>

		<?php
		if ( function_exists( 'fb_comment_type_count' ) ) {
			// alternative type pings for trackback + pingback
			if ( empty($comments_by_type['$post_id']) ) { ?>
				<h2 id="pingback"><?php fb_comment_type_count( 'pingback', 'No Pingback', 'OnePingback', '% Pingbacks' ); ?></h2>
				<ol class="pingbacklist">
					<?php wp_list_comments('type=pingback'); ?>
				</ol>
			<?php } ?>

			<?php
			// alternative type pings for trackback + pingback
			if ( empty($comments_by_type['trackback']) ) { ?>
				<h2 id="trackback"><?php fb_comment_type_count( 'trackback', 'No Trackback', 'One Trackback', '% Trackbacks' ); ?></h2>
				<ol class="trackbacklist">
					<?php wp_list_comments('type=trackback'); ?>
				</ol>
			<?php }
		} ?>

		<div class="navigation nav_comments">
			<div class="alignleft"><?php previous_comments_link() ?></div>
			<div class="alignright"><?php next_comments_link() ?></div>
		</div>

	<?php } else {
		// this is displayed if there are no comments so far
	} ?>

• Create Your Own WordPress Login Design
• 10 Checks to the Perfect WordPress theme

In both cases I didn't talk about how to deactivate the default WordPress layout, since I always used the example based of the WordPress stylesheet. But the stylesheet of WordPress isn't really lean and why should you load unnecessary data, which you really don't need?

With a little hook and an appropriate function I can disable to load the stylesheet of WordPress and load my own CSS - How that works can be read in both articles about adjusting theme login.

if ( basename($_SERVER['PHP_SELF']) == 'wp-login.php' )
	add_action( 'style_loader_tag', create_function( '$a', "return null;" ) );

If you put the above syntax in your functions.php, it will also be disabled if you change or deactivate your theme. So it's easy to adjust your frontend, backend and login area. As of my experience it is necessary in some business areas, even if it's only for small areas of the backend and login. But that is essential for me, if I like to have a „perfect“ Theme.

Loading the Stylesheet

I have to use a simple function, which I put in functions.php of the current theme and integrate it via hook login_head into the login-head to load the css for the login-section. This will make the custom css being referenced only by one specific theme and if I switch to a different, a different css will also be loaded.

// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
}

add_action('login_head', 'fb_custom_login');

The stylesheet comes with the name custom-login.css and is located in /custom-login in the folder of the theme.

The Stylesheet

Like I already said, here is tiny example, which includes classes and id's of the login-section, so you can customize it very easily.

html {
background-color: #fff;
}

#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}

#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}

#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}

The example above is just one way to customize the style. As usual there are unlimited possibilities with css and the art of it. A recommendational note from me, is to use the Firebug extension, which is really helpful when customizing css live. I can't mention this enough.

Icon for Menu

Adding icons to the menu

My first tip is how to add an icon in the Plugin menu. This is not just a great eye-catcher, but will also make the menu link more obvious and lead to an increase of usability. I won't use a link to some file for the icon this time, instead I will store the icon as a base64-encoded string inside of the Plugin's code. The encoded string doesn't save me just the file or a folder, besides there is no access and no request done for the image, which in the end saves some time, when rendering this page.

I provide a little Service for anyone who doesn't want to write the converter for the image himself. You can easily use my Image2Base64 Generator for this purpose.

The icon will only appear in version 2.7 or above, which can be checked with a simple query. You can get some additional information from the comments inside the code.

/**
 * Images/ Icons in base64-encoding
 * @use function fb_sayfa_sayac_get_resource_url() for display
 */
if( isset($_GET['resource']) && !empty($_GET['resource'])) {
	# base64 encoding
	$resources = array(
		'ssprc.gif' =>
		'R0lGODlhCwALAKIEANTU1Kurq/b29pSUlP///wAAAAAAAAAAAC'.
		'H5BAEAAAQALAAAAAALAAsAAAMlSKoRMysGIZ50A1RJ3ybNow3f'.
		'VJGoQo4nRJDdpwqjtcDy/dhLAgA7'.
		'');

	if(array_key_exists($_GET['resource'], $resources)) {

		$content = base64_decode($resources[ $_GET['resource'] ]);

		$lastMod = filemtime(__FILE__);
		$client = ( isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ? $_SERVER['HTTP_IF_MODIFIED_SINCE'] : false );
		// Checking if the client is validating his cache and if it is current.
		if (isset($client) && (strtotime($client) == $lastMod)) {
			// Client's cache IS current, so we just respond '304 Not Modified'.
			header('Last-Modified: '.gmdate('D, d M Y H:i:s', $lastMod).' GMT', true, 304);
			exit;
		} else {
			// Image not cached or cache outdated, we respond '200 OK' and output the image.
			header('Last-Modified: '.gmdate('D, d M Y H:i:s', $lastMod).' GMT', true, 200);
			header('Content-Length: '.strlen($content));
			header('Content-Type: image/' . substr(strrchr($_GET['resource'], '.'), 1) );
			echo $content;
			exit;
		}
	}
}

/**
 * Display Images/ Icons in base64-encoding
 * @return $resourceID
 */
function fb_sayfa_sayac_get_resource_url($resourceID) {

	return trailingslashit( get_bloginfo('url') ) . '?resource=' . $resourceID;
}

/**
 * add menu in backend
 */
function fb_sayfa_sayac_add_menu() {
	global $wp_version;
	if ( current_user_can('edit_posts') && function_exists('add_submenu_page') ) {

		$menutitle = '';
		if ( version_compare( $wp_version, '2.6.999', '>' ) ) {
			$menutitle = '<img src="' . wpag_get_resource_url('ssprc.gif') . '" alt="" />' . ' ';
		}
		$menutitle .= __('Post Read Counter', 'sayfasayacprc');

		add_submenu_page('index.php', __('Sayfa Sayac - Post Read Counter', 'sayfasayacprc'), $menutitle, 9, __FILE__, 'fb_sayfa_sayac_statistic');
		$plugin = plugin_basename(__FILE__);
		add_filter( 'plugin_action_links_' . $plugin, 'fb_sayfa_sayac_plugin_actions' );
	}
}

I append an additional space to the the img tag, so it's not touching the menu text. You can also achieve this with a CSS style, but this will most likely be an inline style, which is unnecessary code and the performance will suffer a little bit in your backend. I have been talking about this to the WordPress developers for some time and maybe we will get the CSS definitions with 2.7.

Direct link to "Settings"

Settings links

If you read the code above carefully, you probably noticed the use of the filter plugin_action_links. I use this filter to add a "Settings" link. This makes it easier for the user to find the settings page of your Plugin. Mostly the user has to search for the settings page of your Plugin, this can be a real time saver. In my screenshot you can see that I always put the "Settings" leftmost to the standard links "Deactivate" and "Edit".

/**
 * Adds an action link to the Plugins page
 */
function fb_sayfa_sayac_plugin_actions($links) {

	$settings_link = '<a href="sayfa_sayac_de.php">' . __('Settings') . '</a>';
	array_unshift( $links, $settings_link );

	return $links;
}

The above function only works in WordPress 2.7 (more Informations form Latz on his post in German) and has been explained in great detail by Latz! If you like to preserve compatibility with previous WordPress versions, you can do it with this snippet:

/**
 * Adds an action link to the Plugins page
 */
function fb_sayfa_sayac_plugin_actions($links, $file){
	static $this_plugin;

	if( !$this_plugin ) $this_plugin = plugin_basename(__FILE__);

	if( $file == $this_plugin ){
		$settings_link = '<a href="index.php?page=sayfa_sayac/sayfa_sayac_de.php">' . __('Settings') . '</a>';
		$links = array_merge( array($settings_link), $links); // before other links
	}
	return $links;
}

If you have to use this snippet, then the filter has to be used in a different way. You have to replace the code in function fb_sayfa_sayac_add_menu():

$plugin = plugin_basename(__FILE__);
add_filter( 'plugin_action_links_' . $plugin, 'fb_sayfa_sayac_plugin_actions' );

with this

add_filter( 'plugin_action_links', 'fb_sayfa_sayac_plugin_actions', 10, 2 );

Activate both hooks

I can activate both hooks using the action admin_menu. Beforehand I check if the user is in the admin menu, so the code doesn't get evaluated if he is not.

/* Register WordPress hooks */
if ( is_admin() ) {
	add_action('admin_menu', 'fb_sayfa_sayac_add_menu');
}

I think that these two features really add some extra value for all WordPress users. Besides many Plugins have these features already integrated and I'm sure some more Plugins will get updated soon. Many users have confirmed the better usability, especially with the "Settings" link. Please use our comment area for more ideas, critics and compliments. We appreciate any suggestions you can give.

For Plugin or theme authors it's even more interesting, since they can give the users additional value to their Plugins. They can offer information from their Plugin directly on the dashboard. The user can decide if he likes to display them or not.

It's easy to integrate and can be controlled like Meta Boxes (explained in detail). The following example shows how you can integrate a widget in a dashboard.

WP 2.7 with new Widget in Dashboard

The above screenshot shows that I addes the widget Test My Dashboard. Also you can see the possibility to deactivate the widget in the menu.

/**
 * Content of Dashboard-Widget
 */
function my_wp_dashboard_test() {
	echo 'Test Add Dashboard-Widget';
}

/**
 * add Dashboard Widget via function wp_add_dashboard_widget()
 */
function my_wp_dashboard_setup() {
	wp_add_dashboard_widget( 'my_wp_dashboard_test', __( 'Test My Dashboard' ), 'my_wp_dashboard_test' );
}

/**
 * use hook, to integrate new widget
 */
add_action('wp_dashboard_setup', 'my_wp_dashboard_setup');

The function wp_add_dashboard_widget() is the key, which delivers the new widget; via hook wp_dashboard_setup it will be activated on the dashboard.

function wp_add_dashboard_widget( $widget_id, $widget_name, $callback, $control_callback = null )

The function needs 3 parameters and an additional one is optional.

1. The ID, first parameter,will be used to deactivate the widget via JavaScript. In the Menu:

   <label for="my_wp_dashboard_test-hide"><input class="hide-postbox-tog" name="my_wp_dashboard_test-hide" type="checkbox" id="my_wp_dashboard_test-hide" value="my_wp_dashboard_test" checked="checked" />Test My Dashboard</label>
   

   and also in the widget:

   <div id="my_wp_dashboard_test" class="postbox " >
   <h3 class='hndle'><span>Test My Dashboard</span></h3>
   <div class="inside">Test Add Dashboard-Widget</div>
   </div>
   

2. The second parameter delivers the name, which will be displayed, wrapped in an h3-tag.

   <h3 class='hndle'><span>Test My Dashboard</span></h3>

3. With the help of the third parameter the third function gets delivered, it contains the content of the widget. The echo does not take place, you have to use it explicitly. Therefore not only the content can be displayed, which makes it more flexible.

Hint

The hook activity_box_end, which is available since version 2.3, still exists. It adds the content in widget „Right Now“.

Update

Nice to read: a update of this post to include options in the dashboard widget: How add options to your WordPress 2.7 dashboard widgets

Wrong Post Count

If you like to show 6 posts on a page, I use query_posts('showposts=6');. But if one or more posts are "sticky", they get added to the other 6 posts. To show 6 posts actually, you have to know how many sticky posts you have.

The solution:

get_option('sticky_post') gives you an array back with sticky post ID, which we can count.

$sticky = count(get_option('sticky_posts'));
query_posts('showposts='. ( 6 - $sticky ));

Still showing sticky posts in chronological sort order

Pay attention to the CSS classes of the posts. The template tag post_class() gives the post the class. In the case of sticky post, it is also the class "sticky". If you think you can give the class sticky a red background and black border to have a nice teaser you will be disappointed. If you go to the next page to see previous posts, the sticky post will also be showed in the chronological order with a red background and black borders. Not really cool.

Kill the Sticky

If you don't want to have sticky posts, just write in your template:

update_option('sticky_posts', array());

With the empty array you overwrite the sticky options and no sticky posts are availably.

WP 2.7 Navi. actually Beta

Update

The new Design, today (29/10/2008) in beta.

WP 2.7 with new Widget in Dashboard

You already know the update function for Plugins, which is very convenient. Now the same for your WordPress installation, one click and you are up to date.

Such a powerful and important function comes along with some questions and doubts of course.

WordPress 2.7 Core Update

It's your own decision if you want to trust this function, but it's more secure than the automatic update for Plugins, since the Plugins are provided by different authors without control by the WordPress team. The process of the automatic WordPress update is well thought out, which I will explain, so you can get a better picture of it and it makes your decision easier for you if you want to use it or you still update manually.

• Your installation sends version and localization to http://api.wordpress.org/core/version-check/1.2/ and proofs if there is a newer version available. If there is a newer version, it sends back an address to the new available version. It also sends it in the correct language of your current installation. But right now, there is only the English version.
• If there is a newer version, the files will be downloaded in system-temp.
• Afterwards it creates a folder wp-content/upgrade/core
• Now the file wp-admin/includes/update-core.php will be copied from the new download package into the current installation.
• This new file will be used to start the function update_core().
• The new version will be proved.
• A file will be created in root for the maintain modus (.maintenance file). The file wp-settings.php checks that and avoid any access if this file exists. The visitor will just see a simple HTML page with a short message:
  

  Briefly unavailable for scheduled maintenance. Check back in a minute.

• Because of this maintain modus no one can access any files and now all files are getting copied from the installation package to the current installation.
• All unneeded files are going to be deleted.
• ugrade.php contains the information, that the database can be upgraded now. You have to confirm the database update, so it is only possible after all new files are copied to the current installation.
• wp-content/upgrade/core will be deleted after a successful update.
• The same with .maintenance.
• After that the frontend is available again and all upgrade steps are listed in your admin area. Where you can see where a problem occurred if your upgrade wasn't successful.

WordPress 2.7 Core Update

This function amazed by it's simplicity, click, lean back and relax - done!
It's still in Beta and I'm sure many people will talk about the functionality, but that was a popular desire of the WordPress community. Will see if the endless discussion about the upgrade cycles will end or still continue.

Alternative you can still download the current version and install manually like always . Additional WordPress has to offer an own backup system. This saves the use of other Plugins and an upgrade including a backup is fast and simple. The backup creates a XML-File in WordPress format (WordPress WXR), which you can easily import again. It was greatly appreciated in WP-Hacker forum that you can find this function under tools.