First we use one line of javascript to detect if the user agent is an iPad.

1

var isiPad = navigator.userAgent.match(/iPad/i) != null;

Then we use jQuery to replace the HTML, where necessary, with our message using the html() function. Exampled below, we’re replacing the HTML if a <div> with an id of AccuWeather, with our message.

1
2
3

if (isiPad == true) {
  $("#AccuWeather").html('Some content not available, your device does not support Flash');
}

Our stance on Adobe Flash, we fully support the new HTML5 and CSS3 standards, and are not fans of Flash. Nor are we fans of Adobe’s new product Edge. We prefer to hand code, it’s usually much lighter and more understandable than code from a WYSIWYG.

First we define a new function, we used remove_admin_menu_items(). In this function we define an array $remove_menu_items that contains the menu items we wish to remove from the admin navigation. The function is designed to step through WordPress’ multidimensional array $menu, getting each $menu item name by use of the PHP function explode(). It then checks if that $menu item name is in our $remove_menu_items array using the PHP function in_array(). If the $menu item name does appear, then that item is removed from the multidimensional array $menu, by use the PHP function unset().

1
2
3
4
5
6
7
8
9
10

function remove_admin_menu_items() {
  $remove_menu_items = array(__('Posts'),__('Links'), __('Comments'));
  global $menu;
  end ($menu);
  while (prev($menu)){
    $item = explode(' ',$menu[key($menu)][0]);
    if(in_array($item[0] != NULL?$item[0]:"" , $remove_menu_items)){
      unset($menu[key($menu)]);}
    }
  }

We then initiate the remove_admin_menu_items() function using the add_action() WordPress function as shown below.

1

add_action('admin_menu', 'remove_admin_menu_items');

Putting it all together yields the following code to be placed in your theme’s functions.php file:

1
2
3
4
5
6
7
8
9
10
11
12

/* Clean up the admin sidebar navigation *************************************************/
function remove_admin_menu_items() {
  $remove_menu_items = array(__('Posts'),__('Links'), __('Comments'));
  global $menu;
  end ($menu);
  while (prev($menu)){
    $item = explode(' ',$menu[key($menu)][0]);
    if(in_array($item[0] != NULL?$item[0]:"" , $remove_menu_items)){
      unset($menu[key($menu)]);}
    }
  }
add_action('admin_menu', 'remove_admin_menu_items');

All you’ll need to change is the array of items to remove in the $remove_menu_items array. In our example we removed: Posts, Links and Comments. Other root level WordPress admin sidebar navigation items available for removal are Media, Pages, Appearance, Plugins, Users, Tools and Settings.

The answer to this one is just so simple it needs nearly no explanation. Simply redefine two varaibles HEADER_IMAGE_WIDTH, and HEADER_IMAGE_HEIGHT. For our purposes we needed 800x182 to fit into the template. Below is the code to be placed in your theme’s functions.php file simply add the image size to suite your needs:

1
2
3

/* Redefine the header image width and height ********************************************/
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 800 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 182 ) );

UPDATE: This also works for the WordPress Twenty Eleven theme.

First define a new function, we used remove_twenty_ten_headers(). We use the unregister_default_headers() WordPress function to un-register as many as we want. In our example we removed them all.

1
2
3
4
5
6
7
8
9
10
11
12

function remove_twenty_ten_headers(){
    unregister_default_headers( array(
        'berries',
        'cherryblossom',
        'concave',
        'fern',
        'forestfloor',
        'inkwell',
        'path' ,
        'sunset')
    );
}

We then initiate the new remove_twenty_ten_headers() function using the add_action() WordPress function as shown below. We make sure to call our function after the theme setup has run to be sure our function is called after register_default_headers() has already added the headers we want to remove.

1

add_action( 'after_setup_theme', 'remove_twenty_ten_headers', 11 );

Putting it all together yields the following code to be placed in your theme’s functions.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* Remove default twenty ten images ***********************************************/
function remove_twenty_ten_headers(){
    unregister_default_headers( array(
        'berries',
        'cherryblossom',
        'concave',
        'fern',
        'forestfloor',
        'inkwell',
        'path' ,
        'sunset')
    );
}
add_action( 'after_setup_theme', 'remove_twenty_ten_headers', 11 );

How simple is that!

What do you need to create your Twenty Ten Child Theme (the basics):

1. Twenty Ten installed in the wp-content/themes/ folder.
2. A folder with your Child’s Theme name in the wp-content/themes/ folder.
3. A style.css CSS file in the folder of your Child’s Theme.

What could be additionally required:

1. A functions.php file in the folder of your Child’s Theme, to modify or add functions.
2. Any additional file(s) you wish to modify from the Parent Theme: header.php, footer.php, etc.

The magic happens in the CSS file of your Child Theme, namely the “Template” declaration line.

1
2
3

/*
Template: twentyten
*/

Adding this “Template” declaration in the CSS file tells WordPress to look for and run the Twenty Ten theme as a parent to this theme. The Child Theme will then get all the functionality of the Parent, but you’ll be able to modify the files without worry of being overwritten when the Parent Theme updates. Putting the “Template” declaration together with some of the common WordPress Theme declarations yeilds the code below.

1
2
3
4
5
6
7
8
9
10

/*
Theme Name: Your New Child Theme Name
Theme URI: http://your_web_site.com/
Description: Custom theme for your_web_site.com.
Author: You
Author URI: http://your_web_site.com/
Version: 0.1.0
Tags: all, the, tags, describing, your, new, theme
Template: twentyten
*/

So what should you do if you have modified a theme and updates to the theme are available? Turn your current theme into a Child Theme. For the sake of clarity, let’s assume you’ve modified the Twenty Ten theme. Follow these steps below (replacing your current theme’s name where we’ve used Twenty Ten):

1. Rename your current “Twenty Ten” theme in the style.css CSS file by modifying the “Theme Name” line.
2. Rename the “twentyten” folder your current theme is in.
3. Download a clean up-to-date copy of the Twenty Ten theme into your wp-content/themes/ folder, don’t activate it.
4. Modify your newly renamed theme’s style.css CSS file by adding the “Template: twentyten” declaration.
5. Remove all the files you did not modify from your new Child Theme’s folder (you can usually tell by file-date-time if your using an ftp client). Leave the original Twenty Ten ones alone from now on!
6. Re-activate your newly created Child Theme.

Now you can happily let the Twenty Ten theme update eternally without loosing your modifications.

First define a new function, we used remove_widget_area(). Inside this function we un-register the desired “stock” Widget Areas we don’t want or need. Twenty Ten comes with the following “stock” Widget Areas: primary-widget-area, secondary-widget-area, first-footer-widget-area, second-footer-widget-area, third-footer-widget-area and fourth-footer-widget-area.

1
2
3
4
5
6
7

function remove_widget_area() {
	unregister_sidebar( 'secondary-widget-area' );
	unregister_sidebar( 'first-footer-widget-area' );
	unregister_sidebar( 'second-footer-widget-area' );
	unregister_sidebar( 'third-footer-widget-area' );
	unregister_sidebar( 'fourth-footer-widget-area' );
}

We then initiate the new remove_widget_area() function using the add_action() WordPress function as shown below.

1

add_action( 'admin_init', 'remove_widget_area');

Putting it all together yields the following code to be placed in your theme’s functions.php file:

1
2
3
4
5
6
7
8
9

/* Remove "extra" Twenty Ten Widget Areas *******************************************************/
function remove_widget_area() {
	unregister_sidebar( 'secondary-widget-area' );
	unregister_sidebar( 'first-footer-widget-area' );
	unregister_sidebar( 'second-footer-widget-area' );
	unregister_sidebar( 'third-footer-widget-area' );
	unregister_sidebar( 'fourth-footer-widget-area' );
}
add_action( 'admin_init', 'remove_widget_area');

It’s just that simple, now it’s your turn!

As we have installed a couple of these on our HostGator reseller account, we can safely say that the process is relatively painless. But it helps to know in advance which steps are relevant to the HostGator environment.

The WordPress multisite installation instructions are as thorough as possible, given the different environments they must account for.

The only step that needs clarification in that procedure is step 2:

Step 2: Setting Wildcard Subdomains

(If this is a Sub-directories Install, skip this step.)
Sub-domain sites work with the use of wildcard subdomains. This is a two-step process:
Apache must be configured to accept wildcards.
Open up the httpd.conf file or the include file containing the VHOST entry for your web account.
Add this line:
ServerAlias *.example.com
In the DNS records on your server, add a wildcard subdomain that points to the main installation. It should look like:
A *.example.com
[...snip...]

For the first step in the “two-step process” described above, HostGator (reseller) seems to be set up to allow wildcard subdomains already (Good thing, too, since we don’t have access to httpd.conf or the VHOST file.)
So on the “step two”…

For this step, you will need to access cPanel.
In the “Domains” section, select “Subdomains”. Here you will want to create a wildcard subdomain (by creating the ‘*’ subdomain.) A properly set up subdomain will look (something) like:

Good luck!

