Change Admin Post/Page List Color By Status

Favorite WordPress tip of the week:

This snippet will change the background colors of posts, pages, and custom post types in the administration post/page lists based on their status, i.e. draft, private, pending, etc.

<?php
add_action('admin_footer','posts_status_color');
function posts_status_color(){
?>
<style>
.status-draft { background: #ffffe0 !important ; }
.status-future { background: #cf9 !important; }
.status-publish { /* no background - keep alternating rows */ }
.status-pending { background: #87c5d6 !important; }
.status-private { background:#fc9; }
</style>
<?php
}

Note: Draft color changed to a slightly lighter yellow than original.

Customize the WordPress Login Page

Custom Login Page

I love WordPress and am personally very happy to see the WordPress logo when I log into a site, but when building sites for some clients (and on my own development site where I build sites for clients to preview), it is nice to use their own logo for the login page. It gives a more professional look and fits in with the rest of their branding.

This snippet will use a custom logo instead of the WordPress default logo.

1. Upload your logo to the server, either manually or through the WordPress media library. It is best if the logo image is 326×82 px or smaller.

2. In your theme’s functions.php file, add this code:

// login page logo
function custom_login_logo() {
    echo '<style type="text/css">h1 a { background: url('.get_bloginfo('url').'/PATH_TO_IMAGE/YOUR_IMAGE.png) 50% 50% no-repeat !important; }</style>';
}
add_action('login_head', 'custom_login_logo');

Replace PATH_TO_IMAGE/YOUR_IMAGE.png with the path to your logo image, i.e. images/logo.png.

To customize the entire login page (including the logo), you can use a similar function to call a custom stylesheet for the login page:

// custom login page
function custom_login_page() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/customlogin.css" />';
}

add_action('login_head', 'custom_login_page');

Numbered Search Results in WordPress

I needed to show search results in an ordered list for a project I am working on and was very surprised to discover how involved this is for paginated search results. Showing the results using a regular ordered list starts the list numbering over at 1 on each new page of results, even though the next set of results was being displayed.

After some horribly hacky solution involving grabbing the page number from the URL and hard coding the number of posts per page, I was led in the right direction by NicktheGeek at StudioPress who suggested getting the number of posts per page from the query string and using the paged value to get the numbers dynamically before applying the math to get the list numbers to display correctly.

A bunch of CSS was required to make the list numbers look like they were actually generated by an <ol> tag. Styling will vary depending on your theme, but one thing that may help if things are looking messed up is to display the post/page titles and contents inline.

CSS:

.search-results #content h2.entry-title,
.search-results #content .post,
.search-results #content .page {
	display: inline;
}

PHP:
For non-Genesis themes, leave out the genesis_ lines.

global $paged;
if(empty($paged)) $paged = 1;

$loop_counter = 1;

$results_per_page = get_query_var('posts_per_page');

echo '<ol class="search-list">';

genesis_before_post();

if ( have_posts() ) : while ( have_posts() ) : the_post();

	if( $paged == 1 ) {
		$real_count = $loop_counter;
	} else {
		$real_count = $loop_counter + ( $paged * $results_per_page - $results_per_page);
	}

	echo '<li><span class="listnum">' . $real_count . '.</span>';

	// The Post

	echo '</li>';

	genesis_after_post();

	$loop_counter++;

	endwhile;
	genesis_after_endwhile();

else :
	genesis_loop_else();
endif;

echo '</ol>';