How to Make a WEBSITE or BLOG with WordPress – The easiest way!

Hello, In this video tutorial you will learn step by step how to create your very own website, without having advanced technical skills By the end of this tutorial, you will have developed a fully functional website, with professional design, in a matter of minutes and, most importantly, saving hundreds or even thousands of dollars

This tutorial is well-suited for both personal blogs and online businesses We will show you how to develop a modern website that is fast-loading and optimized for both mobile phones and tablets In order for everything to be as efficient as possible, we opted for the freely-available platform WordPress This solution is also the choice of companies such as CNN, Forbes, Sony or Apple The tutorial consists in three easy to implement steps: Step 1: Choosing your domain and web hosting service

Step 2: Installing WordPress platform Step 3: Installing a theme and customizing the content of your website Each step will be detailed and explained in our tutorial Let's begin! First of all, any Internet website must have a domain and hosting The domain represents your online identity, name and personality, or that of your company

For example, the main domain of Google's website is: wwwgooglecom The hosting is the web service responsible for hosting your website on the Internet More precisely, this represents a server permanently connected to the Internet, where all of the files that compose a certain website reside The hosting and domain are the only expenses you will have for developing your own website, and they are just 4 Dollars per month

You are probably wondering now where can you buy a domain and hosting services? There are a lot of web hosting service providers available on the market We choose SiteGround because they have one of the fastest web hosting services and are among the very few that offer free support for the WordPress platform, at a very good price We have been using their services for more than four years and we are extremely satisfied Now that we have you up to speed with the two specific terms, it's time to choose the domain and hosting for our website Go to SiteGround's website, you will find the link in the Description under Domain and Web Hosting

Any domain consists of two parts: the name you are choosing and the extension Extensions can be com eu net, or specific to each country

In terms of costs, a domain with the extension com will cost you around 13 Dollars per year SiteGround will offer this type of domain free, if you are using their web hosting services Here's yet another reason for which we chose SiteGround's services Let's start with registering your domain

Type in the name you want for your website We will go with the myprojectcom domain Click on search to verify its availability It seems that the domain is not available

If the domain you want to register is not available you need to try a different combination of the name plus extension We will verify myamazingprojectcom This domain is available Next you will have to choose a payment plan for your hosting services For the purpose of this tutorial, we will choose the start up plan, at a price of only 3,95 USD per month

With this plan you will be able to host a single website with up to 10 thousands visitors per month You don't have to worry, you can later change the plan according to your needs Click on "Order Now" Fill in the order form with your personal data It is important to choose an easy-to-remember password, but still a secure one Fill in the payment information

Un-check the rest of the boxes, as they are services we will not be needing The total will be 47,40 USD, a small amount if you think of the prices demanded by specialized agencies or programmers You can also pay the web hosting services for a period longer than one year We will take a short break in order to fill in the form Once the form is completed, we move on to the "Submit Order" button

For validation, we click on "Complete Order Now" and get in touch with a SiteGround representative as soon as one is available All web hosting providers have a verifying procedure in order to create a safer online environment Now that we have been contacted by SiteGround's support agent, we will be asked a series of easy questions to validate the account For the purpose of keeping this video tutorial short, we've cut out the waiting periods from the conversation, but you can visualize our discussion This validation procedure through the service of Live chat is faster and easier, than the methods used by other web hosting providers, which can be quite tedious

Now that the validation is completed, we can activate the domain Access the e-mail address used and search for an e-mail titled "Verification Required" Access the verification link in the e-mail, and on the opened webpage, we verify if your data is correct Press "Verify Info" That's all for the first step This is how the domain's page looks right now

A new functional website will soon sprout in this place That gets us to step 2 Wasn't that easy? Let's begin by installing WordPress We return to our e-mail address, where we will find an e-mail titled "Order Confirmation" from SiteGround This is where you will find the username that has been assigned and the authentification link for our new web hosting account

Remember the username, in this case "myamazi5" and click on the login below Insert the username and password of the web hosting account and click "login" From the new window, select the first option and click the "Proceed" button For the question "What type of website do you need" we will check Personal/Blog You can choose whatever option you like, it will not affect our next steps in any way

The important aspect is that, for the next question, "What software do you want to use?", to choose the WordPress option and move on Now we will be setting WordPress access/autentification data Introduce a valid e-mail address, choose a username that contains a minimum of 8 characters and a password that contains the same, minimum 8 characters, one of which needs to be a number Click on the "Proceed" button Congratulations! The WordPress platform is now installed

It is very important to write down or to make sure that you remember the admin data for WordPress, like the url address, username and password This is how our website looks now that we have installed WordPress Did you expect it to be this easy and fast? This is why we chose SiteGround, because it makes WordPress installing a lot easier for beginners Moving on to the last step of this tutorial, installing a theme and customizing the content and layout of the website Usually, this is the part that takes up most of the time when developing a website and can seem complicated for beginners

