How to make a WordPress Website in 99 minutes

This is a Step-by-Step tutorial on how to make a wordpress website. By the end of this article you will have made a fully fledged wordpress website with a Home, About Me, Contact Us and a Blog page. You will learn how to choose a hosting provider, select a domain name, install wordpress on your website, upload your photos/videos and configure your website.

Time taken to complete this task: 99 – 140 minutes

Prerequisites: None

What your website will look like after completing this tutorial: http://vikramsdemosite.com/myDemoWebsite/

There are 2 ways to complete this tutorial. First way is to ONLY watch the FULL YouTube video of the tutorial (embedded on this page). The second way is to complete this tutorial in parts. Apart from a massive 144 minute YouTube video, I have divided the same video into 10 parts so you can consume the content step-by-step. All of these videos are embedded on this page along with useful text descriptions and the occasional screenshot to clear things up. I leave this choice upto you. The meat of the learning is in watching the videos. I have deliberately explained every menial thing that I do while creating the website so you can latch onto the thought process and methodology of creating websites.


The FULL video tutorial:

 

 

The learning road map…or ‘Table of Contents’:

The respective time stamp range is provided next to the task.

Register a domain name & get hosting: 0:00 – 15:33
cPanel & Installing WordPress: 15:36 – 22:25
Install a WordPress Theme, Create Homepage: 22:27 – 32:07
Adding Logos: 32:11 – 40:17
Customize Slider/Adding Pages/Image Galleries/Embed YouTube Videos: 40:21 – 1:01:47
Adding Blogposts & Portfolio Items: 1:01:50 – 1:25:01
Adding Icon Menu/Finishing up the Homepage: 1:25:08 – 1:33:30
Adding Contact form/Embed Google Maps/Install Facebook Plugin/configuring the sidebar: 1:33:36 – 1:51:40
Adding a Multilevel Menu: 1:51:45 – 1:56:20
Add Login Page/Configuring the footer/Add a Favicon/Conclusion: 1:56:24 – 2:21:43

 

IMPORTANT NOTES:

Hostgator Coupon Code: CHEAPGTR11

Hostgator: http://www.hostgator.com
Virtue WordPress Theme: http://www.kadencethemes.com/product/virtue-free-theme/


For those of you who want to watch the video in parts and follow along with some text and screenshots, proceed ahead:

Introduction

You will never learn what you are about to read in any university or high school. Computer science courses in university focus on teaching you how to program websites. You learn HTML, CSS, JavaScript and PHP/Python. Most websites in the world use these technologies, so these are useful skills to learn. But in college you have only one semester to learn all this. This means that all the focus is on learning how to code. You practice your web development skills on the university machines which take care of storing your webpages on a server. They provide you with a nifty little tool to edit and upload  your code on the cloud and all you have to do is refresh the page to see the changes you have made.

All this is fine but this is only half the picture.  It is only when you come to the industry or when you want to launch a real world website when questions like..

“ok, how do i register a .com website?”

or

“ok.what is server hosting and how do i get it?”

..come to mind. This is VITAL real world information which is left out of university education. Mainly because you need a credit card to register a domain name, ie, a “.com” website and most 18 year old university students do not have credit cards.

Registering a domain name, getting hosting, configuring the DNS, migrating code and managing databases are essential tasks that need to be performed when you want to make a website. Fortunately, these are simple to learn and it takes less than a day to get familiar with these technologies. A week if you don’t know the difference between DNS and HTTP.

You will learn all this as we go over the steps leading to creating your own website.

Having your own website adds tremendous professional pedigree to your online profile. Surely, “yourname.com” sounds better than “yourname.wordpress.com” or “yourname.blogspot.freedomain.mycoolfreesite.com”. :p

Read on to find out how to make your very own website on a domain name of your choice.

 

Choosing a hosting provider

or “How to choose a web host for my website?”

or “Where will my website live?

