There are many ways to build WordPress website from scratch, but the most popular way is to use a platform like Astra Theme & Gutenberg Block Patterns.
You can also use other platforms to create a WordPress website, but those might be more expensive and requires more technical knowledge.
In this complete step-by-step guide, you will learn how to build WordPress website easily.
What Is Astra?
Astra is a responsive WordPress theme with a simple and elegant design, modern look and feel.
It is a fast, and lean theme that has been designed specifically for content-driven websites and it is perfect for any business or personal website.
With Astra, you can easily build WordPress website that looks great on any device, delivers a great user experience, and helps you grow your business.
With Gutenberg, the WordPress editor compatibility, Astra is even better. It is perfect for creating rich content with a simple drag-and-drop interface.
It integrates seamlessly with the Gutenberg editor and offers a wide range of features and options that allow you to create beautiful and professional websites without having to write a single line of code.
What Is Astra Pro?
Astra Theme Pro Addon is an extension for the Astra theme, which comes with a set of free and premium plugins.
It's an all-in-one toolkit that gives you more design options to build WordPress website and lets you create custom pages, posts, and portfolios.
Astra Theme Pro Addon is an important tool for any webmaster who is using the Astra theme.
It gives you the power to create custom page templates and blocks which can save a lot of time and hassle, especially when it comes to creating landing pages or designing your site's layout.
It can help you to make it even more customizable by dragging and dropping the whole section of your webpage or content needs.
Choosing from hundreds of pre-designed fully customizable layout blocks and then with just a few extra clicks, each page looks perfect on all devices, especially mobiles.
It couldn't be any easier and the possibilities are truly limitless. It will make you worry-free from thinking that you ever needed a web designer or a developer to build those awesome websites.
What is Gutenberg?
Gutenberg is an editor for WordPress that was released in December 2018 that provides a more user-friendly experience for creating and managing content.
It enables a user to create rich content with a simple drag-and-drop interface and helps to build WordPress website(s) and create content much easier than before.
It can be used to create posts, pages, and custom post types. Instead of using shortcodes and custom fields to add content, you use blocks to control the layout of the content.
Gutenberg Block Patterns Explained
Block Patterns are a way to set up layouts of blocks through themes and plugins.
If you think of a block as a single piece of wood or a nail, a pattern is like a ready-made picnic bench that you can use.
With just a few clicks, they allow you to easily access beautiful and functional layouts for everything from headers, galleries, tables of contents, buttons, and much more.
They save you time by allowing you to level up your layouts and make it easier to create content.
This means that you can add any kind of custom functionality to your posts and pages.
There are a few patterns that seem to be emerging with WordPress Gutenberg blocks.
One is the use of multiple blocks for a single purpose, like creating a table. Another is nesting blocks, which is putting one block inside another to create more complex layouts.
What Is Required To Build WordPress Website?
To start building a professional website, you need the following tools:
1. Domain and Web Hosting
2. WordPress
3. WordPress Theme (Astra)
4. WordPress Plugins
1. Domain & Hosting
To start and build WordPress website you need a domain and web hosting server.
A. Domain
What a domain does is direct visitors to a specific website much like the address of a house.
Every domain has a matching IP address that sets its location on the Internet and of course, it's much easier to remember and share a domain name rather than an actual IP address.
Domains are actually categorized into different levels the most common are Top-Level Domains (TLDs), Second Level Domains, or Sub-Domain.
But it is best to use the TLD such as https://www.ovalten.com, you can replace .com with .net, .org, and or many others.
When you buy a domain from a domain host you gain ownership of that domain for as long as you pay the yearly fee.
Here are some of the popular Domain Registrars, that you can start off with:
B. Web Hosting
You can't build WordPress website without web hosting. Web hosting is a service that offers space to keep all your files for your website.
To buy web hosting, the provider will require that you already own a domain or you purchase a domain with them.
There are a few different types of web hosting and the most common are Shared Hosting, Managed Hosting, and Dedicated Hosting.
Depending on the type of web hosting you buy you'll have different tools at your disposal.
Shared Hosting – In shared web hosting, a number of websites are hosted on the same server, this is the best choice for small websites.
Managed Hosting – Managed hosting adds a full suite of tools to install and run WordPress-managed files, and manage email plus you have an entire team of developers always available for your help and support.
Dedicated Hosting – Dedicated web hosting is when you host each website on its own server since websites aren't sharing a server, they can have much larger bandwidth for higher traffic.
Here are the top 3 web hosting providers that are recommended by WordPress itself:
A few other recommended hosting providers are:
Here is the thing that is worth note-taking, mostly all the web hosting providers offers free domain name for the first year when you choose a hosting plan with them.
2. WordPress
WordPress is a popular content management system (CMS) that many individuals, and small and big businesses use to create their website(s).
Since it was released in 2003, WordPress has become one of the most popular CMS in the world.
Used by millions of people to power their websites, it’s been a go-to platform for everything from small blogs to large-scale commercial sites.
You can install it easily with a hosting provider to host your site. If you can’t do it by yourself, you can ask your provider to set it up for you.
Once you have WordPress installed, configure your site settings, including site title, description, and keywords.
You'll also need to activate the theme and install the necessary plugins.
3. WordPress Theme (Astra)
WordPress themes are the templates that build WordPress website and give a look the way it does.
There are over 9,000 themes in the WordPress repository that you can select but the Astra Theme is recommended.
With over a million installs Astra has proven itself to be a game-changer in the WordPress world.
Astra Theme is one of the most popular WordPress themes which is fully responsive, retina-ready, and SEO-friendly.
It integrates perfectly with the new Gutenberg editor and it is used by many users because of its flexibility and ease of use.
It also has many other features, such as custom post types, custom taxonomies, and more. If you are new to WordPress, Astra is a great starting point.
4. WordPress Plugins
WordPress out-of-the-box is extremely flexible and powerful but it can't do everything and nor should it.
Just because one person wants a specific functionality on the website doesn't mean that everyone should have to have that.
So, a plugin is something that changes or adds to the functionality of WordPress.
The WordPress.org plugins repository has over 59,000 plugins available for free. This means there are lots of amazing things that you can add to WordPress.
How To Build WordPress Website with Astra and Gutenberg?
Here is the step-by-step tutorial that you can follow to build WordPress website using Astra WordPress Theme & Gutenberg.
1. How To Install WordPress?
2. How To Install Astra and Starter Templates Plugin?
3. How To Choose & Install A Starter Theme?
4. How To Install Ultimate Addons For Gutenberg?
5. How To Add Content Using Gutenberg Block Patterns?
6. How To Customize Gutenberg Blocks?
7. How To Create A Custom Block Pattern And Use It On A Page?
8. How To Test Your Website?
1. How to Install WordPress?
After you purchase web hosting from a provider, the next thing you need to do is to install and set up WordPress on your hosting server.
You can ask your hosting prover to do that for you, and if you want to install and setup it up by yourself, you can easily do that using the “Softaculous Apps Installer” tool in your web hosting CPanel account.
Softaculous Apps Installer is an amazing and very simple tool that allows you to install WordPress without dealing with databases, user accounts, and user permissions.
It simplifies the whole WordPress cPanel installation so even beginners can set up WordPress within seconds.
Now that you have an idea about Softaculous Apps Installer, follow the steps below to install the WordPress.
A. Login to your CPanel account.
You will get the CPanel link, username, and password in your email once you purchased the web hosting plan. Alternatively, you can access CPanel after logging in to your web hosting account.
B. Go to Softaculous Apps Installer section > click WordPress.
C. On the next page under the install tab > click Install Now.
D. Next, you will see all the tabs/sections where you have to enter the details and make settings such as:
- Website URL
- Website Name
- Website Description
- Website Admin Username
- Website Admin Password
- Website Admin Email
- Select Language
- Select Theme
Once you are done, with all the settings above > click the Install button at the bottom of the page.
E. It will take a few seconds and voila, you are done, the WordPress is successfully installed.
2. How to Install Astra Theme and Starter Templates Plugin?
After the WordPress is installed, the next thing you have to do is to install Astra Theme & Astra Starter Sites plugin to build WordPress website.
A. How To Install Astra Theme?
Here are the easy steps on how to install the Astra theme.
I. In the left panel on your WordPress dashboard > Go to Appearance > Themes.
II. In the Themes window > click “Add New”.
III. Next in the “Add Themes” window, search for “ASTRA” from the WordPress Theme directory.
IV. Hover over the Astra theme and click > Install > Activate.
B. How To Install Starter Templates Plugin?
Once the Astra Theme is installed, next you have to install the “Starter Templates Plugin”. To do so:
I. In the left panel on your WordPress dashboard > Go to Plugins.
II. In the Plugins window > click “Add New”.
III. Next in the “Add Plugins” window, search for “ASTRA STARTER TEMPLATES” from the WordPress repository.
IV. Hover over the “Starter Templates — Elementor, WordPress & Beaver Builder Templates plugin by Brainstorm Force” then Click > Install Now > Activate.
3. How To Choose & Install a Starter Theme?
Once you have installed and activated the Starter Templates plugin, now it’s time to choose a theme. To do so:
1. On your WordPress dashboard > Go to Appearance > Starter Templates.
2. In the new window > click Build Your Website Now.
3. Next select a Page Builder. You can choose from Block Editor, Elementor, or Beaver Builder.
4. In the next step, you will see a lot of starter templates that you can select from different categories.
5. Once you select a template, you will see a screen loading with the options to upload your site Logo, select site Colors & Fonts, etc. Adjust everything accordingly > click Continue.
6. Finally, you will have to enter some information about yourself and then > click “Submit & Build My Website”.
It will take a few seconds or a minute and you will have your professional looking great website ready in no time.
4. How To Install Ultimate Addons for Gutenberg?
After you have chosen and installed the Starter Template, now it’s time to install the Ultimate Addons for Gutenberg to build WordPress website with more flexibility and easily.
To do so:
1. In the left panel on your WordPress dashboard > Go to Plugins.
2. In the Plugins window > click “Add New”.
3. Next in the “Add Plugins” window, search for “Ultimate Addons For Gutenberg” from the WordPress repository.
4. Hover over the “Ultimate Addons For Gutenberg” plugin then Click > Install Now > Activate.
5. How to Add Content Using Gutenberg Block Patterns
After you have installed and activated all the stuff above, now it is time to create content using Gutenberg Block Patterns.
Here is the detailed in-depth video tutorial you can follow to add content to posts and pages using Gutenberg.
6. How To Customize Gutenberg Blocks?
Once you have added the Gutenberg Blocks to build WordPress website and created some content to track their website's performance., you might be wondering how can I customize them.
Well, there is an easy way to do that. For this tutorial, we take an example of the “Button Block”.
So, let’s say you have added a Button on your page. To customize it:
1. Click on the button, and you will see a panel with Settings will be open on the right-hand side for the selected block i.e., the button.
If you don’t see the Settings panel at the right, click the 3 dots in the “Top Toolbar” and click “Show More Settings”.
2. In the Settings panel, you will see different options such as the Layout, Styles, Color, Border, Width Settings, Typography, etc., that you can customize according to your own needs.
7. How To Create A Gutenberg Custom Block Pattern and Use It On A Page?
Gutenberg blocks are more than just the standard block types and patterns. You can create various custom blocks and enter the whole new world of using Gutenberg.
To do so:
1. First install and activate the “Genesis Custom Blocks plugin” from the WordPress repository.
2. In the WordPress dashboard, go to Custom Blocks > Add New.
3. Under the Block Tab, configure the block’s settings such as:
- The category – Leave it to Default or create your own New Category.
- The Keywords
- Post Types – Where this block should be shown, either in Post or Pages. By default, it is shown on both.
The above configurations will help to find this block more easily in the Gutenberg block selector.
4. Next you have to design your custom block. Under the Fields Tab, you have to configure some “Editor Fields”, such as:
- Field Label
- Field Type
- Field Location, etc.
You can check a range of field types, that Genesis Custom Blocks supports.
5. Once you are done, hit the Publish button to publish your custom block.
6. Next step is to display your new block accurately in the Gutenberg Editor.
By using all of the field data within your custom block, you can store your block templates inside your active theme’s directory.
You can do it easily using the File Transfer Protocol (FTP) client such as FileZilla.
Here is a quick tutorial on how to connect your website to FileZilla.
Note: Depending on your web hosting provider, the FTP details may vary, if you are not sure you can contact them to assist you better.
7. Once you are connected to FileZilla, follow the steps below:
A. Open your active theme’s directory > create a new folder named “Blocks“.
B. Next, create a new PHP file inside the Block’s directory or folder. Follow the following format to give a name to this file.
block-{block-slug}.php
Replace the block-slug with the name of your own block name. E.g., “block-custom-block.php”.
8. Finally you are all done. You can see your new custom block inside the Gutenberg Editor, which is now ready to use on your website and for your content creation.
8. How To Test Your Website With Gutenberg Blocks?
Once you are done creating a webpage or site using Gutenberg block, publish it and test it.
Here are the 3 main things that you should consider and keep an eye on while testing your website:
1. Check all Available Blocks
You must examine how each of those blocks functions and looks on your website. This way you can quickly determine whether to enable and disable blocks in the Block Manager.
2. Check Invalid Blocks
It is important that you should aim to check for invalid blocks before choosing the plugin. Since there are a lot of blocks in the editor you must check if they are working properly.
It’s better to remove the blocks at the initial stage that are not compatible with your current version of Gutenberg, so you won’t face any issues when the designing and custom content creation are completed.
3. Check Theme Support and Compatibility
To effectively leverage the potential of the blocks plugin, you must examine whether all the blocks are compatible with your current theme and display correctly at the front.
Because, if the blocks don’t sit properly with your activated theme design and styling, it will break your site. So, this should be tested first!
5 Essential WordPress Plugins to Keep Your Website Healthy
Here are the 5 essential WordPress plugins to keep your website healthy and smooth.
1. Sucuri
2. MonsterInsights
3. UpDraft Plus
4. Wp Rocket
5. Rank Math SEO
1. Sucuri
Sucuri is a WordPress plugin, best for website protection and security.
It enables you to secure your website from hacks, malware, spam, and even DDoS & Brute Force attacks.
This will prevent your passwords from cracking and websites from being hacked. There are some notable features that Sucuri offers for increased security.
A. IP Whitelisting
With IP Whitelisting you'll be able to log in to your WordPress website only from specific IP addresses. This way anyone who tries to access your WP-ADMIN dashboard from other locations will be redirected to an error page where they will not be allowed to try and guess your login credentials.
B. Geo-Blocking
You can also add geo-blocking which will prevent specific countries from accessing your website.
For example, you might be offering services in specific regions, SUCURI will also continually scan your website and prevent malicious code from being injected into your WordPress website.
By using this WordPress plugin, you have great insights and options to disable potential security risks.
2. MonsterInsights
Once you build WordPress website, it's time to track the website's performance and visitor's behavior with the Monsterinsights WordPress Analytics plugin.
It provides detailed insights into how visitors are behaving, including how many people are visiting the website, what pages are being visited the most, and how long people are spending on each page.
This information can help users identify where they need to make changes to improve their website's performance.
Users can track everything without leaving their WordPress dashboard.
➔ Learn more in-depth with the MonsterInsights full review.
3. Updraft Plus
For anyone who has ever build WordPress website, installing a reliable and user-friendly backup plug-in is essential.
Updraft Plus is a powerful WordPress backup and restores plugins. It can help users to protect their websites from data loss.
This plugin can help the user to create backups and even schedule backups of their website and make the process more automated.
It offers migration, staging sites, a simple restore option, and a list of popular remote storage options.
Updraft plus also has the option to allow users to back up their site to SMTP, FTP, and email.
Users can make a selection from a wider range of remote storage locations.
4. WP Rocket
With Google changing its algorithm all the time speed is becoming more and more of a factor on your website if you have a really slow website your ranking is not going to be as good as your competitors.
You Build a WordPress website, it's amazing. But keeping the site speed above 95 or 100 is more important than ever, especially on mobile phones.
Imagine people using your website on a mobile phone for the first time on 4G or 5G networks and if it loads too slow, they're just going to hit the back button and go back to Google search.
So, it's really important to have a really fast website and that's where WP Rocket comes in and excels. It allows you to:
- Minify your CSS and JavaScript
- Defer the JavaScript
- All that unnecessary information that's spread out across your website gets condensed into a file size that's more appropriate for loading faster on all devices.
This helps the users to increase the overall website vital score and have more conversions.
The faster your website the more people are going to be visiting your website and the lower the bounce rate is going to be.
With WP Rocket you can look and think about how can you optimize your website and make sure it's going to be faster.
5. Rank Math SEO
After you build WordPress website, use Rank Math SEO – A powerful free SEO plugin to simply optimize your website for search engines. without needing any technical SEO experience.
This is an ideal tool for those that don't know where or how to get started with SEO.
With the Rank Math SEO plugin, you can optimize every page and post of your website and display how you want to display it in the search engines.
This plugin helps essentially start ranking higher on search engines like Google to ultimately drive more organic traffic.
Astra & Gutenberg Block Patterns FAQs
Here are a few FAQs questions to build WordPress website with Astra & Gutenberg that you might need a quick answer to:
1. How do I make a Gutenberg website?
The best way to create a Gutenberg website, need a domain and web hosting, WordPress, Astra Theme & then choose and install the Starter Template.
2. How do I design with Gutenberg?
To start designing with Gutenberg, you need to install a plugin “Ultimate Addons for Gutenberg” to use different block patterns in your website along with the Astra Theme.
3. How do I use block patterns in WordPress?
You can use Block patterns in WordPress by creating a new post or page. In the Gutenberg editor from the Top Toolbar, you can select different block patterns and use them.
4. How do I create a custom block in Gutenberg?
To create a custom block in Gutenberg, you can install and activate a plugin “Genesis Custom Blocks plugin”, then in the WordPress dashboard, go to Custom Blocks > Add New.
5. Is WordPress Gutenberg free?
Yes, WordPress Gutenberg is 100% free. Nowadays it is pre-built in WordPress but alternatively, you can download it from the WordPress plugin repository.
Build WordPress Website With Astra Theme & Gutenberg – Conclusion
Building a WordPress website can be a daunting task, but with the right tools and resources, it can be a breeze.
WordPress is a great platform, that adds significant value to your website.
Astra is an excellent theme for creating any type of website and its combination with Gutenberg makes creating custom content easy.
By using Astra and Gutenberg together, you can build WordPress website that looks amazing and performs well.
You can have a WordPress website up and running in no time!
➔ Also Read: How To Build A Yellow Pages Directory In WordPress
