#1 WordPress Step By Step Beginners Tutorial (English) 2018

#1 WordPress Step By Step Beginners Tutorial (English) 2018

May 13, 2018 Off By dqdo mraz

This will be full guide on how to make a wordpress website in 2018. The tutorial is for beginners so don’t worry if you are new to this.

1. DOMAIN

So it all starts with the domain, this is the first thing that we need to take care of.

Don’t worry everything is very simple actually.

So in order to pick a domain you go to any domain checker, simply by searching in google something like “domain name checker”

There you’ll see a bar that says enter domain name, this means that we will now check if the domain is available or not.

The name of the website should be something that sounds catchy but it also represents you or your business.

Here’s what you will see after you search if your domain name is available or not.

If it’s green it’s available, if it’s red it’s not .. i told you that it will be simple

So if you have chosen a domain name now it’s time to choose weather you wan’t it to finish on .com .net .org etc

Maybe you have the question does this matter, how do i know which one is best for me.

In my personal opinion it doesn’t really matter, the only thing you need to consider is, if you’re planing your website to be just for one country,
let’s say France for example, it’s nice if it finishes with .fr but again it really doesn’t matter, i personaly always go with .com

2. HOSTING

When it comes to hosting, you’re just startin so you can go with the basic starting plan of the hosting provider.

Don’t worry you can upgrade at any point in case your website grows bigger.

In the beginning in my personal opinion the most important thing is to pay as little as possible for your website so you don’t feel finantial preasure.

We have finished the domain/hosting part so now let’s start with the real web design process step by step.

3. INSTALLATION

The installation of WordPress is piece of cake, here are the steps to the installation:

When you ordered the hosting it required you an email, in the main you entered you’ll find an email with a: LINK, USERNAME, PASSWORD

Those are actually the link, username and password for your Control Panel, from there we’ll install WordPress.

So click the link it will require Usernam & Password .. you have them in the email, bellow the Link.

When you enter them and it logged you in successfully you will be in the Control Panel.

There are many things in the control panel but we’ll take a close at look at them later on.

Now the main thing that we need to focus on is a field called Softaculous and it’s placed ussually on the bottom of the Control Panel.

In Softaculous you will see many CMS platforms such as Magento, Open Cart, Joomla and many others.

The one that we’ll be using in this tutorial of course is WordPress.

Usually the first icon is WordPress so click on it.

Now we start the actual installation of WordPress, you will see few fields, but don’t get scared, there’s not much to enter or change here, most of the things we will leave like they are or blanked.

1. If it’s available HTTPS then you switch to it if it’s not, don’t worry you can go with HTTP as well but you’ll just have to switch it later with a plugin

2. Whatever it is there, leave it the way you found it, you don’t need to enter anything there, let’s keep it simple.

3. This is important! Enter your email and password and please be sure that you wrote them somewhere or you remember them, cause many people forget them after that.
It’s not that you cannot change it but just be sure to remember them.
Another thing to keep in mind with the Admin username is never let your username be “ADMIN” because this is the most predictable username, because it’s the usually suggested admin name by WordPress and a lot of people leave it that way which makes it easy for hackers.

4. This one also leave it the way you found it.

5. Same as number 4, whatever was there when you started the installation leave it the way it is.

And the last part is to click the blue Install button.

After you click the button the installation usually needs about 1 minute to complete so it won’t take much time at all.

Installation complete.

4. Admin Panel

Now the next thing that you will see after the installation loads till the end is two links.

One will be the link of your site (the domain) the other will be your domain ending with /wp-admin

You click on the second one in order to enter the so called Admin Panel.

The admin Panel is pretty much the backside of your website, that is visible just for you and it’s the place from where we will do all the changes in everything in the website.

Again every time you wanna enter your Admin Panel enter your domain/wp-admin, this is also where you log in from (in case you are logged out).

The username and password for the Admin Panel are the ones you entered in the installation (up in the picture).

Let’s take a look at what you’ll see when you enter the Admin Panel on WordPress.

Don’t worry if at first you don’t know what to do, it’s completely normal.

Let’s break down everything we have in the WordPress Admin Panel.

DASHBOARD

First we have the Dashboard button, which means pretty much that you go where you are now, it’s like a “Home” button for the Admin Panel.
I know that there are many things that appear to you now but don’t worry in this tutorial we will progress with tiny steps.

