The profile page is the user’s main page, or home page if you like. It’s where the go by default to see their activity, their friends activity and if you want, where they can go to edit the profile, change their avatar (their user picture), accept friendship requests and so on.
Because WP Symposium Pro is so flexible, you get to choose what appears on their profile page, so we will go through from creating a basic page, to a more complex one.
The quickest way to create your profile pages is to go to WPS Pro>Setup and click on the “Add Profile Pages” button. This will create 4 pages:
- Profile page
- Change Avatar page
- Edit Profile page
- Friends page
Having created the 4 pages, you probably want to add them to your WordPress menu, via Appearance->Menus.
So, having done that, you will have 4 new pages, and your users can access them via your site menu.
If your menu doesn’t look like it does via Appearance->Menus, you may need to check that you’ve told your theme which menu to use. On the Apperance->Menus screen, click on the “Manage Locations” tab, and select which menu you want, and where, according to what your theme offers.
You can include the number of friendship requests pending in your menu label by including %f, for example “Friends %f”. If you want to change the style, you can do so with the class “wps_pending_friends_count”.
The Default Profile Page
You can edit your WordPress pages by going to Pages, clicking on All Pages, and from the list of your pages shown, hover over any page and click on Edit.
When you edit a page, just like editing any WordPress page, you can see the content on that page.
When you edit the new Profile Page that was created above, you will see just a single shortcode.
This single shortcode instructs WordPress, and WP Symposium Pro, to display a default profile page. It includes all the basic requirements for your profile page:
- the user’s avatar, with ability to change it
- the user’s “display name” (how their name is shown)
- their town/city & country, and a map (if they have entered one)
- any friendship requests
- the ability to post activity
- all the user’s activity posts, and their friends activity posts
It get’s things up and running straight away, with a profile page that looks something like this:
Because I’m logged in as Joanne, I get to see the “Change Picture” and “Edit Profile” links, otherwise I wouldn’t.
But straight away, I can edit my profile, change my avatar (user picture), and start posting activity.
Not bad for one click of a button!
There are many individual shortcodes in the core plugin, and more in the Extensions plugin, that you can use, combined, to create your own profile page – and if you know HTML and CSS, you can create any layout that you want!
Once the WP Symposium Pro plugin is activated, a new menu item is available in the WordPress admin dashboard, called WPS Pro. As features are added, with the WP Symposium Pro Extensions plugin, further sub menu items will appear.
In addition, global settings can be found on the WPS Pro->Setup page.
So, for the profile page global settings, go to WPS Pro->Setup and scroll down the page to where the black bars are shown. One of them will have “Profile Page” as its title.
To display the options available, click on the dark grey bar and it will extend downwards, turning that section purple. This is the same for all the various settings.
The set of drop down lists is where you would tell WP Symposium Pro which WordPress pages you are using for the profile page, edit profile page and change avatar page.
The first drop-down, Profile Page, is relevant to the profile page and the shortcodes covered in this chapter. The Edit Profile Page dropdown list refers to those shortcodes in the Edit Profile chapter, and the same for the Change Avatar Page.
If you used the quick start “Add Profile Pages” button (at the top of the same screen) then these will be automatically set for you.
If you manually created the WordPress pages, you should set the pages as applicable.
Profile Parameter is used to hide usernames from profile page links on your site, possibly due to security considerations on your site.
Finally, there are some instructions on how to manually create the pages, which will change depending on how far you have progressed.
You can make changes in all of the settings sections, and save them all. But don’t forget to save them! Click on the “Save Changes” button at the bottom of the screen to update with your changes.
Building Your Own Profile Page
I’m not suggesting that you use this layout, in fact there may be some critics, but it’s used to provide an example of what can be done with a little imagination, and very little effort!
The first thing we are going to do is create our basic profile page, and then we will add pending friendships, “make friends” button, and so on.
This is what we are going to create:
The shortcodes we are going to need initially are as follows, so go ahead, edit your WordPress Profile page, and enter the following. When testing, be sure to use a user that has completed the town/ city and country fields via Edit Profile, so you can test properly.
When working with shortcodes, I would (highly) recommend that you use the “Text” view of the editor in WordPress. It will help avoid any typos or odd styling effects! This is particularly true if you are copying and pasting from this site.
[wps-avatar] [wps-display-name] [wps-usermeta meta="wpspro_home"] [wps-usermeta meta="wpspro_country"] [wps-usermeta meta="wpspro_map"] [wps-activity-post] [wps-activity]
Go ahead and save your page and take a look. Don’t be impressed yet, it’s just a vertical “list” of what you’re going to arrange as per the previous image. But hey, pat yourself on the back, you already have your own profile page that works just fine!
But what we need to do is layout things out, and this is where it gets a little technical with HTML and styles, and actually nothing to do with WP Symposium Pro per sae. If you don’t know, or don’t want to know, about such things, you can copy and paste the code below and play around. You might be surprised just how addictive it can become – and how powerful!
First things first, let’s create the pale blue box. We won’t put anything in it just yet, but it’s our place to start.
And if you are experienced using styles (i.e. CSS) before you all email me, yes, you shouldn’t really be mixing styles and HTML, they should be seperate, and that is covered in the Styling WP Symposium Pro chapter, with custom CSS. But for the sake of simplicity, I’m keeping things together for now. Please don’t email!
Back to our code, put this at the top of your WordPress page (now you must use the Text view – it’s very important at this stage!).
<div id="my_profile_header" style="margin-bottom:15px; padding: 6px 6px 6px 12px; border-radius: 3px; background-color:#ccf; overflow: auto;"> </div>
Did I hear you say Yikes (or worse)! If so, it probably looks like a jumbled mess, don’t panic! If not, you may well be familiar with HTML and styling. Either way, good for you, at least you’re following things so far!
For those new to the above, let’s take a step back and explain (others who recognise the above can skip on a few paragraphs).
With web pages <something> tells the browser to do something, and is referred to as a tag. It’s the “language” of the web browser and is called HTML (that’s HyperText Markup Language so you can impress people). In this situation we are using a <div>. Now all good HTML tags open and then close. Start, do something, end. Google likes well built pages, and it’s a good habit to get into for lots of other reasons too. So we also have a </div>. Note the forward slash? That’s what says “this is a closing tag”.
So we have <div>something here</div>.
For the purposes of what we are doing, think of that <div></div> as a box on the screen (the pale blue box in the previous image).
What about all that other stuff? Well, like WordPress shortcodes, HTML tags can also have options – or parameters. The parameters we are adding above are as follows, and what they mean:
margin-bottom: a margin, or white space, after the div
padding: padding, or white space, insde the div
border-radius: makes the corner of the div rounder
background-color: the, erm, background colour
overflow: more techie, makes everything show
Couple of points. First, trust me on the overflow and move on. And second, note that the spelling is American English, so color must be spelt like that, and not, as I would tend to do, spell it colour. Yes, I’m English…
For each of the above we are adding a value, as follows:
margin-bottom: 15 pixels (px)
padding: top, right and bottom 6px, left 12px
border-radius: 3 pixel (px) radius
So, forget overflow. There are some more immediate things to explain. Pixels represent all the little dots on your screen. So margin-bottom basically says, move everything after this <div> down by 15 pixels.
padding is the internal space around the inside of the box, like a frame, and the four values represent top, right, bottom and left in that order. Picture a clock hand going round – in that direction.
border-radius will make the corners round, in this case with a radius of 3 pixels, and subtle corner. Try making it a bigger number and see what happens!
background-color is set to #CCCCFF. What the??? This is a hexadecimal code that represents a colour. Not much clearer eh?! It will be quicker if you take a look at http://www.w3schools.com/tags/ref_colorpicker.asp and pick colours at random. See how the “hexadecimal” value changes? If you find one you like, you can replace #CCCCFF with your own colour.
If there is one thing I want to get across is this … play!! Mess around, you can’t damage anything and you can always start again. Seriously, play!
Right, so on your WordPress page you should have the following (as well as the shortcodes):
<div id="my_profile_header" style="margin-bottom:15px; padding: 6px 6px 6px 12px; border-radius: 3px; background-color:#ccf; overflow: auto;"> </div>
If you refresh your profile page (after saving/updating your WordPress page!) you should see something like this:
It might not seem much, but that thin blue “box” is what you’ve added, and now we can add in the rest of the information.
Let’s do the avatar next, popping it over to the right of the blue box. Put the following in between the first long line (that starts with <div ….) and the second line (the </div>).
<div style="float:right">[wps-avatar size="128"]</div>
So you end up with:
<div id="my_profile_header" style="margin-bottom:15px; padding: 6px 6px 6px 12px; border-radius: 3px; background-color:#ccf; overflow: auto;"> <div style="float:right">[wps-avatar size="128"]</div> </div>
Another div!! Yes, again think of it as a box, and you’ll notice two things.
First, it has a parameter style=”float:right” – what that’s doing is saying align (float) this div (this box) to the right.
And then inside the <div></div> you’ve got a shortcode, it’s the [wps-avatar] shortcode, so remove the other one – you don’t need both. But note that we’re setting it to be 128 x 128 pixels.
Save your page, your blue box should now look like this:
Hey! Pretty awesome! We’re on a roll now, so let get rid of the existing [wps-display-name] and add the following straight after the avatar line from above (just before the </div>).
<div id="my_profile_header" style="margin-bottom:15px; padding: 6px 6px 6px 12px; border-radius: 3px; background-color:#ccf; overflow: auto;"> <div style="float:right">[wps-avatar size="128"]</div> <div style="font-size:3em; letter-spacing:-2px;">[wps-display-name]</div> </div>
Another div (you can see that these are used alot – alot – in laying out a web page). This time we are using the style parameter to set the font size 3em means “3 times bigger that what would normally be shown here”, you could equally say 24px for 24 pixels in size, but the “em” way is a good way for responsiveness, accessibility and so on.
We are also moving all the letters together slightly by 2 pixels, just to make it look a bit cool.
Inside this <div></div> is the [wps-display-name] shortcode, simple as that. Take a look and then also move the [wps-usermeta] shortcodes so that you now have:
<div id="my_profile_header" style="margin-bottom:15px; padding: 6px 6px 6px 12px; border-radius: 3px; background-color:#CCCCFF; overflow: auto;"> <div style="float:right">[wps-avatar size="128"]</div> <div style="font-size:3em; letter-spacing:-2px;">[wps-display-name]</div> [wps-usermeta meta="wpspro_home" label="<strong>Where am I?</strong>"][wps-usermeta meta="wpspro_country" label=", "] </div>
Don’t forget to remove the other [wps-usermeta] shortcodes. The two [wps-usermeta] shortcodes are all on the same line, so that I don’t get a line break half way through.
I’m simple showing the town/city and country using the label shortcode option to set the label. Remember, they don’t show if there is no value, so if there is no country, the comma won’t show.
This is really getting somewhere, you should now have something that looks like this:
So all we have to do is adjust the map as we want it, using the [wpsusermeta] shortcode with the right shortcode options:
<div id="my_profile_header" style="margin-bottom:15px; padding: 6px 6px 6px 12px; border-radius: 3px; background-color:#ccf; overflow: auto;"> <div style="float:right">[wps-avatar size="128"]</div> <div style="font-size:3em; letter-spacing:-2px;">[wps-display-name]</div> [wps-usermeta meta="wpspro_home" label="<strong>Where am I?</strong>"][wps-usermeta label=", " meta="wpspro_country"] </div> [wps-usermeta meta="wpspro_map" size="1000,150" map_ style="static"] [wps-activity-post] [wps-activity]
I added the shortcode above, and also the two shortcodes for activity posts and the activity stream, so the above is our final code for our initial profile page, and you should have a profile page that looks like below.
The map, by the way, is set to a maximum of 1000 pixels, but fits into it’s container on the screen.
Grab yourself a cup of tea, and play around with all the settings above, seeing if you can come up with something. If you’re new to HTML and styles (CSS) start with the simple stuff, like changing the colour or the font size and then progress.
We will now add two more shortcodes to display pending friendship requests, and a button to request to become a friend (or cancel the friendship).
The shortcodes that we need to use are:
What we’re going to do is put them between the blue box and the map, so go ahead and add them as follows, on the same line:
<div id="my_profile_header" style="margin-bottom:15px; padding: 6px 6px 6px 12px; border-radius: 3px; background-color:#ccf; overflow: auto;”> <div style="float:right">[wps-avatar size="128"]</div> <div style="font-size:3em; letter-spacing:-2px;">[wps-display-name]</div> [wps-usermeta meta="wpspro_home" label="<strong>Where am I?</strong>"][wps-usermeta label=", " meta=”wpspro_country”] </div> [wps-friends-add-button][wps-friends-pending] [wps-usermeta meta="wpspro_map" size="1000,150" map_ style="static"] [wps-activity-post] [wps-activity]
The first shortcode, when viewing another members profile page, will display a “Make friends” button, and won’t show on your own profile page.
The second will show all pending friendship requests (if on your profile page), and won’t show if viewing another member’s profile page.
If I log in as a second user (Joe) and visit my first user’s profile page (Joanne), I only see the following because as I’m not friends I’m limited to what I can see.
So I click on the “Make friends” button, the page refreshes and the button now says “Cancel friendship request”. Which I won’t do….
But when I go back as Joanne, I can now see the pending friendship request from Joe, which I can choose to Accept or Reject:
The pending friendship request will also appear on the Friends page, if you’ve set one up on the site.
Finally, if I log back in as Joe, and go to Joanne’s profile page, I see the profile page as we designed with a “Cancel friendship” button.
And that’s it, congratulations, a custom profile page all of your own making!