Create a Freelancer Website - Direct Client Freelancing

You can create your own freelancing platform. Earn from your direct client, not via Upwork or Fiverr.

Let's go to set the platform.

You have to obtain the following services.

1) A domain name

2) A hosting service

3) A billing system (WHMCS)

3) A payment gateway (PayPal or Stripe)

* I tested here with WHMCS version 7.10.3 

freelancer website


When you have the above resources handy, you can start creating your earning platform.

Install and configure basic WHMCS settings

1) Configure general settings

2) Create a Product Group (WHMCS Admin > Setup > Products/Services > Products/Services >Create a New Group)

Product Group Name: Create a Website

Product Group Headline: I will create a responsive WordPress website

Product Group Tagline: I will design your site by using a Genesis-Pro premium theme, you choose any theme from Studio Press (www.studiopress.com/themes/)

Order Form Template: Use Specific Template > Pure Comparison

Save Changes

3) Create your first product (WHMCS Admin > Setup > Products/Services > Products/Services >Create a New Product)

Product Type: Other

Product Group: Create a Website

Product Name: Quick Website

Module: No Module

Hidden: No

Product Description:

Basic Website<br />
Delivery in just one hour<br />
WordPress CMS installation<br />
Premium theme installation without customization<br />
All administrative access details delivered in your email<br />
<br /><br />
* Client provides domain and hosting service (Hosting account login details)<br />
* Delivery time depends on or after receiving job details from client

Pricing: One Time (10 USD)

Save Changes

4) Create your second product (WHMCS Admin > Setup > Products/Services > Products/Services >Create a New Product)

Product Type: Other

Product Group: Create a Website

Product Name: Managed Website

Module: No Module

Hidden: No

Product Description:

Completely Managed Website<br />
Long term contract (monthly pay)<br />
Delivery in 3 days only<br />
WordPress CMS installation<br />
Premium theme installation and customization<br />
I will provide domain, hosting, and necessary resources<br />
Ongoing support about creating new page, product, etc. (thanks to my helping hands)<br />
<br />
* Delivery time depends on or after receiving job details from client

Pricing: One Time Setup (50 USD)
               Monthly Recurring (20 USD)

Save Changes

5) Create your third product (WHMCS Admin > Setup > Products/Services > Products/Services >Create a New Product)

Product Type: Other

Product Group: Create a Website

Product Name: Premium Website

Module: No Module

Hidden: No

Product Description:

Professional Website<br />
Delivery in 3 days only<br />
WordPress CMS installation<br />
Premium theme installation and customization<br />
All administrative access details delivered in your email<br />
<br /><br />
* Client provides domain and hosting service (Hosting account login details)<br />
* Delivery time depends on or after receiving job details from client

Pricing: One Time (50 USD)

Save Changes

6) Create another One Product Group for Hosting product (WHMCS Admin > Setup > Products/Services > Products/Services >Create a New Group)

Product Group Name: Web Hosting

Product Group Headline: 99.9% Uptime, industry-leading reliability of service and content delivery with global network of caching data center

Product Group Tagline: If you are not fully satisfied with our web hosting plans, we will issue a refund in 30 days

Order Form Template: Use Specific Template > Premium Comparison

Save Changes

7) Create a hosting product (WHMCS Admin > Setup > Products/Services > Products/Services >Create a New Product)

Product Type: Shared Hosting

Product Group: Web Hosting

Product Name: Unlimited Hosting

Module: No Module

Hidden: No

Product Description:

DirectAdmin Control Panel<br />
Unlimited Space*<br />
Unlimited Bandwidth*<br />
Unlimited Websites*<br />
<br />
* Billed quarterly (10 USD /month)

Pricing: Quarterly (30 USD)
  Prorata billing

Save Changes

 

Remove Domain Registration section from homepage

