How To Build A Website From Scratch
In this era of digitization, online platforms are the best ways to start a business and grow it. In today’s world, people are more accustomed to their smartphones, tablets and computers. Everything in our daily lives is oriented to the internet. We do everything such as order food online, request a ride share, shop online etc. via the internet. As a result, millions of hours worldwide are spent on the internet every day which has made online platforms such as websites very popular for business. There are many platforms and ways to create a website. WordPress is currently the world’s best content management system (CMS) to build a website from scratch. For the amateurs at WordPress and who are willing to learn more on how to build a website from scratch using this platform, we have put together this article to help you out. So let’s get started!
There are essentially Nine steps of building a website
A systematic guide on how to build a website from scratch on WordPress
1. Purchasing the domain and hosting:
Let’s kick off this article on how to build a website from scratch by initiating with domain and hosting. To those who are new to the realm of building a website, domain and hosting may seem like unfamiliar terms. Don’t panic; we’re here to help. Hosting is a server that’s always active 24/7, which holds all the information, like your website contents. And a domain is the name of your website; for example, Youtube’s domain is youtube.com.
So to reserve your spot on the internet servers, you must purchase the hosting from some reliable hosting companies that provide good compatibility with WordPress, reasonable pricing and faster loading speed that can survive traffic hampers. Some of the reliable hostings are A2 hosting, Hostgator, WPX Hosting, SiteGround, Bluehost, NameHero, Namecheap, WP-Engine and Cloudways etc. They provide you with a different type of plans which you could choose from as per your requirement.
So after selecting your preferred plan, you will have to fill in a form. This form will require you to choose the domain name (which as mentioned above would be the name of your website) and it will show you the availability of the domain name and you can purchase whichever plan that suits you. After you are done purchasing the domain and the hosting plan, you can move on to the next step.
2. Installing WordPress:
Now that you are done with step one, it’s time to install WordPress. This is probably the most important step in building a website from scratch. To do that you need to first login to the hosting. After logging in, you will find menu bar provided by the hosting where you can find the option to open your cPanel where you will find WordPress Tools, under which you will find the option “WordPress Installer”. After you click on the WordPress icon, you will find a page where you will be asked to fill in some information, such as the domain name, blog post name or site name or password etc. After filling in the information, click on the button that reads “Install” and it will take you about a minute or less for it to finish installing and then you are set to go.
3. Installing the theme and Page Builder:
To begin with entering the URL of your website using the domain name, where you will find a basic default theme that is provided by WordPress. So you will have to change this theme and in order to do that first, you need to login to your WordPress dashboard. To do that just put a slash ( / ) after your domain name and write “wp-admin” and press enter. This will lead you to a login page where you have to put in the username and password which you had either typed in or were provided with after the installation of WordPress. After you logged in, you will see an option at the left side of the screen under Dashboard which reads “Appearance”, just click on it. After you click on the Appearance option, it will show you more options for selection and just click on the themes option and it will show you the list of themes and also the default theme that is present at your site.
You can change your theme to your preference, and to do that you will find a prompt on the page saying “Add New” where if you click, it will take you to another page where there are tons of themes available and just choose a theme as per your liking.
Studiopress is a leading theme provider on the market. StudioPress themes are built with the Genesis framework, which works smoothly with the new WordPress editor, Gutenberg. StudioPress themes are currently part of the WP Engine family; the leading managed WordPress hosting providers. You can either purchase their products separately or get all themes as a bundle for a one-time payment.
Elegant themes have been building the world’s most popular themes for the past 10years. After purchasing their single membership, it allows you access to an entire collection of themes and plugins, which are regularly improved and maintained. It is very popular in WordPress professionals due to its efficiency and low costing.
Astra is also a very trustworthy site where you can get a variety of themes for your site. If you think that the free version isn’t quite doing the job for you, then you can always go try the Astra Pro version, which is the paid version that has very reasonable pricing. Astra is built in a way that makes it very time efficient which helps the user to work much faster time frame. It also provides a top-notch customer service, which is very fast to respond to any complaints or queries of the users. Plus it provides the most advanced features available and also you can access all the features under one panel, which makes it very user-friendly.
Themeforest is also a well-known theme site among WordPress users. It provides over 2500 premium quality of theme for your site. It’s known for its collection of different new themes. It has a very reasonable costing for themes and is very user-friendly. It also provides a 24/7 customer care service for its users.
Or if you don’t want to spend money on your theme, you can go to Themeisle, where you can find various themes for free that you can download then upload it to WordPress. You can find the option for “Upload Theme” after you click on the “Add New” option in the Theme section.
Once you are done changing the theme, it’s time to add a Page Builder to your WordPress. In order to add a Page Builder, you need to go to your Dashboard, under which there will be an option that reads “Plugins” where after you click you will see some default plugins that are already added to your WordPress. So to add the Page Builder, you need to click on the option which reads “Add New” at the top left side of the page, which will take you to another page where you will find a search bar at the top right corner. If you are a beginner to the process of building a page, then we suggest you look for the Page Builder “Elementor Page Builder” which is the free version.
Elementor Page Builder gives you a completely unique and independent interface for creating pages, posts and customize post types etc. Basically, when you click on the option from dashboard which reads “Pages”, you will find the “Add new” option. Once you click on it, you can type in the title and you will find an option that allows you to edit the page with Elementor, and then you can take over the page-editing process entirely. Elementor will allow you to edit the page any way you can imagine, and also it allows you to make the edits easily as there is user interface pace with various widgets.
As well as the front end editing system, which allows you to see the changes you make to the pages directly is very helpful. A side note, you can go to the pages and open the option named “All Pages”, where you will find a sample page provided by WordPress that you can delete and add all the pages that you want to include to your websites, such as Home, Contact, About etc.
However, the free version of Elementor doesn’t provide the user with every necessary facility according to their individual needs. Which is why we suggest the users who are willing to make their site perfect in exchange of spending a little more cash, “Elementor Pro Page Builder” version is the best place to start. Elementor Pro has an amazing additional feature which you don’t get in the basic free version of it. It has features such as animated headlines which allows you to customize your headlines according to your taste. It also has a blog post widget which is very customizable, and as well as features which allow you to put social media share buttons on to the page without adding an extra plugin. Elementor Pro also allows people to make their website mobile responsive while editing the page, which saves up the time that you would have used the CSS coding for making the page responsive. And if you wanna learn more on Elementor Pro’s features and facility, you can always visit their page to weight your options.
4. Adding templates to the pages or customization of pages:
Next up on How to build a website from scratch is adding templates to the pages or customization of pages. When you build a website from scratch, adding a template to the page is extremely easy unless you want to customize your page manually. I always prefer Elementor pro page builder plugin to customize any Web page. So, here, I will show how to add template to a page and customize a page using the Elementor Pro page builder plugin.
In order to add a template, first, open up the page and click on “Edit with Elementor”. This will take you to Elementor’s editing page where you will see the option “Add Template”, and after you click on it, it will show you many templates which you can choose from as per your preference and import. Once you are done importing the templates for all the pages, hit the Save Changes button to save your design. If necessary you can modify the templates as per your requirement. For example, if you want to change a section or column in the template, you can simply select them and make modifications according to how you want.
For those of you who don’t want to add a template design and would like to customize it manually, you can do that using Elementor Pro page builder. Create a page, give it a title, then click on the button “Edit with Elementor”. Now you need to go to the settings option in the Editing Panel of the Elementor and change the template’s default setting to “Elementor Full Width” that comes with Elementor, which will allow the user to start designing from scratch and then they can make required customization, like adding sections and what not! Once you are done customizing your template according to your need you can save your progress by clicking the “Publish/Update” button on the bottom left corner of the screen as shown below.
For creating the main menu, you just need to go to your Dashboard and click on the “Appearance” option and then select the option which reads “Menu”. Once you go to the Menu option, you will see an option “Menu Name”, and next to it would be a bar where you can type in the name of your menu; it can just be the generic “Menu” or anything to your liking. After you type in the name, you will find an option which reads “Create Menu” on the top right of the screen and just click on the option.
Next, you will find the option that reads “Menu Setting” and under it, you will find display location where you should select the “Primary Menu” option, which will allow the menu to be visible at the top of the page of your website. Once that is done, you just have to add the pages / posts / custom links / categories whichever you want to display on your menu so it can direct visitors to the specific page that they are there to look for.
In order to add the pages (that you have previously created using the Elementor Page Builder) to your menu, you just have to click on the option which reads “Pages” at the left side of the screen, where you will find the names of the pages you built, Now just select the pages you want to display on your main menu, click the button below named “Add to Menu” and select the option that reads “Save Menu” on your right. And you are all set to go, and if you refresh your page, you will be able to see the menu at your website header.
Furthermore, if you want your visitors to have a smooth scroll down feature after clicking the menus, you need to make some adjustments to your page using the Elementor Page Builder plugin. First off, you need to open the page using Elementor, then hover your mouse cursor over the sections you have created manually or using the template, where you will find an option bar at the top of the section as shown in the picture below and select the option “Edit Section”.
Under the Edit Section go to the third tab named “Advanced”, and below which you will find an option “CSS ID” where you have to write down the name of the section, for example, if your section is about your websites’ contact information then write – contact or if it is about your product then write – product. Then hit update to save your change. Once you type in the CSS ID and save the change, then just keep the id in your mind or copy it and move onto the next step.
Now to create the submenu , you must go back to your Dashboard and click on the “Appearance” option and go to the previously created main menu, where all the pages have been added to it. Afterwards, you will find the option for “Custom Links” at the left side of the screen and just select the option. This option will basically let you put in the links, like About, Product or Contact etc. to your submenu which will help the visitors of your website to find the sections or posts in your pages easily. So in order to add the links to your menu, you will find two options underneath the “Custom Links” tab. They are “URL” and “Link Text”. In the option for “URL” type in the CSS ID that you had typed in for the sections earlier with a hashtag (#) before it, then place the page url before the hashtag and then in the option for “Link Text” just type in the name of that section that you want it to show up. Then click on the following prompt: “Add to Menu”.
Once you are done with adding all the Custom Links to your menu, you can now use the “Drop down menu” method to make those custom links as sub-menu. That is, you click on the Custom Link you have created, select and drag under the desirable Page you want your custom link to be, and then move them slightly towards the right side of the screen which makes them appear like shown below in the picture. Once it is done, you will see the words “Sub item” written next to the custom links. Thus they have now become sub-menus for that page . Then hit the button “Save Menu”. Now just to make sure that everything is running smoothly, you can go to your website and open that page to check if the custom links and sub-menus smoothly scroll down to the sections when you click on them and then you are all good to go.
6. Setting up a Static Homepage:
Now on this article on how to build a website from scratch we’re gonna discuss setting up a static homepage. Due to WordPress’s default setting the homepage of your website will show your latest blog posts on the homepage instead of the static homepage. If you want to change the default setting and set up a customized page as your homepage, you just have to go to your Dashboard, where you will find the option for “Setting”. Once you click on “Setting”, it will show you more options, just select the option which reads “Reading”. Afterwards, you will find the option which reads “Your homepage displays”, where you have to select the option “A static page” and select the page you have already created as your home page. Finishing that, you can just click on the button “Save Changes” and you are good to go.
Sidebars are extremely helpful as it enables users to add widgets to the sidebar easily. Adding widgets can help you customize the content on the sidebar, plus it allows users to add things like menus, calendars, contact form and other useful items to the website sidebar. To add widgets to your sidebar you need to go to your Dashboard and select the option “Appearance” , where under it you will find the option which reads “Widget”. Once you select the Widgets option, you can just simply use the “Drag-and-drop” method and add the widgets you want to include on your sidebar.
8. Make the website responsive:
To make your website responsive, the first thing to do would be to check how your website on a cell phone. Since we live in an era where a mobile phone is a big part of everyday life, there is a higher chance for people to visit your page using a cell phone than a PC. If you are not using Elementor Pro Page Builder for your website, you need to apply CSS codes to make sure that your page looks appealing even when it is opened by a cell phone or a tablet. Since sometimes you might have to make customization as the proportion of the fonts may not be right, the layout of the page might not suit your taste, or the sections may appear disorganized on mobile and tab. You can make the responsive edits using the Elementor. You will find an option under the left corner of the panel to switch the view to tablet mode or Mobile mode. While in the mobile and tab view option, you can make the desired adjustments to your pages using the Elementors style tab. Try to make your website responsive from the very first when you build a website from scratch.
9. Adding Some important plugins:
There are some plugins that are must have to make your website more efficient, those are –
Sucuri is the best WordPress security plugin which is a respectable and globally acknowledged company that offers services to business of all sizes around the world. Some of its features include security activity inspections, file authenticity monitoring, blacklist monitoring system, effective security hardening that allows the users to remove their WordPress version display and protects their uploads directory. It also sends security notifications and also takes some post-hack security actions that help users in case their website is compromised and etc.
Sucuri is a great plugin for the money you spend for its great service.
Akismet is a default plugin for WordPress that helps you filter any spam comments on your website, which helps keep the website more friendly. Though Akismet is a paid subscription, it is quite helpful for the users to get advance security solutions.
Wordfence includes a very effective firewall and malware scanner that was built for the sole reason to protect WordPress. Wordfence’s threat defense feed arms it with the newest firewall rules, malware signatures and harmful IP addresses to keep your website safe from. Made up of series of additional features, Wordfence is the most comprehensive WordPress security solution that is available on the internet. It is cost efficient that comes with a 30-days trial option.
Woocommerce helps you to add products on your website for selling. Wocommerce enables the site’s e-commerce functionality which helps the users display products to their pages that people can purchase online by adding the products to the cart and checkout with their desired payment methods.
For most commercial websites, it is advantageous when you are able to showcase more than one image of the products, or even use slideshows for showcasing the images. Nivo Slider will be great for such use.
WP Forms is one of the beginner-friendly WordPress contact form plugins available. It is built by the same team of WPBeginner. The free version of WPForms comes with all the basic contact form features that include basic form fields, email notifications and Captcha for spam protection. The premium version allows the users to increase the functionality of their website by building various types of forms, for example, multi-page forms, payment forms, order forms, email subscription forms and etc. WPForms pro version comes as well as with other powerful form fields and features such as options for uploading files, post submissions, geo-location, signature feature, smart conditional logic, form abandonment, user login and registration for WordPress, and over 100 pre-made form templates. It includes interactive survey reports, real-time polls for WordPress, smart survey fields like star ratings, like scale and NPS, etc. While the pro version has to be bought and unlocked unlike the lite version for better and improved features. WPForms is powerful, as well as user-friendly.
OptinMonster is a leading new generation instrument. It is transforming optimization software that helps users increase their email list, plus increase sales and revenue for the website. With its behavior detection technology, it can show the right campaigns to the visitors, who have similar interests. Aside from growing user’s email list, OptinMonster also helps them increase their page views. It redirects the engaged website visitors to the most popular pages according to the behavior detection formula combined with the Yes/No feature. OptinMonster has programmed in a way that it captures the audience before they leave by prompting a customized exit popup campaign.
Yoast SEO is an excellent plugin that is available in the market and is also known as one of the best SEO plugin available for WordPress powered websites.Yoast SEO includes lots of features to optimize your website. It has inbuilt content analysis, description management, managing duplicate content, meta keywords, rich snippets, XML sitemaps etc. Yoast SEO plugin includes Yoast SEO metabox on the post edit screen. The metabox allows users to add meta title and description to their blog post. It also comes with an option for the users to choose a focus keyword for their post. After choosing a focus keyword, Yoast SEO plugin analyzes and compares the post content with the focus keyword, and designate it to an SEO score. It also provides a recommendation on steps the users should take to improve their SEO score.
MonsterInsights is the most famous and efficient Google analytic plugin that is available for your WordPress site. This plugin helps you access Google site tracking services directly from the dashboard of WordPress, which makes it easier and much faster process for users to keep track of their site analytics. It helps to improve a website’s ability to attract the audience which eventually will help them convert more visitors into potential customers. And of course, in the sake of determining whether to use the free version or the paid version ( Pro version ), you need to be able to compare advantages and disadvantages between the paid version and free version. For example, the Pro version can allow you to access to Publisher Reports, Forms Report, or EU Compliance Addon etc. where you don’t get them on the free version.
Frequently Asked Questions
WordPress is the most efficient content management system for anyone who is looking forward to building a picture-perfect website or who wants to have versatility on their page or who wants to run an e-commerce business and for people who want to learn page building. For this reason, we brought to you this article today on how to build a website from scratch using WordPress. We hope you liked this article and it helped you. Please stay tuned with us for more articles like this and we’ll try to provide the best articles possible to you.
This post contains affiliate links. It means if you click one of the product links and then purchase the product, we’ll receive a small percentage from the sellers’ end. No need to worry! You’ll still pay the standard amount. So, there’s no extra charge from your part.
Hi, I am Yousuf Hossain, an expert in WordPress and digital marketing. Let’s dive a bit deeper into what I mean when I say that I’m an expert in WordPress. I have spent my entire life trying to master wordpress plugins, themes, tools, hostings etc. And it is safe to say that my portfolio follows my reputation as an expert in this field – Read More
Sign up for our Newsletter
*You can unsubscribe at anytime!