Custom edit profile admin page

Try my tutorial approach: WordPress: Custom Profile Page

Not because it completely answers your question but because it gives more guidance on what actually occurs with custom fields and user data. Once you understand that you can take that to the next step – the administration side.

Now, there are quite a few ways to customize the wordpress administration page for profiles, and there are dozens of tutorials out there on the web. A simple one to follow, though not the most complete, is by Justin Tadlock

A bit more searching will find you even more.

Just remember that you can’t effectively customize something unless you first understand how it works in it’s original state. If nothing else, think about what could happen if you break something…will you know how to fix it?

I appriciate Your response, I took a look at Your tutorial and if I understood correctly You created page template which enables users to change their profile information in the front-end (correct me if im wrong). I have done this already on another site of mine I worked on a few months ago.
Justin Tadlock’s tutorial I read already and I agree that he’s method may help but it is not complete.

The problem is:
– Users are using adminstration (which I arranged using ozh’ admin menu, members and my own admin plugin) to post different data on site, they need to be able change their profile info inside administration.
– Users profile page needs to show only relevant information (company, address, phone number, etc…), without any default wordpress options and fields.
– Users need to be able to upload 2 images inside their profile admin panel: Their company logo and a bit larger visualization image that will be used as banner

I oversleped my problem and in the meantime I came with a solution which I am currently working on right now…

I will create extra profile fields using Justin Tadlock’s methods and unset unnecesary contact info from profile (AIM, Jabber,…). I will write a plugin to create another administration menu item called ‘My info’ which will hold a form to display and change only profile info I want. I will then ‘hide’ the wordpress profile page (using members plugin and a bit of a code in functions.php) and allow users to change their profile info using custom admin page ‘My info’.

The only thing I dont know how to do is to create upload input fields that will allow user to upload image files. Images need to be resized during upload and their info (src, width, height, Title) stored as array in one of extra profile fields…

I will post my work when done so that others in need of custom profile admin page may benefit from it…

Ah. I wasn’t understanding your original question then. Yes, file uploading outside of the typical approach in the administration is one big pain with WordPress and one of the most sought after solutions for developers.

One of the better tutorials I found was Lewayotte.com

I have tested it and played around with it, myself and it does work perfectly fine. However, it does use media_handle_upload. What this really means is that any image you add will be attached to a post of your choosing.

With that said, at this time wordpress has no built-in function to detach media from posts. (as of most current version, 3.1)

But remember wordpress is just a php driven website with a database. Using Mysql queries to the database allows you to do anything you want to the data. To detach an image/attachment from a post simply:

<?php

global $wpdb;
$attachment = $id; //uses id returned by media_handle_upload()

$wpdb->get_results("UPDATE $wpdb->posts SET $wpdb->posts.post_parent = 0 WHERE $wpdb->posts.ID = $attachment");

?>

If you look at what happens when something is attached to a post/page in the database it really adds a new row to wp_posts like it would for any new post. All the above does is remove reset what post it is to be attached to, in this case none.

Now you can use the $id to access the files uploaded in the folders like any other attachment you would add to a post or page. So, in your case, you would simply add the image $id to your custom meta array to store and retrieve.

Hope that helps you better.

Er..forgot to mention you can simplify the query if you really want to, as the above simply resets the post_parent field:

DELETE from $wpdb->posts WHERE id = $attachment

Again, thanks for takin Your time to respond.
So, I have managed to finish my custom profile page ?? I even resolved multiple image upload using wordpress media uploader (important because image is automatically croped to different image sizes I defined).
Uploaded images are stored as attachment ID in extra profile field. For displaying data on page I can simply use get_userdata().

As for image uploader, You may check out this solution: Image uploader.

Anyway, I will post the completed plugin in a few days. I need some time because it is extremely customized for my needs (not in english)…

So for everyone in a need for custom profile page (back-end), coming soon ??

I look forward to seeing what you have.

Be very careful about using the wordpress image uploader on it’s own for any front-end stuff. You limit any file checking you will need to do to prevent malicious files from being uploaded. You are also loading the flash version which not everyone supports, especially if they are using some mobile phones to add pictures from.

Try this approach, courtesy of lewayotte.com

<p id="async-upload-wrap">
<label for="async-upload">Upload</label>
<input type="file" id="async-upload" name="async-upload"> <input type="submit" value="Upload" name="html-upload">
</p>  

<p>
<input type="hidden" name="post_id" id="post_id" value="1199" />
<?php wp_nonce_field('client-file-upload'); ?>
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
</p>