First off, who exactly is a web host. A web host or hosting provider is a server (usually a bunch of servers) which store all the files and databases which constitute your website. A server is just a technical term for an industrial computer whose purpose is to interact with other computers by responding to their requests for data. For example, Facebook stores all the data (profile pics, wall posts, albums, sharing preferences etc) associated with a profile on its servers. Whenever you click on your profile button, your browser sends a request to the facebook server where your profile information is stored asking for your profile page. Upon receiving this request, the FB server responds to your browser by sending it your profile page with all the data (like first post, profile info etc) and your browser formats the appearance and presents it to you. Facebook owns thousands of such servers which it places in the same room and calls it a “data center”.

A web host or hosting provider also owns many such servers in a data center where it stores website data for thousands of websites. If you want to have a website, you HAVE to rent space at some web host. Alternatively, you could convert your computer into a server and save on hosting fees but when you turn your computer off, your website also shuts down. Inconvenient.

Fortunately for us, there are plenty of web hosts. Some good, some awful. Based on my experience, the best web hosts are the ones with excellent customer service. You don’t want to pay for a cheap host and then have to cluelessly run around trying to figure out how to add a subdomain and do the most basic of website maintenance tasks (or worse when you accidentally break your website and need an expert to revert to your old site).

One web hosting provider which provides excellent customer service at a cheap price is Hostgator. These guys have been around for a long time. They have a 24×7 LiveChat service manned by web engineers who patiently solve even the most ridiculous of requests. From database maintenance to website recovery to simple tasks like spoonfeeding you the process of creating an email account are carried out by these blessed customer service reps at Hostgator. I have registered  tens of domain names with Hostgator and introduced many clients to them. In the past 4 years or so, there hasn’t been a single downtime issue.

If you are serious about having your own website, then you must get hosting. Go to the Hostgator website and move on to the next Step to learn how to purchase hosting and create a domain name.

Part 1/10: Register a Domain Name & Get Hosting

After completing this section you will have registered a domain name and acquired hosting with Hostgator.

See the video of Part 1/10 here:

Go on to the Hostgator website and you should see something like in the screenshot below in Figure 1. Click on the blue “WEB HOSTING” button located leftmost in the top menubar as shown below:

The Hostgator homepage. How to make a wordpress website.

Figure 1: The Hostgator homepage. Click on ‘Web Hosting’ as demarcated by the red rectangle.

You should now be taken to a page which displays the various web hosting plans as shown below in Figure 2. The three options provided are the Hatchling Plan, the Baby Plan and the Business Plan.

We will go for the Baby Plan.  This offers the best deal for beginners. With the Baby Plan, you can register unlimited domains, have unlimited bandwidth and disk space for your files. All for $6.36 per month (this may change depending upon when you are reading this). I have the Baby Plan and have more than 10 domains registered on it. The Hatchling plan is no good since it only offers disk space for a single domain, means that you will have to pay extra money for hosting if you want to register another domain. The Business Plan is over kill for now.

In the dropdown box for the Baby Plan, there are many payment schemes available like:

– Starting at $6.36/mo

– 3 year – $6.36/mo

– 2 year – $7.16/mo

– 1 year – $7.46/mo

– 6 months – $7.96/mo

-Monthly – $7.96/mo

Out of these options, the Monthly payment of $7.96/month is the best bang for the buck. You may pay the highest amount per month, but you do not have to pay a lump sum for 6 months, 1 year or 3years! If you choose the 3 year – $6.36/mo, then you have to pay an upfront price of $228.96 at one go! The recurring monthly payment allows you to ‘try out’ having your own website and hosting space. If you get bored after 3 months, you can cancel your hosting service having paid only for 3 months. See Figure 2 below, choose Monthly – $7.96/mo and click on the yellow Order Now button.(NOTE: The cost per month may have changed depending when you are reading this)

Hostgator Baby Plan. How to make a wordpress website.

Figure 2: Choose the Monthly recurring amount for the Baby Plan. Click Order Now to continue

 

