WordPress User Pages (part 3)

-Update- While most of this is out dated as per line numbers and such, you can still get the basic idea on changes that need made.

If you’ve missed them read Part1 and
Part2.

So in part2 we changed the code to the Register Plus plugin to allow for instructions for our defined fields. Today we will change the code in the profiler plugin to take the users data from the defined fields, take that data and put in the middle of other code to look like we are asking flickr and the other services for that single users images (or other data).
With the profiler page, you can add the data most anywhere you want (I’ll show you a beginning point) in the section of code that creates the profile page, I’m not going to say exactly add it here or there, that will be up to you for the look and feel. What I will do is say make sure you add it somewhere in this section, you can then play with it for the look you want. Some of my code may have table, tr and td settings since I’m pasting what I have, but if you have any understanding of tables this shouldn’t faze you.

Profiler.php (located in the profiler plugin directory) again you should be using notepad++.

Around line 421 is the code:

$output = "<h3>Profile</h3>";

Search for that, this is where the profile page begins to be created, if you look at your profile page and at your code you should easily find each section and this way determine where you’d like to add each section. and always make sure you’re adding after a close bracket }, and make backups of the file!

So lets add Twitter first:

If the user hasn’t added a twitter username, we don’t want the title and then blanks to show, so we’re creating an IF statement to check for that, we will then use a script found on the web that grabs twitter for your own username, but instead of adding a user name, we’ll use a variable that is grabbing the users twitter data and putting their name in it’s place.

Twitter Code:
—————————————

$user_twitter = get_usermeta($id,'twitter');

if  ($user_twitter != '')

	{

	        $output .= '<div id="twitter_div">';
                $output .= '<h2 class="twitter-title">Trail Report</h2>';
                $output .= '<ul id="twitter_update_list"></ul></div>';
                $output .= '<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>';
                $output .= '<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/' . $user_twitter . '.json?callback=twitterCallback2&amp;count=10"></script>';

         }

—————————————
You can see where we’re taking the users data and adding it to the script with . $user_twitter .

Next is the YouTube video:

As I said in part2, all the embed code for youtube is the same except for the video code located on the URL after the V, so if the user wants the video http://www.youtube.com/watch?v=EAFv2CN6CAI and they’ve correctly just put the EAFv2CN6CAI in the youtube field, all we need to do, like above is add the code to a default embed code. I’m also checking to see if they have a video inputted, if not they are shown a default video, with a welcome message and some of the things they can do with their profile.

YouTube Code

—————————————

$user_video = get_usermeta($id,'video');

	if  ($user_video != '')

	{

		$output .= '<h2 class="twitter-title"><center>Hiking Video</center></h2>';
                $output .= '<align="right"><object width="300" height="246"><param name="movie" value="http://www.youtube.com/v/' . $user_video . '&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/' . $user_video . '&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" allowfullscreen="true" width="300" height="246"></embed></object>';

		}

	Else

	{

	    $output .= '<h2 class="twitter-title"><center>Welcome to Your Profile Page</center></h2>';
            $output .= '<align="right"><object width="300" height="246"><param name="movie" value="http://www.youtube.com/v/EnKZ1IS7Asc&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/EnKZ1IS7Asc&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" allowfullscreen="true" width="300" height="246"></embed></object>';	

	}

—————————————

You can see that if the video field is not blank we user the users data with . $user_twitter . but if the video field is balnk we are point to one specific video to show.

Now the funky one Flickr:

For Flickr, I liked the photo gallery look of PictoBrowser, by going to the link you will see it allows you to build your own PictoBrowser, this is where I got the code. Again we will replace the userID and setID with one’s that the users has inputted. In the code you will also see the name of the set, but I’ve found that you don’t need to change that and with the builder you can shut it off so it’s never shown. Users may not know what their flickID is since it’s different than their user name, that’s why on the edit profile page we did in part 2 I added a like to a page to help get their ID and also a link to allow searches on their flickr page.

Flickr Code:

—————————————


$user_FlickrID = get_usermeta($id,'FlickrID');

	$user_FlickrSet = get_usermeta($id,'FlickrSet');

	if  ($user_FlickrID != '' AND $user_FlickrSet != '')

	{

		$output .= '<center><object width="500" height="500" align="middle"><param name="FlashVars" VALUE="ids=' . $user_FlickrSet . '&names=Pictured Rock National Park&userName=thebackpackertv&userId=' . $user_FlickrID . '&titles=on&source=sets&titles=on&displayNotes=on&thumbAutoHide=off&imageSize=medium&vAlign=mid&displayZoom=off&vertOffset=0&initialScale=on&bgAlpha=80"></param><param name="PictoBrowser" value="http://www.db798.com/pictobrowser.swf"></param><param name="scale" value="noscale"></param><param name="bgcolor" value="#DDDDDD"></param><embed src="http://www.db798.com/pictobrowser.swf" FlashVars="ids=' . $user_FlickrSet . '&names=Pictured Rock National Park&userName=thebackpackertv&userId=' . $user_FlickrID . '&titles=on&source=sets&titles=on&displayNotes=on&thumbAutoHide=off&imageSize=medium&vAlign=mid&displayZoom=off&vertOffset=0&initialScale=on&bgAlpha=80" loop="false" scale="noscale" bgcolor="#DDDDDD" width="500" height="500" name="PictoBrowser" align="middle"></embed></object></center>';

	}

—————————————

All of these sections need to be added somewhere before line 471 or the code:

echo $output;

One last thing I needed to do Is at the top of the edit your profile page, there was a link to your profile and a link to the list of others, the link to my profile page wasn’t working correctly for me so I changed it.
Under wp-admin directory, look for the file user-edit.php in this file search for:

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

The line underneath that one I changed to :

<h2><?php $is_profile_page? _e('Your Profile and Personal Options') : _e('Edit User'); ?></h2><h3>Go to Your 

<a href="/hikers/?user=<?php echo $profileuser->user_login; ?>">Personal Page</a> Or <a href="/hikers/">   See other Registered Users</a></h3>

you’ll have to change the /hikers/ part but the rest should work.
that should be it, If you have any questions, please ask, I’m sure I ran into what ever problem you’re having while testing and coding this. Yes this code may not be pretty, but I’ve only been coding for about 6 months now, yes i’m a n00bie!

Technorati Tags: , , , , , , ,

     

2 Comments to “WordPress User Pages (part 3)”

  1. Scott 29 July 2008 at 10:02 am #

    I actually understood all that. Thanks

  2. […] Read Part2 and Part3, Finished Product is at Thebackpacker.tv Profile Pages I’ve spent the last couple evenings […]


Leave a Reply