POSTS

From Posts you can: Create new posts, Manage the posts you already made, Delete posts .. and do anything you wanna do with the posts, change images, description, etc.

MEDIA

From here you upload/delete all kinds of media files such as images, videos, audo files and really any media file you can imagine.

PAGES

From here obviously you can create pages, such as home page, contact page, products page and page for whatever you can imagine.
In wordpress you can make infinity amount of pages and all it takes is 2-3 clicks, the creation of a new page takes seconds.

COMMENTS

Obviously from here you manage comments, you can review them, answer them, delete them etc.

APPEARANCE

This is a whole topic, from there you can manage the visual things about the website, but again it’s a long topic so we will take a look at it later in the guide.

PLUGINS

In wordpress Plugin means function pretty much, this is the way you’ll understand it most easily.
Whatever function you wan’t in your website, the plugins are there to deliver it.
There are plugins for pretty much everything you can imagine.

USERS

By users it’s meant not the ones who visits the website but the ones who are participating in the Admin Panel, in this case that’s just you.
But if you decide you have the option to make admin accounts for as many people as you wan’t and you have control over them, you can delete their account if you wan’t.
You can create different types of roles in your website, moderators, authors, shop administrators and others.
Whatever role you give to the account it will have limited accessibility, but if you wan’t the person to have access to everything just like you do, you simply create user admin.

TOOLS & SETTINGS

They are pretty general and there you can find all kinds of settings about both the admin panel and the website itself, the plugins themes etc.
I don’t get too much in to details about tools & settings because it really has very wide range of usability depending on what you’re looking for.
An example of something you can do from settings is change your home page for example or change the language of the admin panel.
I have to mention changing the language of the admin panel doesn’t mean change the language of the website.

5. Pick A Theme

Now after this brief guide trough WordPress Admin Panel let’s get to the real fun part.

In WordPress there is a thing called Theme, which pretty much means the vision of your website, how he looks, the style etc.

You can change your theme with a simple click and there are many .. and i mean MANY themes from which you can choose.

Most themes are free and actually all themes that are offered in WordPress are free, meaning that the ones that are paid are located in external websites.

The paid themes are between 25$ and 100$ depending on what they offer, but again in this tutorial we will use only free things.

Here’s how to add a theme: You go to Appearance then click on Themes, then click Add New, that’s all.

When you click on themes you will first see all the themes you have available, you will have few automatic themes there in the beginning, that always there after a installation but easily can be deleted if you wish.

There are themes for all website genres, weather you’re making a blog, e-commerce, portfolio website, forum, in WordPress exist theme for pretty much every genre.

Awesome feature of wordpress is the theme filter that filters themes based on what you are looking for.

The choice of theme is very important and very fun process because with a simple click you can switch the look of your website.

To use the theme filter simply click on Appearance/Themes/Feature Filter

After you click Feature Filter you simply choose which categories fit best what you’re looking for and then click Apply Filter.

When you find a theme you like you will have the option to install it, when you install a theme she is in your themes section but you need to click activate, in order to set which one exactly to be active on your website.

After you click Activate, the theme should be active and we are ready to start slowly customizing her, starting with the most basic things.

When you go to your website you’ll see a black bar on the top, that says Your website, Customize New/Edit etc. in order to edit some things about the theme you gotta click customize.

Now depending on the theme the view will be slightly different, because there are some small differences between what some and other team offers.

You may have things like:

Site Identity from which you can change the name of your website (not the domain, just the name displayed on the page)

Colors – sections which will obviously allows you to change the colors of the theme.

Typography – For changing the fonts in your website

Custom CSS which we will be using a lot in order to have full freedom in customizing the look of your pages

We are not finished with the Customization but those are the basics you need to know for now, so lets move to the next part, which is the Plugins.

6. Plugins

As i said earlier in the WordPress context, plugin means pretty much function, that’s what they are for, if you need some kind of function you look for plugin that does it.

The way WP Plugins work is very similar to themes when it comes to finding them, you simply go to the search in wordpress and you describe what you are looking for.

Imagine that the first thing that pops in to your mind about what you wan’t in your website is a digital clock .. just a random example ..

So what you’ll do is simply go to Plugins/Add New/ and then just type whatever you are looking for, in this case Digital Clock.

