In this guide I am going to show you how to make a website from scratch. We are going to use the WordPress Content Management System (CMS). I will explain what is the difference between WordPress.com and WordPress.org and help you choose a good domain name and a great hosting provider. After that we are going to embark on a journey to build your very own website. In the beginning we are going to use the 2016 Default WordPress Theme and I’ll show you the basics of WordPress. After that we are going to build a beautiful website – you can see it here. I’ll show you how to connect your website to Google analytics and Google webmaster, how to optimize it for speed and security and much more. In the end of this guide you’ll be able to build great looking websites and you will have the knowledge to run them on your own.
- 1 Intro
- 2 Why WordPress
- 3 What is the difference between WordPress.com and WordPress.org
- 4 Domain Name and Hosting
- 5 Recommended Hosting Companies
- 6 Install WordPress
- 7 WordPress Basics
- 7.1 Front-End
- 7.2 Back-End
- 7.2.1 Dashboard
- 7.2.2 Post Types
- 7.2.3 Media
- 7.2.4 Comments
- 7.2.5 Appearance
- 7.2.6 Plugins
- 7.2.7 Users
- 7.2.8 Tools
- 7.2.9 Settings
- 8 Building your First WordPress Website
- 8.1 Twenty Sixteen theme
- 8.1.1 Plugins
- 8.1.2 Divi – Elegant Themes
- 8.1.3 Building a website with Divi
- 8.1 Twenty Sixteen theme
- 9 Recommended plugins
- 10 WordPress resource websites
- 11 Conclusion
- WordPress is the most popular CMS (Content Management System) out there. It powers around 24 % of all websites worldwide and it has the biggest community. There are numerous themes and plugins both free and premium for you to use. WordPress is being updated regularly and you can be sure that you are always one step ahead.
- Being the most used CMS means that you have access to many WordPress related resources. They range from beginner tutorials to more advance topics like theme and plugin development.
- The plugin system that WordPress introduces delivers great flexibility when it comes to developing your website. Imagine that WordPress is a big LEGO. The plugin is like an additional part. With them you can further extend your websites functionality and the best thing is that most of them are free. You can download the free ones directly from the WordPress.org website. In a next chapter of this tutorial I am going to present you with the best WordPress plugins in my opinion.
- WordPress is greatly optimized for search engines. Also you can further improve your SEO (Search Engine Optimization) with some great plugins – I’ll show you how in a next chapter.
- Another great feature of WordPress is its localization capabilities. WordPress is translated to almost every language and usually the plugins come included with the most widely spread languages. If for some reason your language is not included there are plugins that can help you translate your website.
- Being so popular means that most people are familiar with the system. If you have staff it’ll be very easy for them to learn and some of them may already have worked previously with WordPress.
- Last but not least if for some reason some day you decide to sell you website it’ll be easier for you because most buyers are looking to buy something familiar.
What is the difference between WordPress.com and WordPress.org
Many are confused what is the difference between WordPress.com and WordPress.org. Now the mystery will be unveiled.
WordPress.com is the Commercial version of WordPress. It comes with some limitations but it’s great for people that are just starting their websites and want to experience what it is to have their very own website.
WordPress.com offers a free hosting for your website without the need for you to worry about maintenance. This is great if you aren’t looking to expanding your website. Also you don’t need to buy yourself a domain name. You can use a subdomain with a structure like this one – yourwebsitename.wordpress.com.
As I said before there are some limitations that can be very annoying. For starters the basic free package at wordpress.com isn’t ads free. If you want to disable them you have to pay $30 on a yearly basis. Also you don’t possess your own unique domain name – yourwebsitename.com. You have to pay for it another $18. If you use the basic free plan you can’t upload your own plugins and themes. You have only access to WordPress.com’s free ones. Another big disadvantage is that you aren’t able to participate in the Google AdSense program and you can’t track your website with the use of Google Analytics.
Here is a list of the upgrades you can make and the price you have to pay for them:
- No Ads: $30
- Domain Name Registration: $5
- Domain mapping: $13 (you are going to need both Domain Name and mapping)
- Domain Privacy: $8 – per domain
- VideoPress: $60
- Custom Design: $30
- Space Upgrade: $20 – $290
- Unlimited premium themes: $120
- Premium theme – starting from $20 – one time fee
- Site redirect – $13
- Guided transfer – $129 – one time fee
All upgrades are on a yearly subscription basis except the Premium theme and the Guided transfer.
A more cost-effective approach can be to order some of their paid plans:
The WordPress.com version is suitable for people who are blogging for fun and are doing this as a hobby.
On WordPress.org you can get your own WordPress installation for free. It provides you with the freedom to make anything you’ll ever want. You don’t have the limitations of the WordPress.com version. There are no Ads and you can choose both free and premium themes and plugins as you like.
If you are going to make a website that you want to expand and your business counts on it you need to choose the WordPress.org version. In order for you to use it you are going to need a Domain name (around $12 annually) and a Hosting provider (from $5 a month). We are going to discuss those topics in the next chapter. In this tutorial we are going to use the WordPress.org version.
Domain Name and Hosting
In order for you to have a website and for it to be accessible for your future users you are going to need to buy a domain name. A domain name is usually your business name or if you are making a personal blog – your name. You can also choose a more catchy name. Domain names have to be easy to remember. It’s always best for you to choose a top-level domain. Top-level domains have extensions like: com, net and org. Chronologically they are the oldest domain names extensions and carry the greatest weight when it comes to SEO.
If you are going to register a new domain you must know that it’ll take time for it to get to first page in Google’s SERP (Search engine results page)- especially if your niche is very competitive. For new domains Google has a probation period refered by some SEO experts like sandbox effect. This period can be up to 6 months. In some cases when your niche is very competitive up to 12 months. In this period you are going to see poorer search results for your website. A workaround for you can be to target more Long-tail keywords for which the competition is not so big or to buy an older domain. If you choose to buy an older domain you have to check its reputation. You don’t want to buy a domain with spammy reputation. To accomplish this task use the Open Site Explorer. If you are looking to buy an old domain Flippa.com is a great place. Usually the older the domain is the better.
If you are going to buy a new domain name GoDaddy is a good place but don’t rush it. Most of the Hosting providers offer domain names along with their hosting plans and some offer them free.
The choice of a good Hosting provider is very important. The host is the foundation of your website. A good hosting provider has to provide you with:
- Easy way to build and control you website – preferable CPanel, FTP, SSH (for more advanced users)
- Speed – when you are choosing your hosting provider go with those that offer SSD (solid state drive). They are much faster and reliable than Hard discs.
- Reasonable prices.
There are 4 main types of hosting services suitable for different kind of users:
- Shared Hosting – your website is being hosted with hundreds other websites on one server. Most websites are suitable for this kind of hosting. If you are just starting you website, this is the option to go. It’s the cheapest option and there are different shared hosting plans.
- VPS (Virtual Private Server) – One server is virtualized into smaller Virtual Servers. This option gives you more resources and freedom to do as you wish. There are two versions – managed and non-managed. The managed version usually comes with CPanel, maintenance and support included. It’s more expensive than the non-managed version. The non-managed version is for experienced users that have the knowledge about SSH, Web Servers like – Apache and Nginx, MySQl etc, or they can install them self a Control Panel like CPanel.
- Cloud Hosting – It’s very similar to the VPS but you can determine how much resources you need and pay only for what you use. You can always adjust them according to your needs.
- Dedicated servers – Again they come in two versions – managed and non-managed. This option is suitable for very big websites with high resource requirements.
Recommended Hosting Companies
Disclosure: This tutorial contains affiliate links. This means that I am going to receive a commission if you click on one of them and buy something. This won’t cost you anything extra. I’ve tried all hosting providers, themes and plugins that were reviewed in this tutorial and I recommend them sincerely.
Their hosting is specifically tailored for WordPress users. They offer:
- 1-click WordPress installation
- Free domain name
- Free WordPress templates and installation provided by their staff
- Free transfer of your website
- Staff proficient in WordPress
- No Downtime
Their WordPress Hosting comes in 3 plans – you can check them Here.
The plans are paid on a yearly basis. For the first year SiteGround offers discounts.
StartUp – $3.95/month
This plan is suitable for most WordPress users. It comes with a 10 GB of free Web space. You can install only 1 WordPress website. Also you get a free Daily Backup and access to the free version of CloudFlare CDN (to learn more about Cloudflare see here). In order to access your websites you can use CPanel or SSH. You have the ability to setup a private email.
GrowBig – $5.95/month
This is the plan that I recommend the most. In addition to the features from the previous plan you get :
- The ability to install multiple WordPress websites
- 20 GB of Web space
- Premium WordPress Features
The thing that makes this plan great are the Premium Features:
- WordPress Super Cacher – this is the inbuilt caching system of SiteGround. This is the tool that sets apart SiteGround from it’s competitors. It allows you to speed your website tremendously. On a regular host , to make your website faster you need to install a caching plugin. With the use of the SuperCacher there is no need for that. The SuperCacher offers 3 levels of caching: Static Cache, Dynamic cache and Memcached.
- 30 Backup copies available – Having a great backup service is essential for any website owner. If something goes wrong, for examle your website gets hacked, this may be the only way to save your website and the valuable information that it holds.
- Priority technical support
- 1 year Free SSL certificate. – SSL certificates are used to encrypt the connection between your website and its users. This feature is essential if you are planning to build an E-Commerce website. Especially if you are planning to implement Online payment methods in it. With the use of the SSL certificate the personal data of your users will be better secured. In addition to that Google gives websites that use SSL certificates a little boost in their SEO (Search Engine Optimization) scores.
GoGeek – $11.95/month
This plan is suitable for very big websites. With over 100 000 visitors/monthly. You have 30 GB of Web space and access to Geeky WordPress features like :
- 1-click WordPress staging
- Less accounts on server
- Pre-installed Git for WordPress
- Fee PCI Compliance
To order a plan click on the Order Now button. On the next page choose a domain or type one that you already poses. It’s wise to register a new domain because it’s free.
On the next page enter you account and payment details and click the Pay Now button.
Install WordPress on SiteGround
The installation process is very easy. Once you’ve ordered your plan, navigate to your Customer area. A Website Setup Wizard will appear with different options for you to choose from.
If you have a WordPress website on a different host that you want to transfer to SiteGround choose the third option. Their staff members will do it for you. In this tutorial I am going to show yo
how to install a fresh WordPress instance. Choose the firs option – Get WordPress preinstalled on this account and click on Proceed.
On the next page type your Login details for WordPress . Don’t choose a theme because we are going to use the default WordPress theme!
Adding more than one WordPress website in SiteGround.
If you want to add new WordPress websites to your account you have to navigate to My Accounts.
Once there click on the Go to cPanel button.
Now we have to create an Addon Domain. Click on Addon Domains. On the next page type your new domain name and password and click on the Add Domain button.
After that we have to install a wordpress installation on the Addon domain. There are two ways to install a WordPress website -through Softaculous or through the manual installation. See here.
If you’ve already installed Your WordPress website you can skip to WordPress Basics.
Bluehost provides you with everything you’ll ever need on a reasonable price. Their shared hosting is very suitable for beginners. They offer 3 plans. To check them out go to their home page – click Here. Navigate to Products⇒Shared hosting
The basic plan allows you to install one website. You have 50 GB of Website space. In this plan the best thing is the price. If you sign for 3 years you’ll pay $3.95/month. The plan offers you all the essential things a webmaster needs. It’s a great starting point.
The Plus plan is more balanced. Again it’s price is great but this time you can have up to 10 websites. The Web space is 150 GB which in most cases is more than enough. Also you have access to Global CDN. If you sign for 3 years you are going to pay $5.95 a month.
The business plan is unlimited on Websites and Disc space. You’ve got one dedicated IP address and one SSL certificate which is very important for E-Commerce websites. This plan gives you a better performance compared to the previous ones. It’s suitable for websites with high traffic. If you sing for 3 years you’ll pay $5.95/month.
Another great service that Bluehost offers is their WordPress optimized hosting. It’s built on VPS technology and allows better performance. It’s more expensive than the Shared hosting. This hosting is suitable for websites with a lot of traffic.
In this tutorial we are going to use a shared hosting plan. Click the Select button of the plan you choose. It’s a good idea to register a new domain because it’s free.
On the next page enter your Account information
Choose carefully what you need in package information. Those options will cost you additionally. I recommend the Site Backup Pro option because every webmaster needs to make daily backups of his website . The Pro version gives you more flexibility.
In billing information enter your credit/debit card information.
Click on the Submit button. On the next page create your password.
Install WordPress on Bluehost
On the Home page of your Bluehost Panel a pop up window will appear.
Click on Setup your Website and after that on website.
Now click on the Install now link
On the next page click on the Install button
Choose your domain. By default it will be the one you used in the registration process – your primary domain. Click on Check Domain.
On this page click on Show advanced options. Enter your information. I suggest you to leave the automatic database creation on as it is. Otherwise first you are going to need to create them manually.
Click on Install Now. Your install is complete.
If your domain is registered with another registrar you have two options:
- transfer the domain to Bluhost
- You have to make an A record or a CNAME record with the use of the control panel of your current registrar. For A records you have to use the IP address of your shared hosting server and for CNAME records -the nameservers of bluehost. You can check the IP address of your shared hosting server in manage ips.
The next chapter of this tutorial describes the more common methods for installing WordPress. To use them you are going to need access to cPanel. Almost all hosting providers use cPanel so this shouldn’t be a problem. If you have already installed your WordPress website with the use of the above methods, skip to WordPress Basics.
After you’ve chosen a good domain name and a great hosting provider we have to install our new WordPress website. For that task we are going to use CPanel.
When you’ve ordered your hosting, you’ve been given access credentials for CPanel. Use them to log in to CPanel.
You can install your WordPress website automatically with software installers like Softaculous or you can install it manually. I advise you to choose the manual method because it will give you you a better understanding of WordPress. It’s harder and it takes more time but it will make you a more experienced user – to skip to the manual method click here.
The next chapter describes the automatic method. It’s faster and it’s suited for users that don’t have the required experience or time for the manual method.
Automatic installation with Softaculous
The easiest and fastest way to install WordPress is via Softaculous. You can access Softaculous via the CPanel. With it you can install different CMS’s like WordPress, Joomla, Magento, Drupal, OpenCart etc, in seconds.
- Navigate to Softaculous
- Choose WordPress
- Select the Install tab
- Enter the required data. Leave the Choose Protocol section as it is unless you are using SSL. Leave In Directory empty unless you want to access your website via yourdomainname.com/nameyouchose/. If that is the case you have to type your desired name in that section.
- Don’t enable Multisite. This tutorial uses single installation.
- You can change your Database Name and Table Prefix under Advanced Options.
- Click Install
The next chapter describes how to manually install your WordPress website. I strongly suggest you read it. It will give you a better understanding of WordPress and the structure behind it. I personally prefer the manual method for installing WordPress because it gives me more control. If you are familiar with it you can skip to WordPress Basics.
If you prefer to install WordPress manually here are the steps you need to follow.
Create a Database and a User.
First we are going to make a database and a user for it. Navigate to MySQL Databases:
- Create a new Database: for example test
- Create a User – give it a name of your choosing and remember the password you’ve typed. You are going to need it for the next steps.
- Add User to Database.
- Give the User All Privileges to that Database – tick the All privileges box.
- Click the make changes button.
Congratulations! You’ve created your Database and User.
Upload WordPress’s installation files.
Now there are two ways to accomplish the given task. We can do this by using two different methods: FilleZilla and CPanel’s File Manager.
Before you choose which method to use, we need to download the installation files from the official WordPress website – WordPress.org
- Extract the archive file in a folder on your PC.
- Rename wp-config-sample.php to wp-config.php.
- Open wp-config.php with notepad.
- Change the following fields with the Database, User and Password that you’ve created in CPanel. Don’t forget to add your prefix – ex: yourprefix_databasename
/** The name of the database for WordPress */ define('DB_NAME', 'database_name_here'); /** MySQL database username */ define('DB_USER', 'username_here'); /** MySQL database password */ define('DB_PASSWORD', 'password_here');
- Generate your unique salts for added security: Use this generator.
define('AUTH_KEY', 'put your unique phrase here'); define('SECURE_AUTH_KEY', 'put your unique phrase here'); define('LOGGED_IN_KEY', 'put your unique phrase here'); define('NONCE_KEY', 'put your unique phrase here'); define('AUTH_SALT', 'put your unique phrase here'); define('SECURE_AUTH_SALT', 'put your unique phrase here'); define('LOGGED_IN_SALT', 'put your unique phrase here'); define('NONCE_SALT', 'put your unique phrase here');
- Change the table prefix to something different from wp. This way it’ll be harder for someone to execute malicious scripts.
$table_prefix = 'wp_';
- Save the file
Now we have to upload the files to the server. As I mentioned above we can accomplish this by using two methods. The FileZilla one is harder but you’ll learn how to use FTP (File Transfer Protocol). If you experience difficulties with it you can skip to the CPanel’s File Manager method – it’s easier – to do that click here.
FileZilla is the most popular FTP (File Transfer Protocol) client. You can download it for free here.
- Open FileZilla
- In the Host field enter your host name – you can use the IP address of your server. You can find it in the left Stats sidebar of CPanel when you click on expand Stats. Usually your hosting provider will mail you this information upon activating your hosting.
- Username – The username that your hosting provider gave to you under FTP access credentials.
- Password – Again it can be found in the mail your hosting provider sent.
- Click on Quickconnect
- Now you are connected to your server.
- Navigate to the folder with your domain name on it. Usually it’s located in the public_html folder.
- Open it and upload the WordPress installation files you’ve extracted on your PC
CPanel’s File Manager
If you prefer this method here is what you need to do:
First we need to archive the installation files in the wordpress folder on your computer that we have previously extracted. Open the wordpress folder, select all the files that it contains and add them to archive. You have to make them into .zip files. You can use WinZip or 7Zip for the task. Note: you have to archive the contents of the wordpress folder!
- Open the File Manager and choose your domain name from the list.
- From the top icons choose Upload.
- Browse for your newly created .zip file and upload it on the server.
- When the upload process is finished, right-click on your file and choose extract.
- Delete your archive file.
Enter the domain name in your URL bar and hit enter. You’ll see the following screen:
Enter the required fields. If this is a test website and you don’t want it to be indexed by Google, check the Search engine visibility box. Once you’ve entered all the required fields, click the Install WordPress button. You’ll see a Success message.
Congratulations! You’ve installed your WordPress website. Now you can login to your Dashboard. From there you are going to control your website.
By default the WordPress installation comes with a theme (template). As from WordPress 4.4 the default theme is Twenty Sixteen. This is the theme we are going to use in order to review the basic WordPress functionalities (There is a new default theme – Twenty Seventeen. In order to follow this tutorial navigate to your admin panel – yourdomainname.com/wp-admin. From there go to Appearance ⇒ Themes and activate the Twenty Sixteen theme). You can see it after you’ve installed your website and you’ve navigated to it with the use of your domain name. You can also see it here. This is the Front-End of your website. Let’s take a closer look.
For this tutorial I’ve replaced the default post and I’ve added a new one with a featured image.
The above image shows the Homepage of our Website. It has some common fields. Above in the left we have our Logo section. On the right is the menu section. We also have a Post feed section. It contains the post that we’ve published. In our example we have only one. It has a Post title, Post Summary, Featured Image and Post Details. On the right we have our sidebar section. Here you can add your widgets. Widgets are additional pieces of code for your website, that provide you with additional functionality. You can add widgets for Recent Posts, Categories, Calendars, Social Media, Contact Forms etc. The Meta widget provides you with an access point to your Website’s admin panel.
By Default your Homepage is the Posts page. It lists all your recent posts. You can make any page to be your Homepage.
There are two main post types in WordPress, each with a different style, functionality and purpose.
This is the post page of our website – click here. Posts are suitable for Blog and News websites where the information is constantly changing and coming in. They can be categorized and are easily arranged into different Sections.
The Post page has also a Comments section. If you like you can make your comments section only accessible for registered users. I’ll show you how to do this in a next chapter.
Pages are suitable for a static information. If you aren’t going to frequently change your information the page post type is your best choice. Pages like the About and Contact Page use the Page post type. Many Homepages also use the Page post type. Usually pages don’t have a Comments section but if you like you can turn it on for a specific page. Here is a example of a Page – click here.
The categories page shows all the posts that are associated with it. For this website I’ve created a test Category named Category 1. After that I’ve created a new post. I’ve associated the 2 post that the website has to that specific category so you can see how they list on the Category page. I’ve also added the Category page to the Menu. To view the category page click here.
In order for you to access your admin panel (Back-End) from where you are going to control your website, type in the URL bar of your browser the following: yourdomainname.com/wp-admin. If you’re already logged in you are going to be redirected to your Dashboard. Otherwise you have to enter your login credentials.
The Dashboard gives you access to all sections of your Back-end. In the center section you have some Links that give you fast access to different parts of your admin panel. Also it gives you an overview of your activity. The most important part of your Back-end is the menu on the left side of your screen. I am going to review it step by step.
In the Dashboard sub-menu you can see a Link with a title Updates. We are going to follow it.
Here we can check if we have the latest version of WordPress and also if not, we can update it to the most current one. Also you can Re-install your current WordPress installation if there are problems with your WordPress core files. From here you can update your Plugins and Themes. Plugins are pieces of code that bring further functionality to your website. Widgets are also plugins with the only difference they can be placed into your Sidebar or Footer.
Posts are used mainly in blog and news websites. Each post is associated to a category. This way you can categorize your posts by different topics. After that the categories can be used as menu items.
There are two ways to create a Post page:
- Navigate to your Dashboard via yourdomainname.com/wp-admin. In the left menu select Posts and then Add New.
- Go to Posts⇒All Posts⇒Add New
In the All Posts section you can check your posts. You can edit them one by one by hovering over them or you can even delete them. They are going to be sent to the Trash. You can see their author and the Category they belong to.
Additionally you can perform a Quick Edit. Here you can change the name, the slug (the name shown in the URL bar), the Date and the Category. Also you can make your Post password protected or Private and you can disable your Comments section.
If you choose to make a post sticky, it will be always shown on top of your Post Feed.
Now we are going to create our first post. Choose a title for it.
Now we are going to use the default WordPress Editor in order to insert and edit our post text. Don’t forget to click the Toolbar toggle. This way you are going to get access to additional options.
Most of the functions are pretty self explanatory. You can insert and delete links. Also you can add different Headings- from 1 to 6. It’s always wise to use them because it’s better for your SEO and more importantly- it’s easier for readers to read your posts – the text has better structure.
If you want to paste a text without formatting click the Paste as text button. If you want to clear the formatting of already pasted text use the clear formatting button.
To add Media files click the Add Media button. Upload your files or choose from already uploaded ones in the Media Library. After you’ve chosen your file on Attachment Details you can change the Title, Description, Alt text, Alignment and Size in the right menu.
The WordPress Editor consists of two parts – Visual and Text Editor. The Visual Editor is our main tool. In the Text Editor we are going to be able to see the html structure of the text we’ve inserted in the Visual Editor.
On the right side there are the Categories. You can create a category directly from here via the Add New Category button. You can choose whether to be a parent or a child to another category.
Another way for you to create Categories is through Posts⇒Categories
Bellow them you can add Tags. Tags are keywords that bind together different posts that have a common tag. It’s wise to use them for SEO purposes. Also it helps readers find additional information on a given topic.
Another way for you to add Tags is through the left menu: Posts⇒Tags
Now let’s add a featured image. The Featured image is the main image of your post. It shows on various places- on the homepage of a Blog, on the Category page, above the post that it belongs to. This is the image that is being pulled when you share your posts across the Social Media. To add a featured image click Set featured image below the Tags section. Upload an image or select one from the Media Library. You can add Title, Description and Alt Text to that image. After that click the button Set Featured Image. Now your post has a nice featured image.
In order for us to publish our post we have to go to the Publish section of the page. There are several important fields.
- Preview – preview how your post will look like on the front end of the website
- Save Draft – Save your post as a Draft
- Status – Draft, Pending Review and Published
- Visibility – Public, Password protected and Private
- Revisions – from here you can go to a previous version of your post.
- Publish immediately – If you hit the Edit link you can change the publish date of your post. Either in the future or the past.
- Publish – the big blue button. If you click it you are going to publish your post.
Pages are more suitable for static information. Pages like the About page and Contact us are usually using the Page post type. In order to make a new page go to Pages⇒Add New or Pages⇒All Pages⇒Add New
The Page post type has the same WordPress editor like the Post page type. The only difference is that here there are no Categories and Tags. By Default the Pages don’t have a Comments field but you can turn it on using the Quick Edit function. Some themes have a set of different Templates that you can use for your Page. This way you can change the look and functionality of the Page. For example there are Themes that provide you with templates for the Contact us Page or the Homepage etc. The Twentysixteen Theme doesn’t provide you with additional Templates for your Pages.
In a next section of this tutorial I’ll show you how to add Pages to your Menu.
The Media⇒Library section shows you all your media files that you’ve previously uploaded. You can add new ones or you can edit your media files.
To Edit your Image just Click on it. You can resize it in WordPress but it’s always better to do it before you upload the image to your website, because this way your images are going to be smaller. It’s important for your images to be properly optimized because the smaller they are the faster your pages are going to load. And the load time is an important SEO factor and more importantly people don’t like to wait. There are many programs both free and paid you can use in order to resize your images. If you are using an image without any text elements .jpg is the best extension. Otherwise if you have text section in your image .png is better because the quality of the text will be better.
If there are new comments that await your moderation you can see them in two places.
You can approve the comment or send it to the spam folder or even delete it. You can also Reply to it or Edit it.
The appearance section has a number of sub-menus. We’ll go through them.
The themes page is where you can select your themes or upload new ones. You can also customize your active theme.
If you click on the Add New button you’ll be taken to the Themes repository page. Here you can choose from hundreds of free themes. You can also manually upload one if you hit the Upload Theme button.
You can customize your theme. To do that click on the Customize sub-menu.
In the site identity section you can change your Site Title and Tagline. You can also add a Site icon.
You can change your base Color scheme or you can change the color of different elements separately.
This is an example of a different color Scheme
Here you can add a Header Image. The recommended size is 1200×280 px.
Here you can change your background image
This is an example of added Background and Header images
This section is a fast way for you to Edit your Menu. It allows you to add a new menus.
After you create a menu you can add items to it such as Pages, Categories, Posts etc. You can also change the Menu location. In order for your Menu to appear in the Header section of your website you have to choose the Primary Menu location.
In the Twenty Sixteen theme you can make a social media menu and add your Social accounts to it via Custom Links. After that you have to choose the Social Links Menu location.
The Social links in this theme will appear in your footer area.
This is a quick access point for your Widgets. Widgets are plugins that can be inserted into your sidebar or footer. Examples of widgets are Facebook like box, Recent News, Subscribe form, Categories etc.
You can Also see the Widgets that are already added to yous sidebar by default. You can remove them and add new ones.
By default WordPress comes with a selection of Widgets. I am going to remove the Comments Widget. On his place I am going to add a Calendar Widget.
Here is how it looks on the Front-end
This way you can add all sorts of widgets that you’ve downloaded from WordPress.org or have installed directly through your plugins repository.
Static Front Page
Here you can choose whether your Homepage is where all your recent post will be shown or you wish it to be a static Page post type. If you are running a blog the default option will do. Otherwise in most cases you will need to create a static page and change your Front Page (Homepage) to it. In the same time you can also choose another page for your Blog in the Posts page section.
We’ve already covered the widgets in the above example but I’ve shown you the quick way for you to add and delete them. I’ve always liked to add my Widgets from here: Appearance⇒Widgets
Here you can choose where you want your Widgets to be shown. Many themes provide you with a Footer section. In the Twenty Sixteen theme you have fields that will show your widgets bellow the information in Posts and Pages.
Here is an example. I am going to add a Meta and Calendar Widgets to the Content Bottom 1 section.
Here is how it looks on the front Page:
You can also use the Inactive Widgets section. It is used when you want to save the settings of a widget but don’t want to use it in this moment. In order to save you settings you have to drag the widget to the Inactive Widgets section.
I’ve shown you how to add menus, but this page gives you more functions and personally I prefer it for creating menus. To get to it navigate to Appearance⇒Menus
From here you can add Pages, Posts, Custom Links and Categories. Also you can mange the locations of your menus.
The Header and Background menu items are the same as the ones in the Customize section.
Using the editor you can edit your theme’s php and css files. I don’t usually use it because if you make a mistake you don’t have a backup. Also for security reasons it’s wise to disable it because if someone breaks into your WordPress back-end this will give him access to your theme’s files.
Plugins are pieces of code that provide you with additional functionality. They can be used in posts, pages, sidebars etc. There are plugins that provide you with additional security, spam protection, caching abilities and so more. Plugins are one of the reasons why WordPress is the most widely used CMS.
Akismet and Hello Dolly are installed by default but they are deactivated. It’s up to you to activate them if you need them. Akismet is used for spam protection. If you don’t use a plugin like Akismet or at least CAPTCHA for your Comments section, you are going to get swamped by spam comments. This is one of the few disadvantages of using a popular CMS. It’s easy for bots to send spam comments because all WordPress websites share the same structure.
It’s always a good idea when you choose your theme to pick it wisely because you can always add new functionality to it using plugins but the more plugins you have the more memory your website will use. Plugins tend to slow your website down but there are some plugins that are essential. I’ll review them in a next chapter.
If you want to add a new plugin navigate to Plugins⇒Add New
From here you can browse and install the plugins you’ll need. In the WordPress plugin repository all plugins are free but some of them have a pro version that gives you additional functionality and support. The pro versions are paid.
Also you can download your plugins from the WordPress.org website. After that you have to upload them manually using the Upload Plugin button.
From here you can edit your plugin’s files. Usually I don’t make any changes from here. It’s a good idea to disable this function for better security.
From here you can add new Users. Users have different roles that you can assign to them. To do that choose the Add New button or Users⇒Add New
- Subscribers – they can manage their own profiles, upload photos, write information about themselves, post comments without waiting approval etc. They aren’t able to create Posts and Pages and they can’t change anything in the Back-end. This is the lowest user level. By default all users who register on you website are given this user role.
- Contributors – They can manage their profiles. They can write posts, but don’t have the permission to publish them. Don’t have the permission to upload files to your website.
- Authors – Can write and publish posts. Also have the ability to edit their posts and to upload files to your website.
- Editors- have access to post, pages, comments and categories.
- Administrators- have full access.
Here you can edit your profile details. Also you can change your Color Scheme.
In tools since WordPress 4.2 you have access to Press this. Press this allows you to publish quickly information from other websites while maintaining the original source intact.
Allows you to import posts and comments from another Content management systems like Blogger. It also has tools for importing posts from one instance of WordPress to another, but personally I don’t use this method because often there are errors in the process.
Here you can adjust your WordPress settings
Here you can edit your website Site Title and Tagline (short description).
WordPress Address and Site Address are used when you move your website from one domain name to another. Both fields have to match. Otherwise you’ll break your website and won’t be able to access it.
Membership – Enabling this allows people to register on your website. The new users are given a Subscriber role. You can change the role they are being given from the field bellow.
Also you can adjust your Time and Date formats.
The last option allows you to change your website’s language.
Here we can change our default Post category and Post format.
Also you can setup Post via email.
This page allows you to choose whether your Front page to be used to display your latest post or for it to be a Static page. This setting very much depends on what type of website you are building and which is the theme you use.
You can adjust the number of post being shown on your blog page and in your RSS Feed. RSS (Really simple syndication) is a way for two websites to exchange posts automatically. You can adjust the number of post being shown in the feed. To access your feed type yourdomainname.com/feed
The last option allows us to choose whether your website has to be indexed by the Search engines. By Default it’s on. In some cases when you make a test website you don’t want it to be indexed by the Search Engines because this can effect your Domain’s SEO score.
Here you can adjust your pingbacks and trackbacks (a way for other blogs to be notified if you link to them). Also you can adjust your Comments options. For instance you can choose whether only registered users can comment or they need to register first. Also you can adjust your moderation settings.
This page allows you to change the size of your image thumbnails. If you change this setting your old images won’t be affected because they have already generated thumbnails. This is why we have to use a plugin to regenerate the thumbnails of the old images. This plugin can do the trick.
From Here you can change your URL’s structure. For SEO purposes it’s not wise to use the plain mode because your URL needs to contain your Title. This is why I use the Post name option.
Day and Name and Month and Name are also acceptable. By default your WordPress installation comes with the Plain option so you have to change it!
Also you can change your category and tag base with something different. By default for category it is yourdomainname.com/category/your_category_name and for tags – yourdomainname.com/tag/your_tag_name. Usually it comes handy when you have to translate a website.
This concludes our WordPress Basic Chapter.
Building your First WordPress Website
Twenty Sixteen theme
We’ve added some post to our website. Also we have a sample page and a category page added to the menu. The Twenty Sixteen theme is suitable for blog websites. That said we have to install some plugins.
Contact Form 7
We need a Contact form. One of the most used contact form plugins is Contact form 7. Install it through the plugin repository. You’ll see that there is a new section in your left menu. Navigate to it .
Edit the form and add a reCaptcha tag. Captcha is important because it block bots from sending you Spam emails.
<p>Your Name (required)<br /> [text* your-name] </p> <p>Your Email (required)<br /> [email* your-email] </p> <p>Subject<br /> [text your-subject] </p> <p>Your Message<br /> [textarea your-message] </p> [recaptcha]<br /> <p>[submit "Send"]</p>
This way you are going to have a reCaptcha added to your Contact Form. In order for reCaptcha to work you need to configure it first. Follow these instructions.
Adjust your Mail settings. Often you don’t have to change anything here. In the To: section by default the mail address is the one you’ve used when you’ve installed your WordPress website. You can change it to something different. The other fields correspond to the fields from the form section.
Messages allows you to change the messages that are given when you do a certain action.
Save your changes and copy the shortcode
Add a new Page and name it something like Contact us (it is up to you). Copy the shortcode into your Editor and publish the page.
Now you have to add the page to your menu. Hit save and you are good to go.
Here is how it looks on the Front-End.
It’s a good idea to activate Akismet. It’ll help you fight the spam comments. With Akismet you don’t have to worry so much for comments moderation. The plugin runs every comment against its database and determines whether it’s spam or not. The system is very good. Without it most of the Spam comments will go again in the spam folder but the moderation can be very exhausting. Sometimes a bot can send hundreds of spam comments.
Akismet is installed by default. Go to plugins and activate it.
You have to acquire an API key. For that you have to sign up. Click on the Get your API key button.
If you have already registered to WordPress.com you can sign up with your profile. Otherwise you’ll have to register an account.
Now you have to choose a plan. The first one is free. The other ones give you some bonuses. It’s up to you. In this tutorial I’ll choose the free Basic plan.
In order for it to be free you have to scale to $0.00/Year. The requirement to fill your credit card credentials will disappear. You have to click Continue.
Your API key is ready. Click on Automatically save your Akismet API KEY.
You’ll be redirected to your WordPress website. Click on Save changes.
Congratulations! Now Spam fighting is much easier.
Many website owners want their users to be able to register. WordPress has a default form but it lacks many options such as the ability for a user to choose their own password. I like to use a Front-End registration form plugin called Profile Builder. It has additional fields that may come in handy. Also it has Edit your Profile and Recover your password forms.
Before you download the plugin, activate user registration on your WordPress website. To do that navigate to General Settings and tick the anyone can register box and hit Save Changes.
Install the plugin and activate it. A new section in your left menu has appeared.
In basic information we have all the information we’ll need to get started.
To create a form you’ll need to create a page and paste the corresponding shortcode to it. For example you want to create a registration page. Create a page called Registration and paste the shortcode in the editor.
Publish the page and add it to your menu. We will create four pages: Log in, Register, Edit Profile and Recover password with the use of their corresponding shortcodes.
Now we have to make those pages sub-menus to a custom link with a title My Profile which points to yourdomainname.com/#. We do this because on touchscreens its hard to use the drop down menu function.
Lets see the results in the Front-End
In General Settings you can activate Email Conformation. By default it’s turned off. If you turn it on your users will receive email containing link for activation upon registering on your website.
Also you can restrict users to log in only with username or email. Another option is to determine the length of the password your users will use. Additionally there is an option to enforce strong passwords on them.
Admin Bar Settings allows you to choose which user role has the permission to view the admin bar in the Front-End of your website.
In Manage Fields you can add or edit existing fields. Extra field types are available in the pro version of this plugin.
Add-Ons give extra functionality to your plugin. Some of them are free others are paid.
The free version of Profile Builder available on wordpress.org is great but it lacks some functionality. If you want a plugin that allows you to do almost anything in the field of user registration check their paid version of profile builder. It comes with great features at a reasonable price.
Speed is essential for your website. Nobody likes to wait for a slow website to load. Also Google includes speed in its ranking algorithms. Speed is determined by many factors such as the choice of your hosting provider, the theme you use for your website, the quality and quantity of the plugins you’ve installed etc. Ideally your speed optimization and caching must be done by your hosting provider. For example SiteGround enables you to use their own caching system called the Supercacher which speeds your website dramatically. If you host your website on SiteGround you have to deactivate any caching plugin.
There are many techniques you can use to speed up your website. You can check my article on this topic – How to speed up your WordPress website
Before you do anything to speed up your website, measure it’s current speed ratings. I like to use this website speed test. Here are the results:
This results are great but you have to keep in mind that I don’t have much information on this website. Also the Twenty Sixteen theme is very light.
If you host your website on a regular hosting provider you can speed your website with the help of W3 Total Cache. If this is the case download the plugin and activate it.
When you check your website results the first time after you’ve run the test, you won’t see a big change. If you run it for a second time you are going to see a significant decrease in website load time. This is because the second time your website has been already cached and therefore it can be accessed much faster.
The results from my test are:
Those are great results. If you combine them with some server related tweaks that your host can provide you can achieve even better results.
Remember to empty your cache when you do a change to your website – for example a new plugin. This way you and your users will be able to see those new changes. Sometimes it is necessary to empty your browser cache in order to see the results.
Security is very important for your website. The First step to a secure website is a secure host.
There are additional steps besides a good hosting provider you can take to further secure your website. If you want to further investigate this topic you can read this article – How to secure your WordPress website. The techniques in it are done without the use of plugins and are for more advanced users.
The iThemes Security plugin allows you to do almost all of this steps with the click of a few buttons.
Install and activate the plugin. Click on the Secure Your Site Now button:
A screen will open with some steps you have to take.
- Make a Backup to your database. If something goes wrong you can always restore it.
- Allow the file updates in order for the plugin to be able to do its job.
- Finally secure your website with One-Click Secure
It’s a good idea to change your log in and register slugs. This way only you will have access to them. This will make your site considerably more secure. Also you’ll get rid of most of the fake account registrations. Go to the Settings tab, scroll down and click on the Enable the hide backend feature. Next change the login and register slugs with something that you will remember- better write it down. Otherwise you won’t be able to log in to your website!
It’s a good idea to ban known bad user agents and IP addresses from accessing your site. Click on the Enable HackRepair.com’s blacklist feature.
Also you can Ban users using their IP address if you enable ban users.
Last but not least you need to whitelist your current IP address. Otherwise there is a small possibility while you edit your website to be lockout. By default the lockout will last 15 minutes. In this time period you won’t be able to access your website’s Back-end so don’t freak out. If you get yourself 3 lockouts in a period of 7 days you’ll get banned from your website. You can adjust those settings here:
If by some small chance you get yourself banned you are going to need to access your files with the use of a ftp client or file manager. Then you’ll need to navigate to wp-content/plugins. There you have to rename the iThemes security plugin folder. Just add 1 to the existing name. This will deactivate the plugin.
This plugin has a pro version that is paid. It offers additional functionality and support – iThemes Security Pro.
It’s very important to have a backup of your website. No matter how well your website is secured or how good your host is you never know for sure. I like to use UpdraftPlus backup to make a daily backups of my websites. Install and activate the plugin. Navigate to Settings⇒UpdraftPlus Backups
Navigate to Settings and choose your remote storage. Depending on your choice you’ll need to follow the instructions. I like to use the GoogleDrive because you have 15 GB free storage space.
After you’ve chosen your remote storage and made the appropriate changes you can change your File and Database schedule.
I like to do daily backups. To do a backup navigate to Current Status and click on Backup Now. Also from here you can restore your website.
Yoast SEO is hands down the best SEO plugin. Install and activate it. When you open your posts or pages, bellow the Editor you’ll see a new section. Here you have to determine the keyword of your post or page.
The plugins has it’s own grading system that will tell you how good your post/page SEO is. Another great source for keyword insights is Google keyword planner. The choice of a good keyword can be the difference between success and failure. You have to choose keywords for which there is smaller competition but will bring you the best results. This is very hard because Internet is flooded with websites and the competition is fierce. If you’ve just created your website and your domain is new your best bet is Long-tail keywords.
With the use of this plugin you can verify your website in Google Webmaster very easy. Every webmaster should register his website in Google Webmaster. This way you show Google that your website exists. This is the place where you submit your sitemap. A sitemap represents a list of all your posts, pages, images etc. It’s a guiding document for Google’s web crawlers. Every time when you post a post or page they are included automatically in this sitemap and are being sent to Google for indexing.
To submit your sitemap you need to accomplish a few steps.
First you need to create an account in Google Webmaster. Next you need to add your website. Click on Add a Property. Enter your website’s URL address. You’ll receive a verification code. Copy it and paste it in Yoast SEO⇒Webmaster tools in the field Google Search Console. Click Save changes. After that return to Google Webmaster and verify your website. There are other ways listed in Google webmaster that will allow you to verify your website so don’t worry if there is a problem.
The Webmaster tools section allows you to connect with other search engines too.
Next you need to add your sitemap. First you need to regenerate your permalinks. Go to Settings⇒Permalinks. In common settings change to plain and save. After that change to your previous option and again click save.
Now go to SEO⇒XML Sitemaps
Click on the XML Sitemap button. A new screen will appear.
Copy the URL address from the URL bar of the new page. Usually it is yourdomainname.com/sitemap_index.xml
Now head over to Google Webmaster and enter your sitemap. In the left menu click on Crawl⇒Sitemaps. Click on ADD/TEST Sitemap and enter the section of the sitemap’s URL address after your domain name – sitemap_index.xml. Click on submit. Congratulations you’ve submited you sitemap to Google Webmaster. Now it’ll be much easier for Google to index your website.
Ir’s a good idea to check some other options in Google Webmaster like the location one in Search Traffic⇒International Targeting.
It’s very important to set your preferred domain- www.yourdomain.com or yourdomain.com. If you don’t do that this can lead to Duplicate content. And this will lead to a big hit for your SEO. To achieve this follow the instructions.
It’s important to track and measure your website traffic. Google analytics is the most widely used tool for this task. First you need to create an account at Google Analytics. Enter your website’s data and acquire your verification code. Install the Google analytics plugin and activate it.
Navigate to Analytics in your menu.
Click on Settings and authenticate with your google account. If you want you can enter your verification code – just click on manually and enter your UA code. It’s advisable to use the automatic function. This way you can see your site traffic in the dashboard. Otherwise you won’t be able.
In Dashboard you can see your traffic stats.
Now your website is good to go. You’ve learned how to manage your WordPress website and you’ve added some great plugins that have extended your website’s functionality. In the next part of this tutorial we are going to change the theme that we use. Twenty Sixteen is a great theme but it lack some functionality. It’s more suitable for blog websites. The next theme we are going to use is not just a theme – it’s a website builder that allows you to built every type of website you can ever imagine. The theme is called Divi and it’s created by Elegant Themes. Here you can see the end result of this tutorial.
Disclosure: The next section contains affiliate links. This means I am going to receive a commission by Elegant Themes if you click on one of them and buy something. There is no additional cost for you. I’ve used their products and I am still using them and I recommend them sincerely.
I am going to review the functionality of Divi and show you how to built beautiful websites with it.
Here you can see an overview video of Divi
In order to acquire Divi you need to be a member of the Elegant themes website. Being a member gives you access to almost hundred themes. Also it gives you access to great plugins. To become a member you need to choose a paid plan. The Personal plan is $69 on yearly basis. It gives you access to all the themes but you don’t get access to their plugins. They are very good. You can see for yourself here. I really like the monarch social media sharing plugin and Bloom Email Opt-ins plugin. They also have a great page builder called the Divi Builder that you can use on different themes. That is why it’s a good idea to choose the second plan – it’ll cost you $89 on a yearly basis. Their last plan gives you lifetime access to their themes and plugins. Otherwise you are going to need to pay every year in order to get new themes, plugins and updates. It’ll cost you $249 one time. Usually in other places like the Themeforest shop the paid themes cost around $60 each. Here you get 87 themes and 6 great plugins at a annual price of $89 or one time fee of $249 in order to get lifetime access. To become a member click Here.
Now we are going to download and install Divi. Go to your members area. Scroll down to Themes Download and download the latest version of Divi.
In Your Dashboard go to Appearance⇒Themes and click on Add new. Browse and upload your theme file. Install and activate it.
Here you can add a Logo and a Favicon. Favicon is the little image in your browser’s tab.
By default Fixed Navigation Bar is enabled. This option represents your sticky menu. A sticky menu stays on top of your page even when you scroll down your page.
You can make your first post image a featured image by turning Grab the First post image. If you’re a building a blog and you want your blog post to be shown in full on your homepage enable the Blog Style Mode.
You can connect to Mailchimp and Aweber.
Also you can turn off your Social media icons on and off. Under that section you can enter your social media account links.
Bellow that section there are fields in which you can adjust how many products or posts to be shown on different types of pages like Woocommerce archive page, Category, Archive etc.
You can enable the excerpts and the Back to top Button. Also you can add your own css code.
In navigation you can exclude pages or categories from the menu. Additionally you can disable the dropdown menus or turn off the Home link.
In layout settings you can disable or enable some of the elements included in posts and pages or even in general. For example you can disable the comments section in posts and enable it on pages. Or you can disable the thumbnail image – featured image in posts and enable it in pages. You can turn off and on things like author, date, categories. To navigate through the post and page settings use the tab menu.
In Ad Management you can enable an ad section bellow your posts. The banner has to be 468x60px in size. Also you can input an adsesnse code.
Note: It’s not advisable to enable most of those functions if you are using the SEO plugin by Yoast! Many of them like Title and Meta description overlap. In this tutorial we are using it so we won’t be using most of them. If for some reason you don’t want to use the Yoast Seo plugin you can use those options to improve your SEO without any problem. It’s safe to change the autogeneration title methods for your Homepage and for your Category/Archive pages.
In the Homepage SEO tab you can enable custom title and meta description for your homepage. Those fields are displayed in search engine results. Optionally you can enable meta keywords but search engines don’t use them anymore. It’s a good idea to turn on canonization. This will help you avoid duplicate content. In the fields bellow you have to enter the required information in case you’ve enabled any of the functions mentioned above except canonization.
In the Single post page SEO you can enable the above functions for your post page. The difference is that if you enable them you are going to have to use the custom field names when you create a post.
You can find custom fields bellow your post’s editor
In the index page SEO you can enable the Meta description for Category/Archive pages. Also you can change your Title autogeneration method.
In the integration page you can enable or disable the ability for you to add code to your header and body. Bellow that section there is another in which you can add your code accordingly.
The Theme Customizer allows you to style your website the way you like. On the right there is a live version of your website. Whenever you make a change it will be reflected on the right in real time.
In Site Identity you can change your title and tagline. Also you can add a site icon that must be at least 512 px wide and tall. The site icons can be seen on the homepage of your browser. They are boxes, that represent the sites you’ve visited.
Here you can adjust your total website’s width with the use of website content width. Website gutter width makes your post area bigger and your sidebar area smaller. There is an additional option that allows you to use a custom sidebar width. Theme accent color changes the color of the links in the sidebar when you hover them.
In typography you can change the size, font and color of your body and header text.
On the background page you can change you background color or replace it with an image.
Header and Navigation
Here you can adjust your header style. You can choose between default, centered, centered inline logo, slide in and fullscreen.
Also you have the ability to enable the Vertical Navigation menu or to hide the menu until the user scrolls the page.
Primary Menu Bar
You have the ability to make your menu bar full width. Additionally you can remove your logo from the menu bar and. There are options to change your menu and logo width and height. Also you can change the size, font and color of the text and the background color of the menu and sub-menu. There is an option to change the animation used to show the sub-menu via the dropdown menu animation option.
Secondary Menu Bar
In order to see your second menu you have to choose it as a location in Appearance⇒Menus. In this tutorial I am going to use the primary menu as a second menu to show you how it works.
In the Secondary Menu bar page you can change the way your secondary menu looks. You have the ability to change colors, text sizes, fonts, dropdown menu animations etc.
Fixed Navigation Settings
You can adjust the settings of your Fixed Navigation menu – a.k.a. sticky menu. This is the menu that sticks on the top of your page when you scroll down. You can disable the Fixed navigation bar in Divi⇒Theme Options⇒General Settings. Also you can change things like text size, background color, link color etc.
Here you can add Social Icons to your secondary menu bar. For this to work they have to be added first in Divi⇒Theme Options⇒General Settings. Also you can add your telephone and email addresses.
It gives you the ability to change the column layout and the footer background color
On this page you can change the footer widget settings. You can change things like header and body text size, fonts, link colors, header colors etc.
From here you can turn on and off your social media icons.
In footer menu you can change your menu background, text and active link colors. Also you can change the font style and size.
Bottom bar allows you to change the background color of your bottom bar. Again you can change things like text font style and size. From here you can adjust your social media icon’s size and change their color.
Here you can change your buttons style
Buttons Hover Style
On this page you can change how your buttons look when you hover them.
It allows you to change your post meta and post header settings.
In Mobile Styles you can check how your website looks on mobile devices like tablets and phones.
Here you can change your body and header text size.
This are the settings for the phone version of your website.
Mobile menu allows you to hide your logo on mobile devices. Also you can change the text color and background color of your mobile menu.
It allows you to change the Color Scheme of your website.
Menus, Widgets and Static Front page options are the same as the Twenty sixteen ones.
In the Role editor you can determine which Divi functions are available to certain user roles.
In the DIvi Library you can create and save certain layouts. This is very helpful because you can use one layout on different pages or you can even export and import all your layouts to another webpage that uses the Divi theme. Also you can categorize those layouts.
Building a website with Divi
The first thing that we have to do is to change the header style. The default one is good but I prefer the Centered Inline Logo.
Now we are going to make the body line height 2.4 in General Customizing⇒Settings⇒Typography. We do this because when there is little or no information on a page there is a white space bellow it in the browser. If you increase the body line height you’ll solve this problem. For different sized monitors this value will be different so it’s better to pick a higher one especially if you have a tiny monitor.
Next one is the home page. We are going to make a new page called Home. Notice there is a big button labeled Use the Divi Builder. Click on it. This will lead you to the Divi builder. The Divi builder is the most important part of the Divi theme. It allows you to built whatever you like and it has almost 40 modules.
For example I’ve selected two columns. Now we are going to insert modules to them
For the first row we are going to choose the map module and for the second the contact form module. In each Module you have 3 tabs: General Settings, Advanced Design Settings and Custom CSS.
In General settings you have your main options. They differ from one module to another. The Advanced Design Settings allow you to make any changes you like concerning the design of your module – things like color, text size, font etc. In Custom css you can add your own css rules.
In the maps module you need to find a location. You can add a pin to it if you want. Save and Exit.
Next we have the Contact Form Module. Define an email and title. It’s better to leave the CAPTCHA enabled. This way you’ll be protected from spam emails. Also you can add your own fields.
In the Divi builder there are 33 predefined layouts. In this tutorial I am going to use them to show you how you can build a magnificent website. You can always change the way the rows and modules are organized. You can add new ones and delete old ones. Click on the clear layout. This way all changes you’ve made are gone. Now we can use the Predefined layouts. To access them click on Load From Library.
We are going to choose the Homepage Company layout.
Now we have to make some changes. Preview the page. You’ll notice that some of the images are missing. We have to fix those issues.We need to add an image in the first slide of the slider.
To edit the module click here:
Click on the first slide. For the purposes of this tutorial we are going to change the name of the slide to Powered by WordPress and add a logo. In the URL box we’ll add the WordPress.org link.
We’ll remove the background image and change the background color. In the slide image we’ll upload the WordPress logo.
Here are the results:
Next we will remove the blurb module. After that we are going to add a new fullwidth section. Before you do that you need to add at least 3 posts with nice featured images and assign them to a new category.
Now we’ll add the Fullwidth Post Slider Module. Choose your post number count – I’ll choose 3. Next choose the Category to which you’ve assigned your posts.
Here is how it looks on the Front-End.
For the Fullwidth Portfolio module to work you need to add your work in Projects. Don’t forget to assign your work projects to a category. Use the tag field to add the skills or software that was used in this project. I’ve added 5 projects.
Next edit the portfolio module. You can change the title if you want to. Don’t forget to include the project categories.
Here is how it looks on the front-end
Next we will remove the four column row.
After that we are going to change the testimonial section.
We’ll delete the second row. On the first row we’ll drag and drop the Testimonial module from the left to the right column. In the first column we’ll add a Tabs module. In it we will add 3 tabs with the names About us, Team and Goals. Add some text to it.
I will add another testimonial to the second column. This way I’ll make the two columns equally tall in the Front-end.
On the Front-end it looks like this:
We are going to leave the map section as it is. Just add your location and pins. Edit the Contact module and make sure to add your email address and whichever new fields you like. Enable CAPTCHA.
I am going to add a background color to the Contact form section. If you want to do that you have to edit the whole section from here:
On the Front-end it looks like this:
The last thing you need to do is to make this page your Home page. Navigate to Settings⇒Reading. On Front page displays choose A static page and for front page choose this page.
The Home page is ready. Now I am going to change the colors of the secondary menu and footer. I am going to do this through the Customizer. It’s up to you whether you want to change the color or not.
Next we have to add some links to our menu. We can choose between two types of links. The first one are our typical links. They go to another page or website. The second ones go to a specific section on a page – anchor links. It’s up to you to choose which one to use. Our Home Page is suitable for Single Page Website. That being said some of our links will be anchor links. Here is a nice video explaining how to add anchor links in Divi.
Let’s add our new links. First we have to add the appropriate CSS id’s. Go to the About me section and click on edit.
Navigate to custom CSS and in the CSS ID section type: about-us
Do the same for the contact section. For it in the CSS ID section type contact-us.
Navigate to Appearance⇒Menus. Once there we are going to make some changes. Our main menu will become a secondary one. I am going to rename it to menu-secondary. After that I am going to disable the Primary Menu location and leave only the Secondary Menu location. Click on Save Menu.
Next create a new primary menu. Add the Home page. Click on Custom links and add the following links: About us link with URL: http://yourdomainname.com/#about-us and Contact us with URL: http://yourdomainname.com/#contact-us.
Next we need to create a Blog and add it to the menu. Go to Pages and create a page with a name Blog. After that navigate to Settings⇒Reading and for Post page choose Blog.
Add the Blog page to the primary menu.
Let’s add a Services page. First we need to create it. For its creation we are going to use the Sales Page predefined layout.
Publish the page and add it to the menu.
After that we are going to add a portfolio page. We are going to use the Portfolio 1 Column layout.
After you load it, replace the portfolio module with the filterable portfolio module. Don’t forget to include your categories and to set the posts number.
Publish the page and add it to the primary menu.
Here is how it looks on the Front-end.
We are ready with our menu.
Fixing Profile Builder
You’ll notice that the design of your profile builder registration form is corrupted. To fix this issue you have to copy the code from wp-content/plugins/profile-builder/assets/css/style-front-end.css and paste it in Divi⇒Theme Options⇒General in the Custom CSS section.
If you want to implement a shop in your website you have to install the WooCommerce plugin. Before that you need to uninstall the profile builder because WooCommerce has a inbuilt registration system.
You need to run the Setup Wizard. In order to learn how to install and use WooCommerce it’s a wise idea to watch their tutorial videos here.
Follow the steps in the Wizard in order to properly install WooCommerce on your website.
If you are using W3 Total Cache’s database cache you need to add the _wc_session_ string in the “ignore query stems” cache settings.
Go to menus, choose the secondary menu, delete the My Profile section and add the new WooCommerce pages.
You need to add products and associate them to categories in order to view the shop page properly. You can use modules to show your products on the Home page. To see how the shop page looks click Here.
Now your Website is ready! Congratulations!
Akismet – Spam protection
Contact form 7 – plugin for building contact forms
W3 Total cache – speed optimization
iThemes Security – security plugin
UpdraftPlus Backup – backup plugin
Profile Builder – front end user registration
BuddyPress – helps you built online communities
The Divi Builder – page builder by Divi
Page Builder by SiteOrigin – Page builder
MailPoet Newsletters – Newsletter plugin
Monarch Social media Sharing – social media sharing
Bloom Email Opt-ins – email-opt in plugin
WordPress resource websites
TheCMSPlace – WordPress tutorials, how-to’s , plugin and theme reviews, Social Media, Hosting.
WPBeginner – the bigest resource website for WorfPress beginners
Elegant Themes Blog – they blog about WordPress and web development in general. Also they post news about their products – new themes, plugins, updates etc.
WPMU– a great WordPress resource website. It has some of the best tutorials out there.
Tom McFarlin – WordPress tutorials and tips.
WP Mayor– WordPress related news, hacks and plugin reviews
WP Lift – WordPress news, plugin and theme reviews, guides
You’ve learned how to built your own WordPress website but the hard part is ahead. You have to produce great content and to offer great services and products to your visitors in order to succeed in your field. Also you have to invest in marketing. This will require hard work and determination.
If you have any questions or you want to share your opinion, you can write in the comments field bellow.