In this tutorial we will be creating a section that will allow your user to view and modify their personal and/or account information.

Steps:

1. Grab our user information and store it in some pretty variables
2. Build a form and put the information in the field values
3. Add in $_POST actions for submission
1. Error checking
2. Data Processing & Storing

Step 1:

First we will need to get our current user id and we can do this by calling the get_currentuserinfo() function.

if ( is_user_logged_in() ) : // if logged in
global $current_user;
get_currentuserinfo();

Once we have the information that we need for the user, we will go ahead and grab any custom information that we have setup for our user by calling the get_user_meta() function. The first parameter is the current user’s ID, the second is the name of the user metakey you are referencing and the third is a boolean value to return the value as a string. If you supply false as the value in the third parameter, it will return the value as an array.

Note: For purpose of this example, we will be using two custom fields that we can easily store in the usermeta table. This is extremely useful because WordPress already has the necessary functions built in to handle all of this data in your database, thus allowing you to grow your data storage without having to get dirty in your database (unless you’re in to that sort of thing).

$facebook =  get_user_meta( $current_user->ID, 'facebook', true );
$twitter = get_user_meta( $current_user->ID, 'twitter', true );

Step 2:

What now? We have the information stored in a variable, but now we want our user to be able to change this information. Let’s build a form on our page that will allow our user to update their personal information, password, and any custom user fields we have setup (Twitter, Facebook, etc).

<form action="" method="post">
 <label for="first_name">First Name</label>
 <input id="first_name" type="text" name="first_name" value="<?php echo $current_user->first_name; ?>" />

 <label for="last_name">Last Name</label>
 <input id="last_name" type="text" name="last_name" value="<?php echo $current_user->last_name; ?>" />

 <label for="email">Email</label>
 <input id="email" type="text" name="email" value="<?php echo $current_user->user_email; ?>" />

 <label for="password">Password</label>
 <input id="password" type="text" name="password" value="" />

 <label for="password2">Password Again</label>
 <input id="password2" type="text" name="password2" value="" />

 <label for="twitter">Twitter</label>
 <input id="twitter" type="text" name="twitter" value="<?php echo $twitter; ?>" />

 <label for="facebook">Facebook</label>
 <input id="facebook" type="text" name="facebook" value="<?php echo $facebook; ?>" />

 <button id="submit" name="submit_info" type="submit">Submit</button>
</form>

As you might notice, we are referencing all of the user’s personal information using the $current_user variable that we setup in Step 1.

Step 3:

Now let’s setup the form processing code with some error checking included.

// Setup our POST actions for submitting account details
if( $_POST['submit_info'] )
{

 // Set all variables
 $first_name = $_POST['first_name'];
 $last_name = $_POST['last_name'];
 $email = $_POST['email'];
 $password = $_POST['password'];
 $password2 = $_POST['password2'];
 $twitter = $_POST['twitter'];
 $facebook = $_POST['facebook'];

 // Check that all required fields check out
 // Most likely our JavaScript will do this, but we will setup safe checks in our PHP
 $errors = array();

 if( $first_name == '' or $last_name == '' )
 {
 $errors[] = 'Please fill in a valid first and last name';
 }
 if( $email == '' or ! is_email( $email ) )
 {
 $errors[] = 'Please fill in a valid email address';
 }

if( $current_user->user_email != $email && email_exists( $email ) )

{
 $errors[] = 'The email you supplied is already in use. Please try a different email address';
 }
 if( $password != '' and $password != $password2 )
 {
 $errors[] = 'Please make sure your passwords match';
 $password_update = false;
 }
 else
 {
 $password_update = true;
 }

 // Run actions if there are not any errors
 if( ! $errors )
 {
 // First we will update the user's info
 $data = array(
 'ID' => $current_user->ID,
 'user_email' => $email,
 'first_name' => $first_name,
 'last_name' => $last_name
 );

 // only update the password if it is set
 if( $password_update ){
 $data['user_pass'] = $password;
 }

 wp_update_user( $data );

 // Now add the information on the user in the usermeta table
 update_user_meta( $user_ID, 'twitter', $twitter );
 update_user_meta( $user_ID, 'facebook', $facebook );
 }

}

This should all be rather self-explanatory ha

First, we check to see if there is any $_POST information. This allows us to only run the code when a user has submitted information. Once we determine that we need to be processing this information, we set up a handful of variables that hold the values the user has just submitted.

Because we do not want to be storing invalid information, we run a number of error checking statements. We will store all of the errors into an array so we can notify the user of the issues with their submission. You will notice that we are using two WordPress functions for the email validation: is_email() and email_exists(). The is_email function will verify that it is a valid email address and the email_exists function will check if the email is already registered in your system.