When you type it you’ll see many different plugins that offer pretty much the same things, it’s kind a like different brands offering one service in their own way.

So you pick a plugin and you have the function to put digital clock in your website (how we place it it’s a topic for little bit later).

Those 5 things that you see in the pictures are all plugins, you install plugin simply by clicking the install button.

Are all plugins free?

All the plugins that are in the wordpress plugin search are free, most of them have paid version that gives you extra features.

There are paid plugins in external websites, just like with the themes.

Let’s take a look at the plugin you will be needing in the start.

  1. Google Analytics – the first thing that i always do to a new website is to setup it’s google analytics. This simply shows your daily traffic. You can monitor Google analytics both in your wordpress dashboard and in your analytics account (you can access it by simply typing google analytics in the search)
  2. Forms plugin – As you probably have seen almost every website has contact form. This is simply a contact box with which people can send you messages, it is a must if you have online store.
  3. Yoast SEO – This is a plugin that will help you a lot with the basic optimization of your website. Things like submitting sitemap, or robot txt, fixing your website and pages meta tittles and descriptions
  4. Woocommerce (only if you’re an online store) – This one is a must only if you’re having an online store. Woocommerce gives your website the ability to have a platform for selling. By platform i mean the full package, products, prices, checkout pages, monitoring on the sales and many other things.
  5. WP Super Cache – this is a plugin that will increase the speed of your website. I encourage you to use plugins for speeding up your website, there are many of them so try them out and see which one makes the difference for you. Loading speed is important factor in SEO these days so it’s not something you should ignore, plus most of the times is something that you take care of once in a long time.
  6. Elementor Page Builder – This one is becoming viral these days, and we’ll be using it in the creation of the website. The page builders allows you to build almost any page you can imagine, you have full control of how the page will look like, you can start from scratch and build a page design completely based on your taste. There are others page builders such as beaver builder and divi, but Elementor is the one i’m using the most and i’m pretty satisfied by it.
    Elementor 2.0 wordpdress
  7. BackupBuddy – This is a plugin that allows you to make a backup of your website. A backup simply means that if something goes wrong with your website, you can use it to restore the things the way they were. Most of the hosting providers keep a backup of your website, so if you mess up and you forgot to do this step, contact them. I need to mention that not every host providers do that, but all of the big ones do.
  8. Envira Gallery – This is a plugin that allows you to create beautiful images galleries. This plugin is great if you wanna make a portfolio website, or anything orientated around images.

The next step is the integration of the plugins. In order to do this we gotta talk a bit about the fundamental structure of a website.

A website usually has: Header (the top part) Body (the middle part) Sidebar (it’s in the left or right side of the page) Footer (the line in the bottom of the website)

The header is used mostly for logo that is also a home page button, for the navigation bar which is the buttons to different posts, pages and categories and some other features.

The body is mostly used for pretty much anything, but mostly for content.

In the sidebar you may see related pages or ads and in the footer you’re most likely to see contacts and connections to other websites or pages.

Now when we know the structure of the website, let’s try to put something in the body, for example let’s put a slider. A slider is simply those changing images that you see on a lot of websites, most of the time they advertise something.

In order to integrate a slider in to your body you need to Install a plugin for a slider, we go to Plugins/Add New/ and we type slider in the search. In this case i’ll be using Meta Slider.

So download & install meta slider and then you will see that in your dashboard now you will have meta slider option in the down left in the black line, somewhere bellow the settings.

You click on it and now it’s time to setup the plugin.

The first thing is click Create New Slide, then add images to the slider and then click save and that’s it.

Now the only thing left to be done is to integrate it in the area we wan’t, you will see a short code down in the right, something like this [code] you take this and you simply put it in your page.

The next time when you load the page you’ll see that you have the meta slider on it.

You can go back at any time and change some of the things in the slider, such as the size, the shape or the images that you wan’t it do display.

We integrated this plugin with a short code and by this i wanted to show you one of the fundamentals of how wordpress is working.

Short codes are awesome way for you to integrate different stuff to your pages or posts.

If you have a online store you can implement products in any page using short codes.

If you are wondering how to know which short code is required, don’t worry, even i don’t remember them, so just type in google the thing you need + short code and look for what you’re searching.

If you wan’t to put your products in a page you created for example, all you need to do is add in the page [ products ] and click save.

