Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Custom fields WordPress


Hi all, I've tried to wrap my head around adding custom fields but can't figure it out. All the tutorials give you the code to use but don't tell you where to put that code. So since I'm in a huge hurry - I'm going to ask here.

I need to add a custom area to a "page" (not a post) that includes an image upload and a textarea. If those fields are not filled in - then a default image and text content will be displayed that I would like to be able to edit in admin as well someplace.

Not sure if this can be done via solely through custom fields or if it has to be done as a plugin - you experts can tell me the best way.

While I can "normally" figure things out sometimes with trial and error - due to my short time constraint as I am leaving town in a couple days and have to get this done first, could you please frame your answers this way:

1. Put "this" in your functions
2. put "that" in the page.php file
3. Put "the other" where ever

Huge appreciation in advance for your help.

Please note that I do need a default image and text content if the fields are not populated. I cannot test plugin after plugin until I find one that offers that feature. That is why I'm posting here - to avoid all that testing and experimenting. So please if you just refer me to a plugin link - let me know if this is a feature of that plugin.

Answers (9)


Sean H answers:

Hi borzoid,

Not sure if this is what you're looking for but I created my own simple plugin which adds a new admin page called "Custom Fields". In there I created a textarea. I'll also dig out the image upload code for you if that's what you need. But here's my plugin anyway.

Copy this code into a file called custom-page.php, and put it into a folder called "custom-page", INSIDE your plugins folder. Then visit the plugins page and activate it.

Plugin Name: Custom Page
Plugin URI:
Description: Custom Page. <a href="admin.php?page=custom-page">Visit page</a>
Version: 1.0
Author URI:

//add plugin page in menu
add_action('admin_menu', 'custom_page_menu');
function custom_page_menu() {
add_menu_page('Custom Page', 'Custom Page', 'publish_posts', 'custom-page', 'custom_page_show');

function custom_page_show() {

$current_user = wp_get_current_user();
$user_id = $current_user->ID;

// update user properties
if (isset($_POST['submit'])) {
update_user_meta( $user_id, 'about_me', ( isset($_POST['about_me']) ? $_POST['about_me'] : '' ) );

$user = get_userdata( $user_id );

<div class="wrap" id="custom-page">

<h2>Custom Page</h2>

<form action="" method="POST">
<table class="form-table">
<td>Text Area Field: </td>
<td><textarea class="text-area" id="about_me" name="about_me"><?php echo $user->about_me; ?></textarea></td>

<input type="submit" name="submit" value="Save Changes" class="button-primary"/>





Let me know if this is what you needed, and I'll code the rest for you.

All the best

Connie Taylor comments:

Thank you for this Sean - I think this will work nicely for creating the default information. Yes I will need the image upload and if possible a text editor please.

So for this could I use any plugin to create my custom fields in the "pages" and then use an if else statement (if plugincustomfields show them - if not show seanscustomfield)? Not sure of the syntax on how that would be called but you get the idea.

I appreciate your help with this.


Arnav Joy answers:

so here is my answer for the meta boxes

now create a js file and named it as custom-js.js , place it in js folder of your theme.

put following code into custom-js.js

jQuery(function(jQuery) {

jQuery('.custom_upload_image_button').click(function() {

formfield = jQuery(this).siblings('.custom_upload_image');

preview = jQuery(this).siblings('.custom_preview_image');

tb_show('', 'media-upload.php?type=image&TB_iframe=true');

window.send_to_editor = function(html) {

imgurl = jQuery('img',html).attr('src');

classes = jQuery('img', html).attr('class');

id = classes.replace(/(.*?)wp-image-/, '');


preview.attr('src', imgurl);

preview.attr('width', "100");

preview.attr('height', "100");



return false;


jQuery('.custom_clear_image_button').click(function() {

var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();


jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);

return false;



now in functions.php place following code:-

wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js');

function add_custom_meta_box() {


'custom_meta_box', // $id

'Custom Fields', // $title

'show_custom_meta_box', // $callback

'page', // $page

'normal', // $context

'high'); // $priority


add_action('add_meta_boxes', 'add_custom_meta_box');

$prefix = 'custom_';
$custom_meta_fields = array(
'label' => 'Image1',
'name' => 'Image1',
'desc' => 'A description for the field.',
'id' => $prefix.'image1',
'type' => 'image'

'label' => 'Description',
'name' => 'desc',
'desc' => 'A description for the field.',
'id' => $prefix.'desc',
'type' => 'textarea'


function show_custom_meta_box() {
global $custom_meta_fields, $post;
// Use nonce for verification
echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />';

// Begin the field table and loop
echo '<table class="form-table">';
foreach ($custom_meta_fields as $field) {
// get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
// begin a table row with
echo '<tr>
<th><label for="'.$field['id'].'">'.$field['label'].'</label></th>
switch($field['type']) {
case 'image':
$image = get_template_directory_uri().'/images/image.png';
echo '<span class="custom_default_image" style="display:none">'.$image.'</span>';
if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; }
echo '<input name="'.$field['id'].'" type="hidden" class="custom_upload_image" value="'.$meta.'" />
<img src="'.$image.'" class="custom_preview_image" alt="" width="100" height="100" /><br />
<input class="custom_upload_image_button button" type="button" value="Choose Image" />
<small> <a href="#" class="custom_clear_image_button">Remove Image</a></small>
<br clear="all" /><span class="description">'.$field['desc'].'';

case 'textarea':
echo '<textarea name="'.$field['id'].'" id="'.$field['id'].'" cols="60" rows="4">'.$meta.'</textarea>
<br /><span class="description">'.$field['desc'].'</span>';
} //end switch
echo '</td></tr>';
} // end foreach
echo '</table>'; // end table


function save_custom_meta($post_id) {
global $custom_meta_fields;

// verify nonce
if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
return $post_id;
// check autosave
return $post_id;
// check permissions
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id))
return $post_id;
} elseif (!current_user_can('edit_post', $post_id)) {
return $post_id;

// loop through fields and save the data
foreach ($custom_meta_fields as $field) {
$old = get_post_meta($post_id, $field['id'], true);
$new = $_POST[$field['id']];
if ($new && $new != $old) {
update_post_meta($post_id, $field['id'], $new);
} elseif ('' == $new && $old) {
delete_post_meta($post_id, $field['id'], $old);
} // end foreach
add_action('save_post', 'save_custom_meta');

now in page.php get the values as ..

$imgID1 = get_post_meta(get_the_ID(),'custom_image1',true);

if(!empty( $imgID1)) {
$imgData1 = get_post($imgID1, ARRAY_A);
$imgSRC = $imgData1['guid'];

$imgSRC = get_bloginfo('template_url').'/images/default.jpg';

$custom_desc = get_post_meta(get_the_ID(),'custom_desc',true);
if(empty( $custom_desc))
$custom_desc = 'Put default message here';


let me know if you have any problem in implementing it.

Connie Taylor comments:

This is brilliant Arnov - thank you. Now I need to make sure I am using the right syntax to call the values.

If I echo $imgSRC - it prints the image url on the page. If i try to wrap it in htm img src tags I either get a double url or no data. I am most likely doing it wrong.

what would be the two strings for calling the

$imgData1 ( assume this wil be the text content)

Other than my lack of knowledge there this is perfect. Best response!!


Arnav Joy comments:

use following

<img src="<?php echo $imgSRC;?>" />

Description : <?php echo $custom_desc; ?>

Arnav Joy comments:

if you still getting two url or no data then can send me the full code how you are doing it or provide me access to site , i will correct that.

Connie Taylor comments:

Brilliant. Thank you so very much. I will keep you in mind for future work.


webGP answers:


try to use this plugin [[LINK href=""]]Advanced Custom Fields[[/LINK]]

if you add custom field with e.g. name "custom" you can get it in your page.php fiel using this code:

$field = get_post_meta(get_the_ID(), 'custom', true);

Connie Taylor comments:

Can I use a default image and content if the fields created by this are not populated? Is this feature built in or something I have to custom code. If custom code I would still need help with that.

webGP comments:

You can add all fields you need using WP panel, then set up what kind of posts (in your case - page) should by support for these fields. After that you can get values in page.php file using code i wrote above.


Anshul Mahajan answers:



Use this link
and rest of the steps I will mention you after being selected and I had used same for on

Thanks and Regards
Anshul Mahajan

EDIT: Yes, you can use this plugin and it will not show the fields if they are not populated.

Code for text field : <?php if(get_post_meta($post->ID,'slug',true)){?><?php echo get_post_meta($post->ID,'slug',true);?><?php }?>

Code for Image : <?php just_custom_images_list($post->ID, 'event_image'); ?>


Jatin Soni answers:

What exactly your issue is? You are not able to see custom fields boxes on the page edit screen or the issue is once you adding data for custom field and those are not visible on template page?

If you are having trouble to see custom field metabox than check your screen option at the top pull down menu on edit screen. If your problem is with getting value of custom field into template page than please give me some access to look into the code.


You can try with
echo get_post_meta($post->ID, 'your_custom_field_value', true);

If you want to use it conditionally for image

<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
<img class="thumb" src="<?php echo get_post_meta($post->ID, 'your_custom_field_value', true) ?>"
<?php } else { ?>
<img your default image path />
<?php } ?>

Connie Taylor comments:

Hi jatin Soni, The issue is that I dont' know where to begin or where to put the code from tutorials in the wordpress files. I have searched and installed a couple of plugins but honestly I am so short on time that learning a plugin, testing and bug fixing is something I'm trying to avoid.

Several plugins have been mentioned here but testing them all to find one that works for me will be time consuming. That is why I posted here.

Jatin Soni comments:

Okay if you are going to use default custom field than use the code I posted in first answer in to your template file.

So if you want to display the text content into your template page than place below code where you want to display text content.

In your page custom field you can add key like my_content

than you can use below code to display data on page

echo get_post_meta($post->ID, 'my_content', true);

You can wrap it with any html markup as per your need and also can assign css class

Jatin Soni comments:

Here is the video tutorial how you can add custom field in your page.

and to display data follow my answer.

If you still have problem give me access so I can do it for you.


She Codes answers:

I have written functions, used different plugins... The best way to do this, IMO, is the plugin called 'Custom Field Suite'. Once you install it, custom boxes are easy to create and define where to be shown. Let me know if you like it, I can help with showing the values in your templates.

She Codes comments:

I have written functions, used different plugins... The best way to do this, IMO, is the plugin called 'Custom Field Suite'. Once you install it, custom boxes are easy to create and define where to be shown. Let me know if you like it, I can help with showing the values in your templates.


Dbranes answers:

If you need to build a form (image+text) to display on your page you can use this plugin:

[[LINK href=""]][[/LINK]]


ipkeivan answers:

Zen Cart, E-Comercio


arahogansalej answers:

Vêtements chinois salut hommes robe chemises hommes costume antique l'habillement des Affaires étrangères vêtements de danse Tai Chi vêtements uniformes de performance Femmes robe accessoires de