List Of Contents
- 1 How To Make A WordPress Website With Gutenberg in 2019
- 2 A Comprehensive Guide For Beginners
- 3 Contents
- 5 Why this guide?
- 6 My Promise
- 7 So, first things first…
- 8 1. Background
- 10 Drag and Drop Web Design Trends
- 11 Most Popular Site Building Platforms in 2018
- 12 WordPress.com Vs WordPress.org
- 13 2. How To Get a Domain Name
- 14 3. How To Get a Web Host
- 15 How To Get Hosted on Blue host
- 16 4. How to Install WordPress
- 17 5. How to Install a WordPress theme
- 18 6. How to Customize Your WordPress site
- 19 Creating Pages
- 20 Setting Up a Static Front / Home Page
- 21 Creating Menus
- 22 Adding Widgets, sidebars and Footer
- 23 7. How to Register Website with Google Webmaster Tools
- 24 8. How to Test Website Responsiveness
- 25 9. How to Speed up WordPress Sites
- 26 10. How To Customize with Elementor WordPress Page Builder Plugin
- 27 11. 5 Must have WordPress plugins
- 28 12. 5 Must Dos Before Launching your Dream Site
- 29 13. 5 Must Dos Before Publishing your 1st Blog Post
- 30 14. Launch Your Website
- 31 15. Spread the Word
- 32 Yep, You're Done Creating Your 1st WordPress Website
How To Make A WordPress Website
With Gutenberg in 2019
A Comprehensive Guide For Beginners
In this compressive guide, I’ll show you step by step how to make a WordPress website using the new Gutenberg editor in WordPress 5.0.
I’ll also show you how to customize your website step-by-step. Sounds hard, No!
For your info, this is the easiest WordPress website set up guide for beginners out there today.
This guide is coupled with the latest updates in the WordPress echo system and some of the finest tips to get you started. Period!
This guide is nearly 5,000 words put together with joy and being mindful to bring you value :-).
You may first grab a cup of coffee and read through it for the next 17mins. Or you may simply bookmark as your weekend read.
Either way, it was put together so as to guide you throughout attaining your first web presence step by step.
If you want to jump start and make your website without introductory information, kindly jump over to the first section. Otherwise, I highly advise that since you’re a beginner, it’s needed to know every bit of making a WordPress website.
Why this guide?
I am a no coder and with no background in computer programing.
I started learning how to use WordPress in mid-2014 and since then, I’ve built websites for clients world over.
I am not a computer wizard nor a code wrangler.
I self-taught how to make WordPress websites by reading tutorials just like this.
Is this a goto Guide?
During my period learning to make WordPress websites, it was not easy to find one single reliable resource you can follow from step 0 to finish on how to build a WordPress website by a beginner.
So, I had to spend hours reading the material and watching videos on how to create certain functionalities and tweaking things around.
And the main reason I write this blog post is, I’ve been there and I don’t want you to go through the same hustle & bustle and spend hours before you actually create your first WordPress site.
By end of this fully thought of tutorial, you’ll have a WordPress website up and running.
It will be having a menu, pages, optimized for speed, responsive on mobile devices, submitted into google webmaster (search engine) and above all, running on the latest major WordPress version 5.0 with Gutenberg on Astra WordPress theme.
Basically, I want to show you the easiest way how you can have a WordPress website up and running in less than 60 minutes. I mean, the easiest.
So, first things first…
There are terms you should know of before we even kick-start our website building journey with WordPress.
This is simply your website/blog name (www dot yourwebsitename dot com). It is the address where Internet users can access your website content. Behind a domain name is an IP address used to find and identify computers on the Internet.
This is basically storage on the internet where your website files will be hosted. Web hosting enables that you and other users can view, navigate and interact with your website the internet. Web hosting is achieved by the use of servers.
A server can be both software or hardware. In terms of software, a server is a computer program which manages access to a centralized resource or service in a network.
Whereas a server in terms of hardware is a physical computer with way higher stronger capacity in terms of storage space, computation power, physical resources such as ram and serves other computers (clients) in a network.
WordPress is a content management system (CMS) that we can use to create websites for free.
There are many other comment management systems on the internet just like there different cars like a Mercedes, Toyota, Mazda.
I choose WordPress because, today it powers the largest fraction of websites on the internet, the easiest to use for both beginners and advanced user and supports dragging and dropping.
32% of websites on the internet are running on WordPress, this makes it way bigger and popular than any other content management system or website builder out there.
WordPress is an open source project licensed under the general public license (GPL) and like I said, freely available for anyone to use around the globe.
You not only can create websites with WordPress but also it can act as a framework to run various other systems and platforms around the globe.
That’s how awesome WordPress is. But the most amazing, it is a WYSIWYG content management system, or call it a website design software that requires you no coding knowledge whatsoever to use it.
The most beautiful part, WordPress is free, open source, simple, secure, regularly updated and the most popular website creation and blogging tool on the internet.
A theme is a hub of files bundled together to create a graphical interface of a web structure based on the WordPress (CMS) core files. With a theme, you’re able to decide how your website will look like and work like. It enables you to have an abstraction layer and protects you from interfering with the base software. (CMS)
You can’t make a Website in WordPress without a theme.
Maybe you’re now thinking of the inventor of modern movable printing press, Johannes
Gutenberg, you’re right but this time, No!.
Gutenberg is the new editor in the WordPress version 5.0. It replaces the classic editor with a unique way to write, publish and make websites in WordPress. It’s a complete game changer. Released into WordPress core on the 6th December 18.
Gutenberg is the first step for a bright new future for WordPress as Yoast puts it
With Gutenberg, you are able to create rich media pages and posts with use of blocks weather building your first site or an experienced developer, you’ll find the experience impressive. With blocks, inserting, rearranging, styling text content, images or videos is made easier.
Just like a theme, a page builder sits on top of a theme and is bundled with templates, sections, and tools that make your website design experience a lot easier.
The whole essence of page builder is to enable you to drag and drop elements in your design canvas. By doing this, you see how your website will look like in real time.
You can design a WordPress website without a page builder but the process of customizing a theme to suit your visual liking is made way simpler with page builder.
Page builders come sometimes bundled within a theme but most times, you’ll have to own it as a separate plugin.
Now, this is part of what I didn’t know when I started out then. And I don’t want you to go through the same.
A page builder simplifies 70% of your WordPress website design work by providing you with awesome free templates, tools and customization abilities and mostly, gives you the ability to drag and drop things around.
When you use a page builder to design your WordPress website, you cut a lot of hours customizing the WordPress theme from whichever developer you bought it, spending endless hours seeking for support and reading the theme documentation and so on
I will introduce you to the world’s best page builder today called Elementor and we will use it to create your first WordPress website step by step.
If you what to extend the functionality of your website further than what a theme could offer, then a plugin is something you need.
It is simply an extension developed to perform a specific feature when added to a WordPress website. Such as adding specific emojis, a contact form, opt-in form etc
You can add as many plugins as you like though not recommended more than 10.
A page is a WordPress pre-defined post type. Pages are static and are not tied to the reverse chronological order of a WordPress blog post content. They’re majorly used to organize and manage the website content structure.
Menus form the navigational structure of a WordPress site. They can be a single or combination of pages, post categories, tags or custom links They’re found under the admin area >> Appearance>> menu.
You can have more than one menu and you’re in a position to select which menu appears where and how.
Anything mentioned above can easily be done in WordPress by just a click or two.
Now, let’s create our first WordPress Website.
These are set(s) of content on a WordPress website appearing in reverse chronological order. Categorized, tagged and archived, posts are what makes up a blog and these are generally updates on a certain topic.
To be honest, website designing is a very wide field of practice involving a lot of new and old technologies.
Drag and Drop Web Design Trends
Website design has changed trends from way back since the invention of the internet. I have witnessed a change in the use of centralized systems to the adoption of decentralized systems.
Adoption of the use of Content Management Systems to the way it was done back in the days.
Of recent, there have emerged website design systems like the use of website builders (WYSIWYG), use of content management systems (CMS) among others.
There have been mixed reactions on which are the easiest way on how you can create your first website easily and fast.
From experience, It is easier to use a website builder which is an already hosted platform from a provider, grab a web template, drag and drop here and there, then you’re done.
Next step is choosing your hosting platform and a domain name provider and most times, website builder platform also offer domain and hosting solutions to their clients.
However, even when I consider the use of website builders as the easiest way to create a website, but NOT in the long run. And so, I don’t recommend it.
The establishment of website design platforms like content management systems (CMSs) has completely replaced the use of website builders.
The reason here is very simple. They are open source 🙂
In simple terms, opens source systems are those that have a number of contributors in terms of architectural and system development. Anyone including you can contribute to the development and betterment of the platform.
And this has enabled open source content management systems like WordPress, Drupal, and Joomla to skyrocket hence powering millions of websites on the internet.
Most Popular Site Building Platforms in 2018
Today, WordPress is considered to be empowering over 32% of the websites on the internet according to data from web technology survey firm W3Techs and hence making it the most used website design platform in the world.
At first, it was considered to be only for weblogs or a platform for bloggers but today, it has taken a twist hosting websites of some of the largest marketing firms, news agencies, corporate bodies.
These include but not limited to New York Observer, New York Post, TED, Thought Catalog, Williams, USA Today, CNN, Fortune.com, BBC America, TIME.com, National Post, Spotify, TechCrunch, CBS Local, NBC among others.
WordPress.com Vs WordPress.org
Creating a website in WordPress has two twists. One, creating on WordPress.com which is both free and a paid hosted platform by WordPress team or creating your website with WordPress.org, which is self-hosted and 100% managed by you.
For resistance, with WordPress.com your domain will look like, myfirstwebsite.wordpress.com which may look a bit unprofessional to any user or visitor.
And this among many other reasons I recommend using WordPress.org where you will have a self-hosted website but still use WordPress features.
Like hundreds of FREE websites themes/templates, hundreds of FREE plugins to enhance the performance of your website plus all other awesome features you never to take care of. Ie, platform updates, theme updates, plugin updates, security among others.
If you choose to go for a self-hosted WordPress website, which I am going to take you through, you will have to cater for your website hosting and domain needs.
2. How To Get a Domain Name
To register a domain, hope over blue host and choose your preferable domain.
Why Blue host? I recommend them because they’ve been there and stood a test of time.
They’re also the WordPress recommended domain and hosting platform with over 2 million domains hosted.
Blue host has also been recommended by WordPress and also WP Beginner the leading WordPress resource blog on the internet.
To register a domain, head over to Bluehost.
You’ll be required also to choose your preferred web hosting package.
See this in the next section of this blog.
3. How To Get a Web Host
Like I earlier mentioned, there are millions web hosting provider.
Finding a reliable web hosting is another hustle.
Blue host is yet again a great web host. And since you already registered your domain with them or already having a doming, you can easily point / host your website with them.
Having a central reliable, secure and trust web host will make you be at peace all time with no worries about your website going offline or not having access to customer support when needed. Click To Tweet
How To Get Hosted on Blue host
First, go to blue host.
If you already have a domain with another provider, no issue or you have it with blue host, no issue still.
You’ll simply have to choose where your domain is, them select a preferred web host package.
Each hosting packages includes;
Enter your contact and billing info
And finally, sign up for the package.
Congratulations, you now have your website host as Blue host.
4. How to Install WordPress
Installing WordPress is made really simple.
With the one-click install WordPress option in control panel, you’re able to set up your WordPress website, name, username, password, email, database name and password.
After the previous step, you’ll be able to setup your website username, password and database.
All that is done just through a click. Next,
At this step, you’ll be able to log into your first WordPress website using your already created username and password. Next is to start creating your websites.
Once you log in, (www.yourwebsite.com/wp-admin), you’ll be able to start creating your first custom website step by step. In the next section, i’ll show you how to do just that.
5. How to Install a WordPress theme
A theme is a predesigned template that will look similar to your dream website. Themes are customizable and you can tweak them to your liking.
There are free, paid and custom themes.
With a theme, you just have to download and install it in theme area under Appearance in your WordPress website dashboard.
Once you’re in the dashboard, you get access to thousands of themes from many WordPress contributors and developers.
Or you may simply do a google search for a specific theme of your choice.
If you want a custom-made theme, or a bit more professional, then you may go to theme marketplaces like theme forests or you may look out for freelance WordPress theme developers for a quote on a developing you a custom one.
Many of them are actually really professional and well made.
In our case for this guide, I will use the latest WordPress theme, Astra .
After getting a theme, installing it is very simple.
Under Appearance > themes > Add new> Browse for theme > Upload and Activate.
IMPORTANT: Changing themes won’t delete your previous posts, pages, and content. You can change themes as often as you want without having to worry about losing what you’ve created.
6. How to Customize Your WordPress site
In the WordPress Dashboard sidebar, locate Pages > Add New. Then follow the procedures.
In this guide, we will create a Home page, About page, Blog and Contact page.
Creating The Home page
I am using Astra as the theme and on the front page, i want to have full width contained with no page title and no side side bar.
So, i choose the image block and set imagine to centre and added a welcome message too 🙂
Made a few tweaks with Gutenberg blocks and archived the above.
Setting Up a Static Front / Home Page
A static page is always known as the home page. This page doesn’t change very often.
To set up a static front page:
Go to Settings > Reading
Choose a static page that you have created. “Front Page” denotes your home page, “Posts page” is the front page of your blog (if your entire site isn’t a blog).
If you don’t choose a static page, WordPress will take your latest posts and showing them on your homepage.
Creating An Contact Page
Simple head over to your WordPress dashboard again and browse for pages>add new
After creating the preferred page, simply click publish.
Repeat the same for all other pages besides the blog. Customerization can be done with Gutenberg blocks too.
Head over to Appearance inside your WordPress dashboard and click menus.
Create and name a menu (Main menu, footer menu)
Locate your desired page, category or custom link and add it to the list by clicking the checkbox next to it and then “Add to Menu”.
Once a menu is created, you’re free to select it’s display location.
In this case, our menu will be the main menu and this appears at the top of our website.
Sidebars are exactly as it sounds.
They’re simply areas on your website where you can place a number of elements (widgets).
There are box left and rights siders.
Depending on the theme you’re using to create your website, it will vary on how you can place your siders bars and create footers.
On our case and for most themes, footers will be created using footer widgets .
To select which widget appears in your footer area, head over to Appearance>Widgets
PS: Don’t forget to configure the Permalinks under settings.
Set it to post name or your preferred option.
This will make your page URLs to appear with the page name and for posts to display the set post title.
And finally, we’ve got to have something like this.
That’s all. Though you can continue tweak things around to suite your liking.
7. How to Register Website with Google Webmaster Tools
With webmaster tools is a Google search console a free to use tool on submitting and indexing websites into the SERPs.
You’ll have to signup with Google (have a Gmail account) to use this service.
Here is how to Submit your Website to Google Search Console.
Grab your domain name (makewebsitesformoney.com)
Go to webmaster tools, add a new property.
Register and confirm ownership of property (website)
In the verification popup, select a verification method to prove that you own the site and follow the verification instructions on the page.
Add a sitemap to your property in google search console to tell Google about the structure of your website.
PS: If you’re using WordPress SEO plugins like Yoast, you don’t have to do this. As Yoast does the sitemap submission for you.
Congratulations, you’ve successfully added your site to Google and ready to get it crawled by Google bots for indexing.
8. How to Test Website Responsiveness
There are a couple of tools out there to test for mobile responsiveness.
But, I recommend you use this tool from Google.
By simply inserting your domain, test will run. On completion, your test results will be displayed.
Also, Google will point out things you need to work on to improve your website mobile friendliness, will list additional resources among others.
9. How to Speed up WordPress Sites
There are a couple of performance checks you can do to see how fast your website loads.
Also, it is studied that a website that loads in more than 3mins will be abandoned by the visitor.
And today, several web masters are making sure that their websites load in between 1-3 seconds. And on top of that, the AMP project has come in and made it even easier to serve pages for mobile users. All AMP enabled pages are loaded just instant when a visitor clicks on that link.
On the things you may consider to speed up your WordPress website;
- Enable AMP on your website ( for mobile traffic)
- Test website load speed with Google page speed test or GTmetrix. Determine which areas to fix. (Browser cache, media, slow server response among others)
- Use speed optimization WordPress plugins like WP fastest cache.
- Reduce on the websites requests to the server by disabling loading resources that aren’t needed on specific pages
- Optimize media (images, screenshots etc). It’s advised to upload an optimized version of a media resource. For instance, images wouldn’t be larger than 1000px wide and large that 100kb. Use tools like tinypng.com or smush it WordPress plugin to optimize images.
- Update and upgrade your WordPress database. This may start with grading your website server PHP version to 7+
You may consider reading this guide I compiled earlier on: 50 secrets to speed up WordPress websites.
10. How To Customize with Elementor WordPress Page Builder Plugin
PS: You may simply skip this section if you prefer not to use a page builder plugin as an extension to further enhance and customize your website. Just jump over to the next section.
If not, see through this…
Elementor page builder plugin is simply an extension that is built to enhance WordPress functionalities by adding features and elements to your site that don’t come built-in or with your theme.
You can use Elementor plugin to do almost everything like adding forms, headers, footers, mega menus, sliders, page templates, layouts, custom post fields, custom post types and now even pop ups etc.
How to install Elementor Page Builder Plugin
In your WordPress dashboard sidebar, navigate Plugins > Add New and search. In this case, you’ll search for and install Elementor the free version.
There are thousands of plugins both FREE and paid ones to choose from.
Once you get another plugin of your choice, Installation is easy, browse for it from your download folder then, just click “Install” then “activate”.
Both the free version and paid for versions of Elementor have to be installed. Ie, Elementor pro can’t work as a single plugin, but the Elementor free plugin can work fine.
With Elementor now installed, you can simply starting editing with Elementor and customize everything on your website using this amazing drag and drop page builder.
Here is a blog I wrote a while back on how to create a WordPress website with Elementor page builder. You can follow it step by step and guide you throughout.
11. 5 Must have WordPress plugins
Of course, as you continue your journey making WordPress websites and as well reading from different website design resources, you’ll find that other websites will recommend different plugins.
The list here is my own and in no specific order. I’ve used these plugins and I found out that as a WordPress website designer, I find myself using them often and they bring a ton of value to me and less design and implementation time.
This a plugin developed by Automattic the company behind WordPress. The jetpack helps you track your website downtime, traffic analysis, direct publish from email to blog, moderation and approving comments, securing your website login access and among others, enabling you to accept your site visitors to subscribe and receive your blog/website updates via email.
This is the world’s leading WordPress page builder out there today.
The plugin bundles its self with a great number of website templates, blocks, pop-ups and media to ease your website design process.
With Elementor as your page builder, you’ll drag and drop website elements In live view, able to design and select which elements will appear in your desktop and mobile based devices.
Unlike other page builders, Elementor is extremely easy to use and bundles with a couple of functionalities to build a page builder custom theme with headers, footers, widgets and error pages, and templates set right within it.
You can’t talk of website search engine optimization in WordPress and forget to table about the Yoast SEO plugin.
With Yoast, you’re able to submit your website to search engines ie google for indexing, generating and submitting sitemaps, enable and disabling which pages, URLs, categories, tags to appear in search results pages.
Yoast is the king in the SEO WordPress plugin repo. It enables you to optimize your website and blogs for search engines with step by step analysis of every single page or blog.
This plugin by Emre Vona is among the most 5 star rated plugins in the WordPress repository.
With over 800 000 activate installations, WP Fastest cache makes it extremely easy to optimize your WordPress for speed in just a few clicks.
In just a few clicks, Google analytics by Monster insights plugin enable you to connect your website with google analytics.
This plugin brings you an easy way to view your websites stats, visitors, traffic sources and which resources your visitors use in just a simple dashboard within your WordPress dashboard.
You would not want to miss out knowing who your visitors are, where they come from and which resources on your websites they look for.
12. 5 Must Dos Before Launching your Dream Site
Optimize your website for speed and enable Accelerated Mobile Pages
- Make sure your website is mobile responsive
- Register it with Google Web master tools
- Secure your website by adding an SSL. You may this guide to install a free flexible ssl from clouldflare
- Register your website with search engines. (Google, Bing, Yandex)
13. 5 Must Dos Before Publishing your 1st Blog Post
- Publish long-form content. (1300+ words recommended)
- Add your main keyword in the first 100 words of your blog post and in the blog post title
- Add 3-5 internal and external links
- Add at least 2 media files (screenshot, image, video etc)
- Post URL should contain the main keyword. (set permalinks to post name)
14. Launch Your Website
This is the most exciting bit launching your first WordPress web project on the internet.
Launching is basically putting off your fingers and you’re comfortable that all is well with your website.
It may be that you’re disabling the coming soon page or that you have published all you draft content and made it accessible by anyone.
Website launch may also be that you allow the search engines to begin indexing your website pages, posts, media etc.
But in real sense, you’ve just started the journey building an online presence. Building a website is an on going process.
Enjoy the WordPress moments
15. Spread the Word
I wish i knew this the very first day i launched my first website
Launching your website and not tell your friends, relatives or sharing it on social media with your followers Is just like not having one.
No one will know about your website if you don’t spread the word in your circles about it.
It could be via an email to a friend or a group of workmates. Or your client. That when they’ll know which website it is and the domain (web address).
Unlink 5years ago, now Google even takes longer to indexing and rank new websites. It is said that a new website to appear on the search results pages on a relevant keyword, it may even take more than 6-12 months time period.
Yep, You're Done Creating Your 1st WordPress Website
Congratulations upon creating your first WordPress Websites Without Writing A Single Line Of Code. I hope this guide came in handy and brought you value.
Let me know about the difficulties you meet on your way. I will be available to help. I would wish also to recommend a good resource for WordPress beginners called WPBeginner.
Welcome and enjoy the WordPress moments 🙂
Get FREE Digital & WordPress Website Starter Guides