Looking For Something?

Profile Page Template

Purpose

Profile page template including profile extensions, etc., as used on www.wpsymposiumpro.com.

You will need to modify to match your own site, maybe removing items, or changing slugs.

This is an example only.

You can also read a much more in-depth look at the Profile Page, including a step-by-step guide on creating your own.

Remember, if copying and pasting from this website, you should paste into your WordPress editor in “Text” mode, to ensure that formatting is not changed. Check after pasting!

Screenshot

This is what it typically looks like (click the image to “zoom in”). On mobile devices, the content down the side will drop to the bottom.2016-05-21_12-30-11

Theme

This profile page, in particular the CSS, is designed to work with the TwentySixteen theme as supplied with WordPress. In the Custom CSS, for example, sidebars are hidden across the whole site, with a “dummy” sidebar then added in the page content above.

If using with another theme, you will need to consider, in particular, the custom CSS.

Page content

Edit your Profile page and put the following in. Make sure your editor is “Text” and not “Visual”. If you switch between Text and Visual, you may find it gets messed up, particular the apostrophies.

[wps-no-user-check]
<div id="sg_profile_activity_div">
[wps-extended slug="profile-header"]
<div id="sg_social_media_icons">
<div class="sg_social_media_icon">[wps-extended styles="0" slug="twitter"]</div>
<div class="sg_social_media_icon sg_margin">[wps-extended styles="0" slug="youtube"]</div>
<div class="sg_social_media_icon sg_margin">[wps-extended styles="0" slug="facebook"]</div>
</div>
[wps-extended slug="gender" before="<strong>Gender:</strong> " ]
[wps-extended slug="wp-symposium-website" before="<strong>Website:</strong> "]
[wps-extended slug="information" before="<strong>More Information:</strong> "]
[wps-activity-post]
[wps-activity]
[wps-user-exists-content]<em>You can choose whether to receive email notifications of new activity posts/replies on your <a style="font-style: inherit; color: #0093d0;" href="http://www.wpsymposiumpro.com/edit-profile/">edit profile</a> page.</em>[/wps-user-exists-content]</div>
<div id="sg_profile_activity_sidebar_div">[wps-usermeta meta="wpspro_map" size="100%,252" style="dynamic" zoom="6"]<div style="margin-bottom:20px">Last logged in [wps-last-logged-in], and last active [wps-last-active].</div>
[wps-friends-add-button class="wps_button_2" before="<h4 style='margin-top: -20px;'>Make Friends</h4>"][wps-mail-to-user class="wps_button_2" label="Send a Message" before="<h4 style='margin-top: 5px;'>Private Message</h4>"][wps-friends-pending before="<h4 style='margin-top: -20px;'>Friendship Requests</h4>"]
<h4 style="margin-top: 20px;">Friends</h4>
[wps-friends remove_all_friends="0" count="5"]
<div style="clear: both;"><a href="/friends?user_id=[wps-usermeta meta='ID']">View all friends...</a></div>
</div>

CSS

Put the following in WPS Pro->Setup->Custom CSS.

/* Social media icons */
#sg_social_media_icons {
    float: right; 
    width: 200px; 
    text-align: right;
}
.sg_social_media_icon {
    float: right;
}
.sg_margin {
    margin-right: 6px;
}
/* Set up activity area and "dummy" sidebar */
#sg_profile_activity_div {
    width: 70%;
    float: left;
}
#sg_profile_activity_sidebar_div {
    width: 20%;
    float: right;
}
/* Responsive bit */
@media screen and (max-width: 56.875em) {
    #sg_profile_activity_div, #sg_profile_activity_sidebar_div { width: 100%; float: none; }
    #sg_profile_activity_sidebar_div { margin-top: 40px; }
}
/* Second style for buttons in "dummy" sidebar */
.wps_button_2 {
    width: 100% !important;
    line-height: 30px;
    background-color: #000 !important;
    background-image: none;
    color: #fff;
}
.wps_button_2:hover {
    background-color: #510051 !important;
}
/* Remove sidebar (from all pages on the site) */
/* Important! Please read the "CSS" section below on this page about the following */
#secondary { display:none !important; }
.content-area { width: 100% !important; }

Implementing

It is unlikely that you will be able to just use the page content shown above because, for example, it uses Profile Extensions for www.wpsymposiumpro.com

CSS

If you want to keep sidebars on your site, but just hide on your profile page so you can use this template, you could change the CSS that removes the side bar to the following (you will need to change 71 to the Page ID of your profile page):

.page-id-71 #secondary { display:none !important; }
.page-id-71 .content-area { width: 100% !important; }

Page Header Profile Extensions

A profile extensions called Profile Header, with a slug of profile-header, is created to show the large image, the avatar, etc. If you want to use this, create a profile extensions that has a slug of profile-header, and probably called Profile Header.

The image below shows the settings, click on the image to “zoom in”.
2016-05-21_11-34-42

Social Media Profile Extensions

The following profile extensions are used to let users put in links to their social network pages, and then shown as icons.

  1. Twitter (twitter): For a link to a Twitter page, shown as an icon
  2. Facebook (facebook): For a link to a Facebook page, shown as an icon
  3. YouTube (youtube): For a link to a Twitter page, shown as an icon

Create a profile extension for each of the above, making sure the slug matches, and for each apply the following settings (again, click the image to “zoom in”):

2016-05-21_11-38-25

To show as an icon, you will need to set the featured image for each of the above. You can use your own icons, but if you want to use those we do, here are links to the three icons:

User Profile Extensions

More as an example, we allow users to set their gender and website, and enter some more information. For these, three profile extensions are created:

  • Gender (gender): a list of gender options
  • Website (wp-symposium-website): A website that may be using WP Symposium Pro
  • More information (information): Just some more information

Create profile extensions for the above, gender is type list, wp-symposium-website is type text and information is type text area. Settings for these extensions are pretty straightforward.

Don’t want to use the Profile Extensions?

Whilst the Profile header profile extension is pretty essential, the others can be removed. If you choose not to use them, you need to remove some or all of them from the page content above.

If you want to remove them all, the section to remove is as shown below. You should remove this, or (if you are using them, but with different slugs/types) change the code to match any profile extensions that you use.

<div id="sg_social_media_icons">
<div class="sg_social_media_icon">[wps-extended styles="0" slug="twitter"]</div>
<div class="sg_social_media_icon sg_margin">[wps-extended styles="0" slug="youtube"]</div>
<div class="sg_social_media_icon sg_margin">[wps-extended styles="0" slug="facebook"]</div>
</div>
[wps-extended slug="gender" before="<strong>Gender:</strong> " ]
[wps-extended slug="wp-symposium-website" before="<strong>Website:</strong> "]
[wps-extended slug="information" before="<strong>More Information:</strong> "]
Sidebar