Remove the below codes from /template/six/header.tpl

 {if $templatefile == 'homepage'}
    <section id="home-banner">
        <div class="container text-center">
            {if $registerdomainenabled || $transferdomainenabled}
                <h2>{$LANG.homebegin}</h2>
                <form method="post" action="domainchecker.php" id="frmDomainHomepage">
                    <input type="hidden" name="transfer" />
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                            <div class="input-group input-group-lg">
                                <input type="text" class="form-control" name="domain" placeholder="{$LANG.exampledomain}" autocapitalize="none" data-toggle="tooltip" data-placement="left" data-trigger="manual" title="{lang key='orderForm.required'}" />
                                <span class="input-group-btn">
                                    {if $registerdomainenabled}
                                        <input type="submit" class="btn search{$captcha->getButtonClass($captchaForm)}" value="{$LANG.search}" />
                                    {/if}
                                    {if $transferdomainenabled}
                                        <input type="submit" id="btnTransfer" class="btn transfer{$captcha->getButtonClass($captchaForm)}" value="{$LANG.domainstransfer}" />
                                    {/if}
                                </span>
                            </div>
                        </div>
                    </div>

                    {include file="$template/includes/captcha.tpl"}
                </form>
            {else}
                <h2>{$LANG.doToday}</h2>
            {/if}
        </div>
    </section>
    <div class="home-shortcuts">
        <div class="container">
            <div class="row">
                <div class="col-md-4 hidden-sm hidden-xs text-center">
                    <p class="lead">
                        {$LANG.howcanwehelp}
                    </p>
                </div>
                <div class="col-sm-12 col-md-8">
                    <ul>
                        {if $registerdomainenabled || $transferdomainenabled}
                            <li>
                                <a id="btnBuyADomain" href="domainchecker.php">
                                    <i class="fas fa-globe"></i>
                                    <p>
                                        {$LANG.buyadomain} <span>&raquo;</span>
                                    </p>
                                </a>
                            </li>
                        {/if}
                        <li>
                            <a id="btnOrderHosting" href="cart.php">
                                <i class="far fa-hdd"></i>
                                <p>
                                    {$LANG.orderhosting} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a id="btnMakePayment" href="clientarea.php">
                                <i class="fas fa-credit-card"></i>
                                <p>
                                    {$LANG.makepayment} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a id="btnGetSupport" href="submitticket.php">
                                <i class="far fa-envelope"></i>
                                <p>
                                    {$LANG.getsupport} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{/if}

 

Disable WHMCS Update

1) Disable update (WHMCS Admin > Setup > Staff Management > Administrator Roles) 

Edit "Full Administrator"

   Update WHMCS = No

WHMCS design edit steps:

1) homepage.tpl at whmcs template (six) folder

<link type="text/css" rel="stylesheet" href="/templates/orderforms/pure_comparison/css/style.css" property="stylesheet" />

<div class="row row-product-selection">
    
    <div class="col-xs-12">

        <div id="order-pure_comparison" class="page-container">
            <div class="txt-center">
                <h3 id="headline">
                                            I will create a responsive WordPress website
                                    </h3>
                                    <h5 id="tagline">
                        I will design your site by using a Genesis-Pro premium theme free for you, choose any theme from www.studiopress.com/themes/
                    </h5>
                                            </div>
            <div id="products" class="price-table-container">
                <ul>
                                            <li id="product1">
                            <div class="price-table">
                                <div class="top-head">
                                    <div class="top-area">
                                        <h4 id="product1-name">
                                            Quick Website
                                        </h4>
                                                                                                                    </div>
                                </div>
                                <ul id="productDescription1">
                                                                            <li id="product1-description">
                                            Basic Website<br /><br />
Delivery in just one hour<br /><br />
WordPress CMS installation<br /><br />
Premium theme installation without customization<br /><br />
All administrative access details delivered in your email<br /><br />
<br /><br /><br />
* Client provides domain and hosting service (Hosting account login details)<br /><br />
* Delivery time depends on or after receiving job details from client
                                        </li>
                                                                    </ul>
                                <div class="price-area">
                                    <div class="price" id="product1-price">
                                                                                    $10.00 USD One Time
                                                                            </div>
                                                                            <a href="/cart.php?a=add&amp;pid=1" class="order-button" id="product1-order-button">
                                            Order Now
                                        </a>
                                                                    </div>
                            </div>
                        </li>
                                            <li id="product2">
                            <div class="price-table">
                                <div class="top-head">
                                    <div class="top-area">
                                        <h4 id="product2-name">
                                            Managed Website
                                        </h4>

                                              <div class="popular-plan">

                                                <div class="plan-container">

                                                    <div class="txt-container">MOST POPULAR</div>

                                                </div>

                                            </div>

                                                                                                                    </div>
                                </div>
                                <ul id="productDescription2">
                                                                            <li id="product2-description">
                                            Completely Managed Website<br /><br />
Long term contract (monthly pay)<br /><br />
Delivery in 3 days only<br /><br />
WordPress CMS installation<br /><br />
Premium theme installation and customization<br /><br />
I will provide domain, hosting, and necessary resources<br /><br />
Ongoing support about creating new page, product, etc. (thanks to my helping hands)<br /><br />
<br /><br />
* Delivery time depends on or after receiving job details from client
                                        </li>
                                                                    </ul>
                                <div class="price-area">
                                    <div class="price" id="product2-price">
                                                                                                                                <span>$20.00</span>/mo
                                            <br>
                                                                                            <small>$50.00 Setup Fee</small>
                                                                                                                        </div>
                                                                            <a href="/cart.php?a=add&amp;pid=2" class="order-button" id="product2-order-button">
                                            Order Now
                                        </a>
                                                                    </div>
                            </div>
                        </li>
                                            <li id="product3">
                            <div class="price-table">
                                <div class="top-head">
                                    <div class="top-area">
                                        <h4 id="product3-name">
                                            Premium Website
                                        </h4>
                                                                                                                    </div>
                                </div>
                                <ul id="productDescription3">
                                                                            <li id="product3-description">
                                            Professional Website<br /><br />