Now comes the fun part. You get to choose your domain name! After clicking ‘Order Now’, you should be taken to the signup page which looks something like in Figure 3.

Hostgator order wizard

Figure 3: Hostgator order wizard

This is the HostGator Order Wizard where you get to choose your domain name (the thing that comes after “www.” and before “.com” :p. www.facebook.com is a domain name) and you give your credit card details and you are done. Since it is a long page, I have taken multiple snapshots to walk you through the process of signing up.

First off, choose “Register a new domain”, then enter the domain name which you want in the text box and choose any TLD like .com or .net or .org. You may choose .com for now as it is the most common TLD (top level domain). Sometimes, a domain may have already been registered by someone else, so you may have to come up with a unique name. Once you have chosen a domain name, scroll down and choose your package type, billing cycle, a username and a security pin. Figure 4 shows you what I have filled up.  For the package type, choose Baby  and for the Billing Cycle, choose 1 Month @ $…. 

Hostgator package type

Figure 4: Hostgator package type

 

 

Now scroll down further and enter your billing information. Look at Figure 5 to see what I have done. Make sure you enter a correct email address. Your website login details and domain name information will come to this email.

Hostgator Billing Information

Figure 5: Hostgator Billing Information

 

Next, you will see the section on HostGator addons. Make sure every checkbox is unchecked. These are addons like Domain Privacy Protection, Site Backup, SEO etc which you need not concern yourself with right now. Just uncheck all the boxes, see what I have done in Figure 6 and move on to the next section.

Hostgator addons

Figure 6: Hostgator addons

 

Next, you will have to enter a Coupon Code if you have any. The default coupon code SNAPPY is already applied and it claims to give you a discount. NO IT DOES NOT. Hostgator gives out tons of coupon codes with massive sign up discounts compared to the default one. Go ahead and apply the coupon code CHEAPGTR11 and see a massive discount of over $8 to your total price! Figure 7 shows you the price with the SNAPPY coupon code and Figure 8 shows you the massively discounted price with CHEAPGTR11.

 

Figure 7: SNAPPY Coupon Code

Figure 7: SNAPPY Coupon Code

 

Use the coupon code CHEAPGTR11 as shown in Figure 8 below. As you can see, you now have a discount of $11.99. For the first month you will pay just $0.01. If this doesn’t work, you can also use VKRMHOST12.

 

Figure 8: Coupon code CHEAPGTR11 gives a massive discount

Figure 8: Coupon code CHEAPGTR11 gives a massive discount

 

Next, just click on the yellow CREATE ACCOUNT button. You will be redirected to the success page. Within 5-10 minutes, you will receive an email from Hostgator providing you with details of your newly registered domain name. See Figure 9 for what this email will look like.

 

Figure 9: Email from Hostgator with important info on the newly registered domain name.

Figure 9: Email from Hostgator with important info on the newly registered domain name.

 

It mentions:

– Your Billing System backend which stores the monthly invoices for your hosting account.

– Your control panel login details. This is where you will spend all your time. The control panel, or cPanel, is the backend of your website. In the cPanel, you will be able to create databases, install wordpress, upload files to your website and perform administration tasks like redirection.

– Your name server address. This is the address of the server which resolves your domain name to an IP address.

-Server IP: This is the IP address of the server where all the files for your website will be stored.

 

IMPORTANT NOTE: Your domain may take 24-48hours to fully propagate across the web. This means that if your website does not open, just clear your browser history and cache and keep refreshing the page. Either you page may not open or you will get a message from Hostgator saying that it will take 24-48 hours for your domain name to propagate across all the DNS servers around the web. Since this is a new domain, all the name servers have to be notified of a new website and have to update their directories accordingly. This is carried out automatically by Hostgator, so feel free to move on to the next section where you will install wordpress on your website and create a Home page, add a blog post, upload a photo/video and create many boilerplate pages like Contact us etc. 

 

