May
23
2011

WordPress Tutorial: Custom Profile Page

Creating a WordPress Custom Profile Page

Download the WordPress Custom Profile Page source files

This is part 1. To learn about adding a profile image continue to step 2

Before we begin building a custom profile page for WordPress it is important to note that there are many methods to implement when the profile page is to be displayed. For simplicity in a tutorial I will be implementing the page using a custom WordPress page template file. This template page will be accessed through a simple link we will add to our menu and named 'Edit Profile'. I do not suggest you do this for a live website. I would encourage you to only show the link to a user if they are logged in, not as a public link.

Why a Custom Profile Page?

The simple answer is because we can. However, the actual process is not well documented at all and makes it quite a mystery for many developers. The possibilities of adding custom fields, while still using the built-in tables and fields WordPress comes with are nearly endless. You could create a dating site, job site, or any number of member based sites. It also allows us more control over user information then WordPress has on the initial installation.

The Caveat of This Tutorial

This tutorial uses a folder structure at the root of the theme folder. The files are not being called through the functions.php nor are any functions being called through the WordPress administration. This means that many of the functions, like update_user() must be called within the template file we are creating. It is also the reason that the form is submitting to itself, not to a separate file. This is not to say you couldn’t make a plugin or class file – you can.

This tutorial is built to give example to the possibilities in the simplest way possible. All code is commented for ease of reading and understanding.

The custom profile page we are building:
Wordpress Custom Profile Base

Step 1: The Template File

<?php
/*
Template Name: Custom_Profiler
*/
?>
<?php get_header();?>


<?php get_footer(); ?>

This is the most basic template file you may ever create! At the top of the page you give it a name, then load in get_header() which retrieves the header page, and then the footer using get_footer(). Save this file in your editor as User_Profile.php

Next we need to enter our wordpress administration and create a new page. So, add a new page and give it the name Profile. In the Page Attributes metabox choose Custom_Profiler from the template drowpdown. Save the new page.

Lastly we add the new page in to our navigation somewhere. For ease of this tutorial we will add it to the main navigation by clicking Appearance->Menus and adding our new page to the menu list.

Ok. We are done setting up the the new page from the Administration side of things. Next we start coding the actual custom profile template page.

Step 2: Build the HTML Form

The form is like any HTML form but has a slight exception: It sends it’s information as arrays. We know that the information is going to be used to insert information in to two tables in the database:

wp_user
Wordpress Custom Profile WP_User-Table Fields
and the wp_user_meta
Wordpress Custom Profile WP_User_Meta Fields


And we will be doing so using the update_user_meta() and wp_update_user(), which both accept an array.

So this is what the HTML form will look like so far:

    <ul id="stylized">
	<form class="profileform" method="post" action="" enctype="multipart/form-data">       
		
        <li><label for="first_name">First Name </label><input type="text" name="USER[first_name]" value="" /></li>
		<li><label for="last_name">Last Name </label><input type="text" name="USER[last_name]" value="" /></li>
        <li><label for="user_email">Email </label><input type="text" name="USER[user_email]" value="" /></li>
        <li><label for="user_pass">Password </label><input type="password" name="USER[user_pass]" value="" /></li>
		
        <li><label for="gender">Gender</label>
		<select name="META[gender]">
		  <option  value="Neutral">Neutral</option>
		  <option  value="Male">Male</option>
		  <option  value="Female">Female</option>
		</select><li>
		<li><label for="occupation">Occupation</label><input type="text" name="META[occupation]" value="" /></li>
		<li><label>&nbsp;</label><input type="submit" value="Update Profile" name="submit"/></li>
        
	</form>
    </ul>

We also want to show the current data for all the fields aside from the password field. We do this by retrieving the information from the logged-in user using the wordpress function wp_get_current_user() and the meta information from the new field Profile

	wp_get_current_user();
	$user_id = $current_user->ID;	
	$meta = get_user_meta($user_id, 'profile');
	$meta = $meta[0];

We start by getting all the information about the user with wp_get_current_user() and the most important part $user_id = $current_user->ID which we will use to insert profile data later on. We give it a variable for easy reference, $user_id

Now we can use the $user_id to search the wp_user_meta table specifically for information assigned to that ID. We further define what field we want information on which, in this case, is the profile field. We assign that to a usable variable $meta and, because it returns an associative array, get only the information we want : $meta[0]

Lastly we use the objects returned to display current information in the form fields. The final output now looks like this:

<?php
 
	//get current user information
	wp_get_current_user();
	$user_id = $current_user->ID;	
	$meta = get_user_meta($user_id, 'profile');
	$meta = $meta[0];   

?>
	<h4>Welcome, <?php echo $current_user->display_name; ?></h4>	

	<!-- The Web Form with user data filled in if any exists -->
    <ul id="stylized">
	<form class="profileform" method="post" action="" enctype="multipart/form-data">       
		
        <li><label for="first_name">First Name </label><input type="text" name="USER[first_name]" value="<?php if(!empty($current_user->user_firstname)){ echo $current_user->user_firstname;} ?>" /></li>
	<li><label for="last_name">Last Name </label><input type="text" name="USER[last_name]" value="<?php if(!empty($current_user->user_lastname)){ echo $current_user->user_lastname;} ?>" /></li>
        <li><label for="user_email">Email </label><input type="text" name="USER[user_email]" value="<?php if(!empty($current_user->user_email)){ echo $current_user->user_email;} ?>" /></li>
        <li><label for="user_pass">Password </label><input type="password" name="USER[user_pass]" value="" /></li>
		
        <li><label for="gender">Gender</label>
		<select name="META[gender]">
		  <option <?php if($meta['gender']=='Neutral'){echo 'selected';} ?> value="Neutral">Neutral</option>
		  <option <?php if($meta['gender']=='Male'){echo 'selected';} ?> value="Male">Male</option>
		  <option <?php if($meta['gender']=='Female'){echo 'selected';} ?> value="Female">Female</option>
		</select><li>
	<li><label for="occupation">Occupation</label><input type="text" name="META[occupation]" value="<?php  if(!empty($meta['occupation'])){ echo $meta['occupation'];}  ?>" /></li>
	<li><label>&nbsp;</label><input type="submit" value="Update Profile" name="submit"/></li>
        
	</form>
    </ul>
   <!-- WEB FORM END -->

Step 3: If The User Is Logged In

Still on the custom profile template page, we want to make sure that it is only viewable if the user is logged in. We also need to tell the user that if they are not logged in, they need to in order to see the page. On the note of keeping the user informed we will also add a way to let them know if their information has been updated and any errors that may appear. We will be writing the errors to be sent later. We are also going to add a call to the file that will be doing all the processing using require_once().

<?php
/*
Template Name: Custom_Profiler
*/
?>
<?php get_header();?>

<?php
//load the function that updates the data
require_once (TEMPLATEPATH . '/Profile/profile.php');

//check if the user is logged in
if ( is_user_logged_in() ){

	//get current user information
	wp_get_current_user();
	$user_id = $current_user->ID;	
	$meta = get_user_meta($user_id, 'profile');
	$meta = $meta[0];

?>
	<h4>Welcome, <?php echo $current_user->display_name; ?></h4>
	<?php if(!empty($_GET['update'])){ echo $_GET['update'];}//let the user know if data is updated ?>

	<!-- The Web Form with user data filled in if any exists -->
    <ul id="stylized">
	<form class="profileform" method="post" action="" enctype="multipart/form-data">       
		
        <li><label for="first_name">First Name </label><input type="text" name="USER[first_name]" value="<?php if(!empty($current_user->user_firstname)){ echo $current_user->user_firstname;} ?>" /></li>
	<li><label for="last_name">Last Name </label><input type="text" name="USER[last_name]" value="<?php if(!empty($current_user->user_lastname)){ echo $current_user->user_lastname;} ?>" /></li>
        <li><label for="user_email">Email </label><input type="text" name="USER[user_email]" value="<?php if(!empty($current_user->user_email)){ echo $current_user->user_email;} ?>" /></li>
        <li><label for="user_pass">Password </label><input type="password" name="USER[user_pass]" value="" /></li>
		
        <li><label for="gender">Gender</label>
		<select name="META[gender]">
		  <option <?php if($meta['gender']=='Neutral'){echo 'selected';} ?> value="Neutral">Neutral</option>
		  <option <?php if($meta['gender']=='Male'){echo 'selected';} ?> value="Male">Male</option>
		  <option <?php if($meta['gender']=='Female'){echo 'selected';} ?> value="Female">Female</option>
		</select><li>
	<li><label for="occupation">Occupation</label><input type="text" name="META[occupation]" value="<?php  if(!empty($meta['occupation'])){ echo $meta['occupation'];}  ?>" /></li>
	<li><label>&nbsp;</label><input type="submit" value="Update Profile" name="submit"/></li>
        
	</form>
    </ul>
   <!-- WEB FORM END -->
<?php 
} //end if user logged in

