Adding custom fields to your WordPress template

Custom Fields are a nice feature in WordPress that allow you to include content that is separate from your main post or page. This is useful if you want to include a different image in your header depending on the post or page ID or if you want to show differant banner ads for individual posts. For this example I’m going to include a custom banner ad above the main content of the post.

Part 1: Adding the Custom Field to the post

The first stage is adding the custom field name  and  value to the post in question. Later you will display that value in the template file using PHP.

  1. Start by opening the post where you wish to include the banner
  2. Edit Post

  3. Scroll down to the Custom Fields area below the main editor
  4. Custom Fields

  5. Enter a custom field name in the name section
  6. Enter the HTML/JavaScript for you banner ad in the value section
  7. <a href=”http://yourdomain.com”><img title=”banner” src=”http://domain.com/images/banner.png” alt=”Spartix” width=”468″ height=”60″ /></a>

    Remember to replace ‘yourdomain.com’ with the URL you want to link to and the image src with the actual  image source!

  8. Click ‘Update’ to save changes

Part 2: Adding the code to your template

To display the Custom Field value you mush add some code to the Single Post template.

  1. Go to Appearance > Editor
  2. On the right hand side of the page open the Single Post template
  3. Single Post Template

  4. Scroll down and position your cursor immediately before where it says <?php the_content(
  5. Include the following code:
  6. <?php $ad = get_post_meta($post->ID, ‘ad_banner’, $single=true); echo $ad;?>

  7. Click ‘Update File’

Navigate to the post where you added the custom field. You be able should see your banner ad directly above your main content.

Banner Ad in Post

For more information please contact us or take a look at our WordPress website packages.

Share and Enjoy:
  • Print
  • email
  • RSS
  • Google Bookmarks
  • Facebook
  • Twitter
  • LinkedIn
  • Technorati
  • Reddit
  • del.icio.us
  • StumbleUpon
  • Digg

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>