If it checks out that there aren’t errors we begin setting up an array to update the user information in the system. The reason we do this is because the wp_update_user() function requires that an array be passed to it with the information. It is important that you make sure you include the ID value in the array so WordPress knows to update the user instead of inserting a new user.

Once we have the user information updated we will want to update our custom fields. We do this by calling the update_user_meta() function and supplying the new values.

Error Reporting

The last thing that we want to add is calling out any errors to the user. We placed this above the form with the following code.

<!--?php if( ! empty( $errors ) ): ?--></pre>
<div>

</div>
<pre>
<!--?php endif; ?-->

And there we have it! We have successfully setup to allow our user to update their personal information using the core WordPress functions.

Step 1

First you will obviously need to create a metabox if you currently don’t have one. If you don’t have any meta boxes you can read our ultimate guide to meta boxes or on the codex.

Step 2

Secondly, there will be a callback in the add_meta_box function that you will need to locate. In my example, I am going to use an example callback function of media_uploader_box. Now that we have our callback function, lets begin to add some content and data to it.

We begin with a base function:

<?php function media_uploader_box(): global $post; ?>

<?php endif; ?>

Next if you want, you can add some css styling to your function. I will add a background color of #ccc.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<?php endif; ?>

Now it is time to add the necessary jQuery to call the media uploader popup.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<script>
( function( $ ) {

   $(document).ready(

       function()
       {
             $('#upload_image_button').click(
                 function()
                 {
                     tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
                     return false;
                 }
             );
       }
   );

} ) ( jQuery );
</script>

<?php endif; ?>

There are some points to make note of in this example. First, notice that we are attaching the click function to the upload_image_button ID. So when that ID is clicked, it will call this jQuery. Next, if you look at the URL structure being used in the popup we are using the post_id. What this will do is attach the media unique to this post. In our case we wanted to upload images inside of a custom post type and only have those images be registered with those posts.

Note: If you are looking to just add a general media uploader which is not post specific then replace line 15 above with the following:

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

Step 3

Third, we now need to create our html for the meta box and for our button.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<script>
( function( $ ) {

   $(document).ready(

       function()
       {
             $('#upload_image_button').click(
                 function()
                 {
                     tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
                     return false;
                 }
             );
       }
   );

} ) ( jQuery );
</script>

<div class="media-upload">
    <h2>Upload Media</h2>
    <table>
       <tr valign="top">
          <td><input id="upload_image_button" type="button" value="Upload Media"></td>
       </tr>
    </table>
</div>

<?php endif; ?>

All that is going on here is that we are adding a title and table with a button. Simple stuff.

Step 4

The last step in the process is to make sure and include our necessary scripts to make the popup work. We are going to enqueue the given admin scripts from the core.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<script>
( function( $ ) {

   $(document).ready(

       function()
       {
             $('#upload_image_button').click(
                 function()
                 {
                     tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
                     return false;
                 }
             );
       }
   );

} ) ( jQuery );
</script>

<div class="media-upload">
    <h2>Upload Media</h2>
    <table>
       <tr valign="top">
          <td><input id="upload_image_button" type="button" value="Upload Media"></td>
       </tr>
    </table>
</div>

<?php endif; ?>

function admin_scripts()
{
   wp_enqueue_script('media-upload');
   wp_enqueue_script('thickbox');
}

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

add_action('admin_print_scripts', 'admin_scripts');
add_action('admin_print_styles', 'admin_styles');

?>

Thats it! Now if you are like most people and are looking to just quickly copy and paste the above code and expect it to work you might be sorely disappointed. The main point to reiterate is that you must name this function the same as your callback when you are adding the meta box. Again, if you are not sure what this means take a look at the add_meta_box function and how the callback works.

If you have any questions or comments please let me know below.

Feel free to download and use on all your awesome themes and items!

I am going to assume that you have installed the bbPress plugin and you are using the basic settings with installation. I want to discuss more about how the Mojoness team organized and setup our forum. I am not going to attempt to say this is the only way to setup your forum, this is just what we did to get off the ground.

Understanding the basics – The Home Page Shortcodes

Without going into too much detail about the programming structure, I am going to quickly highlight the basics of how the bbPress forum is powered. bbPress currently offers multiple options for displaying your forum. You can use custom page templates or shortcodes to define how your forum will display. For the Mojoness support forums, we decided to use a combination of both. We wanted a custom homepage where we call the shortcodes to show forums and topics. To begin with, we created a custom homepage template which had a right sidebar and displayed the_content() 2/3′s left. Below are the shortcodes we added to the Home page.

[bbp-forum-index]- This shortcode displays an index/archive of all forums.

[bbp-topic-index]- This shortcode displays an index/archive of all topics.

After we added those shortcodes in the editor, we had our Home page all setup.

Note: Click here for more information on available bbPress shortcodes

Custom bbPress Page Template

Now that we have defined our Home page to display an overview of our forums, we used a custom page ( bbpress.php ) template previously mentioned to display everything else. The page template looks very similar to what a general custom page template would look like. Don’t be intimidated by the term “custom” in this context. Below is a look at what we did:

<?php get_header(); ?>

<div class="support-forum-mid clearfix">

<div class="support-left">

	<p class="support-intro">If you have an issue with Eventr our support team is standing by will to answer your questions as soon as humanly possible. Please be patient during busy periods and be aware of any difference in timezone. Unfortanutely we cannot provide support for modifications beyond a few lines of code. Any more and you should enlist the help of a our customization team. Read the full support policy.</p>

	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<?php the_content(); ?>

	<?php endwhile; ?>

	<?php endif; ?>

</div><!-- End of .support-left -->

<div class="support-right">

	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('...') ) : ?>

	<?php endif; ?>

</div> <!-- End of .support-right -->

</div><!-- End of .support-forum-mid -->

<?php get_footer(); ?>

What this custom page is doing is defining how we want the interior of the forum to look. As you can see, we have two floats with support-left and support-right. The class support-left has the loop running within it and displays the content. The class support-right is our forum sidebar.

If you want more detail and control of your file templates, use a more specific file template, which bbPress will look for when processing ( In order of operation ):

• bbpress.php – Similar to your index.php file in a WordPress theme. The default.
• forum.php – Use for forum view.
• page.php – Use for page view.
• single.php – Use for single forum post view.

After going through that process you should have a working forum and if you used the same method described above it should operate just like the Mojoness support forum. We hope this helps explain how we used bbPress to power our support forum and hopefully the experience can be quicker for you than it was for us.

Note: For more information on how to use bbPress see our bbPress Tutorials

Note: These shortcodes are for bbPress 2.0.

Forum Shortcodes:

• [bbp-forum-index]- Displays an index/archive of all forums. See Example
• [bbp-single-forum id=$forum_id]- Displays topics for a single forum. Replace $forum_id with the forum ID that you want to display. See Example

Topic Shortcodes:

• [bbp-topic-index]- Displays an index/archive of all topics. See Example
• [bbp-topic-form]- Displays a Create New Topic form. See Example
• [bbp-single-topic id=$topic_id]- Displays posts for a single topic. Replace $topic_id with the post ID that you want to display. See Example

Topic Tags:

• [bbp-topic-tags]- Displays a tag cloud of all topic tags. See Example
• [bbp-single-topic-tag]- Displays specific topics within a given single tag.

Topic Reply Form:

• [bbp-reply-form]- Displays a topic reply form. Note: To work correctly this needs to displayed on a specific top id. See Example

Single Topic View:

• [bbp-single-view]- Displays topics associated with a specific view.

Account:

• [bbp-login]- Displays the login screen. Note: Only required if users have to register to access forums. See Example
• [bbp-register]- Displays site registration form. Note: Only needed if users have to register to access forums. Submit button needs to be added manually. See Example
• [bbp-lost-pass]- Displays fields to retrieve lost password. Note: Only required if user have to register to access forums. See Example

This directory is a collection gathered from the bbPress.org site. If you have any issues or errors when using them, be sure to take a look at bbPress Support Forum or let us know below.

I’m pretty excited about todays freebie as this minimal social icon set was designed exclusively for WPRoots readers by yours truly. These icons were designed the way I like things, simple and clean. I figure if people really like this icon set, I can roll out more to include with it. Let us know what others you’d like to see.

Feel free to use these as you wish, (personal or commercial) no links back required. Just make sure to spread the love!

Blog Name

You can use the Blog Name parameter to display the name of your blog ( or Website ) anywhere! For example, maybe you want the title tag for your site to just display the name of your website. You would do the following:

<title><?php bloginfo( 'name' ); ?></title>

Note: This is not an SEO recommendation by no means so don’t take it as that. ha You will probably always rank for the name of your website

Website URL

The URL parameter displays the URL of your website. This is very self explanatory, but many times I see themes using absolute URL’s ( http://www.wproots.com ) and not using the relative URL. Below is how you should display your relative URL. This is especially important if you plan on distributing the theme as the URL will continually change.

<?php bloginfo( 'url' ); ?>

Stylesheet Directory

For me, there isn’t another parameter that I use more than the stylesheet_directory parameter. What the stylesheet_directory does is reference the directory where the style.css file is in your theme. Here is an example of calling an image located in your images folder through your HTML.

<img src="<?php bloginfo( ‘stylesheet_directory’ ); ?>/images/myimage.jpg" width="…" height="…" alt="…" />

Note: Don't get confused when you see the term stylesheet in the parameter. All this is doing is referencing the directory or folder where the style.css file is located in the theme.

Template Directory

Template_Directory is a lot like the stylesheet_directory parameter except the usages are a bit different. The template_directory refers to the directory the theme templates are located in. From my experience, most basic WordPress themes do not use this parameter as it is not necessary to handle that basics of theme development. The template_directory parameter becomes very functional when building more advanced themes or applications. An example of this would be if you are using an MVC type structure or more complex theme options panels and you need to reference files deeper within the theme directory.

<?php bloginfo( 'template_directory' ); ?>/classes/myclass.php ?>

Again, I would highly recommend using these built in WordPress functions when developing themes and plugins. Let me know your thoughts and how you find them most useful!

Solution: Welcome to the WordPress plugin Restrict Content from our WP Roots contributor Pippin Williamson. This plugin is gives you, the admin of any WordPress site, the abilities to set permissions for what any and all users can see.

How it Works:

After you download the plugin you will notice the “Restrict Content” link under the Settings tab. Click on that you can adjust the general settings for how your content will be viewed. You can set the notification that users will see if they are restricted from the content as well as set individual user level permissions. Very cool.

Now that you have set the general settings you can go to your posts or pages and select which content you would like to restrict. For this spotlight, I have input some text into the general Hello World post. Take a look below.

If you have done this go ahead and take a look at your site now and you should see the following when logged in and when your not logged in.

This a very simple example that shows that power of using the provided [restrict]…[/restrict] shortcode. In addition to the shortcode, there are some very easy options to designate an entire page or post. I would highly recommend using this Restrict Content plugin next time you need to add level of security to your content.

Note: Take a look at some of Pippin’s great tutorials on WP Roots:

• How to Style WordPress Menus
• WordPress Post Formats to their fullest
• Advanced WordPress Widgets

The concept is rather basic, you will create pages or posts (really it can be just about any type of content) and check to see if the user is logged in or not. If the user is logged in display X, and if they are not logged in display X. For this example, we are going to create an account center that only people logged in can view. Here we go:

Step 1: Setup a custom page template

Create a custom page template. (If you are unsure how to do this you can read my previous post on how to create custom page templates) Name your custom page template “Account Center” like below and add the basic functions to call your header and footer as any page template would have.

<?php
/*
Template Name: Account Center
*/
?>

<?php get_header(); ?>

<?php get_footer('account'); ?>

Note: Notice how I use get_footer() with the parameter of account. That is because I want to call a different footer for my account center pages. You could use just get_footer() and it would get the normal site footer which would be just fine.
For example purposes, lets assume you have a newsletter form or some social media buttons on your normal footer that you dont want displayed when inside the account center and so you created another footer file that is only for the account center.

Step 2: Check if user is logged in

We are now going to check if a user is logged in, and if they are we will display the account page to them. Here is the code added to our page template we have already setup:

<?php
/*
Template Name: Account Center
*/
?>

<?php if(is_user_logged_in()) : // checks if user is logged in. ?>

<?php get_header(); // if the user is logged in, get header. ?>

... // Your HTML for your page template here.

<?php get_footer('account'); // if the user is logged in, get account center footer ?>

<?php else : // if the user is not logged in. 

  $url = '/wp-login.php'; // sets $url variable to redirect to login form. You can set this to any URL you want.
  header("Location:$url"); // takes user to $url when header is called.

endif; // end if statement.
?>

Note: When defining the variable $url location, you can create your own login page so the user doesn’t have to go to the generic WordPress login page. I recommend this as I feel it looks much more professional and keeps your branding throughout the site.

Now go into the backend of WordPress and create a page called Account and select the page template “Account Center”. You should now only view that URL if you are logged in. I will expand on this post next time and show you how to create a custom login page, how to display specific user information within the account center, etc so stay tuned!

If you have any other secrets or insight that you have used we would love to hear them.

Don’t worry, we still love us some WordPress and plan on stepping up the bar with WP Roots to ensure that we bring the best WordPress tutorials on the market.

Checkout more details about Mage Roots here: Magento Tutorials

Let us know your thoughts about working with Magento compared to WordPress.