//Else user is not logged in
else { 

 //we give a message telling the user the 'WHY' and the 'HOW'
  echo '<h4>You must be logged in to view this page. </h4>';
  ?>
  <a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>

<?php } //end else ?>
<?php get_footer(); ?>

Step 4: Template Page Final Touches

As we are submitting the form to itself we add a check to see if the submit button was clicked, as well as instructions on what to do if it has been.

	//check if the submit button was pressed
	if (isset($_POST['submit'])) {
	   //email validation
	   if(is_email($_POST['USER']['user_email'])){
	   //if yes, call to update the data	     
	     update_data($user_id,$redirect);	
		 //if email is invalid, tell the user   
	   }else{$message .= 'Invalid%20Email:%20'.$_POST['USER']['user_email'];wp_redirect( home_url().$redirect.'?update='.$message );}

	 }

Take a look at what is going on here – we check if the button is clicked and then if the email address is a correct format using the email validation provided by WordPress: is_email()

We check the email because every user requires one. It is their key piece of unique identification for WordPress and if it doesn’t exist a lot of errors are going to occur down the road. So the check takes the email form field and verifies it exists, and is in the correct format.

If the check is successful we call the function to update the data from the form and give it two variables to use: $user_id and $redirect. Redirect is simply our way of refreshing the page, as we are not using Ajax to do it for us. We add the lines:

    //enter page to use to redirect
	$redirect = '?page_id=384'; //by id
	//$redirect = 'profile';  //by page slug

We add this right after the is_user_logged_in() check. I added the option to use either the page slug or page ID.

Our Final Template page should now look like this:


<?php
/*
Template Name: Custom_Profiler
*/
?>
<?php get_header();?>

<?php
//load the function that updates the data
require_once (TEMPLATEPATH . '/Profile/profile.php');

//check if the user is logged in
if ( is_user_logged_in() ){
    //enter page to use to redirect
	$redirect = '?page_id=384'; //by id
	//$redirect = 'profile';  //by page slug

 	//get current user information
	wp_get_current_user();
	$user_id = $current_user->ID;	
	$meta = get_user_meta($user_id, 'profile');
	$meta = $meta[0];
    
	//check if the submit button was pressed
	if (isset($_POST['submit'])) {
	   //email validation
	   if(is_email($_POST['USER']['user_email'])){
	   //if yes, call to update the data	     
	     update_data($user_id,$redirect);	
		 //if email is invalid, tell the user   
	   }else{$message .= 'Invalid%20Email:%20'.$_POST['USER']['user_email'];wp_redirect( home_url().$redirect.'?update='.$message );}

	 }

?>
	<h4>Welcome, <?php echo $current_user->display_name; ?></h4>
	<?php if(!empty($_GET['update'])){ echo $_GET['update'];}//let the user know if data is updated ?>

	<!-- The Web Form with user data filled in if any exists -->
    <ul id="stylized">
	<form class="profileform" method="post" action="" enctype="multipart/form-data">       
		
        <li><label for="first_name">First Name </label><input type="text" name="USER[first_name]" value="<?php if(!empty($current_user->user_firstname)){ echo $current_user->user_firstname;} ?>" /></li>
	<li><label for="last_name">Last Name </label><input type="text" name="USER[last_name]" value="<?php if(!empty($current_user->user_lastname)){ echo $current_user->user_lastname;} ?>" /></li>
        <li><label for="user_email">Email </label><input type="text" name="USER[user_email]" value="<?php if(!empty($current_user->user_email)){ echo $current_user->user_email;} ?>" /></li>
        <li><label for="user_pass">Password </label><input type="password" name="USER[user_pass]" value="" /></li>
		
        <li><label for="gender">Gender</label>
		<select name="META[gender]">
		  <option <?php if($meta['gender']=='Neutral'){echo 'selected';} ?> value="Neutral">Neutral</option>
		  <option <?php if($meta['gender']=='Male'){echo 'selected';} ?> value="Male">Male</option>
		  <option <?php if($meta['gender']=='Female'){echo 'selected';} ?> value="Female">Female</option>
		</select><li>
	<li><label for="occupation">Occupation</label><input type="text" name="META[occupation]" value="<?php  if(!empty($meta['occupation'])){ echo $meta['occupation'];}  ?>" /></li>
	<li><label>&nbsp;</label><input type="submit" value="Update Profile" name="submit"/></li>
        
	</form>
    </ul>
   <!-- WEB FORM END -->
<?php 
} //end if user logged in

