Shane Strong

WordPress Image Post Options

One of the greatest thing I have learned with WordPress is how to create a custom post or page box. One of my favorite thing to do when creating a WordPress theme is to create a Image Post Option. This can come in real useful if you have a theme that need a image to be the same size every time. For instance on my site you will see that in everyone of my posts there is a image that is the same size. This gives your site a feel or consistency. In order to build this custom option for your site you have to understand a few things. If you are someone that would just like to have this on there site but have no clue about code stop right now. In order to get this to work you have to edit your theme and create styles that control the images. If you are looking to build a theme and would like to add this to your theme you are the kind of person that should continue.

Step One – Adding Code To Your Functions.php File

I am going to try and make this quite simple so that you really don’t have to understand what it does you just have to understand where it goes. Inside your WordPress Theme file you should add the code below to your functions.php file. Make sure that the code is inside of your < ?php ?> code.

$meta_boxes =
  array(
    "image" => array(
      "name" => "image",
      "type" => "text",
      "std" => "",
      "title" => "Image Options",
      "description" => "Upload an image with the add a image button 
      and paste the URL here. Images will be auto resized.")
    );
function meta_boxes() {
  global $post, $meta_boxes;
  echo' <div>';
  foreach($meta_boxes as $meta_box) {
    $meta_box_value = get_post_meta($post->ID, $pre.'_value', true);
    if($meta_box_value == "")
      $meta_box_value = $meta_box['std'];
      echo'<div>
      <p align="center">';		
      echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
      echo'<h2 class="alignleft" style="padding: 0 1.5em 0 .5em;">'.$meta_box['title'].'</h2>';
      echo'</p><span>';
      echo'<input type="text" name="'.$meta_box['name'].'_value" value="'.get_post_meta($post-/>ID, $meta_box['name'].'_value', true).'" size="85%" /><br />';
      echo'<p><label for="'.$meta_box['name'].'_value">'.$meta_box['description'].'</label></p>';
      echo'</span></div>'; 
  }
  echo'</div>';		
}
function create_meta_box() {
  global $theme_name;
  if ( function_exists('add_meta_box') ) {
    //This adds the option to your posts
    add_meta_box( 'new-meta-boxes', 'Image Post Options', 'meta_boxes', 'post', 'normal', 'high' );
    //This adds the option to your pages
    add_meta_box( 'new-meta-boxes', 'Image Page Options', 'meta_boxes', 'page', 'normal', 'high' );
  }
}
//This saves your data when entered
function save_postdata( $post_id ) {
  global $post, $meta_boxes;
  foreach($meta_boxes as $meta_box) {
  // Verify
  if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) {
    return $post_id;
  }
  if ( 'page' == $_POST['post_type'] ) {
    if ( !current_user_can( 'edit_page', $post_id ))
      return $post_id;
    } else {
    if ( !current_user_can( 'edit_post', $post_id ))
      return $post_id;
    }
    $data = $_POST[$meta_box['name'].'_value'];
    if(get_post_meta($post_id, $meta_box['name'].'_value') == "")
      add_post_meta($post_id, $meta_box['name'].'_value', $data, true);
    elseif($data != get_post_meta($post_id, $pre.'_value', true))
      update_post_meta($post_id, $meta_box['name'].'_value', $data);
    elseif($data == "")
      delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));
  }
}
//This adds your meta boxes so you can use them
add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');

Step Two – Adding The Image To Your Theme

This is where the fun part comes in to play. With this part you need to decide if you are going to have the image pulled in with a auto size and maybe a resizing function like timthumb. Timthumb is a great function because it resizes your image and crunches it down to a more web useful size. For instance most people don’t know that image are most of the time to big to have on a website. You must re-save a image so that it is web quality. What that means is so that it isn’t so big that it makes your website slow. I will be showing you how to do this with the timthumb function.

< ?php $values = get_post_custom_values("image_value"); if (isset($values[0])) { ?>
<div class="image">
  <a href="<?php the_permalink(); ?>" rel="bookmark" style="float:left;">    
    //Your Image With Timthumb function
    <img src="<?php bloginfo('template_url'); ?/>/scripts/timthumb.php?src=
      < ?=$values[0];?>&amp;w=283&amp;h=120&amp;zc=1" alt="< ? the_title(); ?>" 
    />
  </a>
</div>
< ?php } ?>

This code can be recreated to your needs. In order to set the size of your image you will see w=283 and h=120 that is your height and width. Now if you were to not want to use the Timthumb function all you would need inside the image field is src=”< ?=$values[0];?> alt=”< ?the_title(); ?>“. With that finished let go to the next step to get Timthumb working correctly.

Step Three – Finishing Timthumb

In order to finish Timthumb you need to setup your folders inside of your theme you will need to create a folder called scripts. Inside of there you will need to create a folder called cache. You will also have to download the Timthumb file here Timthumb (118). Add this file to your scripts folder. You will need to make sure that your folder permissions are 755. After you have finished this you will be done. Again the code to get the image can be placed where ever you would like it.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Popularity: 8% [?]