The multitude of themes and developing the website from scratch can seem like a tricky operation Fortunately, here's where we come in After analyzing dozens of WordPress themes we chose one with design and functions suitable for any type of website or blog Aside from the theme, we offer the demo content for free, content that can be downloaded from our website The demo content represents a base structure containing a layout for main pages, models of secondary pages, blog posts, contact page with map and a lot of other useful resources

We start by logging into the WordPress admin interface, by accessing the previously-saved url address, which is in fact the name of our domain, followed by "/wp-admin" Enter the WordPress username and password and login If we want to change the language we're using in the admin interface of WordPress, we go to the "Settings" option, select "General", and from the field "Site Language" we choose the desired language For this tutorial we will choose English Click "Save Changes"! We are now going to install the theme

Go to "Appearance" and then "Themes" In short, a theme modifies the design and functionality of a website, without altering WordPress main structure These are the themes that were preinstalled in the platform To add a new theme go to "Add New" There are a lot of themes, both free and premium, from which you can choose in accordance with your preferences

With a little bit of patience and research you can find free themes that are extremely good If the budget is not an issue, you can find premium themes, which offer extra functionalities and have support and assistance from the developer The "Themes" category from the description will offer you more information about the existing premium options For this tutorial, we choose the "Spacious" free theme According to our tests, this is a complete and versatile theme

It can be used for almost any type of website or blog, it's responsive, which means that it can easily adapt for mobile devices, and has a modern and easy to personalize design Click on the "Install" button! Now that the theme is installed it needs to be activated Let's see how our website will look once the theme is activated We access the domains page, hit refresh and we can already see small changes The significant changes will come after configuring the theme and importing the content

Our next step is to install the plugins we're going to be needing Go to menu, plugins A plugin is a module that, once installed, will extend or add new functions to the WordPress platform For example, creating a contact form For our website, we will install five plugins Go to "Add New"

The first plugin we're going to install is "WordPress Importer" This will help us import the demo content from our website Click "Install Now" to install the plugin, we activate it by clicking "Activate plugin" We will do the same for installing our new plugins The next plugin we are going to install is "Widget Importer & Exporter"

This will help us import the widget demo content from our website The third party plugin is "Contact Form7" The plugin will allow us to add a contact form Another plugin we are going to be needing is "WP Google Map Plugin" Make sure to install the same module I'm installing right now! There are many similar modules

This will help us create a localization map on our contact page Finally, the last plugin we recommend is "Recent Posts Widget Extended" This plugin will allow us to personalize the way recent posts are shown If you're feeling overwhelmed with all this new information, don't worry! By the end of this tutorial we will clarify all misunderstandings We're reached the point in which we are ready to import the demo content we talked about earlier

To do so, go to "Tools", select the "Import" option and then "WordPress" Click on the "Choose file" button Select the file we want to import, in this case, "content-demo-data" We already have the file in our computer, but you will have to download it from our website using the address wwwcreateawebsiteeu/ro/descarca Once downloaded, we select the file, and click "Open"! after that, click "upload file and import"

Select the username, check the "Download and import file attachments" option, and click "Submit" The demo content also involves importing the widgets A WordPress widget is a small block of content that fulfills a certain function, and can be inserted in certain areas of the website, such as the sidebars For example, a widget can help us show a calendar on our website Let's import the widgets

Go to "Tools", "Widget Importer & Exporter" Select the "widgets-demo-data" file that you already downloaded from our website Click "import Widget"! Now that we've imported the demo content and the widgets, let's take a look at the website We see the appearance of some articles that we will be editing later, as well as some widgets in the footer and sidebar From this point on we can begin to personalize the theme and structure of the website

Go to "Appearance", select "Customize" and reach an editing area that will show us the changes we are going to make in real time Click on "static front page", after which choose "static page" In the "front page" choose the "Home" page If you want to have your blog as the first page of the website, choose the "Blog" page From "Post page" we select the page that will contain the latest posts, in our case, the "Blog" page

As you ca see, the structure and content from the main page has changed We continue our personalization operations with "site title & tagline" Enter the name of the website, which will appear in the upper left corner, followed by a slogan or tagline that best describes the project in a few words We can see these changes in real time From this area we can also change the title color and the color of the background

You can either choose the color by using the color picker, or by inserting the color code This is where we set up the background color You can choose whichever color your imagination tells you too For the purpose of this tutorial, we're going to choose a neutral background color From the "Navigation" option, we will set up the menu of our website, the header one as well as the footer one