7. Menus

One of the most fundamental things in a website is the menu, almost every website has a menu.

The goal of the menu is to allow people to go in any part of the site they wan’t weather it is category, contact page, product page or any other, you can put anything in your menu.

Here’s how to create your first menu and how to integrate it in your website.

You go to Appearance/Menus/Create Menu

The next step is to look to the left when you will see all pages, posts or categories that you have, so simply check any of them that you will wan’t in the menu.

Never forget to click Primary Menu always because this way you’re telling wordpress that you wan’t this menu that you have just created to be the active one.

You can create as many menus as you wan’t but only one can be active and as i said the one that is active you should select as Primary Menu.

Some themes have more than one menu, so they have Primary and then Secondary Menu, but to be honest from web design point, two menus are bad idea.

In case you wanna add a link or page of external website in your menu, there’s the option Custom Links that you will see on the image above.

With Custom Links you can add any link from any website to your menu, you simply click Custom Links and then you enter the link and the name you would like on the button.

Creating and changing menus with wordpress is easy and fun, in some other cases with other CMS’s it’s a total nightmare.

8. Widgets

The next step in this tutorial well be to learn about Widgets.

Widgets are functions that are placed mostly in the sidebar.

If you don’t remember what sidebar is, check the image about the website structure above.

So widget is for example clock or calendar, those are the most basic ones, of course you can put much more complicated, like product filters if you have online store.

In the left you can see available widgets and in the right widget area (widget area means that those are the currently active widgets you have on your website)

You can add and remove widgets super easy with drag and drop.. Really it’s that easy.

You can put any function in your widget area if you don’t have a widget you need in the available ones, simply install a plugin for it.

Trough widgets you can add very cool things to your sidebar, i like to add youtube videos or ads, sometimes i also put my recent posts there, just like in the example on the image.

9. CSS Customization

Now let’s talk a bit about coding.

If you wanna create website on WordPress you can do it without coding, but if you add a little bit of CSS for example you can go even deeper in to customization of your website.

The next step will be exactly to talk about CSS code and how we can easily use it in WordPress.

I know that when you hear coding you get a bit scared but CSS is in my opinion the most fun to study code in 2018.

CSS is all about changing the look of your website and the visual things about it.

Dow you maybe see one thing called Custom CSS, this is exactly where you need to click in order to make changes to your website trough this type of code.

Now i gotta warn you when it comes to any type of coding, don’t do it before you have learned basic syntax about the language.

We gonna start with some baby steps by discussing the most basic commands in CSS.

If you wan’t some element to disappear you need to write {display: none};

This means that you are saying that you wan’t the certain element to not be displayed.

Maybe you are wondering how do you say which element you mean in the code, for this you gotta go to your website and rich click then “inspect element” on the object you wanna edit or remove.

When you click inspect element you will see the name in the object somewhere in the code, usually is in brackets.

Again i say that CSS is not for beginners so i’m just explaining you how it works, you may check some CSS tutorials to see how it’s happening step by step to understand it.

Let’s get back to the fun stuff now and discuss something that is much more simple and it is drag and drop for the most part.

10. Elementor 2.0 Page Builder

This is probably my favorite part.

This page builder just like every other is a plugin, which means that the first step is to install it from Plugins/Add New/ Type the name of the plugin.

This builder is becoming more and more popular but now in 2018 they have released Elementor2.0 that is just awesome and took Elementor step ahead from his competition.

It’s very fun and enjoyable to use it, it turns web design in to pure joy.

On the right you see the page that you’re working on in real time, meaning that whatever you do you’ll see the changes happening and it’s drag and drop.

On the left side you gonna see all the elements you can add to the page, there are so many things, buttons, text, videos, icons and so many others.

In the past WordPress was struggling with the fact that the development of a website was limited for the non-coders, this isn’t the case in 2018 where Page Builders allows you to create almost anything you can imagine

Many people say that the page builders will be the future of web design, now a new feature is the templates of the web designs made on Page Builder that you can easily migrate and edit.

CONCLUSION

If you wanna get in to Web Design WordPress is the easiest way you can create awesome things.

I encourage you to learn more about CSS and Elementor, cause the combination of the two can be very strong in the future.

I hope you enjoyed this step by step tutorial tell me what you think in the comments and do you know something more when it comes to WordPress.