//Else user is not logged in
else { 

 //we give a message telling the user the 'WHY' and the 'HOW'
  echo '<h4>You must be logged in to view this page. </h4>';
  ?>
  <a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>

<?php } //end else ?>
<?php get_footer(); ?>

Step 5: Updating The Information

We start by gather the information sent by the form. Remember that the data is sent as arrays? You’ll see just how that benefits us as we move along with the funtion:

function update_data($user_id,$redirect){
require_once(ABSPATH . 'wp-admin/includes/admin.php');
$message = '';
//shorten $_POST arrays to clean up code viewing
$USER = $_POST['USER'];
$META = $_POST['META'];
//add the user ID to update to the User Array
$USER['ID'] = $user_id;

We reset the $message to equal nothing. We do this to avoid any carry-over that may occur and is generally just good code practice. The next thing we do is gather the information sent by the form and place it into a variable to, well, shorten it. It isn’t neccessary to do this step but I do it because I find it makes my code easier to read and look generally cleaner.

The next step is pretty important to do:

    //password validation - we don't want an empty value, or
	//a value not to our preference (min/max characters, etc)
	if(!empty($USER['user_pass'])){
	  //ensure the password is atleast 6 characters long
	  if(strlen($USER['user_pass']) < 6){ 
		   $message .= 'Password%20must%20be%206%20characters%20or%20more';			   
	  }
	} 
	  else{ unset($USER['user_pass']);} //we filter out the user_pass key when we update

If you remember, we didn’t actually place the password in the password box on the form. Even if we did it would be unintelligable as it gets converted to an MD5 hash. So we need to check that anything in that field meets our criteria. For this tutorial I kept it simple and just added a check to see if the password is at least 6 characters or more in length. You can add any further check you desire here.

Here’s the interesting part – if the form is sent and there is nothing in the password box, that still gets sent! That means that it is till part of the array that will be updated and, thus, will basically set the user’s password to NOTHING! We fix this by doing a quick safety PHP function: unset(). Again, not absolutely neccessary but I do it for safety.

Now we use an object oriented approach to updating the information into the database(s). We implement a try{…}catch{..}. In my opinion not enough PHP programmers use this. For a couple of extra lines of code you get a much better way to run your code and debug it. You can throw custom exceptions, which is kinda like debugging javascript with alert().

We finish the entire function by redirecting the page…to itself. This is, effectively, done to refresh the page with the new data.

	try{		
		if(empty($message)){
		  //update the USER data to the wp_user table
		  wp_update_user(array_filter($USER));

		  //update our META data
		  update_user_meta($user_id, 'profile', $META, false);
		
		  $message .= 'Update%20Successful'; //success message
		}
		else{ throw new Exception($message);}	
	  }
	catch (Exception $e) {
	    //catch any errors and display them
		$message = 'Caught%20exception:%20'.  $e->getMessage(). "n";
	  }

	//redirect to refresh the page
	wp_redirect( home_url().$redirect.'?update='.$message );

You’ll notice that we check if $message is empty. We do this because, if there are errors with our password, we don’t want to update any data that should not be updated. If it is empty we can go ahead and try updating the data. If anything happens it will throw an error and the error will be caught -> throwing an exception and the message of the error.

We finish all that with a redirect to the form page with the message! You’ll note that the message contains a lot of % and 20 symbols. This is done because the string is being sent through the headers and spaces will be removed by default. PHP has functions that will output HTML such as spaces and special characters but the effort of adding in a couple HTML spaces (using % and 20) was so minimal I saw no point using a full blown PHP function to add the spaces programmatically.

The final function should look like this:

<?php
function update_data($user_id,$redirect){
require_once(ABSPATH . 'wp-admin/includes/admin.php');
$message = '';
//shorten $_POST arrays to clean up code viewing
$USER = $_POST['USER'];
$META = $_POST['META'];
//add the user ID to update to the User Array
$USER['ID'] = $user_id;

    //password validation - we don't want an empty value, or
	//a value not to our preference (min/max characters, etc)
	if(!empty($USER['user_pass'])){
	  //ensure the password is atleast 6 characters long
	  if(strlen($USER['user_pass']) < 6){ 
		   $message .= 'Password%20must%20be%206%20characters%20or%20more';			   
	  }
	} 
	  else{ unset($USER['user_pass']);} //we filter out the user_pass key when we update
	

	try{		
		if(empty($message)){
		  //update the USER data to the wp_user table
		 wp_update_user($USER);
           
		  //update our META data
		 update_user_meta($user_id, 'profile', $META, false);
		             //print_r($USER);
		  $message .= 'Update%20Successful'; //success message
		}
		else{ throw new Exception($message);}	
	  }
	catch (Exception $e) {
	    //catch any errors and display them
		$message = 'Caught%20exception:%20'.  $e->getMessage(). "n";
	  }

	//redirect to refresh the page
	wp_redirect( home_url().$redirect.'?update='.$message );
}
?>

The result:

Wordpress Custom Profile Update Success

That is it! You have finished building your own custom profile page for your users with WordPress! Congratulations! Again, you can Download the source files

This is part 1. To learn about adding a profile image continue to step 2

I hope you enjoyed this tutorial. I welcome any feedback or comments!

Related posts:

About the Author: Neil Davidson

Neil Davidson writes articles and tutorials about web development. He is happily married with three dogs, two cats and an ominous spirit in his home.

28 Comments + Add Comment

  • for some reason is show update successful but is not updating the fields.

    • Have you made the changes to the code with the update? I’ve tested the update on three seperate sites on three seperate servers and it works.

      Can you be more specific?

  • After submitting my form, it shows update successful but is not updating the fields.

    • Thank you for pointing that out. I’ve tested the code and am pretty sure I found out what the problem was. I’ve since updated the tutorial and source files to reflect the changes. If you have any other problems let me know!

  • I’m just coding it all now into my test site, and your instructions make it all seem very understandable, thank you, Where do you save the function – is it part of the template or do you save it in functions.php, or somewhere else?

    • Sorry, found it. Thanks.

  • for some reason is show update successful but is not updating the fields.

  • Yeah the same thing is occurring with my installation. When I change the first name or any other form detail. It does change in the database but doesn’t appear in the field until I manually refresh.

    • The page refresh is done using

      wp_redirect( home_url().$redirect.’?update=’.$message );

      which is located in function update_data()

      and the variable sent to the function is set on the form page using (adjust for your page):

      $redirect = ‘?page_id=384′;

      Basically the form is sent to the php file and, once all the processing is done, it loads the $redirect page.

      If you have changed the form fields you have to change the user_data and meta_data the fetches the information as well.

      ie:

      $current_user->user_lastname

      or

      $meta['occupation']

      • How would we update $meta['occupation'] within your tutorial code? I tried adding update_data($meta, $redirect); right below update_data($user_id,$redirect); in your php code that checks if the submit button is pressed but am still experiencing the same issues as Zach

        • I believe you are looking at it a bit too specifically. update_data($user_id,$redirect) is the function call. It requires the user id variable and the redirect variable, both used within the function.

          Right below the check we make to see if the user is logged in is the variable for redirect. That is what is changed to determine what page is going to be loaded after form submission.

          To change a meta you would use update_user_meta(), a built in wordpress function (http://codex.wordpress.org/Function_Reference/update_user_meta)

          So in your case you would simply use

          update_user_meta( $user_id, ‘occupation’, ‘new value’)

  • Great work, but I can’t get it working for me.. I got some custom registration fields that I made, they are all displaying correctly because I see the correct values inside, but when I click “update” the page reloads and nothing changes, not even in the database.

    Can you help me?
    Are you available for job hiring?

    Eventually I’ll provide further details

    • It’s honestly hard to see why it isn’t working without more details. One possibility is the use of require_once(ABSPATH . ‘wp-admin/includes/admin.php’); . Different server variations may limit what you can use to get the root directory of the website. One example (two, actually) can be found at css-tricks

      Without the admin.php being accessable none of the wordpress administration functions will work.

  • Trying to get this working on my site – and it is for the most part, but redirect function is failing for some reason.

    When I click ‘Update Profile’ the page refreshes, but the data I change doesn’t show up. It isn’t until I reload the page manually that the data I changed shows up.

    Additionally, none of the update notices are appearing when you click ‘Update Profile’.

    The only error I am getting is this guy:

    [24-Sep-2011 00:36:34] PHP Warning: Cannot modify header information – headers already sent by (output started at /~rootpath/themes/Nova/headerdefault.php:2) in /~rootpath/wp-includes/pluggable.php on line 934

    • Clear the white spaces at the end of your functions.php file.

  • I’m also getting this error:

    PHP Warning: Cannot modify header information – headers already sent by (output started at /~rootpath/themes/Nova/headerdefault.php:2) in /~rootpath/wp-includes/pluggable.php on line 934

    I’ve tried doing everything I could to the whitespace and encoding of functions.php, but nothing works! Any help?

    • Hi Jackson,

      If you followed this tutorial you won’t have any errors at all. In fact, no headers are being redefined at all throughout the entire script. To further help troubleshoot the main functions for working with data is kept in a try{}catch{} block which eliminates that entire page from the problem you are facing based on the error you are recieving. But just in case..change the wp_redirect() to be a javascript variation:
      [php]
      <script type="text/javascript">
      <!–
      var go_to_here = "<?= $phpVar ?>";
      window.location = go_to_here;
      //–>
      </script>
      [/php]

      So let us return to the page with the form on it. When the page loads the first thing that is sent to the browser is the header. This is before anything else is even sent at all from the HTML body and below. This tells us that, from a troubleshooting point of view, that the problem comes directly from how the page is loaded.

      Now, to further understand how WordPress works know that the header loads functions.php and plugins before ever displaying anything to the user unless explicitly told to load otherwise via custom action filters.

      Cool stuff. Now we know where to start looking for the problem. Since the most common is white space in the functions.php it’s a good place to start. If all looks good and correct there we then move on to plugins. We start by disabling all of them and see if the problem persists. If it does we can eliminate plugins from the problem.

      I know the code, on it’s own, works from this tutorial. If the code is understood and I’ve explained it well then anyone can make changes and customize it to fit their needs without issue. It is when the code is not understood that people will run in to problems. It’s a somewhat advanced tutorial.

      So many ways to troubleshoot. You can google “WordPress Headers not sent” and get pages of possible solutions and troubleshooting techniques. Help I was able to help a bit.

  • To solve this “headers already sent” error you should add this bit of code to your functions.php
    [php]
    //allow redirection, even if my theme starts to send output to the browser
    add_action(‘init’, ‘do_output_buffer’);
    function do_output_buffer() {
    ob_start();
    }

    as explained here:
    http://stackoverflow.com/questions/7381661/cannot-modify-header-information-headers-already-sent-by-wordpress-issue
    [/php]

  • Thank you so much for this tutorial. I have done basic blogging on wordpress and have been struggling to find actual php code tutorials for this. It has really helped me alot in taking the next step in building wordpress websites. Much appreciation!

  • Hi there,
    I’m curious if you’ve updated the above code to work with the latest version of WordPress as of Sept 2012.

    Thank you!

    • I haven’t updated it, no. The tutorial is written to showcase what is possible with a little thinking outside the box to get things done with WordPress. The code principles and concept are still applicable to both WordPress and PHP based websites that use a database.

      IF anyone wishes to update it I will gladly replace the tutorial, but I don’t currently have any plans to do so.

  • Fatal error: Call to undefined function update_data() in H:\WEBSITES\myweb\wp-content\themes\twentyeleven\profile.php on line 41

    • Looks like you have a problem. If you are using my code that call is made on line 37 of User_Profile.php. This means you have attempted to adapt it to your own work. Good on you for that!

      If you require me to fix, consult, or look at your code I can be contracted at an hourly rate. Feel free to email me for more details.

  • Hi, I don’t know what i am missing, I down load the full file and up to both the profile.php, profile_image.php and Custom_Profiler Page Template to my theme suffusion’s child theme: suffu-scion and i create a page called Profile and use Custom_Profiler as Attributes i visit the page and have blank page. pls where and how do place the files? thanks

    • Hello Rossi,

      This is a tutorial, not a plugin, so the files aren’t going to work if you place them outside the scope of the tutorial file structure without further changing the paths to admin functions and such within the files.

      This tutorial was made for demonstration purposes on how a custom profile could be built in WordPress. If you require help for custom programming you are welcome to contact my email located on my contact page with details of the project and I can help you at my hourly rate.

  • **sorry, i mean, I download the full file and upload both the profile.php, profile_image.php and Custom_Profiler Page Template to my theme

  • I am trying to impliment this on my CSS web design awards gallery, And everything works fine, But as soon as i try to add social fields it does not save the settings, Ive tried both USER[] and META[]

    any ideas?

    • Not one to recreate the wheel, check out http://davidwalsh.name/add-profile-fields

      I haven’t tested what is returned in the global user information for added social fields, but you should be able to use the $current_user->social_media_field like I did in the tutorial for current_user->user_lastname

      You can always test by using the PHP var_dump() to see what is in the global array so you know what to access. So, something like this would display all available fields you added:

      var_dump(get_user_meta( $user_id ));

      or

      var_dump($meta);

Leave a comment