While this is likely grounds for a cybersquatting civil lawsuit, it would end up costing near that amount to retain legal counsel. (I am sure the unscrupulous individuals who perpetrate such “business” are aware of this.)

So the bottom line is this: Do not let your domain name expire!

If you let us purchase your domain, we will automatically renew it for you. If you are hosting through us, we will do what we can to remind you that your domain is expiring.

Stepping through the code, we first get our previously created watermark using the imagecreatefrompng() PHP function, setting it to the variable $watermark for simplicity.

1

$watermark = imagecreatefrompng('../images/watermark.png');

Next we determine the watermark image’s width and height.

1
2

$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);

Since we want our watermark to appear in the bottom right of the original image, we’ll subtract the watermark image’s width and height from the original image’s width and height to determine it’s placement. We also subtract 5 pixels for a padded placement.

1
2

$dest_x = $width - $watermark_width - 5;
$dest_y = $height - $watermark_height - 5;

Lastly we’ll actually apply the watermark image using the imagecopymerge() PHP function.

1

imagecopymerge($im, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);

Putting the watermark code together we get the following:

1
2
3
4
5
6
7
8
9

//Set up Watermark
$watermark = imagecreatefrompng('../images/watermark.png');
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);
$dest_x = $width - $watermark_width - 5;
$dest_y = $height - $watermark_height - 5;
 
//Apply Watermark
imagecopymerge($im, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);

Adding the watermark code to our previous Serve Resized Images with PHP technique code we’ll have the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

include_once("/path/to/include/functions.phtml");
$img1 = "/images/" .  urldecode(stripslashes($_GET[img]));
if(!is_file($img1)) $img1 = "/nophoto.gif";
if(is_image($img1)){
 
  //Send proper image header base on mime type
  $mime=get_mime($img1);
  header("Content-type: ".$mime);
 
  // Set dimensions, quality & variables
  $width = $_GET[w];
  if(!$_GET[a]) {
    //it's a thumbnail request don't preserve aspect
    ($width) ? "" : $width = 100;
    ($width > 150) ? $width = 150 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }else{
    ($width) ? "" : $width = 300;
    ($width > 588) ? $width = 588 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }
 
  // Get orig dimensions
  list($width_orig, $height_orig, $type_orig) = getimagesize($img1);
  $src_x=0;
  $src_y=0;
 
  if(!$_GET[a]){
    //it's a thumbnail request, make it square from the center
    if ($width_orig < $height_orig) {
      $src_y=($height_orig-$width_orig)/2;
      $height_orig=$width_orig;
    }else{
      $src_x=($width_orig-$height_orig)/2;
      $width_orig=$height_orig;
    }
  }else{
    //keep aspect ratio but keeping width set from page
    $height = ($width / $width_orig) * $height_orig;
  }
 
  // Resample
  $image=imagecreatefrom($img1);
  $im = imagecreatetruecolor($width, $height);
  imagecopyresampled($im, $image, 0, 0, $src_x, $src_y, $width, $height, $width_orig, $height_orig);
 
  /*BEGIN WATERMARK CODE**************************************************************/
 
  //Set up Watermark
  $watermark = imagecreatefrompng('../images/watermark.png');
  $watermark_width = imagesx($watermark);
  $watermark_height = imagesy($watermark);
  $dest_x = $width - $watermark_width - 5;
  $dest_y = $height - $watermark_height - 5;
 
  //Apply Watermark
  imagecopymerge($im, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);
 
 /*END WATERMARK CODE****************************************************************/
 
  //Print Image
  image_same_type($img1,$im,$thmb_quality);  
  image_cache_type($img1,$im,$image_path);
 
}

Now we simply call the image in a generic HTML image tag. Be sure to use the alt portion of the image tag so that if the image generation fails text still appears, not to mention this will aid in SEO. Below we are calling an image that has the default 588pixel width/height, keeping the aspect ratio, using an image named “uwcmc.jpg” for our United Way of Cape May County client.

1

<img src="http://camwebdesign.com/layout/thumb.php?a=y&img=uwcmc.jpg" alt="UWCMC" />

First define a new function, we used thmfooter_admin_link(). We return the wp_register() WordPress function, to yield the Admin link. Be sure to set the wp_register() $echo parameter to false, otherwise the Admin link will automatically print. We’ll also set the $before and $after parameters as needed.

1
2
3

function thmfooter_admin_link() {
    return wp_register('| ', '', false);
}

Lastly we register the shortcode, naming it ‘admin-link’, using the add_shortcode() WordPress function as shown below.

1

add_shortcode('admin-link', 'thmfooter_admin_link');

