How to Create a Social Networking Website on WordPress

If you spend a lot of time on social networking sites like Facebook, Twitter, or MeetMe, you may be wondering how these social networks came into existence and, more importantly, how you can create your own social network. While many of these websites use custom software or load files directly from a server, it is now possible to create your own social networking site in the popular CMS (Content Management Software) platform, WordPress using fairly easy community plugins.

How to Create a Social Networking Website on WordPress

If you are unfamiliar with WordPress, it is an extremely easy, powerful system that lets anyone create a custom website (with no branding and complete control over everything) in as little as a few hours.

How To Install WordPress

If you don’t already have a WordPress-enabled server, you’ll need to create one. Head on over to any free hosting site (or paid hosting, if you prefer) you know of and create an account. Now use the Auto-Installer feature in your control panel to install WordPress. When the box appears asking you for installation details, you’ll have two choices:

You can either leave the “directory” or “install to” field blank, which will install WordPress directly to your root directory (ie. http://www.example.com), or you can enter the name of a new directory, which will give WordPress its own area on your website (ie. http://www.example.com/wp).

For the purpose of dedicating your site to a social network, you can just leave this field blank. Now you just need to create a username and password so you can login to your WordPress account.

How To Install BuddyPress

Once you have installed WordPress, you can get started on your BuddyPress installation. Since BuddyPress is just a WordPress plugin, you can head over to the “Plugins” tab and then click “Add New”. Now type in “BuddyPress” and the first link that appears should be what you’re looking for. Fortunately, BuddyPress includes an auto-installer option, so you won’t have to download anything. Just click the “Install Now” button, activate the plugin, and you’re done!

Well, not quite. Now that you have BuddyPress installed, you’ll need to configure it so that it can store profile data and other information in your WordPress database. BuddyPress does this by associating database files with WordPress pages. Click on the yellow bar near the top of your page to get started.

instantShift - Installing BuddyPress

Configure Your Pages

When you get to the BuddyPress configuration screen (which can be accessed at any time by going to Settings BuddyPress), the first thing you’ll see is a list of components. You can leave all of these checked except for the Discussion Forums (unless you want one).

Now click the “Save and Next” button at the top of the page. This will display a list of pages you’ll need to setup. Find the “Pages” link on the left side of the screen, hover over it (but don’t click it yet), right click on “Add New”, and click “Open In New Tab”. Now go back and forth between your two tabs and create a page for each required BuddyPress page. After you create each page, just click on the “Add New” link at the top or left side of the page to make another one. Technically, you can name these pages anything you want, but the default names are pretty self-explanatory.

Once you finish making all of your new pages, go to your BuddyPress configuration tab, refresh the page, and set each BuddyPress page to the corresponding page you created for it. Now click the “Save and Next” button.

The next page displays a few Permalink options, but you can skip over this page for now. Click the “Save and Next” button. Now you’ll have the option to use the BuddyPress default theme or choose your own. Just choose the default BuddyPress theme for now, but we’ll be going over how you can setup your own theme in the next section. Click “Save and Next”, which takes you to the Finished page. Congratulations! You’re now the proud owner of your very own social networking site.

instantShift - Configure BuddyPress

Choose A Theme

Now that we got that out of the way, let’s start customizing it. If you like the default BuddyPress theme, kudos. You can move on to the next section. If you don’t like it or just want to explore your options, read on.

Technically speaking, you can use any WordPress theme with BuddyPress if all of the BuddyPress files are copied over to your theme folder, which can be done with the built-in BuddyPress Template Pack (we’ll get to that in a minute). However, there are a few dozen WordPress themes that are already compatible with BuddyPress, which means they’ll just work as soon as you install them. For a list of free, compatible themes, check this out.

Install Your Theme

To install these themes, you can simply download them and upload them to your server via an FTP program like FileZilla. To do this, you’ll need to login into your hosting account and copy/paste your Host (which is usually your web address without the “http://” part) and your username into FileZilla. Now just enter your password and click the “QuickConnect” button. Now, on the right-hand side of the screen, double-click the root folder (usually something like “Public_HTML”), click the “WP Content” folder, and click the “Themes” folder. Now on the left-side of the screen, navigate to the folder that you downloaded your theme to. If the file is zipped, you’ll need to unzip it and then drag the folder to the right-side of the screen.

Once you’ve uploaded your theme, go back to your WordPress account, click on “Appearance”, and click on “Themes”. You should now see your theme on this page. Scroll down to it and click the “Activate” button. This will replace your existing theme (don’t worry, it’s completely reversible).

BuddyPress Template Pack

If your theme is *not* compatible with BuddyPress, you will need to use the BuddyPress Template Pack to copy the essential BuddyPress files to your current theme. The BuddyPress Template pack is a plugin, so go to Plugins Add New and search for it. Now download the plugin and use FileZilla to upload it to the server like we did with your theme, but instead of uploading the folder to your Theme directory, you’ll need to upload it to your Plugin directory. Now go back to your WordPress account and activate the plugin. Now click on the Dashboard tab on the left side of the screen and select “BP Compatibility”. This will bring up a wizard that you can follow to move your BuddyPress files to your existing theme.

Done? Good. Now you can create a logo.

Create A Logo

Whether you’re using the default BuddyPress theme or your own theme, you’ll need to customize your new social networking site with a logo of your own. You can do this in Paint (save it as a PNG to avoid pixilation), Photoshop, GIMP (the free alternative to Photoshop), or any other image manipulation program you have laying around.

To make sure your logo fits your site without breaking anything, you’d be wise to create your new logo in the same dimensions as the theme’s default logo. You can do this by going to your website, right-clicking on your logo, and clicking “Properties”. For dimensions, it should show something like “448 x 40 pixels”, where the first number is the width and the second number is the height. If you’re using GIMP, you can click on the Image tab, select “Canvas Size”, and enter the dimensions. If you’re using a different program, consult your documentation.

Once you finish designing your logo, you can upload it one of two ways. Go to your WordPress account, click on the Appearance tab, and select “Theme Options”. Now find anything that lets you upload a header image or logo from your computer and then save your changes. If this page is not there, it’s not saving your changes, or anything else is going wrong, you can upload the image manually.

Manually Upload An Image

To manually upload your image, go to Media Add New and upload your file. Before you close out of the screen, copy the “File URL” from the bottom. If you’ve already closed the page, you can get back to it by going to Media Library and clicking “Edit” on the appropriate image.

Once you’ve uploaded the image, go to Appearance Editor and make sure you’ve selected the correct theme from the drop-down menu on the right. Now go to “Header” and find any reference to “logo” or an image file. In my theme, it shows up like this:

<div class="logo"><?php if( of_get_option( 'text_logo' ) ) : ?>
<h1><a href="<?php echo home_url(); ?>">
<?php bloginfo( 'name' ) ?></a></h1>
<h2><?php bloginfo( 'description' ) ?></h2>
<?php elseif( of_get_option( 'logo' ) ) : ?>
<h1><a href="<?php echo home_url() ?>"><img src="<?php echo of_get_option( 'logo' ) ?>" alt="<?php bloginfo( 'name' ) ?>" /></a></h1><?php else : ?><a href="http://www.example.com"><img src=http://www.example.com/uploads/example.png></a>
<?php endif ?></div>

Once you find the correct spot, you’ll need to insert your image URL with a link to your homepage, as I’ve shown in the picture. Just copy the highlighted portion and replace the examples with your own URLs. Now save the changes and check out your site to see if it worked.

As a general note, you should copy and paste everything from this file into Notepad before making any changes that way you can just paste the original data back in if you mess anything up.

Setup A Custom Menu

Now that you have your logo setup, you should create a custom menu to make your site look more professional. Right now, your site is just showing all of your pages to the public and that may not be the best thing. You can create a new menu by going to Appearance Menu and click the “Create A New Menu” button. Now type a name for the menu (doesn’t matter what it is), save the changes, and select the menu from your drop-down menu on the left-side of the page where it says something like “Your theme supports 1 menu”. Now save those changes. To add pages to your menu, scroll down to the “Pages” module, check the boxes next to the pages you want, and click the “Add to Menu” button. You can change the order of the pages by dragging them around. You can even make sub-menus (drop-down menus) by dragging a page slightly to the right directly beneath another page. When you are finished, click the “Save Menu” button and check out your site.

Change Your Permalink Structure

A permalink is what comes after your main web address and is how your browser will keep track of your pages. For example, a page called “Computer Basics” may use the permalink “http://www.example.com/computer-basics”. This is the cleanest permalink structure and you can set your pages to use it by going to Settings Permalinks and selecting the “Post Name” option. If your server makes your permalinks look weird (like /index.html/%post-name%), just select the “Custom Structure” option and type in “%post-name%” (without the quotation marks).

instantShift - Permalink Structure

Add Content

So far, we’ve setup WordPress, installed BuddyPress, created a custom logo, setup a nice menu, and changed your permalink structure. Now you’ll need to fill your site with custom content. Go through your pages and add whatever you’d like. Stay away from the required BuddyPress pages, though, as these need to be blank to function properly. Since its your site, you can do whatever you like with it. My suggestion would be to start with the homepage and fill it with some basic info about your site. Don’t forget that you can also add images, videos, and virtually anything else into your pages to make things more exciting. Once you get a feel for WordPress, you’ll be editing pages like a pro in no time.

Just follow the directions as your read this article and continue applying it on your own WordPress.

Congratulations! You now have your very own social networking site and you’ve learned how to use WordPress. We did it!

Following are a couple of other similar plugins which work like BuddyPressand can help you change your WordPress site into a Social Networking Platform:

WP Symposium

instantShift - WP Symposium

WP Symposium is an open source social networking software package. It is a suite of plugins for WordPress that turns it into a social network – although you can choose which plugins you want to use. For example, if you only want to use the Forum, you would only activate the Forum plugin.

WP Mingle

instantShift - WP Mingle

The simple way to turn your WordPress blog into a Social Network. Mingle uses your standard WordPress website and standard WordPress theme to create profile pages, user friending, profile page posts, profile activities, social comments, email notifications (with privacy settings) and a full directory of members. So go ahead and try it out — give your users a more social experience on your website!

Like it? Share it.

14 Comments

  1. Thanks for this tutorial! However why did you not elaborate on Symposium and Mingle? Are there aspects of Buddypress that make it better than both of those?

  2. Its great thanks for this tutorials .. we must keep these points in mind while we going to do this in all the way towards our social media. As it is important to work on with social media with all these tools. Thanks for sharing this helpful post.

  3. very easy to do and nicely explained process hoping for some video link on if anyone have…on how to create social networking website through cms

  4. Oh, now I see that is easy as ABC. Thanks for tutorial, I’ll put it in favorites so I’ll have a chance to read it in any moment.

  5. which is the best plugin among them ???

  6. Wow! These are cool combination. Buddy Press and WP Symposium, I will grab a chance to use these both for a dynamic social media network site. Thank you for sharing this.

  7. thank easy explainer

  8. REALY EASY THANKS BUDDY

  9. Great ,
    You told lot of thing thanks.
    i tried to make but having problem to making pages could you please help for this

    Thanks

  10. Great tutorial and I would know as we built dogsuniverse.dk based on WordPress/Buddypress and I think you covered the basics very well.

  11. very nice , awsm

  12. hello sir if u dont mind who to social networking sait base knowledge please tell me saport for networking sait…………

  13. Hi, thanks for the directions. I’m having difficulty finding the template pack – I find some for specific themes, but not “BuddyPress Template Pack”. Can you point me in the right direction? Thanks!

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>