Select the "Top Menu" menu, which was created when we imported the demo content You will see the changes to the menu in the upper right Later we will show you how you can also edit this menu Click "save and publish"! Back to the main dashboard If you also want to insert a logo, go to "Appearance" "Theme Options" and in the "Header" tab you will find the "Header logo" field

Click on upload Here we can choose to upload an image from your computer, or select one from the platform's media library The recommended size is 100×100 pixels Click on "Select"! Once you have uploaded the logo, check "show both", this way, in the header you will see both the logo and the name of the website Click "Save Options"

With a website refresh you will see that the logo is now present in the upper left hand corner Back to the main dashboard In order to create the slider, click "Slider", "Check to activate slider", after which we can configure up to five slides Click on upload and choose an image with a recommended width of 1400 pixels, to make sure that it will show properly on all devices, regardless of their resolution Insert the name of the slide, its description, and the name and link for the action button

Repeat these steps for every slide you want inserted and click "Save options" Again, we can see the changes with a refresh on the website The slides are now visible and will automatically rotate with a frequency of a few seconds Going back to the main dashboard we click on the "Design" tab From here we can change the implicit layout for pages and blog posts, the general color of the theme (light or dark), as well as the setting for the primary color

Now we are going to change the primary color From the "Primary color option" we choose a color according to our preferences, in our case, blue With a refresh you can see that the color has now changed to blue The first page is now complete in terms of structure, with logo, menu, slider, a call to action, an area of featured pages, an area in which we can showcase certain projects/services and the footer of the website that contains various widgets We also have the blog page, where we can find a few demo articles that are automatically sorted, according to publishing date

Each article also has a featured image On the left side of the page we have a slider with different widgets If we go to the contact page we see that there already is a map, a form and a widget with contact information, on the right side of the page Now that the structure of the website is ready, we can move forward with editing the content You will most certainly be satisfied with our progress, but we still have a few steps to implement until the final form of the website

Before editing the pages, we recommend that you set up the structure for the links We can do so by going to "Settings", "Permalink" Here, instead of the standard numeric version, we will choose "Post name" This way, the structure of the links will be: the domain of the website followed by "slash" and the name of the post We chose this version due to the fact that is easier to understand for users and will make your website indexed easier by search engines

Saving changes! Now that we've sorted this out, it's time to edit a page To do so, go to the "Pages" menu From the list of available pages, which were created with the import of the demo content, we will edit the page titled "Page 1 Title" Change the page title from the upper field and insert the url you want to be used for accessing the page in the permalink field You can modify the content of the page in the main window

As an example, I will add some text To modify the featured image for this page, go to the column on the right, at "Featured Image", delete the demo image, and click on "Set Featured Image" Here we can select an image from the media library or we can upload one from the computer click on "Set Featured Image" Once we are done with modifications, we must click on "Update" in order to save

Let's visit the website and see our recent changes On the first page, instead of the featured page with the title "Page 1 Title", you will now have "Our Restaurant" page and the image we've selected We can click on the "Read More" link in order to be directed to the address of this page, where you can visualize all of its content As you can see, the page has a layout featuring a right sidebar and the featured image does not appear on the page Let's insert an image and the content of the page

Going back to the editing window In the content field, click before the text in the place you want the image to appear and go to "Add media" Choose the image, select from the right the desired alignment of the image, as well as the desired size, and click on "Insert To Page" If, for example, we want the page to not have a right sidebar, choose "No Sidebar Full Width" from "Select Layout" and save the changes Let's see the changes on the website

Now that the page looks just as we wanted, with an image but no sidebar, let's see how to create a new page Go to "Pages" and select "Add New" Insert the title of the page, we will create an "About us" page Insert the content we want showcased for the page, and if you want, you can also modify the page url Select the desired layout, for instance, I will choose for the page to have a left sidebar

Insert an image, like we've previously done We will not set this page as features, so you don't have to choose a "Featured Image" Click on "publish" in order to publish the new page The page can now be accessed by using its url If we go to the "Home" menu, you will see that there is no link to this new page, nor is it one in the featured pages or the upper menu

In order to add a link to the new page, go in the "Appearance", "Menus" menu, select the page and click on "Add to Menu" We can change the order of the pages from the menu by using the "drag and drop" function Let's save the changes and see them on the website The "About Us" page will now appear in the header menu Great! You just learned how to add a page in the menu! What do you see if we also publish a new blog post? Go to the "Posts" menu, you will see a list with existing posts, created with the import of the demo content

We will erase the post that was automatically created by SiteGround when we installed WordPress Now go to the "Add New" menu Same as for adding a new page, we will start by choosing a title for our new blog post Insert the content of the post If you want to format the content, you can do it easier in the "Visual" editing mode