Part 2/10: Installing WordPress on your website

After completing this section you will get acquainted with cPanel and will install wordpress on your website through one-click QuickInstall. You will then proceed to login to your wordpress website, take a short tour of the dashboard and change your password. 

See the video here:

Click on the Control Panel link you received in the email from Hostgator and login with your username and password. The login page of Hostgator looks like the one in Figure 10 below.

Figure 10: The cPanel login page

Figure 10: The cPanel login page

 

After you enter your login details, you will see the cPanel backend as shown below in Figure 11.

 

Figure11: The cPanel backend after logging in

Figure11: The cPanel backend after logging in

 

Scroll below till you see the section titled ‘Software/Services’. Under that section, click on ‘QuickInstall’. See Figure 12 below to get some clarity.

Figure 12: Click on QuickInstall under Software/Services in the cPanel

Figure 12: Click on QuickInstall under Software/Services in the cPanel

QuickInstall is a service which takes of installing WordPress on your website with one click. You may use ‘Fantastico Deluxe‘ as well but we will stick to QuickInstall since it is easier to work with and comes pre-installed with your Hostgator package.

You will now be taken to the QuickInstall page. Once there, look for ‘WordPress‘ under ‘Blog Software‘ from the menu on the left. See Figure 13 for clarity.

 

Figure 13: Click on 'Wordpress' under 'Blog Software'

Figure 13: Click on ‘WordPress’ under ‘Blog Software’

 

The WordPress section will show up on the right page area. If you haven’t heard about WordPress, it is a blogging software which enables you to create blog posts and pages. Millions of businesses and people over the world use WordPress for blogging and creating their websites.

WordPress is a web software you can use to create a beautiful website or blog. We like to say that WordPress is both free and priceless at the same time.

Basically, it is free, powerful and easy to use.

Click on ‘Continue‘ to proceed with the installation. Figure 14 clears it up.

 

Figure 14: Click 'Continue' to the next section of the WordPress installation

Figure 14: Click ‘Continue’ to the next section of the WordPress installation

 

 

The final section opens up where you will enter information pertaining to:

– The website where you want to install WordPress (choose from the dropdown box)

– The Admin email id (very important)

-Blog title

– Admin username

– First and Last Names

See Figure 15 for clarity. Most importantly, choose your domain name in the Application URL (where you will find the app in your browser). Do not enter anything in the textfield after the “/”. That is for installing WordPress in a sub-domain. A sub-domain is something like “mySubDomain.vikrambahl.com”. You want it installed in your main website, so leave that blank.

Click ‘Install Now’ and you are done. A progress bar will show up and WordPress will begin installing on your domain. Sit back and wait for it to finish (may take from 1-5mins) depending upon your speed.

 

Figure 15: Enter domain name and user information for the WordPress installation

Figure 15: Enter domain name and user information for the WordPress installation

 

And done! A Congratulatory message will show when the installation has completed. Further, an email will be sent to the address provided in the Admin email field. It will contain the URL to login to your WordPress website and the login username/password. Save this email. Moreover, login URL and login info is also displayed below the congratulatory message. See Figure 16 for clarity. My URL will be different from yours, so just ignore the ‘http://vikramsdemosite/blahblah/wp-admin’ you see.

 

Figure 16: WordPress has installed! The login details are shown and sent to your Admin email as well.

Figure 16: WordPress has installed! The login details are shown and sent to your Admin email as well.

PART 3/10: Install a new WordPress Theme & Create a Homepage

After completing this section you will have installed a new theme and created you first page – the Homepage!

See the video here:

 

PART 4/10: Add a logo to your website

After completing this section you will have added your own logo to the website and will learn how to upload images to your wordpress.

See the Video here:

 

PART 5/10: Add Slider, Create Pages, Add Images/Image Galleries & Embed YouTube Videos

After completing this section you will have:

– added a customized slider to the homepage
– added 3 pages
– added images to your pages
– added an image gallery to your page
– embedded a video from youtube to your page

