We need to create a few email accounts to test the Exertio theme functionality. These are the email accounts we will create.

1. admin@exeryio.wpressdev.com (Use as the admin account to receive money from Employer/Freelancer)
2. user01@exertio.wpressdev.com (Employer)
3. user02@exertio.wpressdev.com (Freelance #1)
4. user03@exertio.wpressdev.com (Freelancer #2)
5. noreply@exertio.wpressdev.com (Use by WP Mail SMTP plugin to deliver email messages)

All these account will be created from the Hostinger panel. Click on “Email” menu on the left.

Since this is the first time we configure email for our sub domain, we need to click “Setup“.

Select our sub domain. In my case, the sub domain is “exertio.wpressdev.com“.

Click “Confirm” to proceed.

Select “Hostinger Free” option as shown.

Lets create the first user “admin“. This user’s email is “admin@exertio.wpressdev.com“. Enter the admin password. Make sure you remember the password. Click “Create“.

Proceed to create another users (user01, user02, user03).

Lastly, we create user “noreply“. This user is used by plugin “WP Mail SMTP” to send email from our website.

Once all done, you will have the following emails created.

Congratulation! Lets connect email accounts to the email application so we can read email send to the users when they interact with the Exertio theme.

Launch your Outlook application. Click “File“.

Click “Add Account“.

Enter email account. In this example, we will add “admin@exertio.wpressdev.com“. Use your own email account as in Step 4. Click “Connect“.

Enter the password, then click “Connect“.

The account will be added to the email application.

If you enter the correct email & password, the account will be added successfully. Click “Done“.

You will se the account is added to the left pane. Repeat the same process for other 3 users (user01, user02, user03).

Once all are added, you will have the following shown. Congratulations! Now we can check emails for transactions done on the website.

Our website needs an email functionality. We will be using WP Mail SMTP to deliver the emails to our users when they do transaction on our website. You can download the free version here. If you need a pro version, you can purchase from here.Lets get started. Click on “Plugins -> Add Plugins” menu on the left. Select the WP Mail SMTP zip file we save under the “plugins” folder. Then click “Install Now“.

Once installation is completed, click “Activate Plugin“.

You will be taken to WP Mail SMTP configuration page. Click “Let’s Get Started“.

Select “Other SMTP“, then click “Save and Continue“.

The following settings are for Hostinger. If you are using different web hosting, please look for this information on their website. It should be almost similar. Click “Save and Continue“.

Click “Save and Continue“.

Again, click “Save and Continue“.

The plugin is configuring your website. Lets wait until it complete.

Once completed, click “Finish Setup“.

Lets test our email setup by sending a test email. Click “WP Mail SMTP -> Tools“.

Enter your own email address as shown, then click “Send Email“.

If everything goes well, you will get the following page and you should receive email in your inbox.

You should see the test email in your mailbox. Lets fix this “DMARC” issue.

Go to Hostinger panel. Click “Advanced -> DNS Zone Editor“.

Add the following setting. Click “Add Record“.

You should see the record has been added successfully.

Send test email again and now you should see the following message. Congratulations!

Lets install the Exertio theme. From the WordPress dashboard, click “Appearance -> Themes“.

Click “Add New Theme“.

Click “Choose File” and browse to your “themes” folder. Select Exertio theme zip file.

Click “Install Now“.

Click “Activate” to activate the theme.

Click “Begin installing plugins“.

Select all plugins by click on the checkbox next to the “Plugin” or you can check them one by one.

Select “Install” from the drop down menu and click “Apply“.

Click “Return to Required Plugins Installer“.

Select all the plugins.

Select “Activate” from the drop down menu.

Click “Apply“.

Click “Return to the Dashboard“.

If you see the message below click “View affected Templates“.

Take note of the messages. In this case, we have only a single issue. Our Exertio theme is using the old version of files compared to the installed WooCommerce plugin. We have to manually replace this file from the WooCommerce plugin files.

Go back to Hostinger panel. Click on “Files“.

Select “File Manager“.

Click on “Access files of exertio.wpressdev.com“. Your domain might be different.

Click on “public_html” folder.

Click on “exertio” folder.

Navigate the “exertio” folder until you reach the “order” folder. You will see the “order-details.php“. This is the file wee need to replace. Click the up arrow on the top right menu.

Select “File“.

Browse to the “plugins” directory and the folders inside it as shown until you see the “order-details.php” file. Select the file and click “Open“.

Select “REPLACE” to upload and replace the file.

Go back to the WordPress dashboard. The message we saw earlier should be gone. If you still see the message, check the details again and may be you need to replace a few more files. If everything is good, click “Click Here To update the Database“.

You should see a message box that database has been updated successfully. Click “OK” to close the message box.

Finally you should see the message “Updated Successfully“.

Congratulations! You have installed the Exertio theme. Lets see our homepage now. Click “Visit Site“.

You will see our website with a single blog post. Lets install the demo data so we have a full version of the website.

To install Exertio demo data, click on “Tools -> Import“.

Click “Install Now” under the WordPress tool.

Once installed, click “Run Importer“.

Click “Choose File” and browse to the Exertio folder which contains the demo XML file.

Choose “content.xml” file and click “Open“.

Click “Upload file and import“.

Scroll to the bottom and select “Download and import file attachments“. Click “Submit“.

The import process will begin. It can take more than 5 minutes. Please be patient. If you see below message, please retry the import process. In my case, it takes me 5 tries before it finally succeeded.

If you still see the error after a few trials, try increate the PHP time execution time. Go back to Hostinger panel. Click “Advanced“.

The click “PHP Configuration“.

Click “PHP options“.

Looks for “maxExecutionTime” and try increase the value to 3000 or more. Scroll to the bottom and click “Save“.

Retry the import process again until you get the following “All done. Have fun!” message.

Congratulations! You have successfully imported the demo data.  To set the homepage and blog page, click “Tools -> Reading“.

For homepage, you can select the predefined page on the list. In my case, I choose “Home 1“.

For blog page, I choose “Blog“.

Click “Save Changes“.

Go back and visit your website. This is how your homepage should look like.

You can change the homepage and see how they look.

This is how it looks if I choose another homepage.

Lets do some house keeping by deleting imported users. Select “Users -> All Users“.

Select all users EXCEPT administrator.

From drop down menu, select “Delete“.

Select settings as shown, then click “Confirm Deletion” button.

Hurray! We only have a single user. Next will do a basic configuration of Exertio theme before installing the child theme.

We have Exertio theme installed. Now we need to configure a basic theme options. I have prepared a theme options file which you can download here. Create a folder name “theme-options” under the “wpressdev.com” directory. Download the file and save it under the “theme-options” directory.Go to “Appearance -> Theme Options“.

Click on “Import/Export“.

Click “Upload File” button and locate the theme options file downloaded and saved under the “theme-options” directory.

Select the theme options file. It is in a JSON format.

Once selected, click “Import” button.

Once imported, click “OK” to close the pop up window.

Click “Save Changes“.

A message displays the the settings have been saved.

Go to “Header Options”. You need to update 2 fields as indicated. Change the subdomain into your domain. In my case the subdomain is “exertio.wpressdev.com“. Change this to your domain. ONLY change the domain text. Leave the rest of the text as it is. Click “Save Changes“.

Congratulations! You have done it. We will explore more of the theme options in the coming tutorials.

We will install the Exertio child theme. We will do the customization using the child theme. You will see later on that we also need to modify the core file theme but the changes are minimal. We will keep track the changes in a file for reference. This is useful if we need to update the Exertio theme to the latest release. We know exactly what files need to be updated.Go to “Appearance – Themes“.

Click “Add New Theme“.

Click “Upload Theme“.

Click “Choose File” and browse the “themes” directory until you find the file exertio-child.zip.

Select the file and click “Open“.

Click “Install Now“.

Once installation is completed, click “Activate“.

You will see that Exertio child theme is now active.

To visit your new website, click “Visit Site“.

Our new website looks identical to the previous one. This is because the child theme is using all the files from the parent theme. Until we modify the child theme files, they always look the same.

Lets continue to complete our child theme installation. We will copy the “template-parts” folder from the parent theme directory to the child theme directory. Lets prepare the files. Go to the “themes” folder and navigate until you see the exertio.zip file. Right click on the file and select “Extract all…“. Accept the default directory and click “Extract“.

Wait until the extract is completed.

You will get the “exertio” directory. Browse inside this directory until you see the “template-parts” folder.

Right click on this folder and select “Compress to ZIP file“.

Once completed, you will have the “template-parts.zip” file.

Create a new folder “additional” under the “wpressdev.com“. Copy this zip file and paste under the new folder.

Next, we need to upload this folder to our child theme folder. Go to Hostinger panel. Click “Files -> File Manager“.

Click “Access files of exertio.wpressdev.com“

Click “exertio-child” folder.

Click the up arrow button to upload the zip file.

Click “File“.

Select “template-parts.zip” file and click “Open“.

Once uploaded, you will se the “template-parts.zip” file.

Once uploaded, right click on the “template-parts.zip” file and select “Extract“.

Enter a single dot (.) inside the “Choose folder name” and click “EXTRACT“.

Once extracted, you will see the “template-parts” folder inside the “exertio-child” folder.

If you browse the “template-parts” folder, you will see all the folders and files. These are the files we will modify to customize our theme. Bravo! You have completed the installation of the Exertio child theme. While we are here, lets create a proper navigation menu for our website.

Select “Appearance -> Menus“.

Click “create a new menu“.

Name the menu “My Menu“. Use any name you want. Then click “Create Menu“.

A new “My Menu” is created. Lets add the menu entry. Click “View All” tab.

I select the following entry menu. Click “Add to Menu“.

Once added, our menu will look like below. Lets setup this menu as our main menu. Click checkbox “Exertio Menu” and click “Save Menu“. This menu will become our default menu on the website.

Lets rename the menu label “Home 2” to “Home“. Click a small drop down triangle on the top right corner of menu “Home 2“.

The menu expands to show more details. Change the word “Home 2” to “Home“. Then click “Save Menu“.

You can rearrange the menu entry by drag and drop the menu. In my case, I put the menu “Dashboard” as a second entry. Click “Save Menu“.

Visit your website and you will see the new menu at the top. Congratulations!

Next, we will create a few users. One user is an Employer (User01) and two users are Freelancers (User02 and Users03). Before we can do that, lets prepare some ‘products’ which will be used by the users.First we will add product categories. Go to “Products -> Categories“.

Enter “Freelance Package” then click “Add new category“.

Repeat the process until you have the following.

Now, lets add the product. Click “Products -> Add New“.

We will add Freelancer sign up package. This package will be assigned when user sign up as a freelancer. Enter the settings as below. Then click “Publish“.

Now we will create another package for Employer. When user sign up as Employer, this package will be assigned to them. Follow the settings below and click “Publish“.

Next we will add Wallet deposits. This is used by the Employer/Freelancer when they need to top up their Wallet. We will learn about Wallet as we go along. For now, just follow below settings and click “Publish“. Repeat the same process for wallet of USD250, USD500 and USD1000.

Next, we will add a product under “Exertio Service” category. Enter the following settings and click “Publish“. Make sure you select the correct category.

Once done, we will have the following products.

Next, we have to update the Exertio theme options to include certain settings based on the products we have added earlier. Click “Appearance -> Customize“.

Click “Employer“.

Click “Employer” again.

Scroll down until you see the “Select Package to assign“. Select “Employer Sign Up Package“. This is the package we created earlier.

While on the same page, lets setup the menu for the Employer. Make sure the fields are labelled properly. Some of them are already configured by default. Other likes “Custom Offers“, “SB Chat“, “Project Offers“, “Invitations” are not yet configured. To configure, just type in the value as shown.

If you scroll down, you will see more fields. Make sure they are configured as shown. Then click “Publish“.

Next, we will do the same for Freelancer. Go back until you see the “Freelancer” menu and select it.

Click “Freelancer” again.

Assign the package as shown. If you remember, this is the package we created earlier when user sign up as Freelancer.

Then, we setup the menu as we did for the Employer. There are the menu for Freelancer on their dashboard. Make sure all fields are labelled properly.

Once done, click “Publish“. Congratulations! We will revisit some of the theme options as we go along. Click “X” to exit the page. Now we are ready to create the users.

Go to your Exertio website. Select “Register” button at top.

Lets register “User01” which is an Employer. Select “Employer” button. Enter the information as below. In my case, the user information is as below.Username : Employer

User ID : user01

Email : user01@exertio.wpressdev.com

Password : <your-password>

Click “I agree to the Terms and Conditions” checkbox. Click “Create Account” button.

Once successful, you will be directly to Employer dashboard. By default, the user will have “$0.00” in their wallet.

Lets activate this account. Open “Outlook” email application. Navigate to user account “user01@exertio.wpressdev.com“. If you do not see the activation email in your inbox, it is probably inside the “Junk” folder.

Open the “Junk” folder. Right click on the email and select “Junk -> Not Junk“.

Select “Always trust email from noreply@exertio.wpressdev.com” and also check the box next to the “user01@exertio.wpressdev.com“. Click “OK“.

Right click on the activation email and click “Copy Hyperlink“.

Open you browser and paste the link as shown, then press “Enter“.

You should see the account activation message.

Repeat the same process for user01 for Freelancer #1 and user02 for Freelancer #2. Make sure you select the “Freelancer” button during registration.Freelancer #1 / Freelancer #2

Display name : Freelancer 01 / Freelancer 02

Username : user02 / user03

Email : user02@exertio.wpressdev.com / user03@exertio.wpressdev.com

Password : <your-password> / <your-password>

Once completed, you can check the users from the backend. Go to “Users -> All Users“. Your users should look like below. We have user01 as an Employer, user02 and user03 as Freelancers. Bravo! While we are here, lets take note the User ID for all the 3 users.

Hover your mouse over the “user01” and you will see the User ID of “user01” on the status bar. In this case “user01” User ID is “15”. Lets do the same for “user02” and “user03”. On my website, I get the following info. You might get different values. That is fine.Employer (user01) : 15

Freelancer #1 (user02) : 16

FreeLancer #2 (user03) : 17

WordPress is using MySQL database to store its information. This database is also used by Exertio theme to create new tables and store its information.To access this database, go to Hostinger panel and click “Database -> Management“.

As you can see on the left, these are the tables used by WordPress. The one highlighted in red is created by Exertio when we installed the themes. These are the tables will be used by Exertio as well as the default tables installed by WordPress.

For example, when user registers on our website, the information is stored inside “wp_users” table (which is the default table installed by WordPress). Exertio theme will use this table to store the user login, password and their email addresses.

If you scroll the table to the right, you will see more information about the users, for example whether they are Employer or Freelancer.

If we click on one of the Exertio table, for example “wp_exertio_project_bid“, we will see that the table is currently empty. That is true because Employer have not yet submitted any project. Once Employer submits projects, the information will be added here. As Freelancers start biding on the project, the table is updated with new information. We will investigate this as we progress. For now, it is good to know that Exertio is using their own tables for specific information as well as using the default WordPress tables.

Below shows the “wp_exertio_project_offers“. Currently it is empty. Project offer is a feature where Employer can offer a project to Freelancers.Lets take an example. An Employer submit a project “I need an eCommerce website“. He sets the price at $100 for 10 days implementation. Freelancer #1 send a proposal for $250 for 20 days. Employer can see Freelancer #1 proposal as well as other proposals from other Freelancers. Since he like Freelancer #1 proposal but quite constraint on the budget, he send an offer for example, $150 for 15 days.

The table “wp_exertio_project_offers” will capture this information. Do not worry. We will investigate this as we progress.

Congratulations! We have look at a simple database structure of Exertio theme. We will investigate deeper as we progress. Hang on there. Next we will install additional plugins and software to assist our customization efforts.

We will require additional plugins and tools to aid our customization efforts. I suggest we install the following software.

1. Notepad++ – Use this to find and locate certain string from the theme files
2. Sublime Text – Use this to view and update the php file

Please download and install them.

On top of these, I suggest we install additional WordPress plugins.

1. Duplicate Page – Use this to duplicate page/post
2. SVG Support – Support SVG file on our website

To install plugins, go to “Plugins -> Add New Plugin“.

For duplicate page plugin, search “Duplicate Page“. Click “Install Now” then “Activate“.

For svg support plugin, search “SVG Support“. Click “Install Now” then “Activate“.

Lets dive into our first investigation. Let see the Employer and Freelancer dashboard when the user login.Login as Employer using user “user01“.

You will be taken to the Employer dashboard. Scroll down until you see “Current Plan Details” on the right side. If you look carefully, the “Project Bump up” parameter is missing a value. This value should be the same as the setting we set for “Employer Sign Up Package” we did earlier.

Lets verify the setting for “Employer Sign Up Package” from the “Products” menu. I extracted the value and for “Project Bump up” the value is set to “5“. Yet the Employer dashboard value is empty or none. Let verify the setting for Freelancer user “user02“. Login as “user02“.

For Freelance #1 (user02), the value matches from the “Freelancer Sign Up Package” setting. We need to investigate why Employer’s “Current Plan Details” does not match the settings from the package assigned.