For instance, we select a text paragraph and, if we want it bold, we simply click on the bold icon Here we have other editing options similar to the ones we have in Word Next we'll choose a layout for the post, for example one with a sidebar on the left of the content, and set up a featured image, just as we did for the pages Click on "Publish" and go on the blog to see how our new post looks like Because it's the most recent, this post will automatically appear above the already existent posts

Click on the post title for viewing its page, where we can also view the entire content of the post You will notice the text that I used the "bold" function on in the visual editor Now that we've seen what it means to edit a post, let's focus on editing the content and structure for the first page of the website Currently, on the home page, under the slider, we have a call to action, three featured pages and an area in which we can showcase our services or portfolio In the case of our theme, this content appears on the home page through the help of some widgets

If we want to modify the widgets we have to go to the "Appearance" and "Customize" menu Select the "Widgets" option Now we will have a list with the available widget areas on the left side Also, on the right side you can see the changes we are making, in real time For instance, the first area from the list is called "Header slider", and here we have the search widget

This area is situated in the upper right side, above the menu We can add a new widget, by clicking on "Add Widget", a calendar for example We will not be keeping it, so we select "Delete" in order to erase it The next widget area from the list is "Business Top sidebar", the area situated under the slider Here we have the "Call to action" widget, which calls for action on behalf of the user and that we will be personalizing with whatever message we desire, with a main text, a secondary text, and a button

The next widget added in this area is the "TG: Services" one, which allows us to feature up to six different pages Now only three pages are selected I will add a fourth page that will automatically appear under the other three I will not be keeping it, so I will eliminate it from the featured area We can change the order of the widgets with the help of "drag and drop", same as we did for the menu editing

For instance, we can drag the "Call To Action" widget under the featured pages I will revert to the initial order The next area we will be using on this page is the "Business Bottom Sidebar" Here we will find a widget that allows us to feature other pages, such as products or services from our portfolio We set "Our Menu" as a title and insert a description

Further down we can select the three pages which featured images we want to be showcased in this area The website's footer is divided into four widget areas In each area, we can add and edit the widget that we want I will currently leave it as is We save the changes and go edit the contact page

As I already mentioned, the page is composed of three elements: a map, a form, and a widget with contact information The first step for editing the map is to go to the "WP Google Map" menu Select "Add location" in order to add our location Insert a location title and search the address If we want, we can also set up the exact geographical coordinates of the location

Save location Now we're going to create the map Go to "Create Map" Insert a name for the map and its height in pixels, select the desired zooming level and the type of the map, then check the location or locations (in case we defined more than one) Plus, we can also select additional information that you want showcased on the map, such as real time traffic

In the end, save all changes If we visit the contact page now, we see the chosen map, with the traffic information We will next configure the contact form Go to the admin interface to "Contact", "Contact Forms" Click on "Edit" for the existing form

Here we can add, delete or modify the fields in the form In order to set an e-mail address where to receive the completed forms, go to the "Mail" tab and insert our e-mail address in the "To" field In the "Form" field, insert the address from which we want to see the e-mails received via the form In the "messages" tab you can personalize the messages your users are receiving when using the form Save changes! Now that we have a functional form, all we need to do for the contact form is to modify the information in the sidebar

To do so, go to "Appearance" and select the "Widgets" option Here we can visualize/edit all widgets and widget areas of our website, including the ones found on the homepage (which we previously edited from the "Customize" menu) In order to edit the contact information, go to "Contact Page Sidebar" Here we can edit the title and content of the widget After we perform the changes we click on "Save"

Now you can see the changes on the contact page In the admin window of the widgets you will also find the "Right Sidebar" and "Left Sidebar" areas These areas are showcased on the pages that have a left or right sidebar layout On the blog, for instance, we have a sidebar in the right side that contains a number of widgets We will erase some of them, and keep only the "Categories" and "Recent Posts Extended" widgets

We see that, once erased from the admin interface, the widgets will also disappear from the blog, as well as from the rest of pages that have a "Right Sidebar" layout We currently have no content for the "Left Sidebar" area, but you can add any widget you want Now that you've learned how to edit the entire content of the website, pages posts and widgets, you can proceed to personalize it as you wish We will take a break in which we will finish editing the content in order to finalize our restaurant website In case you were curious, this is how my website looks after I easily finished editing the demo content

I think that the final result looks very good and I hope it will inspire you for your very own project You can access it yourself at the address wwwmyamazingprojectcom Thank you for following this tutorial until the end, may your new website be as successful as you desire and may you have as many visitors as you want We await your questions and suggestions in the comments section

Don't forget to follow the rest of our video tutorials

Free Email Updates
We respect your privacy.

wordpress plugins tutorial

affiliate marketing