User's personal page. How to make a user page

Hello everyone, I haven’t published new articles for a long time, as there was a lot of different work + on top of everything, I took several courses on website creation. Now, I think I will publish various interesting notes for webmasters more often.

I’ll probably start with useful WordPress plugins that were really useful to me in practice.

Today I will talk about the Client Portal plugin - Private user pages and login.

Why did I need it?

About a month ago I was developing a website for a foreign language school. Among the layout and functionality tasks was the task of creating personal pages for all school students and at the same time they should be convenient to fill for an inexperienced editor. Of course, first I started looking for plugins to create a personal account for the user, but they were all too cumbersome and had huge functionality that was simply not needed and only made the site heavier. While searching, I came across the Client Portal - Private user pages and login plugin page and realized that this was what I needed. A lightweight plugin that allows you to create personal pages for each user.

After installing this plugin, in the admin panel in the “Users” section, when you hover over any of the users, you will see a link to your personal page. I showed what it looks like in the screenshot.

When you click on it, you will see a regular editor. In my case, the site editor published the lesson schedule for each student and small organizational announcements there.

How to connect correctly?

By downloading and installing the Client Portal plugin - Private user pages and login. You will need to somehow link it to the user so that after he enters the site, he ends up on his personal page.

First you need to create a page with a name, for example, “Personal Account”. Then copy the shortcode there - .

For redirection I used the plugin - Theme My Login. As you can see from the screenshot below, I indicated a link to redirect the user to the directory we need.

With these two plugins I was able to solve the problem and at the same time, I did not install cumbersome personal accounts that would only confuse the site administrator.

That's all for today, I hope this material will be useful to someone.

From time to time, questions come to me asking me to tell me how to create a user page, that is, so that each registered visitor has his own page on the site. In this article I will try to answer this question.

First of all, you need to authorize. If you don’t know how to do this, then read this: . After authorization, each user’s login and password information is saved in the session. Now you can work on the user page, so the algorithm is as follows:

Create a file, for example user.php. Enter all the HTML and CSS code there, substituting some test data that in the future will be unique for each user.

At the very beginning of the file, read all information about the user (for example, from the database), using his login, stored in the session.

Replace test data with specific user data, information about which you received in the previous step.

That's it, now all authorized users logging into user.php will see their own data. What kind of data this is (full name, avatar, date of birth, etc.) does not matter, that is, we created the most ordinary user page.

What are personal pages and posts in WordPress, many people seem to know or have heard about it, but perhaps not many have used it due to the fact that they have not found a use for them. Today I will tell you how you can use such pages to great benefit for yourself and your website.

So, let's first clarify what personal pages and posts are in WordPress. The “personal” status means that only the person who created the page or post will have access to the contents of a particular page, and of course the administrator and super-administrator of the site or blog. So what is the use of personal pages and posts?

Well, let’s say in a personal entry you can leave some notes, texts, links, photographs, etc. for yourself as a keepsake, and so on. But there is not much benefit from this. But a personal page is a completely different matter, since you can create and use special templates for pages. This is what we will talk about, about personal pages.

In order to create a personal page, you need to log into the site’s control panel (in the future we will assume that you are logged in as an Administrator), in the menu block on the left, select “Pages” -> “Add new”. The page creation form will open. Once you enter the title of the page, a link to it will appear below. The initially created page may have the following address:

Http://wpmytest.ru/?page_id=4

which is not very memorable, so it’s better to make a more understandable link, for example this (if you have selected “Post Name” in the “Options” -> “Permalink Settings” section of the settings):

Http://wpmytest.ru/moya-laboratoriya/

In the page content field we enter any information, any text, and in general the page is ready. But now it is important to give it the status of “personal”. To do this, in the right block of the control panel we find the “Visibility: Open Edit” block and, by clicking on the “Change” link, select “Personal” in the list that appears and click the “OK” button. Then feel free to click the “Publish” button, and you can assume that your personal page has been created.

To make sure that the new page is available only to you, log out of your account and try to open your personal page in the browser at the address that you assigned to it. Typically, you will receive a message stating that the page does not exist, or that you do not have access to the page. That's all, but this is only half the battle, and the most interesting is yet to come.