See the video here:

 

PART 6/10: Adding Blog posts & Portfolio pages of your creative work

After completing this section you will have:

– added blog posts with image sliders to your website
– created portfolio pages to display your projects, creative work etc.

See the video here:

PART 7/10: Adding Icon Menu & completing the Homepage

After completing this section you will have:

– added icon menus to the homepage to display features related to the website you are making
– completed customizing the homepage to include blogposts, portfolio slideshow and an icon menu

See the video here:

PART 8/10: Contact forms, Embed google maps to your page, add a Facebook ‘Like’ box & configure the sidebar

After completing this section you will have:

– added a contact form to your contact us page.
– embedded a google map to your page to display your address.
– install the Facebook plugin and add a ‘Like’ box to your facebook page on your sidebar
– create and customize your sidebar

See the video here:

 

PART 9/10: Add a multi-level menu

After completing this section you will have:

– added a multi-level menu to your website.

See the video here:

PART 10/10: Customize footer area, add a favicon & a login page

After completing this section you will have:
– customized the look and placement of the main menu.
– added a ‘login’ page to your website using the ‘Theme My Login’ plugin for wordpress
– customized the footer area of the website
– added a favicon to your website

See the video here:

, , , ,

8 Responses to How to make a WordPress Website in 99 minutes

  1. Steven T June 17, 2014 at 7:27 am #

    awesome work, man!
    quick question,

    how would I make the width for body text on the blog posts more narrow? like 66 characters per line.

    • Vikram Bahl June 17, 2014 at 2:53 pm #

      Hi, you can do this easily by editing your custom stylesheet.

      Go to Appearance -> Editor and choose custom.css from the list of files from the right.

      Then enter this CSS code in custom.css:

      .entry-content
      {
      width:80%;
      }

      You can play around with the percentages depending on what you want. Your css class name may not be “entry-content”. So to find out what your blog post class name is, right-click on the blog post text and choose ‘Inspect Element’ if you are on Chrome. Hover over the HTML elements till only the text of the blog post is highlighted blue. Note down the class name of the in the

      section.
  2. http://translate.google.cn/ September 30, 2014 at 4:22 pm #

    I think that is among the most vital info for me. And i am glad reading your
    article. However want to remark on few basic things, The website style is wonderful, the articles is actually nice :
    D. Just right job, cheers

  3. Connie T March 4, 2015 at 1:08 am #

    Virtue is one of my favorite themes; thank you so much for this clear tutorial. I learned a couple things about customizing the theme that I didn’t know previously. Fantastic directions. Thanks!

  4. Swapna August 8, 2016 at 6:14 pm #

    Hi, where can I pick your brains?

    Nubee

    • Vikram Bahl August 31, 2016 at 2:37 pm #

      hey, how can i help?

  5. Caroline Goodall December 9, 2016 at 1:51 pm #

    Hi Vikram,

    Thank you so much for the virtue theme tutorial – it’s brilliant!

    I’ve almost completed my first website (thanks to you) but unfortunately have come across a problem that I hope you can help me resolve.

    I have added pages to my website with galleries by following your tutorial.

    I am now adding more pages with galleries in exactly the same way, however the gallery thumbnails are now blurred while the enlarge lightbox view is perfect. (Page Windows)

    I have done much research and have installed thumbnail resizer and applied it to the images. But it has not worked.

    I have also edited the thumbnail size to 0 and then to the full pic view size, but again no joy.

    I have also deleted the page completely and started again.

    If you could suggest anything that may work I would be most grateful Vicram.

    Yours sincerely

    Caroline

    If you have any suggestions

    • Vikram Bahl December 16, 2016 at 3:28 pm #

      Hi. I think it could be an image size issue. Have you tried uploading the images as per the size specified? I check out your website and the gallery seems fine. Can you post link to the malformed page?

Leave a Reply

Max level reaching...

%d bloggers like this: