Tag - Tutorial

How to Install WordPress – Complete WordPress Installation Tutorial


WordPress is known as the most popular website builder in the world. It powers over 33% of all websites on the internet. The main reason for that is because WordPress is easy to install which makes it easy for anyone to create a website.

All best WordPress web hosting companies allow you to install WordPress with just few clicks. In most circumstances, installing WordPress is a simple process that takes less than five minutes to complete.

In this tutorial, our goal is to offer a complete WordPress installation tutorial for beginners and advanced users alike.

For beginners, we will show you how to install WordPress on all top hosting platforms by using 1-click install scripts like Fantastico, Softaculous, and QuickInstall.

We will also explain how to install WordPress manually using FTP for our intermediate users.

Lastly, for our beginner developer and designers, we will show you how to install WordPress on a local computer (Windows, Mac, and Linux).

Apart from showing you how to install WordPress, we will also give you tips on things to do after you install WordPress.

How to easily install WordPress

Things You Need Before Installing WordPress

Before you install WordPress, first you will need a domain name and a good web hosting company that knows WordPress.

We highly recommend that you use Bluehost because they will give you a free domain and 60% off their hosting plan (special for WPBeginner users).

The reason we recommend Bluehost is because they are one of the largest hosting companies in the world. They are also an officially recommended WordPress hosting provider.

Since this is a very long and detailed tutorial, please use the navigation below to get to the appropriate section.

How to Install WordPress on Bluehost

Bluehost is an officially recommended WordPress hosting provider and one of the largest hosting companies in the world. They know WordPress inside out and have the most beginner friendly WordPress installation process.

Bluehost automatically installs WordPress on your domain name when you sign up. Once you login to your Bluehost account, you’ll find your WordPress site under ‘My Sites’ tab.

Bluehost login to your WordPress site

You can simply click on ‘Log into WordPress’ button, and it will take you directly to the WordPress admin area.

Except for their ‘Basic’ plan, Bluehost also allows you to install WordPress on unlimited sites with all their hosting plans.

Simply click on the ‘Create Site’ button under ‘My Sites’ tab to get started.

Installing new WordPress site in Bluehost

This will launch the Bluehost guided WordPress installation wizard. First, it will ask you to provide a site title and optionally a tagline.

Provide a site title for your new WordPress site

Click on the ‘Next’ button to continue.

After which, you will be asked to select a domain name and path for your website. If you have already purchased a domain name, then you can select it from the dropdown menu. You can always purchase and add new domain names to your account by visiting the ‘Domains’ page from the hosting dashboard.

Select domain name and essential plugins

After selecting your domain name, you can leave the directory path blank and let Bluehost choose it for you. The installer will also show a few essential plugins that you can install.

You can now click on the ‘Next’ button to continue.

The installer will set up your WordPress site, which may take a few moments. After that, you will see a success message with your WordPress site details.

Successfully installed WordPress on Bluehost

You will also receive these details via email. You can now click on the login to WordPress button to enter your new site’s admin area.

Congratulations, you have installed WordPress on your Bluehost hosting account. That wasn’t too bad right.

How to Install WordPress on HostGator

HostGator is another popular shared WordPress hosting provider among beginners. They also make it super easy to install WordPress with just a few clicks.

First, you need to login to your HostGator hosting account’s dashboard. From here, you need to click on the ‘QuickInstall’ icon under the ‘Software’ section.

Installing WordPress on HostGator

On the next screen, you need to click on ‘WordPress’ to launch the installer wizard.

Run WordPress installer on HostGator

Now, you will be asked to select the domain name where you want to install WordPress and enter a directory path.

Most beginners want to install WordPress in the root of their domain name (for example, wpbeginner.com). In that case, you need to leave the directory field blank.

Select your domain name

Click on the next button to continue.

The installer will now ask you to enter WordPress site details. You will need to provide a site title, admin username, first and last name, and an admin email address. Make sure that you have access to that email address because this is where you will get your WordPress password reset email.

HostGator WordPress install settings

After entering all the information, click on the ‘Install’ button to continue.

The installer will now run in the background to install WordPress for you. Once finished, you will see a success message with your admin user name and password.

HostGator WordPress installation finished

You can now click on the ‘Login’ button to access the WordPress admin area.

Congratulations, you have successfully installed WordPress on your HostGator account.

How to Install WordPress on SiteGround

SiteGround is a popular choice among WordPress beginners. They are known for their excellent support and highly optimized WordPress hosting plans.

SiteGround offers quick and pain-free WordPress installers with all their plans. You can install WordPress directly from your hosting dashboard.

We will show you two different methods for installing WordPress on SiteGround. You can choose one that works for you.

1. Installing WordPress on SiteGround as a New User

If you just signed up with SiteGround, then you will be greeted by a welcome popup upon your first login. It will ask if you would want to set up your website now.

SiteGround new user WordPress installation wizard

You need to select ‘Start a new website’ and then click on WordPress.

The installer wizard will now ask for WordPress installation details. You need to provide an email address, an admin username, and password for your new WordPress site.

Enter WordPress login details for your installation

Click on the ‘Confirm’ button to continue.

On the next screen, you will see details of your selection. You can also select additional website enhancements but we will skip them for now, you can add them later if needed.

Finish WordPress installation on new SiteGround account

Go ahead and click on the complete setup button. The installer will now install WordPress for you in the background and you will see a success message when it is finished.

Successfully installed WordPress on new SiteGround account

You can now click on the ‘proceed to the customer area’ button. From here, you’ll find your new website under the ‘My Accounts’ tab.

Visit WordPress admin panel

You can click on ‘Visit admin panel’ to enter WordPress admin area.

Congratulations! You have successfully installed WordPress on your new SiteGround account.

2. Installing WordPress on SiteGround as Existing Customer

SiteGround makes it extremely easy to install WordPress from your hosting account at anytime. Simply login to your hosting account and visit the cPanel dashboard.

Visit cPanel dashboard in SiteGround

This will load the cPanel dashboard, which is basically a web-based interface to manage your hosting account.

From here you need to scroll down to the ‘Auto Installers’ section and click on WordPress.

Launch WordPress installer in SiteGround

This will launch the auto-installer script with WordPress pre-selected. You need to click on the install button and then select a website protocol http or https and domain name.

Now if you have enabled SSL Certificate on the domain name, then you can select https as your protocol, otherwise select http. You can later switch WordPress to HTTPS/SSL.

SiteGround WordPress installer

Below that, you need to enter your site title, admin username, password, and email address.

WordPress site settings

You will also see other options to select language, install plugins, and more. You can change these options or leave them unchecked.

Lastly, you will see the WordPress Starter option. You need to keep it checked as it will walk you through post-installation steps to set up your site.

Optional settings

Now, click on the ‘Install’ button to continue.

The installer will now run in the background and set up a WordPress install. Once finished, you will see a success message with a link to your WordPress site’s admin area.

WordPress installation finished

Clicking on the admin area link will take you to your website and launch the site set up wizard. This step by step wizard will help you get started with WordPress. Click on the ‘Start Now’ button to continue.

SiteGround WordPress starter

First, the starter wizard will ask you to choose a design for your WordPress site. It will show you hand-picked design templates organized in various categories.

SiteGround WordPress starter design option

We recommend choosing a simple design that resembles what you have in mind. Remember each theme comes with customization options and you can change how it looks to your own taste.

Next, you will be asked to select functionalities you want to add to your website. It will automatically select ‘Contact Form’ for you because every website needs a contact form.

Choose functionality

Optionally, you can choose Shop (to create an online store), calendar, or JetPack.

Click on the next button to continue.

Now you will be asked to select marketing options to promote your new website. It will show you MonsterInsights for Google Analytics, Yoast SEO, and OptinMonster for lead generation.

We recommend selecting all three of them as they will help you grow your website.

After that, click on the complete button and the starter wizard will complete the installation for you. You will now see a success message with a link to enter the WordPress dashboard.

Finished setting up your website

You will now see the WordPress admin dashboard with custom shortcuts to create content, customize design, and start working on your website.

SiteGround custom WordPress admin dashboard

That’s all. You have successfully installed WordPress on your SiteGround hosting account.

How to Install WordPress on WP Engine

WP Engine is the best managed WordPress hosting provider. A managed hosting account is basically a concierge service for your WordPress website.

They take care of managing your WordPress site updates, installation, and performance optimization while you focus on growing your business.

As a managed WordPress hosting company, WP Engine automatically installs WordPress when you sign up. Depending on your hosting plan, you can also create additional websites whenever you need them.

Simply, login to your WP Engine dashboard and visit the ‘Sites’ page. You will see a list of all your WordPress sites. Click on the ‘Create Site’ button to add a new WordPress install.

WP Engine create new site

On the next screen, you will be asked to provide a name for your production environment. Enter a name that helps you easily identify this website and then click on ‘Create Environment’ button.

Add a production environment WordPress site

WP Engine will now install your WordPress environment. It will take some time for DNS changes to propagate.

After that you will be able to access the WordPress admin area by clicking on the link in the sidebar. You will also be able to see your login credentials on the same page.

Login to your WordPress environment in WPEngine

To add a domain to your website, you need to click on the add domain link. Since WP Engine is not a domain registrar, you will need to point your domain’s DNS settings to WP Engine.

To do this, you will need your site’s IP Address and CNAME. You can find this information on the overview page of your site.

Copy the DNS information

Now we will show you how to enter this information in Domain.com. The basic settings are the same for all domain registrars, you just need to find the DNS settings.

Login to your Domain.com account dashboard and click on DNS and Nameserver settings for your domain name.

Domain DNS and nameserver settings

On the next screen, first, you need to change the A record with the @ sign as its name. Click on the Edit button to change its settings.

Changing A record settings

After that, you need to enter the IP address provided by WP Engine as this record’s value and then click on Update DNS button.

Replacing A record value

Next, you need to see if you have a CNAME record with www as its name. If you do, then you will need to edit that CNAME record. Otherwise, go ahead and click on the ‘Add DNS Record’ button.

Adding CNAME record

Add the CNAME subdomain provided by WPEngine in the Value field and then click on the Add DNS button.

That’s all you have successfully pointed your domain name to your WordPress site hosted on WP Engine.

How to Install WordPress from cPanel

Cpanel is a popular software used by many web hosting companies. It provides website owners with a simple web-based interface to manage their hosting account.

It is a one-stop access to several useful utilities including auto-installer scripts that help you install WordPress.

Hosting companies select which auto-installer script they want to use. Generally, Softaculous, QuickInstall, and Fantastico are the most popular options.

We will show you how to install WordPress using all three auto-installers. You can follow the instructions, based on the installer you see on your cPanel dashboard.

How to Install WordPress using Softaculous

Softaculous is a popular auto-installer script. It allows you to easily install popular web applications like WordPress with just a few clicks. Hosting companies like SiteGround and InMotion Hosting use Softaculous in their control panel.

Simply login to your cPanel account and look for Softaculous or WordPress installer icon. You will find them under Auto Installers section.

Softaculous icon

Clicking on any of these icons will launch Softaculous auto-installer for WordPress. First, you will see an overview of WordPress. You need to click on the Install tab to continue.

Click on the install tab to continue installing WordPress using Softaculous

Softaculous will now ask you where you want to install WordPress. You need to choose http:// or http://www. as protocol.

If your site has SSL and HTTPS, then you can select https:// or https://www. as protocol.

After that, you need to choose the domain name where you want to install WordPress. Most users want to install WordPress in their domain’s root directory, like example.com. In that case, you need to make sure that the ‘In Directory’ field is blank.

Scroll down a little, and you will see the site settings section.

Softaculous WordPress site settings

Under this section, first you need to provide a title and description for your WordPress site. Don’t worry you can easily change them from your WordPress admin area after installation.

Next, you need to choose an admin username, password, and email address. Softaculous will automatically fill in the username and password fields for you. It will use a non-dictionary word for username and a strong password.

You can change them if you want so that they are easy to remember for you. However, we strongly urge you to always use a strong password. See our guide on the best way to manage passwords for WordPress beginners to learn how you can manage strong passwords easily.

Make sure that you enter correct email address in the admin email field. This is where WordPress will send notifications and password reset link if you ever forgot your password.

Rest of the options on the screen are optional. You can now click on the install button to run the installer.

Optional WordPress settings in Softaculous

Softaculous will run the installer using the settings you provided. You will see a progress bar with installation status. It will take a couple of minutes. Do not close the window until the progress bar reaches 100% otherwise, this may affect your WordPress installation.

Softaculous WordPress installation progress

You will see a success message after the installation is finished. It will also show you links to your website and to your WordPress admin area.

Softaculous WordPress installation finished

How to Install WordPress using QuickInstall

QuickInstall is another popular auto-installer used by many hosting companies like HostGator and others. We will be using HostGator’s cPanel dashboard in the screenshots here, but it wouldn’t be much different if you are using some other host that has QuickInstall.

First, you need to login to your hosting account’s cPanel dashboard. Scroll down to the Software section and then click on the QuickInstall icon.

QuickInstall icon in cPanel dashboard

This will take you to the 1-Click Installers page on QuickInstall. You will see that it offers installations for most popular web applications including WordPress. You need to click on WordPress to launch the WordPress installer.

Select WordPress to begin installation

The installer will now show you the WordPress overview. You will be asked to select your domain name from the drop-down menu.

Most beginners want to install WordPress on the root of their website, for example, wpbeginner.com. In that case, you need to leave the directory field blank.

Launch WordPress installer in QuickInstall

Now click on the next button to continue. The installer will now ask you to enter WordPress details like username, email address, and site title.

QuickInstall WordPress site settings

After filling in all the information, click on the Install button.

QuickInstall will now install WordPress for you. After that, you will see a success message with your login details like username and password.

WordPress successfully installed using QuickInstall

You can now click on the ‘Login’ button to enter the WordPress admin area.

That’s all, you have successfully installed WordPress using QuickInstall.

How to Install WordPress using Fantastico

Fantastico is an auto-installer script used by several WordPress hosting providers. It is similar to the other installer scripts in this guide and offers an easier way to quickly install WordPress.

First, you need to login to your cPanel dashboard and scroll down to software and services section, and there you will find the Fantastico icon.

Fantastico icon in cPanel dashboard

Clicking on Fantastico icon will launch the auto-installer script.

Some hosting providers are still using an older version of Fantastico. In this tutorial we will be showing you screenshots from Fantastico F3 version.

If Fantastico on your host looks different, then don’t worry. Basic installation steps are the same, and you should be able to easily follow them.

On the main Fantastico screen, you will see a list of web applications on your left. You need to click on Blogs, and there you will find WordPress listed among many other applications.

Clicking on WordPress will show you an overview of the application with the ‘Install’ button.

Fantastico WordPress installer

Simply click on the ‘Click here to install WordPress’ button to continue.

Fantastico auto-installer for WordPress will now ask you to fill in your installation settings. First, you need to choose the domain where you want to install WordPress.

Fantastico WordPress install settings

If you want to install WordPress in a sub-directory then you can enter the sub-directory name in the field below. Otherwise, make sure that this field is empty.

Under ‘Administrator Details’ section, you need to provide admin user account information. Enter a username, password, and email address for your WordPress admin account.

Click on the Submit button to continue.

Fantastico will now install WordPress for you. Once it has finished installing WordPress you will see a success message.

How to Install WordPress using FTP

Manually installing WordPress is also known as the famous 5 minute install. It requires few added steps, and you will need an FTP client to manually install WordPress.

Take a look at our beginner’s guide on how to use FTP to upload WordPress files.

First thing you need to do is download the latest version of WordPress.

WordPress package comes as a Zip file. You need to unzip the file and inside it, you will find a WordPress folder. This folder contains all the WordPress files you need to upload to your web server.

WordPress files

Now go ahead and connect the FTP client to your hosting server. Once connected, use the FTP client to upload the WordPress files from your computer to your website server.

uploading WordPress files using an FTP client

If you want to install WordPress on your root domain name (like example.com), then you need to upload WordPress files to your website’s root directory. Usually this directory is called /public_html/.

On the other hand, If you want to install WordPress in a subfolder (like example.com/blog), then upload it in a folder /public_html/blog/.

Once you are done uploading WordPress, go to your hosting control panel to create a database. We will be showing you how to do that using the cPanel. If your hosting provider has a different control panel then you just need to look for MySQL databases. Rest of the settings will be quite similar.

From your cPanel dashboard, click on the ‘MySQL Databases’ icon.

MySQL database icon in cPanel

You will see a field to create a new database. Enter a name for your database, and click ‘Create Database’.

Create database

Now that you have created your database, MySQL still needs a username. This username will have access to perform actions on the database.

On the MySQL Databases page in your cPanel account, scroll down to MySQL Users section. Simply provide a username and password for your new user and click on the ‘Create a user’ button.

Add a MySQL user

This new user still does not have access to the database you created earlier. For that, you will need to add the user to the database and give them permissions to perform all actions.

On the same MySQL Databases page in your cPanel account, scroll down to ‘Add User to a Database’ section. Select the database user you created from the dropdown menu next to user, then select the database, and click on the add button.

Add user to database

You will be now asked for the privileges you want to allow this user. Select all privileges and click on the Make changes button.

Your MySQL database and user are now ready, note down your database name and MySQL username and password. You will need that information later.

Simply go to to the URL where you uploaded WordPress. If it is in the main domain, then enter your domain name in the browser window, like yoursite.com or www.yoursite.com.

You will see the language selection page. You can choose a language here so that the rest of the installation is displayed in your own language. You can also use English for now and then later change the language.

Select WordPress language

Click on the continue button to proceed.

You will now see some installation instructions. Basically, WordPress will now tell you that it will need your database name, password, and MySQL host information.

WordPress installation requirements

Click on the ‘Let’s go’ button to continue.

WordPress will now show you a form. You need to enter the database information you created earlier.

Enter database information for WordPress installation

Fill in the information and then click on the ‘Submit’ button. WordPress will connect to your database and show you a success message.

WordPress can now connect to your database

Click on ‘Run the Install’ button to continue.

WordPress will now create tables in your database and then send you to the next step of the installation.

Now you need to provide some information for WordPress to set up your site. This includes site title, username, password, and admin email address.

If you do not want your website to be visible to search engines, then you can check the box next to search engine visibility. Later when you are ready you can change this from WordPress settings. If you are unsure about what to do, then simply leave it unchecked.

Setting up your website during WordPress install

Click on the Install WordPress button to continue. WordPress will set up your website and finish the installation.

You will see a success message showing your username. You can now click on the Log in button to sign in to your WordPress site.

Manual WordPress installation finished

How to Install WordPress in your Computer

Many of our beginner level users often ask us if they could try WordPress on their computer? The answer is yes, but most beginners should not do that.

The reason why some folks install WordPress in a local server environment is to build themes, plugins, or to test things out.

If you want to run a blog for other people to see, then you do not need to install WordPress on your computer. If you install WordPress locally on your computer, then the only person who can see the site is you.

If you want to make your WordPress site available to the internet (rest of the world), then you need to get a web hosting account and install WordPress by using one of the methods we showed above.

Having that said, if you are really interested in installing WordPress locally on your computer to learn more about theme development, test plugins etc, then we highly encourage you to do so.

If you are using a Windows computer, then we recommend that you download and setup WAMP. If you are using a Mac, then you need to download and setup Mamp.

After you have played around with WordPress on your computer you may want to move your local install to an actual live website. We have a step by step tutorial on how to move WordPress from local server to a live site.

How to Install WordPress in your Language

Just like Windows, Mac, iPhone, and Android, you can use WordPress in your own language.

WordPress is available in many languages including English, Spanish, French, Arabic, Korean, German, Hebrew, Hindi, Japanese, Vietnamese, Chinese (Han), Portuguese, and many others.

You can choose a language during the WordPress installation or change it by visiting Settings » General page in the WordPress admin area.

Changing language in WordPress settings

For more details, see our article on how to install WordPress in other languages.

WordPress is also used widely to create bilingual and multilingual websites. See our tutorial on how to easily create a multilingual WordPress site with TranslatePress.

How to Install a WordPress Multisite Network

WordPress comes with multisite functionality built-in. The multisite network allows you to create multiple WordPress sites using the same WordPress install. It can automatically create new sites on sub-domains or in sub-folders.

This makes sense for businesses, non-profits, governments with sub-sites for different locations or regions. Many educational institutes also use WordPress multisite network to allow students to create their own blogs.

The setup for a multisite is a bit complex, but we have created a complete step-by-step tutorial on how to install and setup WordPress multisite network.

Things to do After Installing WordPress

Now that you have successfully installed WordPress, here are a few things to get started with your new WordPress site.

Choosing a Theme

The visual appearance of your WordPress powered website is controlled by Themes. There are thousands of WordPress themes available for you to choose from. With so many choices, it can become a little confusing for beginners. This is why we have put together a guide on selecting the perfect theme for WordPress.

We regularly publish lists of WordPress themes that we like in our Showcase section. Following are some of our popular theme showcases.

Installing and Using WordPress Plugins

The real power of WordPress comes from the massive collection of plugins. They are like apps for your WordPress site, allowing you to extend functionality and add new features to your site.

There are more than 54,000 free plugins available in the WordPress plugin directory alone. More plugins are available from third party websites as paid plugins.

If you are wondering which plugins to install, then take a look at our expert pick of the essential WordPress plugins for all websites. You may also want to check out the plugins we are using on this site by looking at our WPBeginner’s blueprint.

We have a beginner’s step by step guide on how to install WordPress plugins.

Start Learning WordPress

WordPress is the easiest to use CMS in the market. Millions of people from all over the world use it every day. However, from time to time you may need a little help.

This is where WPBeginner can help. We are the largest free WordPress resource site in the world, regularly publishing tutorials and guides written specifically for bloggers and small businesses.

Here are some of the useful resources that you will find on WPBeginner (all of them are totally free).

  • WPBeginner Blog – The central place for all our WordPress tutorials and guides.
  • WPBeginner Dictionary – Our WordPress glossary is the best place to familiarize yourself with the WordPress lingo
  • WPBeginner Videos – New WordPress users can start with these 23 videos to master WordPress.
  • WPBeginner on YouTube – Need more video instructions? Subscribe to our YouTube channel with more than 128,000 subscribers and 12 Million+ views.
  • WPBeginner Blueprint – Check out plugins, tools, and services we use on WPBeginner.
  • WPBeginner Deals – Exclusive discounts on WordPress products and services for WPBeginner users.

Conclusion

We hope this WordPress installation tutorial helped you learn how to easily install WordPress. You may want to check out our list of these 40 useful tools to help you manage and grow your WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Install WordPress – Complete WordPress Installation Tutorial appeared first on WPBeginner.



Source link

How to Use the New WordPress Block Editor (Gutenberg Tutorial)


In WordPress 5.0, the classic content editor was replaced with a brand new block editor, known as Gutenberg. Since then, several of our readers have asked us to create a comprehensive tutorial on how to use the Gutenberg block editor in WordPress.

WordPress block editor is a totally new and different way of creating content in WordPress. In this tutorial, we will show you how to use the new WordPress block editor and master it to create visually stunning blog posts and pages.

Using the new WordPress block editor aka Gutenberg

What’s The Difference Between Block Editor (Gutenberg) and Classic Editor?

Before we dive into the new editor, let’s first compare and understand the differences between Gutenberg Block Editor and the Classic Editor.

Here is what the classic editor in WordPress looked like:

Old WordPress editor

If you upgrade to WordPress 5.0, then this is what the new block editor looks like:

New WordPress Block Editor also known as Gutenberg

As you can see, they are two completely different editors for creating content in WordPress.

The old classic editor was a text editor with formatting buttons very similar to Microsoft Word.

The new editor uses a totally different approach, called ‘Blocks’ (hence, the name Block Editor).

Blocks are content elements that you add to the edit screen to create content layouts. Each item you add to your post or page is a block.

You can add blocks for each paragraph, images, videos, galleries, audio, lists, and more. There are blocks for all common content elements and more can be added by WordPress plugins.

How is the new WordPress block editor better than the classic editor?

The new WordPress block editor offers a simple way to add different types of content to your posts and pages.

For example, previously if you wanted to add a table in your content, then you needed a separate table plugin.

With the new editor, you can simply add a table block, select your columns and rows, and start adding content.

Table block

You can move content elements up and down, edit them as individual blocks, and easily create media-rich content.

Most importantly, the new WordPress block editor is easy to use and learn.

This gives an immense advantage to all WordPress beginners who are just starting their first blog or building a DIY business website.

That being said, let’s take a look at how to use the new WordPress block editor like a pro to create great content.

Here is what we will cover in this Gutenberg tutorial:

  1. Using Gutenberg – The new WordPress block editor
  2. Creating a new blog post or page
  3. How to add a block in Gutenberg
  4. Working with blocks in the new editor
  5. Saving and reusing blocks in Gutenberg
  6. Publishing and post settings in Gutenberg
  7. Plugin settings in new editor
  8. Adding some common blocks in Gutenberg
  9. Exploring some new content blocks in Gutenberg
  10. Bonus tips on using Gutenberg like a pro
  11. Adding more blocks to Gutenberg Block Editor
  12. FAQs about Gutenberg

Ready? Let’s dive in.

Using Gutenberg – The New WordPress Block Editor

The block editor is designed to be intuitive and flexible. While it looks different than the old WordPress editor, it still does all the things that you were able to do in the classic editor.

Let’s start with covering the basic things that you did in the classic editor, and how they are done in the block editor.

Creating a New Blog Post or Page Using The Block Editor

You will start creating a new blog post or page like you normally would. Simply click on Posts » Add New menu in your WordPress admin. If you are creating a page, then go to Pages » Add New menu.

Adding a new post

This will launch the new block editor.

How to Add a Block in Gutenberg

The first block of every post or page is the title.

After that, you can use the mouse to move below the title or press the tab key on your keyboard to move down and start writing.

Adding a post title in Gutenberg

By default, the next block is a paragraph block. This allows users to start writing right away.

However, if you want to add something different, then you can click on the add new block button on the top left corner of the editor, below an existing block, or on the left side of a block.

Add new block button

Clicking on the button will show the add block menu with a search bar on top and commonly used blocks below.

You can click on tabs to browse block categories or type in the keyword to quickly search for a block.

Finding and adding blocks in Gutenberg

If you don’t want to use a mouse to click on the button, then you can use a keyboard shortcut by typing / to search and add a block.

Working with Blocks in The New Editor

Each block comes with its own toolbar which appears on top of the block. The buttons in the toolbar would change depending on the block you are editing.

For example, in this screenshot, we are working in a paragraph block which shows basic formatting buttons like: text alignment, bold, italic, insert-link, and strikethrough buttons.

Each block comes with its own toolbar

Apart from the toolbar, each block can also have its own block settings which would appear in the right column of your edit screen.

Block settings

You can move blocks up and down by simple drag and drop or by clicking the up and down buttons next to each block.

Moving a block up and down

Saving and Reusing Blocks in Gutenberg

One of the best things about blocks is that they can be saved and reused individually. This is particularly helpful for bloggers who frequently need to add specific content snippets to their articles.

Simply click on the menu button located at the right corner of each block’s toolbar. From the menu, select ‘Add to reusable blocks’ option.

Saving a block to reuse later

You will be asked to provide a name for this reusable block. Enter a name for your block and then click on the save button.

Giving a name to reusable block

The block editor will now save the block as a reusable block.

Now that you have saved a block, let’s see how to add the reusable block into other WordPress posts and pages on your site.

Simply edit the post or page where you want to add the reusable block. From the post edit screen, click on the add block button.

You will find your saved block under the ‘Reusable’ tab. You can also find it by typing its name in the search bar.

Insert a reusable block

You can take your mouse over it to see a quick preview of the block. Simply click on the block to insert it into your post or page.

All reusable blocks are stored in your WordPress database, and you can manage them by clicking on the ‘manage all reusable blocks’ link.

Manage your reusable blocks

This will bring you to the block manager page. From here, you can edit or delete any of your reusable blocks. You can also export reusable blocks and use them on any other WordPress website.

Import export reusable blocks in WordPress

Publishing and Managing Options in Gutenberg Block Editor

Each WordPress post contains a lot of metadata. This includes information like publish date, categories and tags, featured images, and more.

All these options are neatly placed in the right column on the editor screen.

Document settings in Gutenberg the new WordPress editor

Plugin Options in Gutenberg

WordPress plugins are able to take advantage of the block editor’s API to integrate their own settings within the edit screen.

Some popular plugins are already available as blocks. For example, WPForms, the best WordPress form builder plugin allows you to add forms into your content using a widget block.

WPForms block in new Gutenberg editor

Here is how Yoast SEO allows you to edit your SEO settings in the new editor:

Yoast SEO settings in new Gutenberg editor

WooCommerce also comes with widget blocks that you can easily add to any of your WordPress posts and pages.

WooCommerce products block

Adding Some Common Blocks in New Editor

Basically, the new editor can do everything the classic editor did. However, you will be doing things way quicker and elegantly than before.

1. Adding an image in new WordPress editor

There is a ready to use image block in the new WordPress editor. Simply add the block and then upload an image file or select from the media library.

Image block in new WordPress editor

You can also drag and drop images from your computer, and the editor will automatically create an image block for it.

Once you have added an image, you will be able to see the block settings where you can add metadata for the image like alt text, size, and add a link to the image.

Image block settings

2. Adding a link in new block Editor

The block editor comes with several blocks where you can add text. Most commonly used one is the paragraph block which comes with an insert link button in the toolbar.

All other commonly used text blocks also include a link button in the toolbar.

Link button in the list block

You can also insert a link using the keyboard shortcut, which is Command + K for Mac and CTRL + K on Windows computers.

3. Adding an image gallery in Gutenberg

The gallery block works like the image block. You add it and then upload or select image files.

Adding image gallery in new WordPress editor

4. Adding shortcodes in WordPress posts using Gutenberg

All your shortcodes will work just like they did in the classic editor. You can simply add them to a paragraph block, or you can use the shortcode block.

Adding a shortcode block

Exploring Some New Content Blocks in Gutenberg

The Gutenberg editor promises to solve some long-standing usability issues in WordPress by introducing some new blocks.

Following are some of the favorites that we believe users will find immensely helpful.

1. Adding an image next to some text in WordPress

Using the old editor, many of our users were unable to place an image next to the text. You can do this now with the Media & Text block.

Media and Text block

This simple block comes with two blocks placed side-by-side allowing you to easily add an image and add some text next to it.

2. Adding a button in WordPress posts and pages

Adding a button to your blog posts or pages was another annoyance in the classic editor. You either had to use a plugin that created a shortcode for the button, or you had to switch to HTML mode and write code.

Gutenberg comes with a button block that allows you to quickly add a button to any post or page.

Adding a button block in Gutenberg

You can add a link for your button, change colors, and choose from three button styles.

3. Adding beautiful cover images in blog posts and landing pages

Another cool feature that you may want to try is the ‘Cover’ block, which allows you to add cover images to your posts and pages.

A cover image is a wider image often used as a cover for a new section in a page or the beginning of a story. They look beautiful and allow you to create engaging content layouts.

Simply add a cover block and then upload the image you want to use. You can choose an overlay color for the cover or make it a fixed background image to create parallax effect when users scroll down the page.

The cover image block in Gutenberg editor

4. Creating tables inside articles

The classic editor didn’t have a button to add tables into your WordPress posts. You had to use a plugin or create a table writing custom CSS and HTML.

New Gutenberg editor comes with a default Table block, which makes it super easy to add tables into your posts and pages. Simply add the block and then select the number of columns and rows you want to insert.

Table block

You can now go ahead and start adding data to table rows. You can always add more rows and columns if needed. There are also two basic style options available.

5. Creating multi-column content

Creating multi-column content was another issue that the classic editor didn’t handle at all. The block editor allows you to add Columns block, which basically adds two columns of paragraph blocks.

Multi-column content

This columns block is quite flexible. You can add up to 6 columns in a row and even use other blocks inside each column.

Bonus Tips to Use Gutenberg like a Pro

Looking at the new block editor, you may be wondering whether you will be spending more time adding and adjusting blocks than creating actual content?

Well, the new editor is incredibly fast and even very basic usage for a few minutes will allow you to instantly add blocks without even thinking.

Pretty soon you will realize how much faster your workflow will become with this new approach.

For power users, here are some bonus tips to help you work even faster with the new WordPress editor.

1. Move the block toolbar to the top.

As you may have noticed in the screenshots that there is a toolbar that appears on top of every block. You can move this toolbar to the top of the editor.

Simply click on the three-dot button at the top right corner of the screen and then select the Top Toolbar option.

Move the block toolbar to the top of the editor

2. Use keyboard shortcuts

Gutenberg comes with several handy shortcuts that will make your workflow even better. The first one you should start using right away is the /.

Simply enter / and then start typing, and it will show you matching blocks that you can instantly add.

For more shortcuts, click on the three-dot menu on the top-right corner of your screen and then select ‘Keyboard Shortcuts’.

Launch keyboard shortcuts

This will bring up a popup with the list of all the keyboard shortcuts that you can use. The list will have different shortcuts for Windows and Mac users.

3. Drag and drop media to automatically create media blocks

Gutenberg allows you to just drag and drop files anywhere on the screen and it will automatically create a block for you.

You can drop a single image or video file, and it will create the block for you. You can also drop multiple image files to create a gallery block.

Drag and drop gallery block in new WordPress editor

4. Adding YouTube, Twitter, Facebook, Vimeo, and other embeds

Gutenberg introduces new embed blocks to the block editor. There is a block for all supported embed types including YouTube, Twitter, Facebook, and more.

Embed blocks

However, you can just copy and paste the embed URL at any point, and it will automatically create a block for you.

For example, if you added a YouTube video URL, it will automatically create a YouTube embed block and display the video.

YouTube embed

Adding More Blocks to Gutenberg Block Editor in WordPress

The new block editor in WordPress allows developers to create their own blocks. There are some awesome WordPress plugins offering block bundles for the new editor.

Here are a few of them:

1. Advanced Gutenberg

Advanced Gutenberg

Advanced Gutenberg comes with several blocks for popular content elements like WooCommerce product slider, testimonials, maps, counter, tabs, accordions, and more.

It also gives you advanced control on which users can access blocks based on their user roles. You can create user profiles and select which blocks they can add.

2. Stackable – Gutenberg Blocks

Stackable - Gutenberg Blocks

Stackable – Gutenberg Blocks is a collection of beautifully designed Gutenberg blocks that you can use on your website. It includes blocks for the container, posts, feature grid, accordion, image box, icon list, call to action, and more.

3. Editor Blocks

Editor blocks for Gutenberg

Editor Blocks is another neat collection of Gutenberg blocks that you can use. It comes with useful blocks like author profile, hero image, pricing table, brands, features, and more.

FAQs about Gutenberg – The New Block Editor in WordPress

Since Gutenberg became the new WordPress editor, we have been getting a lot of questions. Here are the answers to some of the most frequently asked questions about Gutenberg.

1. What happens to my older posts and pages? Can I still edit them?

Your old posts and pages are completely safe and unaffected by the Gutenberg. You can still edit them, and Gutenberg will automatically open them in a block containing the classic editor.

Editing older articles in new WordPress editor

You can edit them inside the old editor, or you can convert older articles into blocks and use the new block editor.

2. Can I still keep using the old editor?

Yes, you can still keep using the old editor. Simply install and activate the Classic Editor plugin.

Upon activation, it will disable the block editor, and you will be able to continue using the classic editor.

Please note that Classic Editor will be supported until 2022.

3. What to do if the new editor doesn’t work with a plugin or theme I am using?

Project Gutenberg was under development for a long time. This gave plugin and theme authors plenty of time to test their code for compatibility.

However, there is still a chance that some plugins and themes may not work well with the new editor. In that case, you can install the classic editor plugin, request the developer to add Gutenberg support, or simply find an alternative plugin or theme.

4. How to learn more Gutenberg tips and tricks?

WPBeginner is the best place to learn about the new block editor in WordPress. We are the largest WordPress resource site on the internet.

We will be publishing new articles and updating our old resources to help you master the new block editor.

Meanwhile, if you have any questions, feel free to reach out to us by leaving a comment or by using the contact form on our website.

We hope this Gutenberg tutorial helped you learn how to use the new WordPress block editor. You may also want to see our complete WordPress performance guide for improving your website speed.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link