Developing a website is a concept that has been simplified to allow those without prior knowledge in web-development to be able to create websites using word press or learn coding easily.
Among the first tools needed when thinking of developing websites are
- Domain name (The domain name will be the name given to the website. An example of a domain name can be example.com
- Hosting platform for the website to be created. (This is a service that enables the website to use their servers) In addition, word press is among the popular platforms used for CMS when developing websites, check our article: How to Choose the Best WordPress Web Hosting Services in 2020.
To create a website with all its functional features working you needs to purchase a web hosting account and a domain name. These two items are critical as it makes a website to be accessed by others. It is impossible to design word press website by negating either domain name or Web-hosting platform.
After acquiring both domain name and hosting account, you can start developing a word press website. WordPress is a popular web-building platform that accounts for more than 30% of websites globally.
As you will notice, WordPress websites are easy to setup as it involves a one-click process through the web hosting service.
By following this guide, you will have a functional website hosted having a customized domain name. Lastly, the website will be visible to other users online.
Step one: Creating a WordPress website
When ready to start your journey in WordPress web development, you can visit SiteGround.com.
While on the homepage, initiate the “Get started” option which is a part of the Managed WordPress hosting.
Step Two: Creating a WordPress website- Selecting a Hosting subscription plan
The managed WordPress Hosting information page will show different plans offered. A user can pick a plan that suits the needs of the WordPress website being developed.
The StartUp or GrowBig plans are recommended for new WordPress websites. The image below gives an illustration of these packages.
By choosing the Grow Big plan, a user will have more resources to grow their website over time.
Step three: developing a WordPress website- Signup!
After choosing a plan, the preceding step is to register for hosting by visiting the registration form.
By clicking on the Get Plan, the next page to appear will be first step in setting up a web hosting account.
Developing WordPress Website: Registering domain name
The first step will be to choose a domain name. The domain name can be the business name such as Bestrealtors.com. At SiteGround, a domain name can be registered as low as $15.95 per year depending on the rates during registration.
If you have an existing domain, you can click on the box ‘I already have a domain ’. (See image)
Step four :Creating WordPress site- Billing details
Filling up personal information such as Account, Payment and Client information can be done by following the instructions at the site.
It is important to verify the information and ensure it is accurate before moving to the purchase option.
Step five: How to create a WordPress website- Inserting purchase details
The preceding step is critical and a developer should do it accurately. At this stage, purchase details for hosting and other related services will be submitted.
At this point of the WordPress site development, a developer ought to have chosen the plan suitable for the small business website desired. Next, choose the desired duration of the plan. The best plans recommended range between 12 months to 24 months.
The option ‘Extra Services’ allows one to choose whether they prefer a domain name to be private or if they may need SiteGround reporting SG scanner and security scanner incorporated . (See image below).
An SG scanner is recommended as it gives weekly reports on the website status .Further, It can send notifications when the website gets virus or malware infections .
Step six: WordPress website installation- Success and account log in.
After successfully following the steps highlighted above, you will see a success message. An email with login credentials will be sent to the email provided.
After this , the next step will be to proceed t the customer area . (Check image below)
By clicking on the proceed to customer area button, a new page will appear. (See page image below)
Since the website will be built using WordPress from scratch , it is not necessary t use SiteGround website developing tools , also , you will not want t transfer a website in existence . If this is the case , then you can check content on website migration post.
It is very important to ensure the ‘Thanks, But I don’t need help ’ button has been checked before proceeding as shown on the image above .
Step seven: Creating WordPress website-Accessing your cPanel account.
Once you have logged in to the SiteGround account dashboard, go ahead and click on the My accounts tab
After visiting the accounts page , go to cPanel option and click on the button as illustrated below
Step 8: create a WordPress site- Accessing cPanel and installation of SSL
After opening cPanel page, one can scroll down up to the Security tab. Before you even install wordPress and create the website, it is important to have an SLL certificate installed into the domain. This service is free service offered by SiteGround.
After visiting the cPanel page, go to the Let’s Encrypt option which is under security and click on it to have the encryption certificate installed (SSL) to the domain name.
(Check image below)
Step nine: setting up WordPress website- Installing WordPress
After getting an SSL certificate, the next step will be to install WordPress and launch the website. So, the first step is click on cPanel Home tab. Then go to WordPress Tools. Next click on WordPress Installer. (See image below for illustration).
The next step you have been anticipating. At the WordPress Installer page. Now move down until you see the Install now link. (Check picture below)
Your next step will be to fill the required fields to complete the process of installation. It is critical this is done correctly.
Important note: Ensure to save your admin password and username to use for logging to the WordPress website later.
After filling up all the fields above, press the install button to start the installation process
This process will take a couple of minutes. Lastly, you will receive a notification once the installation has completed, you will receive the WordPress admin URL. (Check image below).
Click the administrative which will take you to dashboard.
Step one, when creating a WordPress site: Choosing a them for the website
WordPress themes are critical in website creation as they change the manner in which a website will look. The themes can be changed as desired by switching from one theme to the next easily.
Most important, when dealing with themes, you ought to be aware of both paid and free WordPress theme available
Most people would love to get access to free WordPress themes but they do not know where to start from. To get free themes, visit official wordpress.org which is an official theme directory. Check the popular them section for the best themes.
The WordPress themes found at WordPress.org are of great quality and enjoy a large user-base.
When developing your WordPress website, you can chose from the list and choose any theme desired. However, I will recommend on the “NEVE” theme for this guide. The theme possesses some level of versatility having a number of starter sites (Design packages which are suitable for varied websites used for different purposes).
– Theme installation
Go to WordPress admin platform. You can easily access it at YOURSITE.com/wp-admin. To log in, use the password and username given during the installation of WordPress.
- Theme installation
Go to WordPress admin platform. You can easily access it at YOURSITE.com/wp-admin. To log in, use the password and username given during the installation of WordPress.
1. Moving away from the sidebar, got “Themes” then click on Add New
2.Next go to the search box and type “NEVE” and click the “Install” button which is next to the theme’s name.
- Once the installation has been completed , click the “Activate” button that will present itself where the “install” button ought to be .
- You will receive a success message that notifies a user that the installation was as expected .
3) Import a design (Applicable only to users using Neve theme)
Despite the theme being active , there are a number of things that one can do to make it look better .
First, you’ll be greeted by a welcome message :
Among the benefits of using Neve is that a user will be availed multiple designs to pick from . To access these designs , simply click on the blue button as illustrated on the image below .
When creating a WordPress website, Neve users enjoy up to 20 designs they can choose from for free. It is also important to note that these designs accommodate for the basic as well as popular web niches such as restaurants, weddings, business, food, fitness, ecommerce, Portfolio among others. Neve designs accommodates for all topics associated with your website.
For this guide, we choose to use the first design on the list which is called “Original’
You will realize that the installation process takes into account all the elements crucial for your WordPress site- Among the elements include the design chosen, demo content that can be modified later and plugins.
By clicking on the “Import” button you will set the process in motion. The process will take approximately a minute then a success message will appear.
The next step is to go “Appearance – This sections highlights on Neve options ” to explore what can be done to the theme .
4) Add a logo to WordPress site being created
Most users will upload their logo to be displayed in the top left corner of the website. Below is an illustration.
Once you have chosen the logo, you can add it to the website. Simply click on appearance – Neve options and click the link “Upload logo.”
The following will be displayed.
The interface displayed above is referred to as WordPress Customizer and it allows you to edit different aspects of the website appearance. For beginners, you can learn how to upload your logo. This can be done by clicking on the button “Select Logo” that is at the top left corner.
You will note that WordPress gives you the option to resize the logo, for this tutorial skips that part.
The logo should appear at the corner of the page almost instantly .
In addition , you can decide to either attach the name of the website together with the tagline together with the logo as well as giving the desired measurements associated with the logo maximum width . I is important you experiment with these aspects be familiar with them and chose what you would like for the site.
When done with the steps above click on the button “Publish” which is at the top left corner and lastly click the “X button” to exit the customizer.
5) Change the fonts and color schemes of the website
It is important to experiment with different fonts and color scheme for the site . This process is key as it makes a website unique and foster brand identity.
To start , go to “Appearance – Neve options” again . These two options will be our point of focus .
- The first step is to click on “Set Colors”
- Most WordPress themes are defied using the color scheme used to design different elements related to the design.
- It most cases , those are colors associated with texts , links and background of the website.
- The color assignments of the Neve theme can be changed using through Customizer
- To switch the colors simply click on it and choose another color .
- Once done , click on “Publish ” then press the X to exit .
Changing fonts work similarly.
- The first step is to click on the option “Customize Fonts” the link to this function is in the “Appearance –Neve options” panel .
- Neve allows one to choose from an entire catalog of system and Google fonts.
- Simply click on the “ Font Family ” box and choose the desired font .
The next step will be to customize the font used on the body section of the WordPress website, simply click on the arrow button which is situated at the top left.
- Next click on “General ” This will direct you to a similar panel of options . At this point , you will be dealing with adjusting aspects of the main body fonts.
- Lastly , click on “Publish ” and finally use “X” to exit .
6). Adding a sidebar to the WordPress website
Adding a sidebar can be implemented on the ‘Appearance segment –Neve options ” . There is a panel which will guide you to choose how you would like your WordPress sidebar to look. To begin , simply click on “Content/Sidebar”.
You will have three main options : Sidebar aligned on the left side , no sidebar or sidebar aligned to the right. Most website have sidebar on the right side .Further , you can change setting on content width .Once you complete , simply click on “Publish” then click on “X ” to exit .
7) Add Widgets (Free WordPress add-ons)
Widgets are the small content blocks that are common in a website’s sidebars . After setting the sidebar as it has been illustrated earlier on , you need to customize it with the widgets .
For widgets configuration , go to “Appearance- widgets.” You will see this:
By looking on the left side , you will see all the available widgets; the right side presents all the widgets that are supported by the theme chosen . Adding a widget to the sidebar requires one to grab a widget from the left side the drag and drop it onto the sidebar location.
For example , if you desire to list the entire pages in a sidebar , simply grab the “pages” widget then drag it onto the sidebar area . You can also do configuration of the basic widget settings .
8) Experiment with the theme you built
The areas covered above are enough to guide you into build a new amazing website . Also , note that there are other multiple options available for WordPress web development .
To see them all, simply go to “Appearance-customize” This will illuminate the main interface of the customizer together with all the settings and presets .
It is advisable to browse the available features and experiment with some of the options. You’ll see some customization features that we have not covered on this tutorial.
Step 5: Add content /Pages to your website
Pages are a key part of the website. It is impossible for a website to exist without pages. From an expert point of view, a web page is a web document not being so different from the common word document .Branding elements such as footer and header brings the difference.
It is easy to create web pages using WordPress. But before moving to the technicalities associated, let’s have a look at the pages you should create first.
For most websites, the following page segments are necessary:
- Homepage- It is the page seen by visitors when they land to the website
- About page- This is an informative page that tells you the purpose of the website.
- Contact page- This page allows visitors to get in-touch with you.
- Blog page – This page list recent blog posts; some people use this section for company announcements and news.
- Service page – If the website being designed is for business purposes, you should the use this page to showcase the services offered.
- Shop page – This is for companies planning to start an ecommerce store.
Most of the pages will have a similar structure – The main difference will be the content displayed on the page. By learning how to create one page, you will be in a position to create others. The discussion below will give illustrations on how to create basic webpages.
- Creating homepage
The homepage design for NEVE would be similar to the image below
The structure of the WordPress website page and the elements within it can be edited (all texts and images)
To perform this, simply click on the “edit with Elementor” button in the top bar.
What you will observe is the Elementor page builder interfaces
Elementor is simply a web page builder. This has the implication that one can click on elements seen on the page and edit them in a direct manner . An example is when you want to make changes to the main headline , you can do it by clicking on it then immediately start to type .
If you look at the left sidebar, you will see an entire customization panel. The structure and the styling of any content block can be done from here. The image below is what you can see when working on the headline.
An amazing thing to do is to grab any element of the page then drag-and-drop it at a different place.
– When adding new elements, click on the small square icon which is at the top left corner.
– A list of content blocks will be available
– Grab any of the blocks available and drag it on the page canvas.
– The best manner to work on the homepage is to tackle block by block and ensure the demo content on the page has been edited.
– Insert new content, realign some blocks, delete the ones that are irrelevant and add new ones systematically.
– The entire interface is intuitive to use, ensure to spend an hour when using it and experimenting with different aspects.
Create pages such as “About”, “Services”, “Contact”
It is easier to create classic webpages when using WordPress than it is working on the homepage. Click on “Pages – Add new” The interface below will manifest:
Every page has a requirement for a title, so add a title where it says “Add title” an example is “Contact” or About Us.
The next step in WordPress website creation is to pick page layout. When creating a standard page, you can choose the first one displayed on the list – “Single Row.” But to fasten things, choose from the template library. To do that, simply click the blue button.
There will be a widow which allows you to pick from pre-made page section. When working through the about page, you can easily locate and use the following blocks below.
Simply click the “Insert” button which is next to the desired block, this will be added to the page. Further one can customize other aspects such as changing texts or images.
– When you have completed, click the “Publish” button which is at the top-right corner of your screen.
– You can use the same process when working on the service or contact pages of the website.
– Choose different page blocks from the template library. They would work better on the service page.
If you desire to include new elements by hand –rather than using templates- Click on the “+” icon situated at the top-left corner of the editor interface .
The selected block will be added at the bottom of the page. Below is an example of a new paragraph block.
As seen observed above, you can perform changes and edits to the text properties. There is also color setting option on the right sidebar.
3) Create a blog page
A blog is a page which will have all your recent blog posts.
The good thing is that the blog page has already been setup for you. This was done during the installation of WordPress and the NEVE theme. You can view blog page by going to “pages”
To see the blog page in operation, click on the link “view”
Adding a new blog posts to your WordPress website
To add other blog posts, go to “Posts”- Add New”
Does the interface above remind you of anything? Yes, this is a similar editing platform that we used during creation of standard pages. Easy!
Step 6: Set up a navigation Menu for WordPress site
Having a number of amazing pages created the next step in creating a WordPress site is to set up navigation menu. (A website menu). The menu is what the website users will use when navigating your WordPress website .
Go to “Appearance- Menus” while there, click on “create a new menu.”
Below image illustrates the steps taken in creating a menu.
1. First, add a title. The title given to the menu does not really matter. It is important as it differentiates your menu from others. (It is possible to have multiple menus).
2. Select pages that can be added to the menu. Other items like custom links and posts can be added to the WordPress website menu.
3. Next click the “Add to Menu” button to include the selected pages to your menu.
4. To arrange the links in order of importance, simply drag and drop menu items as desired.
5. Select menu display location. This is different from one theme to the other, in this situation set your menu to “Primary” location; this will display the menu at the header.
6. Last, ensure to save your menu.
Here you will see your WordPress site menu displayed on the homepage as desired.
Step 7: Add an online store /ecommerce
The last part of the guide will be to integrate an online store to the WordPress website.
If you desire to include and online store to the website visit (Link to online store).
This feature is not necessary for all websites. With this in mind, you can skip this step if you are not interested with ecommerce.
How WordPress ecommerce works
By WordPress being a versatile website platform, it is not surprising that it allows one to set-up a fully functional ecommerce store. By being fully functional, this means that any number of products can be listed and made available for sale. You can also collect orders from customers and deal with tax- and the associated shipping elements of the entire process.
The functions above are all done using a plugin called WooCommerce.
WooCommerce is the most functional, most popular and the best Ecommerce solutions used in WordPress.
We can provide you with a separate guide that illustrates on how to acquire WooCommerce to run on your website. You are invited to check the link (Link to detailed WooCommerce installation how-to). Follow illustration O steps 3 ad 4 and then return back to this tutorial.
…Okay, having installed WooComerce on your website and ensuring a product catalog has been added. You will note that there will be new pages created automatically by WooCommerce . The pages are as listed below.
– Cart- This is your stores shopping cart
– Checkout – Customers can complete their purchases using this page
– My account – Here, customer profiles will have information on: Past purchases, current details and personal data. Customers are able to edit the information.
– “Shop”/“products “this is the main shop page – It lists products.
The individual pages serve a specified task for the store and its functionality. It is even better nowadays as most of these themes have been optimized to make these pages look right. The NEVE theme is not different. By visiting any of these new pages, you will realize that there is a clear representation and everything is easy to learn. Below is an example of the shopping cart page:
Also, all the other pages work similar to other pages on the WordPress website. This has the implication that they can be edited; you can also change aspects such as layouts, colors and other elements. When doing this, be careful and ensure you do not erase shortcodes for WooCommerce that have already been installed.
You will also observe there is a new cart icon on your website main menu.
At this point, your ecommerce store will be functional. This means customers can access the store and do their online shopping. Their orders will be displayed in the WordPress admin area exactly under “WooCommerce – Orders.”
Congratulations – Your website is ready to Launch!