By the way, just in case, you can add a line to the robots.txt file to prevent crawling of your personal page (in my example, this is the /moya-laboratoriya/ directory) by search engine bots:

Disallow: /moya-laboratoriya/

Go ahead...
As I said at the beginning of this article, you can use different templates for any of the pages. Many themes, even standard ones that come with WordPress itself, may have a couple of design templates specifically for pages. For this example, I used the standard “Twenty Eleven” theme, in which you can choose the following templates for the page:

Basic template
- Showcase Template
- Sidebar Template

To assign a template to a page, you need to select the page you created to change, in the right block of the control panel find “Page Attributes” -> “Template” and select the one you need there.

But we may not be very interested in ready-made templates, which contain a lot of unnecessary things, and we will create our own.

To create your own template for a page, you just need to go to the directory where the files of the theme that is currently used on the site are located, and create a new PHP file there. From personal experience I will say that it is still better to make a copy of one of the files located there and slightly change its code. For the example, I used the default "Twenty Eleven" theme and a copy of the "showcase.php" file, which I renamed to "showcase-2.php" and then threw out everything I didn't need from its code. In the end this is what happened:

Please note that the file code contains the line “Template Name: My template 1”. This is very important, since only the presence of the “Template Name” label will allow us, when changing the parameters of our page, when selecting a template, to already see in the list a template with the name “My Template 1”.

Since we have already created a new template, all that remains is to assign it to our personal page. Again, select the page you created to change, in the right block of the control panel find “Page Attributes” -> “Template” and there from the list select the “My Template 1” that appears, created by us:

My template 1

Save the changes and open our personal page for checking. Now the page will have the top part (header), bottom part (footer) and the contents of the page itself (if, of course, you added some text or something else when editing it). And nothing more unnecessary!

So what's special here? - you ask. Yes, the fact is that now it is in the code of the page template we created that you can add whatever your heart desires. For example, PHP codes that could not be inserted into the page content itself from the control panel. For example, scripts for collecting statistics from SEO resources, site visit statistics, and many others. And this will also not be difficult to do without FTP access to the site, since you can call the personal page template file for editing through the site control panel: “Appearance” -> “Editor” and on the right “Page template “My template 1” ( showcase-2.php)"

New template available in WordPress editor

Now you probably noticed that it is not very convenient to always go to the control panel to view your personal page and look for this page there. We need to do something.

After all, at the beginning of creating a personal page, we assigned a link for it, so let’s use it. Although even the link can be accidentally forgotten, especially if it was complex. But simplifying access to the page turns out to be simple.

You can add a link to your personal page anywhere in your template (in one of the template files, for example in the file that displays the sidebar), but in order for the link not to be visible to search engines or anyone else, you need to add a condition that will allow access only to the site administrator:

However, some may want to be even more protected, just in case, from direct access by strangers or other site accounts to the contents of your personal page. To do this, you need to add a similar check to the file that you created as a template for your personal page, as you did to hide the link:

This way, only the administrator will have access to the contents of the page, even if you accidentally removed the “Private” status for this page.

And finally, let me remind you once again that you can add any code to the template file itself, including PHP scripts and any other information that will not be accessible to search engines and outsiders. In addition, the codes added to the personal page template file will in no way affect the performance of the site, except perhaps in those cases when you yourself access this page.

For example, you can add a small widget to the website pr-cy.ru, which will show the current dates of the latest PR and TIC updates

This is what the source code for your personal page template might look like:

Added scripts to the personal page template will not affect the operation of your website or blog in any way. Be it JavaScript, PHP or others, except of course if you used scripts to write to the database. In general, you can safely test your new scripts and conduct other experiments. But if you suddenly made a mistake in the code of the page template you created and don’t know how to solve the problem (for example, instead of your personal page you see a blank window or an error message), then you can simply delete this template file or simply select another template in the page settings ( for example the default template).

That's all. The last screenshot shows part of my personal page on WordPress (the numbers on the counters are fictitious and most of the results of the scripts are hidden, since the information on my personal page is confidential), I give it as an example of using a personal page with my own template for it:

Have a successful and useful use of your personal pages on WordPress!

2015-09-15 13231 33 Denis Abdullin

It’s rarely possible to post anything in its pure form, like on Hurraya, because everything is done in a single system, and users should be offered something universal. Of course, in any case, questions and problems will arise. This design was made for a light background, so you will have to change a lot to suit yourself. However, I tried to make something more universal and easy to install.

Here it is a personal page for uCoz like on Hurray. I’m not saying that I came up with something original, I’m just sharing a modern style for my personal page. It’s impossible not to notice that round avatars in the center are a kind of trend in the world of interfaces.

How to make a personal page the same
How are the other pages on the site?

This question is most likely not formulated precisely or completely, but we should start with it. The personal page on uCoz by default is completely independent and small, as if it were not part of the site, but something unnecessary. The same goes for some other pages, such as private messages, but let's not talk about them now. So how can you make the “personalization” really part of the template?

First, choose to open your personal page “In the current window” in the settings of the “User” module.

Secondly, copy the wireframe code into “Design Management – ​​Site Pages”.

Now completely replace the code in “Design Management – ​​Users – Personal Page” with the one you took from “Site Pages”. In it, replace $CONTENT$ with the original content of the personal page between and . You can immediately replace $CONTENT$ with the personal page code from Uraaa (below).

Here's what we got:

Personal page like on Hurray

Use the following code in “Design Management – ​​Users – Personal Page”. Replace $CONTENT$ with this code according to the instructions above:

200?"200px":""+(this.scrollHeight+5)+"px");">
if (window.name.length>2)(window.resizeTo(750,420);)
function uSocialConnect(obj)(
var social = obj.id.split("-");
obj = $(obj);
if(obj.hasClass("is-connected"))(
if(confirm("Are you sure you want to deactivate your account?"))(
obj.addClass("wait");
_uPostForm("",(type:"POST",url:"/index/sub/", data:(a:4,s:social)));
}
)else if(!obj.hasClass("wait"))(
uSocialLogin(social);
}
return false;
}

.social-accounts ( padding:10px 0 3px )
.social-accounts a ( opacity:.4 )
.social-accounts .is-connected ( opacity:1!important )
.social-accounts .wait i ( background:url(/.s/img/icon/ajsml.gif) no-repeat center center!important )
.social-accounts a.cursor-default, .social-accounts a.cursor-default i ( cursor:default!important )
.statusOffline (color:#979797)
.statusOnline (color:#5ac92e)

Sc-over (padding:0px 20px)
.sc-cover (background:url("https://wallpaperscraft.com/image/spots_background_light_blur_68629_1920x1080.jpg") #1d1d1d;background-size:cover;position:relative;height:180px;margin-bottom:60px)
.sc-cover-in (width:100%;position:absolute;left:0px;bottom:-50px;)
.sc-avatar (width:100px;height:100px;margin:0px auto)
.sc-avatar (border:4px solid #fff)
.sc-avatar img (width:100px;height:100px;object-fit:cover)
.sc-avatar, .sc-avatar img (-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;)
.sc-top (text-align:right;padding:15px 0px;position:absolute;bottom:-50px;left:20px;right:20px;z-index:2)
.sc-group (float:left)
.sc-name (font-size:19px)
.sc-city (font-size:13px;color:#959595)
.sc-counter, .sc-counter:hover (display:inline-block;font-size:21px;padding:15px 7px;color:#000;text-decoration:none)
.sc-counter span (display:block;font-size:13px;)
.sc-tabs (max-width:420px;text-align:left;font-size:14px;border-bottom:1px solid rgba(0,0,0,0.1);padding-bottom:7px;margin:7px auto )
.sc-tabs div (float:left;width:110px;color:#959595)
.sc-bottom, .sc-button (padding:10px 0px)
.sc-button a, .sc-button a:hover (padding:7px 14px;font-size:13px;border:2px solid #3785dc;color:#3785dc;text-decoration:none;display:inline-block;- webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;)