Thumbnail

It seems like everyone these days is texting away on their mobile phone or updating their social network status every 5 minutes. It’s no surprise that the convenience of being able to access the Internet from anywhere at any time has made sharing messages and pictures so popular. I can’t imagine going anywhere without my cell phone on the off chance that something interesting might happen and I can document it as if I were the first news reporter on the scene. This is the first article in a two-part series in which I will show you how to create a photo blog as part of your personal website which you can update from your phone simply by sending an email.

Read the original:
PHPMaster: Creating a Mobile Photo Blog, Part 1

547-wordpress-thumbnails

You may have noticed the “Featured Image” box when editing a post or page. It allows you to upload or select an associated image for the article. It generally appears as a thumbnail when viewing a list of posts, perhaps in a category index or search results.

Thumbnail support must be enabled within your theme. You could add it to a plug-in so it’s available to all themes but that may not be appropriate in every case. Therefore, you’ll need to open or create a ‘functions.php’ file within your theme folder (wp-content/themes/theme-name/).

To add thumbnail support for all post types, append this command somewhere after the opening <php:


add_theme_support('post-thumbnails');

Alternatively, you can enable thumbnails for just posts:


add_theme_support('post-thumbnails', array('post'));

or just pages:


add_theme_support('post-thumbnails', array('page'));

Setting Thumbnail Sizes

Default thumbnail sizes can be set in WordPress’s Settings > Media screen. However, you can also set a default height and width in functions.php, e.g.


set_post_thumbnail_size(100, 75);

This will produce thumbnails with 100px width and a 75px height (a pleasing 4:3 ratio). However, what happens when a user uploads an image with different aspect ratio — say 100 x 150? In this case, the whole image is proportionally reduced to fit the space and the resulting thumbnail is 50 x 75.

Alternatively, you can define hard-cropping by passing ‘true’ as a third argument:


set_post_thumbnail_size(100, 75, true);

This will crop the image so it matches the aspect ratio. The resulting thumbnail will always be 100 x 75, but the top and bottom or left and right edges will be removed.

WordPress Featured Image

The “Featured Image” box should now appear on your WordPress post/page edit screen. If it’s not there, check it’s enabled in “Screen Options” or review your functions.php code.

Using Thumbnails

Three main thumbnail commands can now be used within any WordPress loop. Typically, you’ll want to use them in files named index.php, category.php, archive.php, author.php, taxonomy.php or search.php:

  • has_post_thumbnail() returns ‘true’ if a thumbnail has been set
  • the_post_thumbnail() echos a string containing the thumbnail <img> tag
  • get_the_post_thumbnail() returns a string containing the thumbnail <img> tag

One of the simplest implementations is therefore:


if (has_post_thumbnail()) {
	the_post_thumbnail();
}

Or we could add a link and a default thumbnail if one isn’t available:


echo '<a href="', get_permalink(), '">';
if (has_post_thumbnail()) {
	the_post_thumbnail();
}
else {
	echo
		'<img src="',
		get_bloginfo('template_directory'), '/images/thumb-default.png',
		'" width="100" height="75" alt="thumbnail" />';
}
echo '</a>';

Advanced Thumbnail Use

Two optional arguments can be passed to the_post_thumbnail() and get_the_post_thumbnail(). The first is the size — either:

  1. a string containing the text ‘thumbnail’, ‘medium’ or ‘large’ as set in in WordPress’s Settings > Media screen, or
  2. an array with new width and height dimensions, e.g. array(120, 90)

The second is an associative array containing the src, class, alt and title.

For example:


the_post_thumbnail(
	array(120, 90),
	array(
		'src' => 'image.jpg',
		'class' => 'thumbnail',
		'alt' => 'post thumbnail',
		'title' => 'my custom title'
	)
);

results in HTML such as:


<img width="120" height="90" src="image.jpg" alt="post thumbnail" title="my custom title" />

That’s about as complex as it gets. Have fun adding thumbnail support to all your WordPress themes.

WordPress menu

In my previous WordPress posts we discovered how to create a plugin, change the administration panel branding, and remove unnecessary dashboard widgets and meta boxes.

In this post, we’ll make some fundamental changes to the main administration menu. If you haven’t created an initial plugin, please read the first part. Welcome back — let’s begin…

The standard WordPress menu can be a little daunting — and third-party plugins often add further items. You can restrict user roles so clients do not see all menu items but, unless you’re using every WordPress feature, they’ll still see options which don’t apply to their site.

We’ll create a function which removes redundant links and simplifies the experience for your clients. Here’s the full code which you can copy into easy-admin.php:


// remove unnecessary menus
function remove_admin_menus() {
	global $menu, $submenu;
	// main menus removed for all users
	$restrict = explode(',', 'Links,Comments');
	// sub-menus removed for all users
	$restrictsub = explode(',', 'Categories,Post Tags');
	// main menus removed for everyone except administrators
	$restrict_user = explode(',', 'Media,Profile,Appearance,Plugins,Users,Tools,Settings');
	// sub-menus removed for everyone except administrators
	$restrictsub_user = explode(',', 'Updates,My Sites');
	// WP localization
	$f = create_function('$v,$i', 'return __($v);');
	array_walk($restrict, $f);
	if (!current_user_can('activate_plugins')) {
		array_walk($restrict_user, $f);
		$restrict = array_merge($restrict, $restrict_user);
		array_walk($restrictsub_user, $f);
		$restrictsub = array_merge($restrictsub, $restrictsub_user);
	}
	// remove menus
	end($menu);
	while (prev($menu)) {
		$k = key($menu);
		$v = explode(' ', $menu[$k][0]);
		if(in_array(is_null($v[0]) ? '' : $v[0] , $restrict)) unset($menu[$k]);
	}
	// remove sub-menus
	foreach ($submenu as $k => $p) {
		foreach($submenu[$k] as $j => $s) {
			if (in_array(is_null($s[0]) ? '' : $s[0] , $restrictsub)) unset($submenu[$k][$j]);
		}
	}
}
add_action('admin_menu', 'remove_admin_menus');

The lines at the top of this function determine which menu items are removed:

  • $restrict (line 5) contains a comma-delimited list of main menu items which will not be shown to any users — including administrators. In the example above, we’re hiding Links and Comments since they’re not used in our site.
  • $restrictsub (line 7) contains a comma-delimited list of sub-menu items which will not be shown to any user. We’ve disabled Categories and Post Tags which normally appear in the main Posts menu.
  • $restrict_user (line 9) contains a comma-delimited list of main menu items which are hidden to everyone except administrators. The example above disables everything other than the Dashboard, Pages and Posts. (Non-administrators would not normally see Appearance and Plugins, but other plugins could change that functionality).
  • $restrictsub_user (line 11) contains a comma-delimited list of sub-menu items which are hidden to everyone except administrators. We’ve disabled Updates and My Sites which normally appear within the main Dashboard menu.

simplified WordPress menu

If you don’t want any items removed for a specific value, set it to an empty array, e.g. $restrict = array();

The result is a far simpler administration menu which is free of dangerous options which could confuse your clients.

Thumbnail

In my previous post we created a new WordPress plugin which simplified the administration panels for your clients. If you haven’t read it, please do so first. In this article, we’ll use the same plugin file for deeper configuration changes.

Remove the WordPress Update Notification

WordPress informs you when an update is available. Unfortunately, it tells everyone — including your clients. That could lead to unnecessary concern or tempt them call you every half an hour until it’s upgraded.

Append the following code to easy-admin.php to remove the notification for everyone except for WordPress administrators:


function no_update_notification() {
	if (!current_user_can('activate_plugins')) remove_action('admin_notices', 'update_nag', 3);
}
add_action('admin_notices', 'no_update_notification', 1);

Remove Unnecessary Dashboard Widgets

You can remove dashboard widgets for a user by logging in as them and un-checking items in the “Screen Options” pull-down panel. However, that may not be practical and there’s nothing to prevent your client re-enabling them.

Append the following function to easy-admin.php to remove unnecessary dashboard widgets. You may need to add, remove or modify unset commands as required. For example, the first section (lines 5-7) removes “Right Now” for everyone but WordPress administrators. The second section (lines 9-13) removes widgets regardless of the user’s rights.

The dashboard widget’s ID is assigned to its box div element — use Firebug or inspect the source to find that value.


// remove unnecessary dashboard widgets
function remove_dashboard_widgets(){
	global $wp_meta_boxes;
	// do not remove "Right Now" for administrators
	if (!current_user_can('activate_plugins')) {
		unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
	}
	// remove widgets for everyone
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}
add_action('wp_dashboard_setup', 'remove_dashboard_widgets');

Remove Unnecessary Page and Post Meta Boxes

Few developers use all the features WordPress has to offer. For example, if all posts are assigned to a single default category, you don’t require the Categories box. Or perhaps you’re not permitting comments and can remove associated boxes.

Append the following function to easy-admin.php to remove unnecessary meta boxes from the posts and pages panels. You may have to add or remove remove_meta_box() calls in this function. The first argument is the ID assigned to the box’s div element — again, this can be discovered in the source or with Firebug.


// remove unnecessary page/post meta boxes
function remove_meta_boxes() {
	// posts
	remove_meta_box('postcustom','post','normal');
	remove_meta_box('trackbacksdiv','post','normal');
	remove_meta_box('commentstatusdiv','post','normal');
	remove_meta_box('commentsdiv','post','normal');
	remove_meta_box('categorydiv','post','normal');
	remove_meta_box('tagsdiv-post_tag','post','normal');
	remove_meta_box('slugdiv','post','normal');
	remove_meta_box('authordiv','post','normal');
	// pages
	remove_meta_box('postcustom','page','normal');
	remove_meta_box('commentstatusdiv','page','normal');
	remove_meta_box('trackbacksdiv','page','normal');
	remove_meta_box('commentsdiv','page','normal');
	remove_meta_box('slugdiv','page','normal');
	remove_meta_box('authordiv','page','normal');
}
add_action('admin_init','remove_meta_boxes');

Remove Favorite Actions

The favorite actions button resides in the WordPress header next to the “Howdy” message. It normally provides quick links to New Post, Drafts, New Page, Upload and perhaps a few plugin-specific options such as “Empty Cache”. Let’s remove the options we don’t require by appending the following code to easy-admin.php:


// remove favorite actions
function remove_favorite_actions($actions) {
	if (!current_user_can('activate_plugins')) {
		unset($actions['edit-comments.php']);
	}
	return $actions;
}
add_filter('favorite_actions', 'remove_favorite_actions');

In this example, we’ve removed the Comments link for everyone except administrators. To remove other items, you need to find the action’s URL in the page source. Locate the element with the ID “favorite-actions” and, within that, an element with the ID “favorite-inside”. The child divs contain links to URLs such as “media-new.php”. To remove that option, simply add unset($actions['media-new.php']); to the function.

Phew. In my next WordPress post, we’ll address the WordPress menu and remove all the dangerous options you want to hide from clients.

286-easier-wordpress-1-thumb

WordPress’s popularity owes much to it’s easy administration panels. Unfortunately, it can still be daunting for non-technical users such as your clients. At best they’ll require a little training, hand-holding and support. At worst, they’ll play around with plugin installation, edit some theme code, then expect you to clear up the mess.

I’ve written a number of “Make WordPress Easier for Clients” articles (see part 1 and part 2). In those examples, code was placed in the theme’s functions.php file. That’s still a viable solution if you have one WordPress installation per client or each is configured differently.

In this article, however, we’ll create a plugin. Plugins have a couple of advantages:

  1. Your code resides in one file which can make maintenance easier.
  2. If you’re running a WordPress network with multiple sites (previously known as WordPress MU), you can activate a single plugin across the network so it’s applied to every site.

WordPress Plugin Basics

Our plugin will be contained in a single PHP file. We’ll name it easy-admin.php and place it in the WordPress plugin folder (wp-content/plugins/). Ideally, the file should be UTF-8 encoded. If your text editor doesn’t permit UTF-8, well, use a better editor! That said, those using English are unlikely to experience issues with ANSI-encoded files.

A PHP tag and header comments are required at the top of the file, e.g.


<?php
/*
Plugin Name: Easy Administration
Plugin URI: http://www.sitepoint.com/wordpress-easy-administration-plugin-1
Description: Simplifies WordPress administration panels.
Version: 1.0
Author: Craig Buckler
Author URI: http://optimalworks.net/
License: GPL2
*/

You can change the header details, but ensure the definition tags remain — WordPress uses them to recognize your plugin.

You can now install your plugin by activating it in the “Plugins” section of the WordPress administration panels. Those with a WordPress network can activate it for all sites in the “Network Admin” section. It won’t do anything yet, but you can now add whichever features you require…

Change the WordPress Login Page Logo

The WordPress logo is lovely but few clients will care what CMS they’re using. It might be more helpful to show their site name. Append the following code to easy-admin.php; it replaces the login page logo with the name and uses a pleasing CSS3-letterpress text:


// login page logo
function custom_login_logo() {
	echo '<style>h1 a, h1 a:hover, h1 a:focus { font-size: 1.4em; font-weight: normal; text-align: center; text-indent: 0; line-height: 1.1em; text-decoration: none; color: #dadada; text-shadow: 0 -1px 1px #666, 0 1px 1px #fff; background-image: none !important; }</style>';
}
add_action('login_head', 'custom_login_logo');

WordPress alternative login page logo

Remove the WordPress Icon From the Administration Panel Header

The WordPress icon is shown next to the site name in the header. There’s nothing wrong with it but some clients will question why there’s a ‘W’ next to their site. To remove it, append the following code to easy-admin.php:


// remove administration page header logo
function remove_admin_logo() {
	echo '<style>img#header-logo { display: none; }</style>';
}
add_action('admin_head', 'remove_admin_logo');

Change the WordPress Administration Panel Footer Text

The footer provides links to WordPress, documentation and feedback. Few clients are likely to find it useful so you can replace it with your own support details. Append the following code to easy-admin.php and change the echo statement to output to a suitable message:


// change administration panel footer
function change_footer_admin() {
	echo 'For support, please call 123456 or email <a href="mailto:support@mysite.net">mailto:support@mysite.net</a>';
}
add_filter('admin_footer_text', 'change_footer_admin');

Remove the WordPress Admin Bar

The dark-gray Admin Bar was introduced in WordPress 3.1. Personally, I don’t find it particularly useful. It can also confuse clients; they may think all visitors can see the bar or use it to access dangerous features such as ‘Appearance’. Fortunately, we can remove it with one line in easy-admin.php:


// remove admin bar
add_filter('show_admin_bar', '__return_false');

That’s enough configuration for today. In my next WordPress post, we’ll add further functions to simplify the dashboard, post and page panels.