Usage of our new shortcode is accomplished by simply adding [admin-link] in the footer text of the Thematic Options.

Thematic Options

Putting it all together, we have the following code:

1
2
3
4
5

//Add Admin shortcode to the siteinfo footer***************************************************************************
function thmfooter_admin_link() {
    return wp_register('| ', '', false);
}
add_shortcode('admin-link', 'thmfooter_admin_link');

Yep, it’s just that simple.

As it turns out, the switch for most WordPress themes will be trivial:

1. Change the doctype declaration to: <!DOCTYPE html>
2. Remove the (now defunct) profile="..." attribute from the opening <head> tag.
3. Remove the unnecessary <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> tag.
4. Add the <meta charset="utf-8"> tag.

Normally, this would be easily found in the header.php file of your theme. In fact, the default WordPress theme (‘TwentyTen‘ as of WP3) automatically uses the HTML5 doctype declaration.

Thematic, however, uses the traditional “XHTML 1.0 Transitional” doctype that WordPress has used for years. In order to use the HTML5 doctype, you will need to override four standard Thematic functions: thematic_create_doctype, language_attributes, thematic_head_profile and thematic_create_contenttype within your child theme’s functions.php file (you are using a child theme, aren’t you?), thusly:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//replace the standard doctype declaration and html tag opening...
function html5_create_doctype($content) {
 $content = "<!DOCTYPE html>";
 $content .= "\n";
 $content .= "<html";
 return $content;
}
add_filter('thematic_create_doctype', 'html5_create_doctype');
 
//replace the lang attribute in the opening <html> tag...
function html5_language_attributes($content) {
	$content = "lang=\"en\"";
	return $content;
}
add_filter('language_attributes', 'html5_language_attributes');
 
//replace the <head> tag opening to remove the now defunct profile attribute and add the <meta charset="utf-8"> tag...
function html5_head($content) {
 $content = "<head>";
 $content .= "\n";
 $content .= "<meta charset=\"utf-8\">";
 $content .= "\n";
 return $content;
}
add_filter('thematic_head_profile', 'html5_head');
 
//remove the now defunct <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> tag...
function html5_create_charset($content) {
 $content = "";
 return $content;
}
add_filter('thematic_create_contenttype', 'html5_create_charset');

First we register the ability for your theme to use custom menus using the add_theme_support() WordPress function.

1

add_theme_support('menus');

Next we define the custom menus. For this example we’ll create two menus: menu-1 and menu-2, and name them “Main Navigation’ and ‘Footer Navigation’ respectively. We accomplish this in a new function ‘register_site_menus’, using the register_nav_menus() WordPress function.

1
2
3
4
5
6
7
8

function register_site_menus() {
	register_nav_menus(
		array(
			'menu-1' => __( 'Main Navigation' ),
			'menu-2' => __( 'Footer Navigation' )
		)
	);
}

We then initiate the new register_site_menus() function using the add_actions() WordPress function as shown below.

1

add_action( 'init', 'register_site_menus' );

Putting it all together yields the following code to be placed in your theme’s functions.php file:

1
2
3
4
5
6
7
8
9
10
11
12

add_theme_support('menus');
 
function register_site_menus() {
	register_nav_menus(
		array(
			'menu-1' => __( 'Main Navigation' ),
			'menu-2' => __( 'Footer Navigation' )
		)
	);
}
 
add_action( 'init', 'register_site_menus' );

Next we add ‘menu-1′ our ‘Main Navigation’ menu, using the wp_nav_menu() WordPress function where we want that menu to appear in your theme (header, sidebar, etc.). We also chose to not have a container automatically added to our menu for this example below.

1
2
3
4

wp_nav_menu( array( 
	'theme_location' => 'menu-1',
	'container' => ''
) );

We’ll add ‘menu-2′ our ‘Footer Navigation’ menu, using the same function but, we also give the menu a custom CSS id of ‘footer-nav’. You can read all about the parameters of the wp_nav_menu() function yourself rather than bore you with the details here.

1
2
3
4
5

wp_nav_menu( array(
	'theme_location' => 'menu-2',
	'container' => '',
	'menu_id' => 'footer-nav'
) );

1

add_role( $role_name, $display_name, $capabilities );

The example below adds a role of Video Manager with a custom cabability of ‘manage videos’.

1