Delivery in 3 days only<br /><br />
WordPress CMS installation<br /><br />
Premium theme installation and customization<br /><br />
All administrative access details delivered in your email<br /><br />
<br /><br /><br />
* Client provides domain and hosting service (Hosting account login details)<br /><br />
* Delivery time depends on or after receiving job details from client
                                        </li>
                                                                    </ul>
                                <div class="price-area">
                                    <div class="price" id="product3-price">
                                                                                    $50.00 USD One Time
                                                                            </div>
                                                                            <a href="/cart.php?a=add&amp;pid=3" class="order-button" id="product3-order-button">
                                            Order Now
                                        </a>
                                                                    </div>
                            </div>
                        </li>
                                    </ul>
            </div>

            
        </div>
    </div>
</div>

Then add footer shortcut featured menu to each orderforms template /templates/orderforms/each template/products.tpl

Add the below codes to end of each file

<div class="home-shortcuts">
        <div class="container">
            <div class="row">
                <div class="col-md-4 hidden-sm hidden-xs text-center">
                    <p class="lead">
                        {$LANG.howcanwehelp}
                    </p>
                </div>
                <div class="col-sm-12 col-md-8">
                    <ul>
                        {if $registerdomainenabled || $transferdomainenabled}
                            <li>
                                <a id="btnBuyADomain" href="domainchecker.php">
                                    <i class="fas fa-globe"></i>
                                    <p>
                                        {$LANG.buyadomain} <span>&raquo;</span>
                                    </p>
                                </a>
                            </li>
                        {/if}
                        <li>
                            <a id="btnOrderHosting" href="cart.php?gid=2">
                                <i class="far fa-hdd"></i>
                                <p>
                                    {$LANG.orderhosting} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a id="btnMakePayment" href="clientarea.php">
                                <i class="fas fa-credit-card"></i>
                                <p>
                                    {$LANG.makepayment} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a id="btnGetSupport" href="submitticket.php">
                                <i class="far fa-envelope"></i>
                                <p>
                                    {$LANG.getsupport} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

You can also edit some menus, and link your terms and conditions in footer.

Edit some words for correction menu item name ~/lang/english.php

Line 256,262,406,746,1312,1635,1648,2143,2159

Additionally, create some knowledgebase articles for legal terms, privacy, etc.

Link the legal terms to footer as the example code below to /templates/six/footer.tpl

footer copyright replace with:         <p><span>{lang key="copyrightFooterNotice" year=$date_year company=$companyname}</span><span>&nbsp;</span><span><a href="{$WEB_ROOT}/">Home</a></span><span>|</span><span><a href="{$WEB_ROOT}/knowledgebase.php?action=displayarticle&id=1">Privacy Policy</a></span><span>|</span><span><a href="{$WEB_ROOT}/knowledgebase.php?action=displayarticle&id=2">Payment & Refund Policy</a></span><span>|</span><span><a href="{$WEB_ROOT}/knowledgebase.php?action=displayarticle&id=3">Acceptable Use Policy</a></span><span>|</span><span><a href="{$WEB_ROOT}/knowledgebase.php?action=displayarticle&id=4">Terms of Service</a></span></p>


Creating Custom Pages

You may need to create some pages for Terms, Privacy, etc.

Creating a new page is simple with just two things, firstly create the page's php file (eg: privacy.php) with a few necessary code and put it to whmcs root folder (/public_html/privacy.php), secondly create a tpl file (eg: privacy.tpl) for the page's html content and put it to templates folder (/templates/six/privacy.tpl)

Below is the sample code for privacy.php

<?php

use WHMCS\ClientArea;

define('CLIENTAREA', true);

require __DIR__ . '/init.php';

$ca = new ClientArea();

$ca->setPageTitle('Privacy Policy');

$ca->addToBreadCrumb('index.php', Lang::trans('globalsystemname'));

$ca->addToBreadCrumb('privacy.php', 'Privacy Policy');

$ca->initPage();

$ca->setTemplate('privacy');

$ca->output();

Below is the sample html for privacy.tpl

<h1>Privacy Policy</h1>

<p>This is a sample privacy policy content, you can edit this content to match your site's privacy policy.</p>

____________________________

Now the design is ready. Configure a payment gateway, and start your freelancing services.

Post a Comment