Table of Contents
In this tutorial we are going to learn how to create a simple but functional social media site by using a content management system called WordPress . This is a step by step guide to create the site on your localhost using MAMP server and MYSQL database. The site will have functionalities like creating account, adding friends, posting content (text, image, audio ), messaging with friends and many more. Since we are building this site for learning testing (accessing the backend and database of a program is a key to effective testing ) we may not need much customization.
Installing MAMP
Downloading MAMP
To download MAMP go to www.mamp.info. MAMP has two versions one pro and another free. To download the free version click on the Free Download button.
Then chose to download on mac or window. After that download begins.
Installing MAMP
when the download completes, Go to the folder and double-click on the installer file to run the installer. Follow the following steps:
- Installer screen: Click next then uncheck install pro box and click next.
- Important Information Screen: Click Continue .Don’t rename the folder.
- Software License Agreement Screen: Select the language you wish to use with MAMP. Click Agree in the small dropdown, then click Continue.
- Destination Select: MAMP must be installed in the Applications folder to work properly. Click Continue for the next step.
- Installation Type Click Install to perform a standard installation of MAMP for all users of your computer. Click Install to continue. Enter your admin username and password. then click Install Software.
- Installation – Installing MAMP Screen: The installation process may take several minut
Starting MAMP
After installation the MAMP welcome page opens . This page contains links to your PHP configuration (phpinfo), phpMyAdmin, as well as the standard MAMP configurations.
The MAMP control panel also opens, which shows that your local MAMP server is working. You should see green indicators next to Apache Server and MySQL Server:
You can start or stop your local sever from control panel by clicking start server or stop server.
Configuring MAMP
During installation, MAMP sets the default ports for both Apache (port 8888) and MySQL (port 8889).
Creating a Database
open the Welcome page in your browser , then click the phpMyAdmin link at the top of the screen.
To create a database, click Databases in the top navbar.
On the screen that appears, you need to enter the database name , choose your database connection collation from the dropdown box ,then click Create.
your new database will appear in the list on the left.
As an alternative option you can use MYSQL workbench instead of Phpmyadmin to connect to database. You have to download and install it on your computer first.
Installing WordPress
Downloading WordPress
You next need to download WordPress onto your computer. Go to the Download page of WordPress.org and click the Get WordPress > Download WordPress button.
Once WordPress has downloaded to your Windows PC, you need to unzip the folder and extract the files.
Move WordPress into MAMP htdocs
Now, you need to move WordPress into the htdocs folder of your MAMP install. Copy the unzipped WordPress folder and navigate to MAMP > htdocs (Go to files>local disk c > MAMP folder >htdocs)Paste the WordPress folder into the htdocs folder.
The name of this WordPress folder will be included in the URL of your local WordPress install (i.e. localhost/wordpress). You can rename the folder (and consequently the URL) to anything that works for you.
Alternatively you can find htdocs from MAMP. Under preference go to webserver , there you can find the Document root ,which is where your html/PHP files and images are stored. The default document root in MAMP is: “/Applications/MAMP/htdocs”.
Installing WordPress
The last step is to install WordPress on your local server. Type the URL of your local WordPress site into your browser’s address bar. if you haven’t renamed your wordpress folder , type in ‘localhost/wordpress’ or it is localhost:8888 or 127.0.0.1:8888. Then follow the following steps:
First, select the language of your choice.
You will then need to fill in some information about the new database you have created. You will need to define…
- Database Name – This is the name you chose when setting up the new database for your test site in phpMyAdmin.
- Database Username and Password – Both the username and password are root. This info can be found on the MAMP installation page in the MySQL section
- Database Host – This is localhost. Again, this info can be found on the MAMP installation page. WordPress expects port 3306 by default but MAMP assigns port 8889 for database so we may need to specify the port to 8889 in WordPress in case it fails to connect.
- Table Prefix – Leave this as the default wp_.
Now click the Run the installation button to install wordpress.
You will need to provide some details about your test site. These settings can be changed later . Then click on Install WordPress.
You can now log into your WordPress test site using the localhost/Name/wp-admin URL .
Installing Themes and Plugins
Theme
Downloading BuddyX theme
You next need to download Buddyx Theme. Go to the https://bloggdude.com/buddyx and click on themes > Free download button then fill all the required filled and click on free purchase > click on account > go to downloads and click on buddyx theme . download starts.
Installin/uploading buddyX theme
once you download the files go to WP dashboard and click on Appearance > themes>Add new > upload theme > choose file > cho0se the downloaded file > click on install now > click Activate.
Another way to install buddyx theme :go to Appreance >themes>add new> search buddyx > click install> then click activate. This is the easier method incase you could not find the theme follow the above step .
Plugins
Installing Plugins
Once you activate the theme you will see install related plugins message .To install the plugins click on begin installing plugins > select all > apply install> then click activate.
Here are a list of plugins you need to install:
- BuddyPress
- Classic widgets
- Elementor
- Pie Register
- Hide Admin Bar From Front End
- Kirki Customizer Framework
- Login Logout Menu
- rtmedia for wordpress,buddypress and bbpress
BudyyPress
To install Buddypress : go to plugin > click add new > search for BuddyPress > click install now > then click install.
Then go to setting > buddyPress> check every thing and save .
Now you can go back to your site and see a lot already changed. It will add pages with their own features.
Adding the pages to menu
First create a menu and save it.
To add the pages go to appearance > menu > select the pages (groups, member,logout|loging,and )add to menu > select display location and save.
login|logout is found under the login logout menu.
For the home page add custom link , in the place of url put your sites url. example:http://localhost/wordpress/
Then go setting > Reading > change home page display to static page and choose activity and save
visit the site you will see every menu displayed.
Now go ahead and create some user accounts and post contents to make it look like the site on demosocial.
rt Media
To enable posting images and files install rt media and activate it.
Hide Admin Bar From Front End
Go to plugins> click on add new > search for Hide Admin Bar From Front End > install> activate.
To hide the admin menu bar go to setting >Hide Admin Bar From Front End > check Hide Admin Bar for All Guests Users and save
Login Logout Menu
Go to plugins> click on add new > search for Hide Admin Bar From Front End > install> activate.
Go to Appereance > menus > loging logout menu > check login|logout > click save changes
pie Register
To disable email verification install and activate Pie register.
Remove the default registration page and add pie registration page to menu.
This will enable you to create accounts without email verification. You can go to pie register setting and enable or disable this feature anytime you want
Customization
Widgets
To add the left and right bar. click on customize on top of the page > got to widgets > select buddyx right or left sidebar and add your choice widgets.
Summery
Use can these sources to refer:
- MAMP:https://make.wordpress.org/core/handbook/tutorials/installing-a-local-server/mamp/
- WordPress: https://athemes.com/tutorials/install-wordpress-locally-using-mamp.