add_role( 'video_manager, 'Video Manager', array( 'manage_videos' ) );

NOTE: Once you add this code to your functions.php file and view any page on your site to make the role addition, you can and should comment it out so that it doesn’t run on every page view.

Now, how do we use this new role with the new capability you ask? Simply use the WordPress current_user_can() function to check the user’s capability.

1
2
3

if ( current_user_can( 'manage_videos' ) ) {
    // let them manage those videos!
}

This technique can be combined with our WordPress Role Capability Restriction technique to add even more capabilities to your new custom role. Simply create your new role then use it in the get_role() function call detailed in our technique.

1
2
3
4
5

$role = get_role('author');
$role->remove_cap('edit_others_pages');
$role->remove_cap('edit_others_posts');
$role->remove_cap('delete_others_pages');
$role->remove_cap('delete_others_posts');

Pretty simple huh? That’s what I thought when I learned how easily this can be accomplished.

So what’s actually going on with the code? First, we create a variable $role populated with the author’s capabilities. Then we remove the ability of the authors to ‘edit_others_pages’, and other capabilities as desired. This code performs a database change to the role.

NOTE: Once you add this code to your functions.php file and view any page on your site to make the capability changes, you can and should comment it out so that it doesn’t run on every page view.

How do you reverse this you may ask? Simple, use WordPress’ add_cap() function, as if WordPress would let us down.

1
2
3
4
5

$role = get_role('author');
$role->add_cap('edit_others_pages');
$role->add_cap('edit_others_posts');
$role->add_cap('delete_others_pages');
$role->add_cap('delete_others_posts');

This works great when you’ve Created Custom Roles and need to assign capabilities to those new roles.

Below is real-world code we’ve used on a site, and how we left it commented for future reference.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* Begin Editor Restriction  ****************/
 
/* Enable Restriction Below */
//$role = get_role('editor');
//$role->remove_cap('edit_others_pages');
//$role->remove_cap('edit_others_posts');
//$role->remove_cap('delete_others_pages');
//$role->remove_cap('delete_others_posts');
//$role->remove_cap('manage_links');
//$role->remove_cap('moderate_comments');
 
/* Disable Restriction Below */
//$role = get_role('editor');
//$role->add_cap('edit_others_pages');
//$role->add_cap('edit_others_posts');
//$role->add_cap('delete_others_pages');
//$role->add_cap('delete_others_posts');
//$role->add_cap('manage_links');
//$role->add_cap('moderate_comments');
 
/* End Editor Restriction  ***************/

The first line of code calls the functions.phtml include we defined in our PHP Image Manipulation Functions post, change the “/path/to/include/” to your path. The second line $_GETs the image file from the URL we want to manipulate, and assigns it to the $img1 variable. The third line checks if this requested image is a file, otherwise we use a generic “No Photo” image to prevent no image from displaying. The fourth line checks if the requested file is an image and surrounds the remaining code with the if statement.

1
2
3
4
5
6
7
8

include_once("/path/to/include/functions.phtml");
$img1 = "/images/" . urldecode(stripslashes($_GET[img]));
if(!is_file($img1)) $img1 = "/images/nophoto.gif";
if(is_image($img1)){ 
 
   /*** The rest of the Code ***/
 
}

Next part of the code gets the MIME type of the image file and calls the proper image header based on that MIME type.

1
2
3

  //Send proper image header base on mime type
  $mime=get_mime($img1);
  header("Content-type: ".$mime);

With the following code we determine the final image’s width and height. Based on the presence of $_GET[a] variable in the URL used to represent aspect, our code: makes a smaller image with the aspect ratio kept intact, otherwise it makes a thumbnail with equal width and height starting from the image’s center. For thumbnails a width of 100 pixels is default, if we do not specify a width, with a max of 178 pixels. For non-thumbnails (with aspect preserved) a default width of 300 pixels is set with a maximum of 588 pixels. These numbers can be changed, we just set them to work within our site’s layout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  // Set dimensions, quality & variables
  $width = $_GET[w];
  if(!$_GET[a]) {
    //it's a thumbnail request don't preserve aspect
    ($width) ? "" : $width = 100;
    ($width > 178) ? $width = 178 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }else{
    ($width) ? "" : $width = 300;
    ($width > 588) ? $width = 588 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }

We then determine the original image’s width and height.

1
2
3
4

  // Get orig dimensions
  list($width_orig, $height_orig, $type_orig) = getimagesize($img1);
  $src_x=0;
  $src_y=0;

With the following code we determine the final image’s width and height. Our code makes thumbnails with equal with and height from an image’s center, or a smaller image with the aspect ratio kept intact all based on the presence of $_GET[a] variable in the URL.

1
2
3
4
5
6
7
8
9
10
11
12
13

  if(!$_GET[a]){
    //it's a thumbnail request, make it square from the center
    if ($width_orig < $height_orig) {
      $src_y=($height_orig-$width_orig)/2;
      $height_orig=$width_orig;
    }else{
      $src_x=($width_orig-$height_orig)/2;
      $width_orig=$height_orig;
    }
  }else{
    //keep aspect ratio but keeping width set from page
    $height = ($width / $width_orig) * $height_orig;
  }

Finally we re-sample then print the image with PHP.

1
2
3
4
5
6
7
8

  // Resample
  $image=imagecreatefrom($img1);
  $im = imagecreatetruecolor($width, $height);
  imagecopyresampled($im, $image, 0, 0, $src_x, $src_y, $width, $height, $width_orig, $height_orig);
 
  //Print Image
  image_same_type($img1,$im,$thmb_quality);  
  image_cache_type($img1,$im,$image_path);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

include_once("/path/to/include/functions.phtml");
$img1 = "/images/" .  urldecode(stripslashes($_GET[img]));
if(!is_file($img1)) $img1 = "/nophoto.gif";
if(is_image($img1)){
 
  //Send proper image header base on mime type
  $mime=get_mime($img1);
  header("Content-type: ".$mime);
 
  // Set dimensions, quality & variables
  $width = $_GET[w];
  if(!$_GET[a]) {
    //it's a thumbnail request don't preserve aspect
    ($width) ? "" : $width = 100;
    ($width > 150) ? $width = 150 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }else{
    ($width) ? "" : $width = 300;
    ($width > 588) ? $width = 588 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }
 
  // Get orig dimensions
  list($width_orig, $height_orig, $type_orig) = getimagesize($img1);
  $src_x=0;
  $src_y=0;
 
  if(!$_GET[a]){
    //it's a thumbnail request, make it square from the center
    if ($width_orig < $height_orig) {
      $src_y=($height_orig-$width_orig)/2;
      $height_orig=$width_orig;
    }else{
      $src_x=($width_orig-$height_orig)/2;
      $width_orig=$height_orig;
    }
  }else{
    //keep aspect ratio but keeping width set from page
    $height = ($width / $width_orig) * $height_orig;
  }
 
  // Resample
  $image=imagecreatefrom($img1);
  $im = imagecreatetruecolor($width, $height);
  imagecopyresampled($im, $image, 0, 0, $src_x, $src_y, $width, $height, $width_orig, $height_orig);
 
  //Print Image
  image_same_type($img1,$im,$thmb_quality);  
  image_cache_type($img1,$im,$image_path);
 
}

Now we simply call the image in a generic HTML image tag. Be sure to use the alt portion of the image tag so that if the image generation fails text still appears, not to mention this will aid in SEO. Below we are calling an image that has a max 200pixel width/height, keeping the aspect ratio, using an image named "uwcmc.jpg" for our United Way of Cape May County client.

1

<img src="http://camwebdesign.com/layout/thumb.php?w=200&a=y&img=uwcmc.jpg" alt="UWCMC" />

Below we are calling an image without specifying width or aspect ration, again using an image named "uwcmc.jpg".

1

<img src="http://camwebdesign.com/layout/thumb.php?img=uwcmc.jpg" alt="UWCMC" />

This first function allows us to determine if the requested image file is an image is_image().

1
2
3
4
5
6
7

/*Define is_image() ****************************************************************************************************/
function is_image($var1) {
	$t=strtoupper(substr($var1,-3,3));
	$t2=strtoupper(substr($var1,-4,4));
	if($t=="GIF" ||$t=="PNG" ||$t=="JPG" ||$t2=="JPEG") return true;
	return false;
}

This function returns the extension for any file getExtension().

1
2
3
4
5
6
7

/*Define getExtension() ****************************************************************************************************/
function getExtension($file) {
  $pos = strrpos($file, '.');
  if(!$pos) { $photosubmitted = 'Error: Unknown Filetype'; }
  $str = substr($file, $pos, strlen($file));
  return $str;
}

>
The next function allows us to call the proper MIME type, based on image type, in the header of the PHP code get_mime().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/*Define get_mime() ****************************************************************************************************/
function get_mime($var1) {
	$t=strtoupper(substr($var1,-4,4));
	switch($t){
		case ".JPG":
		case ".JPEG":
			return "image/jpeg";
			break;
		case ".GIF":
			return "image/gif";
			break;
		case ".PNG":
			return "image/png";
			break;
		default: return "";
			break;
	}
}

This fourth function allows for the use of the proper PHP image createfromxxx() call based on image type imagecreatefrom().

1
2
3
4
5
6
7
8
9
10
11
12
13

/*Define imagecreatefrom() ****************************************************************************************************/
function imagecreatefrom($file)  {
if(strtoupper(substr($file,-3,3))=="JPG" || strtoupper(substr($file,-4,4))=="JPEG"){		
	$image=imagecreatefromjpeg($file);
}
if(strtoupper(substr($file,-3,3))=="PNG"){		
	$image=imagecreatefrompng($file);
}
if(strtoupper(substr($file,-3,3))=="GIF"){		
	$image=imagecreatefromgif($file);
}
return $image;
}

Lastly this functions will output the image to the browser image_same_type().

1
2
3
4
5
6
7
8
9
10
11
12

/*Define image_same_type() ****************************************************************************************************/
function image_same_type($file,$image,$quality = 100) {
  if(strtoupper(substr($file,-3,3))=="JPG" || strtoupper(substr($file,-4,4))=="JPEG"){		
  	imagejpeg($image,null,$quality);
  }
  if(strtoupper(substr($file,-3,3))=="PNG"){		
  	imagepng($image);
  }
  if(strtoupper(substr($file,-3,3))=="GIF"){		
  	imagegif($image);
  }
}

Here is the reset that we use as our basic CSS building blocks:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

/* ------------------------Begin Reset------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
  line-height: 1.4;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ------------------------End Reset------------------------ */

1. Akismet – SPAM control, this plugin is the ultimate in controlling unwanted spam in your posts and pages.
   

   Akismet checks your comments against the Akismet web service to see if they look like spam or not. You need a WordPress.com API key to use it. You can review the spam it catches under “Comments.” To show off your Akismet stats just put in your template.

   • By Matt Mullenweg | Visit plugin site
2. All in One SEO Pack – Provides full SEO customization for your posts and pages, including title tags, descriptions, meta tags, etc.
   

   Out-of-the-box SEO for your WordPress blog.

   • By Michael Torbert | Visit plugin site
3. Contact Form 7 – The author reports that this is just another contact form plugin, understatement if ever there was one. This provides the easiest form creation and management we’ve ever used on any platform.
   

   Just another contact form plugin. Simple but flexible.

   • By Takayuki Miyoshi | Visit plugin site
4. Custom Field Template – This extends the functionality of the already easy to use WordPress Custom Fields for pages and posts.
   

   This plugin adds the default custom fields on the Write Post/Page.

   • By Hiroaki Miyashita | Visit plugin site
5. Google Analyticator – Allows for easy installation of Google’s Analytics code into your blog, including smart control so you don’t track admin activity etc.
   

   Adds the necessary JavaScript code to enable Google’s Analytics. After enabling this plugin visit the settings page and enter your Google Analytics’ UID and enable logging.

   • By Ronald Heft | Visit plugin site
6. Google XML Sitemaps – Provides easy to maintain and control XML sitemaps for your blog / website, a must have for SEO and search engine ranking.
   

   This plugin will generate a special XML sitemap which will help search engines like Google, Yahoo, Bing and Ask.com to better index your blog.

   • By Arne Brachhold | Visit plugin site
7. Most Popular Posts – This is great for boosting interest in your content, especially what’s popular.
   

   Display a link to the most popular posts on your blog according to the number of comments.

   • By Wes Goodhoofd | Visit plugin site
8. Similar Posts – Provides a configurable list of smartly chosen posts and/or pages to the bottom of your post to generate more interest in your content.
   

   Displays a highly configurable list of related posts. Similarity can be based on any combination of word usage in the content, title, or tags. Don’t be disturbed if it takes a few moments to complete the installation — the plugin is indexing your posts. Instructions and help online. Requires the latest version of the Post-Plugin Library to be installed.

   • By Rob Marsh, SJ | Visit plugin site
9. WordPress Database Backup – Creates backups of your WordPress blog or website, what would you do if your server crashed!?
   

   On-demand backup of your WordPress database.

   • By Austin Matzko | Visit plugin site

You’ll need PHP (PHP: Hypertext Preprocessor) the open source dynamic language the code in our example is written. We won’t elaborate, the internet is full of information reguarding PHP.

You’ll need the GD library, an open source code library for the dynamic creation of images by programmers, typically installed along with PHP. Information on the GD library also abounds on the internet. Check with your host if you are unsure if you have it installed.

A windows font of your choice, for our site we chose a nice font called Agency. Upload a copy of this font onto your server wherever you like, just be sure to change the path/to/the/font to your font’s path in the PHP code.

Determine the colors of your image (in hexidecimal form) for the following: text, background & text-shadow (if wanted). Hexadecimal uses three sets of numbers to represent the Red, Green, and Blue values for a particular color. We chose a blue text, with a white background and a light grey shadow. There are quite a few free color picking programs and websites available, we use ColorPic by iconico.com for all our color needs. It’s freeware and does not include any other unwanted software included in the download package.

Save this PHP code and name the file font.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// Get the text to draw
$text = ($_GET['text']) ? $_GET['text'] : 'oops...missing text' ;  //set default text if missing
 
// Path to the font
$font = '/path/to/the/font/AGENCYR.TTF';
 
// Get display font size
$size = ($_GET['size']) ? $_GET['size'] : 18.5 ;  //set default if empty
 
// Get display width
$width = ($_GET['w']) ? $_GET['w'] : 100 ;  //set default if empty
 
// Get display height
$height = ($_GET['h']) ? $_GET['h'] : 40 ;  //set default if empty
 
// Create the image
$im = imagecreatetruecolor($width, $height);
 
// Choose text color
$color = ($_GET[color]) ? $_GET[color] : "black" ;  //Image color
switch($color) {
  case "black" : $use_color = imagecolorallocate($im, 0, 0, 0); break;
  case "orange" : $use_color = imagecolorallocate($im, 255, 159, 64); break;
  case "blue" : $use_color = imagecolorallocate($im, 53, 50, 111); break;
  case "white" : $use_color = imagecolorallocate($im, 255, 255, 255); break;
}
 
// Get the top offset
$offset = ($_GET['offset']) ? $_GET['offset'] : 30 ;  //set default if empty
 
// Create the image background
$bgcolor = ($_GET['bgcolor'] == 'white') ?	imagecolorallocate($im, 255, 255, 255) : imagecolorallocate($im, 0, 0, 0) ;  //set default if empty
imagefilledrectangle($im, 0, 0, $width, $height, $bgcolor);
 
// Make the background-color transparent
imagecolortransparent($im, $bgcolor);
 
// Add some shadow to the text if requested
if($_GET['shadow']){
  $shadoffset = $offset + 2;
  $shadow = imagecolorallocate($im, 220, 220, 220);
  imagettftext($im, $size, 0, 1, $shadoffset, $shadow, $font, $text);
}
 
// Add the text in the color chosen
imagettftext($im, $size, 0, 0, $offset, $use_color, $font, $text);	
 
// Set the content-type and print the image
header('Content-type: image/gif');
imagegif($im);

Simply call the dynamic font based image in a generic HTML image tag. Be sure to use the alt portion of the image tag so that if the image generation fails text still appears, not to mention this will aid in SEO.

1

<img src="font.php?size=18&amp;w=400&amp;h=34&amp;shadow=y&amp;color=blue&amp;bgcolor=white&amp;text=My+Dynamic+Font+Based+Image" alt="My Dynamic Font Based Image" />

Some Examples:

How do we dynamically use this technique in conjunction with our site’s code? The text for our images come from the <?php the_title(); ?> call from WordPress. Hence, whatever text is set for the page or post title will be displayed in image form. No need to create static text images for our pages and posts.

1

<img src="font.php?size=20&amp;w=500&amp;shadow=y&amp;color=blue&amp;bgcolor=white&amp;text=<?php the_title(); ?>" alt="<?php the_title(); ?>" />

Room for improvement? Why yes there is always improvements that can be made to the code, some or our thoughts include:

• Create an on the fly HEX color conversion based on the $color and $bgcolor variables
• Determine the top offset based on the image height and the font size, allowing all text to align in the center of the image.
• Auto width based on number of text characters. This could be tricky and may require a monospacing (fixed-width) font.

We think lacking at best, so let’s play with some simple php code in the examples below.

1

print "Hello, World!";

Alternatively we could write it this way:

1

echo "Hello, World!";

Both Yield Hello, World!

If you don’t understand the significance of the PHP “Hello World!” example, then you must not know the advantages server-side programming languages provide. The use of HTML to print Hello World! is simple, but having it done dynamically on the fly is quite another thing. Server-side programming has changed the face of how the web works, and PHP has truly fueled the open source revolution.

Now we’ll move on to the question, “What is the difference between the PHP print() and echo() language constructs”?

The answer, not much – BUT – echo is faster than print. Print returns an int value and echo returns no value. Example: $value = print "Hello World"; here $value will be set to 1. So print can be used in complex expression where you can’t use echo.

We can however, use echo is some creative short hand statements, like this one.

1

echo($text == 'hi') ? "Hello World!" : "Goodbye World!" ;

Suppose the variable $text was set to “hi”, this would print Hello World!. If $text was set to anything else then it will print Goodbye World!.