Create with 100% FREE Plugins in 35 Minutes
He will be redirected to this login page. Otherwise they won’t, be able to see anything of the content, so here they have to log in and their username and password, and then they come to a home page. You see here we have home a fake use if they need help.
They can contact a lady that they gave me that project here we have activity groups members, so let’s share information and let’s share information more efficient. This is the whole purpose of this network and what I built for them is they have activity field so in the Activity Feed they the users see everything that’s going on in the network.
Let’s, jump to it. So here I could enter an update and just post it to to the newsfeed, and other members would see just like in Facebook’s. Newsfeed other members see everything that’s going on. So I created this user profile in order to show you this.
I changed my profile pic and I changed your profile pic and posted something in a group, so it is basically like the newsfeed on Facebook. Neither section is the members, so here you see all the members of the network and you can add them as a friend and you can contact them every member as their own profile, and you can change your profile pic.
You can change your cover, photo and people can friend you. They can send your private message or they can send to your public message, which would be like you send someone on Facebook, a public message on their pin board like the happy birthday message right.
This also has a complete group functionality where there can be public groups, edit private groups and groups that are open on invitation. Only and the user has a lot of option options. They can see the activity so their personal activities when they were mentioned.
The favorites friends activities group activities in their profile. They can edit the profile they can change the profile pic in the cover image they see. When they have unread notifications, they can do messages and send the messages to other users, also compute a messaging functionality included here.
They see their friends if they have pending friendship requests. Here they consider groups that there are members in it also can every user can create a group, and here is login and logout. So, as you can see, it is a complete social network, as we know it, but for members only and for free, so let’s, see how to do this.
I’m gonna log out here and go to a complete new WordPress website. I have setup to build this really from scratch with you, so I can cover all the topics. So this is the basic WordPress theme and you can see there is nothing on it.
Okay. What we will do next is, I have created a little cheat sheet so that you can follow along so first, I want to add the theme that I used, which is emit light. Let’s, go in here and on appearance.
Here we can add themes, add new. Let’s, see I’m too late. We install it and then let’s activate. So what did that do for us and so let’s. Look in the front end perfect, so we already have the colors and everything the next things we are doing.
Is we install all the plugins that are really for free and what we need is body press and the color lip logging customizer the force, login and Elementor? So let’s, hit back to the WordPress back-end and go on to the against and add new.
Let’s. Look first for body press and just activate it. Buddypress is what creates the actual social network and it’s. A completely free tools, a tool – and there are a lot of add-ons for it, so it’s, something that you can make can customize a lot and really scale back.
Ok, let’s. Add Elementor. Next Elementor is at the moment. My is at the moment, my favorite page builder, and I love to use it. I’m using it in a lot of projects and it really saves me a lot of time and it’s.
Basically, a visual builder. Ok, perfect! So let’s. Add some new plugins. The next we need is the color color lip-locking customizer. I will put you the link for the download in the description, and I have already downloaded it here and will upload it that’s.
Active learning and there’s, one more, which is the force login plugin. What it does is so let’s, see what happened so far. You see in the front end we don’t really have any changes. Now we are uploading, the final plugin, which is the force logging planet.
So what this does is it gives us this first page that always redirects you to the login page and doesn’t. Show you any content before you logged in. Let’s, activate that actually let’s. Look at it deactivated for a second, so I can show you what I mean.
I’m gonna open a new ink up into a table top hmm that’s activate/deactivate. They’re coming soon Mountain so that you can also see something come out my side, okay, so here we can see what we currently have right.
Now, let’s, activate the first login plug-in. Let’s refresh this, where we not logged in and then you can see that we always get redirected now to this login page. So now we have already set up the private part of the network, because every time someone tries to open our web site now he gets redirected to the login page, but the login page does not look very pretty right now, so we have to change the dollar.
Let’s. Go therefore to the blogging customizer and now. The first thing I want to change is the local option, and I wan na hide the WordPress logo, and instead of that, I want to add a text. So this must be like that and now we can say members only okay.
I want to change the color to the color of the theme, which is the sex coach. Now I’ll copy that and also when I hover over it. I want to have it black yeah that works for me. What you also have here is a layout options and in addition to that, you even have predefined themes.
So for the last project I chose this predefined theme. Let’s, get dad yep rubbish. I want to make this text a bit bigger doll, so remember so many social network, let’s, see yeah. I like that. Okay, now we have to change this image, so this is under.
Where did I have a clear background options, of course here and we can select, an image will upload it. This is a free image that I found a non splash, which is my favorite source for free images, and there we go there.
We have our language. What I still don’t like is that the button still has the default WordPress color, so I’m gonna change that okay. So let’s refresh this in the incognito mode tap and there we go. I’m satisfied so far, so this is published and I think we’re done here with the login page.
So the next thing we need to do is actually configure eyes. The settings of the body press plugin, which is the actual social media plugin, so hit under settings there. You find body press and then you come to a body press settings page by default.
Unselected is friend, connections and private messaging, which is, I think, very important for the social network. So we will check that here and safety settings under options. We can pretty much leave the default settings except that there’s.
Post comments, allow Activity Stream commenting on posts and comments, so I will want to activate that because I want other users to be able to and on posts in the Activity Stream which is similar to the Facebook newsfeed.
Okay. Now, under the top pages we have to tap pages. We have to check if all the pages are set up, so we have the members and the Activity Stream set up, and I also want to have the group page. So let’s, see let’s.
Check that let’s, allow our user groups to so that groups can be created, save it get back to pages, so you can see based on which functionalities you activate in the components. The body press plugin already creates the pages for you.
So let’s, go back to pages or let’s, open them in a new tab, and you see that the pages are set up automatically for you already that’s it for here. What I want to add now is the home page. So let’s, create a home and the FAQ page.
It’s. The cutter. Sorry before we do the pages. No, let’s do the pages. First then, I want to set it up with other mentor, so I’m, saying as a mentor, full-width and update and now edit, without a mentor okay.
So I’m in elementary right now, and what I want to do is I want to use just part of a predefined template to be a bit faster and, as you can see, Elementary gives you a lot of already in the free version it Gives you a lot of templates to choose from, and in this case I have decided that I wan na go with this, and actually I just want to have the top part here.
So I’m going on insert and there we go, and here you can place a video explaining the new visitors. What’s going on on the website? Welcome to our network, let’s change just over a blip, the style here after this element, because I don’t like purple color too much.
So I’m gonna set the background overlay to black and maybe reduced intensity a bit yeah that’s perfect here. You could theoretically use these parts if you want to, but I just want to use some icons to send the user to other pages, so I’m gonna change that to what do you want to do next, and here I would love to [, Music ] insert icon boxes and link them to members groups and new stream.
So I’m gonna make the IQ boxes here and I want them. I wanted to have a white background, and here I want to insert the icon box. So first was the Activity Stream and these are all the news that are going on right.
So I’m gonna insert a newspaper, and I always like this framed little thing in here and then I said: go to news. Okay, let’s, also change the style here to the color of the theme that we chose for the icon as well as for da I talked, and in the title I wan na use the same font as here, which is one of my favorite Fonts – and this is flavor – this Cape – it is a free, Google font and I’m using it a lot.
So let’s, just duplicate that two more times and they need this go to newsfeed. Here we say, find friends: let’s. Look for a group. I came here where you can select more people on it. You can see element mentor comes with hundreds of free icons already.
Oh, I think we are here, no, which one do I want. Could be dis or yeah? I think this is better. Let’s, go with this and then we have join room. This could be something with about conversations right so that it’s, not too similar to the news.
Oh yeah. I like this okay, so let’s update this, you go to our home page and hmm, we’re, still not seeing it. This is because we have to make this page now as the default home page. So we hit back, go to settings and on reading our home page should display a static page, and it should be the home page that we just created.
Let’s, save this. Now we can refresh and perfect. We have the home pitch. Welcome to our network members only what you want to do next here we have a bit of a design problem. I would say: let’s edit this section.
Oh yeah, let’s, do 50 here or maybe even 30. Here you don’t, do anything and below this we need a spacer, so need a bit more space here and tear the default is 50, and I think that’s kind of good. So I leave it yeah.
This looks much better, except that I have a little typo here. What you want to do. Okay, this already looks pretty good, except I’m, not satisfied here, and I’m, not satisfied here. So let’s customize.
The themes, header click on the customize icon and then we don’t need the contact information so that’s. Just until you please – and I think these are placeholders for social icons and yeah. We also don’t need to do so.
Let’s, delete this just go under social icons and remove them. Okay, so that’s, pretty good. So far I would say now what we need to do is we still need to create the menu right. So let’s. Go back here.
Actually, there’s, one more setting that we need to do, and I have a crew of creation for all users. Now group photo upload and little cover image upload and yes, I want to have that. Okay, so let’s fix these menus now.
Here I want to have a home button and FAQ – and here I want not – I what I don’t want the home button and I don’t want a sample page. So in the word per second, we go to appearance menus and then we create a menu and one I named name here I want to have to group the members and the activity, the activity I want to rename to a news feed because it’S something people are more familiar with, and I also want to change the news, feed members and groups.
Then I want to make a second menu with create new menu and even top – and here I wan na – add home. Okay, let’s, go to a front end again. Okay, so now we have to assign the menus accordingly. So let’s, go on customized menus and you see we have made a top menu and we have two locations so as the primary menu I want to have the main menu.
So this change changes here and at the top menu I won’t have to talk menu, so the thought behind it is that here you have more general information like home FAQ rules, maybe for the network data protection disclosures things like that, and here You have the menu for the actual functionalities of the network, okay, so we are pretty far.
The only thing we need to do right now is so we already have all the functionalities here. Let’s, go to edit my profile and let’s. Change this profile over maybe give us a cover picture. Our profile picture.
Sorry – and I want to change my name as well, and I want to have a cover image too. So let’s head over to unsplash and are actually we can just take a picture. We already have okay great, so I have a profile picture now now.
The last thing that I want to show you is you have this network for members only. But how do you add members now that, because when you’re, not locked in still all people are seeing. Is this now it’s, time to add some users, so you can solve decide where you want.
You can, if it’s, for example your colleagues in the company you can set up the profiles for them or you can set up a separate register form. But the way you would add the users would be by users, add new when we say user, your lure new, so you have to first limit.
The last name show password copy it. So you have user and this add the new user. Oh, the email address is required, so make sure you type in an email address. But what is very important is that you uncheck this and here you can choose the role.
So you can add other people as admins, but if you don’t want them to have access to the word per second, you will just add them as subscribers. Okay, so we have a new user. Let’s it over to the other page.
I’m, going to copy the password and let’s. Do this user and the depress right and there we go. We are locked in into our social network. If we go to newsfeed, we can see everything that was going on so evident, vise updated her profile three minutes ago.
Then we can see the members which are the new user. I just created and my profile has gone my profile. The new user can add me as a friend and he can send me, for example, a public message and say hi there, my profile, I am working in the Betty apartment, that’s, coffee next bridge.
This will automatically be shown in the newsfeed because it’s, a public message or you can also send private messages, project update hi. How is the status or the project? Be that mean? No thanks. You can also and include pictures you can put some formatting to it and then constant yeah, so this is pretty much it.
As you can see, it was kind of easy to set that up and yeah. I hope it helps you next time when you have a request to build something like a private, members-only network or company internal network. Things like that.