The WordPress-Buddypress-Lockdown challenge
I often read about folks wanting to lockdown their WordPress-Buddypress site, and make it so that content is accessible to logged-in members only. Even more, many want to know how to redirect site visitors to a landing page like Facebook – with login and registration on the page – while still having some select content available to them.
Look no further folks. Today, we’re gonna git ‘er done!
Once we’re finished with this project, and depending on your chosen theme of course, your landing page should look quite similar to the screenshot at right.
To make this WordPress-Buddypress project as easy as pie for even the most novice among us, this tutorial is divided into 5 parts so you can get stuff done at your leisure:
Custom page template
We need a custom page template to display the content we want site visitors to see.
Landing page
We’ll build our landing page with on-page login and registration.
Logged-out menu
We’ll create a special custom menu for site visitors.
Redirect function
We’ll write a custom function to ensure visitors can only access our selected content.
Make stuff look good
We’ll add a few style rules and tweak some stuff to get your new landing page and logged-out pages looking sharp as tacks!
Ready? Let’s dig in!
1) Custom page template
First of all, before making any of the changes described in this tutorial, I highly recommend that you be using a child-theme. If you’re not, and you’re not sure how to create one, see http://codex.wordpress.org/Child_Themes and What are Parent and Child Themes?
To make the custom template we need for visitor content, open a new document in your favorite text editor. (Do not use a word-processing program like MS-Word for this as it includes additional text formatting that will render your code useless. My +1 recommended text editor is Notepad++.)
Copy the entire contents of your theme’s page.php file to your new document. Then, insert the following code at the top, above everything else (be sure there isn’t a blank line at the top or you’ll wind up with the dreaded “Headers not sent” error when you try to use the template).
Depending on the theme you are using for your WordPress-Buddypress site, there may be a lot of code in there, but your template should look something like this:
Since we don’t want site visitors to have access to any content other than the pages we choose, let’s make it so the sidebar and footer only display when logged-in. We’ll simply wrap the sidebar and footer calls in a is_user_logged_in() conditional, so your template will now look like this:
If, for whatever reason you may have, you prefer to display the sidebar and footer even when logged-out, simply omit the previous step. Remember that if you do, visitors will be enticed to click on links in displayed widgets, and may get frustrated by being constantly redirected to your landing page. (Then again, you could always install a plugin to allow you to control which widgets appear when logged-in and logged-out. See this post for 10 such plugins.)
Save your new document as template-custom-lockdown.php. If you don’t like the template name I’ve suggested, simply change it to something you think is more appropriate. Remember to change the filename too though! Upload your new template to the root folder of your active child-theme.
You should now determine which pages are the only ones you want your site visitors to see. Here are some suggestions (they may not apply to your site):
About Us
Privacy Policy
Terms of Use
Membership Options
Features
Our Mission
…etc
In your WordPress website’s admin panel, go to “All Pages”. For each page you have selected, click the “Quick Edit” link, select your new Custom Lockdown template in the “Template” drop down menu and click “Update”. You can also use the “Bulk Edit” feature if you prefer.
Once we finish with part 4, those pages will be the only site pages logged-out visitors will have access to on your WordPress-Buddypress site. Of course, they will also have access to register.php, activate.php and wp-login.php. Oh, but wait, we need them to have access to the landing page too, right? Let’s build that now.
2) Landing page
Here’s where we take advantage of the flexibility of Buddypress components that use WordPress pages. Start by creating a new page to use as your landing page. Give it a welcoming title – maybe something like “Welcome” – add a nice image and a bit of introductory text, and click “Publish”. You do not need to assign the custom lockdown template you made in the previous step (you’ll see why in a bit). The URL for your landing page will be something like this for site visitors: yoursite.com/welcome
In your WordPress admin, go to your Buddypress settings and select the “Pages” tab. From the “Register” page dropdown, select the page you just created and click “Save”. You have now just told your WordPress-Buddypress installation that the page you created is to be used for registration. That takes care of getting the registration form to display on your landing page. Now let’s get everything else to display on that page too.
Copy the Buddypress “registration” folder from your parent theme to your child-theme. From the folder you just copied to your child-theme, open register.php. That is the template that will contain and display all your landing page content. I strongly recommend that you make a backup copy of that file, so just in case things go a bit haywire, you’ll have something to fall back on. You can call it backup-register.php and save it in the same folder.
As we want our landing page to have a similar layout as pages using the custom template we made earlier, remove the following Buddypress code from your child-theme’s register.php file. Remember to remove the corresponding closing div tags near the end of the file too, or things will go haywire!
Next, we want to get the landing page content (the nice image and intro text), the login form, and the “Lost Password” link in there too. Paste the following code right where you removed the previous code. We’re also wrapping each of these elements in div containers so we can style ‘em later on. (If you do not want your users to be able to reset their passwords with the built-in WordPress function, simply omit the line just before the closing </div> tag.)
We also want to put the signup form in a special div container so we can style that too. Add the following code just above where you see <form action=””. Then add a closing </div> tag just after the closing </form> tag.
The last thing we want to do in register.php is hide the sidebar and footer like we did in our custom template. Replace the calls to the sidebar and footer with the respective code bits below. Again, if you don’t want to, don’t.
Save the register.php file and upload it to the registration folder of your child-theme.
Great stuff! We now have our landing page set up with login and registration forms on the page, and a bit of introductory content to boot. We’ve also selected the pages site visitors have access to, and have assigned our Custom Lockdown template to all of those.
Go ahead and test stuff out now to make sure it works properly before we go any further. Be sure you’re logged-out of your site, then navigate to your landing page url. Don’t worry about how it looks just yet. Let’s be sure all the functionality is there first. Done? Good.
3) Logged-out menu
Now let’s create a logged-out menu for your WordPress-Buddypress site with links to all logged-out-authorized pages only. We need to do only 2 things to create the new menu:
register the new menu in your child-theme’s functions.php file
call the new menu in the right spot, and under the right conditions, in the child-theme’s header.php file
Open your child-theme’s functions.php file now. If it doesn’t have one yet, create it now (see this page for more on this file in child-themes).
Now open your parent theme’s functions.php file and locate the function that has register_nav_menu in it. It will look something like this:
Copy that entire function to your child-theme’s functions.php file. Now copy the line that has register_nav_menu in it, and paste it directly beneath that line. You should have 2 identical lines, one after the other. In one of them – it doesn’t matter which one – change both occurrences of the name of the menu to something you’ll recognize as your logged-out menu (remember to separate words in the 1st occurrence with underscores). Perhaps simply call it Logged-Out Top Menu. Your function should now look something like this:
Save your functions.php file and upload it to the root of your child-theme. You now have 2 different menus registered in your child-theme. As we are declaring the same function that exists in the parent-theme, it replaces that function (which is why we register the original menu again in the child-theme). If you visit Appearance > Menus in your site’s backend, you’ll see in the Theme Locations box at top-left that Your theme supports 2 menus. See it? Great!
While you’re there, you may as well take a moment to create your new logged-out menu (we’ll get it to display in a moment). Create a new menu and add all the pages you had earlier assigned your Custom Lockdown template to. Also add the page you had earlier assigned for registration in your Buddypress settings – i.e.: your landing page. You may want to give that one an easy-to-recognize navigation label, like Login or Signup. Save your menu, select it for your logged-out menu in the Theme Locations box, and save there too.
Now we want to get that new menu to appear in the right spot in the header, but only display when logged-out. In other words, our new menu will appear when logged-out (your original menu will not be called), and it will be replaced by your original menu when logged-in.
Open your child-theme’s header.php file. If it doesn’t exist yet in your child-theme, simply copy the one from the parent to the child. Search your child-theme’s header.php until you find the call for wp_nav_menu. It will look something like either example below:
Copy that entire snippet and paste it directly beneath so you have 2 identical snippets, one on top of the other. The only thing we want to change here is the value for theme_location in the 2nd one. Locate that value in the 2nd snippet, and replace it with the value we gave to the new menu we created above. In the above example, we called it logged_out_top_menu.
Now we’re going to wrap those 2 menu calls in a conditional so that the 1st one appears only when logged-in, and the 2nd appears only when logged-out. Paste the following code before the 1st menu call:
Then add this between the 2 calls:
Finally, add the following after the 2nd menu call:
Your entire code for both menu calls should now look something like this example:
We have now registered both a logged-in and a logged-out menu in the child-theme’s functions.php file, have created the new logged-out menu in our site’s backend, and have set up the header.php file so that each menu appears only when the correct condition is met.
4) Redirect function
Now it’s time to create the function that will ensure that site visitors – i.e.: logged-out – will be able to access only the pages we have added to our new logged_out_top_menu, our landing page (register.php), as well as activate.php and wp-login.php (for password recovery).
Open your child-theme’s functions.php file again. Paste the following code directly after the opening <?php tag:
If you have used the example filename I gave above for the Custom Lockdown template (template-custom-lockdown.php), and the example page slug for the landing page (welcome), the redirect function will work as-is. If you have changed those in any way, you will need to edit the above function so it contains the proper names.
Once you have edited the function with your file and page names (if necessary), save your functions.php file and upload it again to your child-theme. To test the function, be sure you’re logged-out of your site. If you’re already logged-out, simply refresh the page (you may need to clear your browser’s cache also). If all is well, you should see only your logged-out menu appear in your site’s header.
Click each link to be sure you can get to it when logged-out. Now try to get to any other page or url on your site. You should be redirected to your new landing page. Fun, huh?
5) Make stuff look good
Now for the final bit: let’s add a bit of simple css magic to make your WordPress-Buddypress landing page look snappy! If you have used the example names I gave for the wrapper divs in part 2 (Landing page), the following css will pop your landing page right into shape. Add the following to your child-theme’s style.css file. (If you’re using a theme from WPMUdev.org, you’ll likely want to edit the _inc/css/child-style.css file instead.)
Save your style.css file and upload it to your child-theme. Now, still logged-out of your site, refresh your landing page and everything should pop right into shape as in the example image at the top of this page. Here it is again just for convenience.
If you’re using a responsive theme, you may want to tweak things a bit to get the landing page looking all nice and pretty on smaller devices. If you’re not sure how to write specific style rules for various devices and capabilities, check out this great article from SmashingMagazine.com, or search Google for how to use css media queries.
I hope you enjoyed this tutorial on building a members-only WordPress-Buddypress site, and find use for it! If you need any help with any part of it, or want to show off the results of your efforts, please leave a detailed comment below (with a link to your site if possible). Thanks for reading!
Photo credit: Flickr.com
Related posts:
Free Plugin Brings Facebook-Style Live Notifications to BuddyPress The big news over this past weekend is that Brajesh…
Build Site Membership Organically Through Relationships With Invites for WordPress, WPMU, and BuddyPress Sites Never underestimate the power of an invitation. If a potential…
Love the New Facebook? Download a Free Facebook Timeline Style WordPress Theme Just days after Facebook turns on their new Timeline layout,…
Source
Related posts:
Style Your WordPress Menus With Custom CSS
Daily Tip: Display BuddyPress Members Who Have Uploaded an Avatar
How to Create a Professional Networking Site With WordPress and BuddyPress
The post How to Build a Facebook-Style Members-Only WordPress-BuddyPress Site appeared first on Pinsoft Studios and was authored by Fanus van Straten.