For the basic form above you simply run your check on the file as extensively as you need :
if ( isset( $_POST['html-upload'] ) && !emptyempty( $_FILES ) )

and load in the wordpress core administration file
require_once(ABSPATH . 'wp-admin/includes/admin.php');

then the meat of the upload:

$id = media_handle_upload('async-upload', 1199); //post id of Client Files page
    unset($_FILES);
    if ( is_wp_error($id) ) {
        $errors['upload_error'] = $id;
        $id = false;
    }

Now, because it uses a post to place the image in to all you need do is simply add an additional function, as mentioned above, to reset the attachment to ‘NULL’

This approach allows you to upload images with a more refined control that is typical with PHP file uploads while still utilizing the built in WP image resizing and folder structure.

Remember that it is using a more PHP approach then WP specific so adding multiple file selects, etc, is just a matter of setting up your foreach() and error arrays.

I’ve just run a test and set the above post to 0. This seems to leave the file unattached, which is what you want.

if ( isset( $_POST['html-upload'] ) && !empty( $_FILES ) ) {
    require_once(ABSPATH . 'wp-admin/includes/admin.php');
    $id = media_handle_upload('async-upload',0); //post id of Client Files page
    unset($_FILES);
    if ( is_wp_error($id) ) {
        $errors['upload_error'] = $id;
        $id = false;
    }
}

Alright, mate

I’ve created an additional function to my original tutorial. I’ll be creating a part 2 to that in the next few days, as time permits me.

The nutshell –

1. eregi() check to ensure it is an image file
2. using update_user_meta() to insert an attachment
3. wp_delete_attachment() to delete an attachment
4. wp_get_attachment_image() to display the image

I’ve also tested a solution that doesn’t require attaching to a post when uploading, so there is no need to reset anything in the database.

I’ll post the tutorial as soon as it’s done. It will solve your original question(s) and won’t take much to modify it specifically to your needs.

Dear sir, I admire Your persistance, there are only few people willing to help others in their own time.
Time is currently something I lack, since I have to meet deadlines for 2 of my projects :(. I will try and post my solution during weekend.

In my plugin, file upload is done in the back-end, the whole plugin I wrote is for members that already use back-end so I dont have issues with malicius files. Iit uses wordpress profile system for purpose of easily manipulating data while displaying them on front-end using predefined functions such as get_userdata();…

Will post soon…

Hi asimac,

I’m having the same issue. My users will be companies (councils to be preciss) not people so I want to add some customized fields and hide others unnecessary like contact information.

First I’ve to say I’m very interested on that wonderfull plug-in you’re writting on ?? (I’ll be pleased to help you if you want, I can’t understand there’s no plugin for this)

Apart from that I’m using the same Justin Tadlock’s methods to add custom profile fields. But how I’ve to do to hide the unnecessary fields on administration panel?

Regards

At least a partial answer, to hide unnecessary contact information add this in your functions.php or plugin

add_filter('user_contactmethods','my_new_contactmethods',10,1);
function my_new_contactmethods( $contactmethods ) {
  unset($contactmethods['aim']);
  unset($contactmethods['jabber']);
  unset($contactmethods['yim']);

  return $contactmethods;
}

Thanks all of you for this info. I was looking into something similar to this and all your information helped!

This is the working code. I have been so busy, I haven’t had time to translate it yet and make it widely usable… So for now it’s on my language (Croatian), but you all can use it!

Basically, this code creates new menu page in administration called ‘Moji podaci’ (My Data) in which you can manage some data from profile page and some newly added data (Company, address, city, phone, …) You can even add company logo and banner which is stored as attachment and ID is stored as variable.

USAGE:
1. Copy the code and paste it into a file. save the file as .php and upload it to your plugins folder, activate it!
2. Use ‘Members’ plugin to add capabilities to roles, add capabilitie ‘disable_profile’ to role for which you want to hide wordpress default profile.
3. If you need help ak me.. ill be more then willing to answer! When I have time I will make a plugin out of this code…

<?php
/*
Plugin Name: Custom profile
Plugin URI: https://am2studio.hr
Description: Custom profile page
Author: AM2 studio
Version: 1.0
Author URI: https://www.webstranica.com.hr
*/

//PROFIL: mi?emo nepotrebne i dodajemo nove
function add_extra_contactmethod( $contactmethods ) {
    // Add new ones
    $contactmethods['Tvrtka'] = 'Tvrtka';
    $contactmethods['Adresa'] = 'Adresa';
    $contactmethods['Grad'] = 'Grad';
    $contactmethods['Telefon'] = 'Telefon';
	$contactmethods['Fax'] = 'Fax';
	$contactmethods['Zupanija'] = 'Zupanija';
	$contactmethods['Posta'] = 'Posta';
	$contactmethods['Logo'] = 'Logo';
	$contactmethods['Banner'] = 'Banner';

    // remove unwanted
    unset($contactmethods['aim']);
    unset($contactmethods['jabber']);
    unset($contactmethods['yim']);

    return $contactmethods;
}
add_filter('user_contactmethods','add_extra_contactmethod',10,1);

//Media uploader za CustomProfile
function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}

function my_admin_styles() {
wp_enqueue_style('thickbox');
}

if (isset($_GET['page']) && $_GET['page'] == 'moji-podaci') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
add_filter('admin_head','ShowTinyMCE');
function moji_podaci_css() {
  echo '
<style type="text/css">
#editorcontainer {
	width: 500px;
}
#edButtonPreview, #edButtonHTML {
	display: none;
}
</style>';
}
add_action('admin_head', 'moji_podaci_css');
}

//Tiny MCE za O NAMA

function ShowTinyMCE() {
	// conditions here
	wp_enqueue_script( 'common' );
	wp_enqueue_script( 'jquery-color' );
	wp_print_scripts('editor');
	if (function_exists('add_thickbox')) add_thickbox();
	wp_print_scripts('media-upload');
	if (function_exists('wp_tiny_mce')) wp_tiny_mce();
	wp_admin_css();
	wp_enqueue_script('utils');
	do_action("admin_print_styles-post-php");
	do_action('admin_print_styles');
}

//BEGIN

//add plugin page in menu
add_action('admin_menu', 'my_plugin_menu');

function my_plugin_menu() {
	add_menu_page('Moji podaci', 'Moji podaci', 'publish_posts', 'moji-podaci', 'my_plugin_options');
}

//options that will be displayed in plugin page
function my_plugin_options() {
	//prevent certain users to access this page
	if (!current_user_can('publish_posts'))  {
		wp_die( __('You do not have sufficient permissions to access this page.') );
	}

	 $current_user = wp_get_current_user();

	$user_id = $current_user->ID;

	if (isset($_POST['submit'])) {
		$Tvrtka = $_POST["Tvrtka"];
		$Adresa = $_POST["Adresa"];
		$Grad = $_POST["Grad"];
		$Posta = $_POST["Posta"];
		$Zupanija = $_POST["Zupanija"];
		$Telefon = $_POST["Telefon"];
		$Fax = $_POST["Fax"];
		$Email = $_POST["Email"];
		$Web = $_POST["Web"];
		$Onama = $_POST["Onama"];
		$Logo_url = $_POST["Logo"];
		$Banner_url = $_POST["Banner"];
		$Logo_ID = get_attachment_id_from_src($Logo_url);
		if(!empty($Logo_ID)) {
			$Logo_uploaded = true;

		}
		$Banner_ID = get_attachment_id_from_src($Banner_url);
		if(!empty($Banner_ID)) {
			$Banner_uploaded = true;
		}
		//Ako je stisnuta jedna od tipki delete na slikama
		if($_POST["Banner_reset"] == "true") {
			$Banner_uploaded = false;
			$Banner_ID = "";
		}
		if($_POST["Logo_reset"] == "true") {
			$Logo_uploaded = false;
			$Logo_ID = "";
		}

		wp_update_user( array ('ID' => $user_id, 'Tvrtka' => $Tvrtka, 'Adresa' => $Adresa, 'Grad' => $Grad, 'Posta' => $Posta, 'Zupanija' => $Zupanija, 'Telefon' => $Telefon, 'Fax' => $Fax, 'user_email' => $Email, 'user_url' => $Web, 'Logo' => $Logo_ID, 'Banner' => $Banner_ID, 'description' => $Onama) ) ;
	}

	  $user = get_userdata( $user_id );
	  if(!empty($user->Logo)) {
	  	$Logo_uploaded = true;
		$Logo_ID = $user->Logo;
		$Logo_src = wp_get_attachment_image_src( $Logo_ID, 'medium' );
		$Logo_src_full = wp_get_attachment_image_src( $Logo_ID, 'full' );
	  }
	  if(!empty($user->Banner)) {
	  	$Banner_uploaded = true;
		$Banner_ID = $user->Banner;
		$Banner_src = wp_get_attachment_image_src( $Banner_ID, 'medium' );
		$Banner_src_full = wp_get_attachment_image_src( $Banner_ID, 'full' );
	  }

	  ?>
      <div class="wrap" id="moji-podaci">
      <h3>Dobrodo?li!</h3>
	  <table class="form-table">
      <tbody>
	  <form action="" method="POST">

      <tr>
		 <th>Tvrtka: </th><td><input type="text" name="Tvrtka" value="<?php echo $user->Tvrtka; ?>" class="regular-text"></td>
      </tr>
      <tr>
         <th>Adresa: </th><td><input type="text" name="Adresa" value="<?php echo $user->Adresa; ?>" class="regular-text"></td>
      </tr>
      <tr>
         <th>Grad: </th><td><input type="text" name="Grad" value="<?php echo $user->Grad; ?>" class="regular-text"></td>
      </tr>
      <tr>
         <th>Po?tanski broj: </th><td><input type="text" name="Posta" value="<?php echo $user->Posta; ?>" class="regular-text"></td>
      </tr>
      <tr>
         <th>?upanija: </th><td><input type="text" name="Zupanija" value="<?php echo $user->Zupanija; ?>" class="regular-text"></td>
      </tr>
      <tr>
         <th>Telefon: </th><td><input type="text" name="Telefon" value="<?php echo $user->Telefon; ?>" class="regular-text"></td>
      </tr>
      <tr>
         <th>Fax: </th><td><input type="text" name="Fax" value="<?php echo $user->Fax; ?>" class="regular-text"></td>
      </tr>
      <tr>
         <th>E-mail: </th><td><input type="text" name="Email" value="<?php echo $user->user_email; ?>" class="regular-text"></td>
      </tr>
      <tr>
         <th>Web: </th><td><input type="text" name="Web" value="<?php echo $user->user_url; ?>" class="regular-text"></td>
      </tr>
      <tr>
         <th>O nama: </th><td><?php the_editor($user->user_description,'Onama'); ?></td>
      </tr>
      <?php if($Logo_uploaded == true) { 

	  ?>
      <tr valign="top">
	  	<th>Logo: </th><td><img src="<?php echo $Logo_src[0] ?>"><br />Izbri?i sliku: <input type="checkbox" value="true" name="Logo_reset" /></td>
        <input type="hidden" name="Logo" value="<?php echo $Logo_src_full[0] ?>" />
	  </tr>
      <?php } else { ?>
      <tr valign="top">
			<th scope="row">Logo: </th>
			<td><label for="upload_image">
			<input id="upload_image" type="text" size="36" name="Logo" value="<?php echo $user->Logo; ?>" />
			<input id="upload_image_button" type="button" value="Upload Image" />
			<br />Pritisnite gumb Upload Image, odaberite sliku  zatimi pritisnite gumb 'Odaberi sliku'.
			</label></td>
	  </tr>
      <?php } ?>
      <?php if($Banner_uploaded == true) { 

	  ?>
      <tr valign="top">
	  	<th>Banner: </th><td><img src="<?php echo $Banner_src[0] ?>"><br />Izbri?i sliku: <input type="checkbox" value="true" name="Banner_reset" /></td>
        <input type="hidden" name="Banner" value="<?php echo $Banner_src_full[0] ?>" />
	  </tr>
      <?php } else { ?>
      <tr valign="top">
			<th scope="row">Banner: </th>
			<td><label for="upload_image2">
			<input id="upload_image2" type="text" size="36" name="Banner" value="<?php echo $user->Banner; ?>" />
			<input id="upload_image_button2" type="button" value="Upload Image" />
			<br />Pritisnite gumb Upload Image, odaberite sliku  zatimi pritisnite gumb 'Odaberi sliku'.
			</label></td>
	  </tr>
      <?php } ?>
      <tr>
          <th></th><td><input type="submit" name="submit" value="Izmjeni podatke" class="button-primary"/></td>
      </tr>

          </form>
          </tbody>
       </table>
      </div>

		  <?php

}

?>

Hi Asimac & thanks a lot for your code!

Now I’m studying it, despite my crotian it’s a bit limited ;-). I’ll problably use some parts of your code in my app and be sure that I’ll post any significative advance.

Thanks again! Regards from Spain.

It doesn’ really matter that it’s in Croatian. In basics, You create any number of extra fields in wordpress profile and in “Custom profile page” you fill them with any type of input form (text, textarea, radio, checkbox, file,…).

Afterwards you can use them in your theme with standard WP functions:

$author_data = get_userdata( author_ID );
echo $author_data->field

Replace ‘field’ with each extra field name offcourse…

Would like to see Your final work ??