WordPress Tutorial for Beginners 2026 - Step by Step

Hey, I'm Caleb and today I'll show you step by step how to build your own WordPress website from complete scratch. If you ever wanted to build a WordPress website, but feel completely overwhelmed by all the different steps involved, this video will walk you through everything you need to know, and by the end, you'll have a live WordPress website that looks professional and is ready for visitors, even if you've never built a website before. We'll start by setting up your web hosting and getting a free custom domain name. After that, we'll install WordPress, get access to hundreds of free, high-quality website templates, and use a simple drag and drop page builder to customize your website, all without needing to write any code. Now, before we get started, there's one mistake that trips up a ton of beginners. You might not know this, but there are actually two different versions of WordPress, and choosing the wrong one can be a huge mistake if you don't know what you're getting into. When you search for WordPress, you'll see WordPress.com and WordPress.org, or and they can look like the same thing, but they work very differently. WordPress.com is a hosted paid service with plans and limits where a lot of the good stuff is locked behind upgrades. WordPress.org is the free open-source WordPress software you install on your own hosting. And that's what gives you full control over your themes, plugins, and your website. I actually tried out WordPress.com recently to see if anything had changed from the last time I used it. I signed up for the lowest cost $4 per month plan and began setting up my website. Unfortunately, I quickly found out that in order to use a popular theme like Astra, you have to upgrade to one of the more expensive plans, which will end up costing you over $40 per month once everything's added up. Now, with WordPress.org, you can install WordPress on your own web hosting. And once you have that, you can use the exact same tools for only a few dollars per month. So, while WordPress.com gives us payw walls and limitations, WordPress.org or is the complete opposite. It gives us full control over how we build our website while being significantly more affordable in the end. This means the only thing we actually need to pay for is web hosting. So, let's quickly break down what that means. If you've never set up a website before, hosting can sound confusing, but it's actually really simple. Hosting is just renting space on a server that stays online 24/7 so people can visit your website from anywhere in the world. WordPress itself is free software, but it needs a place to live. And that's what hosting gives us. If we want to use WordPress.org and get all the flexibility we just talked about, we'll need to choose a hosting provider to run our website. To keep this simple, we're going to follow a clear five-step road map to get your WordPress site online the right way. First, we'll get hosting like I mentioned a moment ago. After that, we'll get your domain name, install WordPress, install our theme and plugins, and finally, customize your website. We'll take it one step at a time, starting with hosting. When it comes to choosing a hosting provider, there are a lot of different options out there. Luckily, WordPress.org actually has a page where they list hosting companies they officially recommend for running WordPress. I've used a few of the hosts on this list before, but the one I found to be the easiest and most affordable, especially for beginners, is Hostinger. That's the host I recommend, and it's the one I'll be using for this tutorial. Now, before we go ahead and choose a plan, I want to quickly show you how to get the best price on your hosting. I've actually partnered with Hostinger to set up a special partner link for this tutorial that gives you an extra 10% discount on top of their regular promo pricing. You'll see that link on screen right now. It's also the first link in the video description. When you use it, it automatically applies the coupon and takes you straight to the correct discount page for this setup. So, you're getting the lowest price available. Go ahead and open that link in a new tab and you should land on this page right here. At the top, you'll see the discount code has already been applied for you. And to choose your plan, just go down and click on start now. And then that's going to scroll you down to the plan options here. You'll see three different choices. You'll have premium, business, and cloud startup. I personally recommend going with the business plan. It gives you plenty of resources for a very affordable price. It'll get you 50 GB of NVMe storage and a free domain as well. That's going to be perfect for most WordPress websites. And if you ever need more or less later on, you can always upgrade or downgrade your plan. So, for this video, I'll be going with the business plan. So, here I'll click on choose plan. And next, we'll need to choose our billing term. By default, it's set to 48 months, which gives you the biggest savings, but you can also switch this from 48 months to 24 months, 12 month, and 1-month plans as well. At a minimum, I'd recommend going with the 12-month plan. It still gives you plenty of savings and includes a free domain for the first year. So, for this video, I'll go with the 12-month option. And just below that here, you can pick your domain name. Again, this is going to be free for the first year with your purchase. If you already know what you want, go ahead and type it into the search box here. I'll type in my domain name. Now, as you can see here, my domain name is available. And I would recommend trying to find a domain that ends in.com. With that done, I'll go ahead and select my domain name here. By default, the period will be set to 2 years. I'm going to go ahead and switch this to one year. And on the right side here, you can review everything that's in your cart. And once again, I'll confirm that the coupon code is applied. And again, if you use the first link in the video description, this coupon will be automatically activated. And with all of that set, let's click on continue to move on. Now, here we'll need to sign up for a Hostinger account if you don't have one already. So, enter your email address here and create a password. Once you're done, click on register. Once you get to this page here, go ahead and enter your billing address and your payment information. I'll go ahead and do that now and fast forward whenever it's complete. I've gone ahead and filled out my billing information and my payment information. With that done, I'm going to click on submit payment to move on. From here, click on get started. Then from there, you'll be brought to Hostinger's onboarding setup. So, at this point, we've finished step one and step two. We've got our web hosting set up and we've secured a domain name. Next up is step three. Let's go ahead and install WordPress. Back here in the hosting or onboarding setup, the first thing you'll have to select is whether you're creating the website for yourself or someone else. In my case, I'm going to go with myself. Then I'll go to the bottom right and click on next. I'll be creating a website, so I'll select create a website and next. Again, you'll see a few different options here. For this video, we'll be using WordPress. So, I'll select the WordPress option. Then, we'll go to next. Again, then you'll need to confirm the login details for your WordPress admin account. By default, this will just be the information you used for your Hostinger account. I'm okay with leaving this as default. So, I'll go to the bottom right and click on next. From here, click on create blank site. And if you typed in your domain name earlier, you should see it pop up right here. I'll select my domain name here. And then go to the bottom right and click on next. And here you'll need to register your domain. Start by selecting your country and whether this is a personal domain or going to be used for a company or organization. In my case, this is just a personal domain. With these options selected, I'll click on next step. And here just confirm your contact details. And this should all be autofilled using the billing information from earlier. Go ahead and confirm your information here. Then go down and click on finish registration. It's going to register your domain. Then you may get a verification code sent to your phone number. I'll enter my code here and click on verify. And with that done, your domain name has now been registered. Next, you'll need to choose your data center. By default, this should be the closest one to your location, but if you have a specific target audience, you'll want to choose a data center closer to them. You can open up the drop down here and choose a different data center if you want to, but in my case, I'm just going to leave this as default. Go to the bottom right and click on next. And now WordPress is going to be installed. This can take a few minutes, so I'm going to fast forward to whenever it's complete. And once WordPress is done installing, you'll be brought to your Hostinger WordPress dashboard. The first thing you'll notice here is that your domain may need an email verification to be fully registered. If you see that notification on your WordPress dashboard, go ahead and check your email address that you use to sign up for Hostinger with and look for this email titled verify your email address to use your domain. Open up that email and it should look something like this. All you have to do is go down and click on verify email. I'll go ahead and click on confirm. And now your email is verified. So you can begin using your domain. And now if I switch back over to my hosting or WordPress dashboard, you'll see the domain now says active. So everything is good to go. WordPress is now installed and connected to our domain. So that completes step three. Next, we're going to move into step four where we'll install our theme and plugins and load in a template for the website. But before we do that, we need to quickly understand our WordPress dashboards. Whenever you sign up with Hostinger, you actually get two different WordPress dashboards. Right now we have the hosting or WordPress dashboard selected and you can tell that here on the lefth hand side. If you want to configure anything regarding your hosting or domain or your hosting plan, you can do that here. But if you want to access information regarding your actual WordPress website, go to the lefth hand side and click on dashboard. That's going to open up your primary WordPress dashboard here. And by default here, you're going to see a lot of different screen elements. But if you scroll down here, you'll see stuff like your site health status. You can create drafts for blog posts. And you'll have some other miscellaneous settings here. Whenever I create a new website, I like to scroll up to the top and open up the screen options. And from here, I'll just go ahead and deselect everything. And it's going to give us a nice clean starting point. And if you want to add back in any of these different screen elements, you can absolutely do so. In my case, I'm just going to leave all of these deselected and close the screen options. And now we have a nice clean WordPress dashboard. Next, let's go ahead and install our theme. Go to the lefth hand side here and find the appearance tab. From here, click into themes. And by default, you'll have the 2025 theme activated. But we're going to go ahead and switch to a different theme called Astra. Astra is one of the most beginnerfriendly themes, and it gives us access to a library of free templates that we'll use to customize our website later. It's also super beginnerfriendly, and it's perfect for almost any kind of WordPress website out there. To get access to that theme, let's go down and click on add theme. Then go to the top right, click [snorts] in and search for Astra. You'll see the Astra theme appear here. Go ahead and click on install. Once it's installed, click on activate. And now you have the Astra theme installed and activated on your WordPress website. Start by closing out of this banner here. And now you'll see that the current active theme is Astra. Next, we'll switch over to our plugins tab on the lefth hand side. By default, you're going to have a bunch of pre-installed plugins here. To make sure that the template plugin that we install later on in this video works properly, we're going to want to go ahead and deactivate all of these pre-installed plugins. And also, by doing this, it gives us a nice clean slate to start with. To deactivate all of the pre-installed plugins, let's go to the top and click on this check box here. Then click into bulk actions and click deactivate. With that done, click on apply. That's going to deactivate all of the plugins. And to remove them from this list, click on the check box again, click into bulk actions, and click on delete. Click on apply. Go to the top and click okay. That's going to delete all of those plugins. Now, let's go ahead and add in a new plugin. go to the left and click on add plugin. And this is going to open up all the plugins that are available. You can kind of think of these like apps for your phone. There are thousands of these plugins and they all have different purposes. So, if you're looking for any kind of feature on your website, I'd do some research and you'll probably find a plugin out there that can help you. In our case, we're looking for one specific plugin to help us build our website. Go to the top and click in. And from here, you'll type in starter templates. and you'll see it here. This is the plugin that's going to get us access to those free high-quality templates I told you about earlier. Go ahead and click on install now and activate. And then from here, you'll be brought into the starter templates on boarding. The first thing you'll do here is go to the top right and select your page builder. For this video, we'll be working with Elementor, but in some cases, you may not see this appear. If you're having this issue, I'll go ahead and show you how to fix it. Start by going to the bottom and clicking on exit to dashboard. Then go to the lefth hand side and open up your settings. From here, scroll all the way down to the bottom. And you'll find this setting here that says disable element or page builder templates in starter templates. In some cases, this may be turned on automatically. And if this option is selected, you'll want to go ahead and turn it off. So, make sure that this setting is not selected and click on save changes. Now with that done, Elementor should now appear. To get back to starter templates, go to plugins on the lefth hand side. And under starter templates, click on get started. And after that, you'll be brought back into the starter templates on boarding here. Once again, go to the top right and select the Elementor page builder. And that's going to open up the starter templates gallery. If you're looking for a specific type of template, you can search for it here at the top. And they also have some pre-made lists here. I'd recommend taking some time to go through these lists or just scrolling through the homepage here and finding a template that sticks out to you. If you see any template with the premium tag in the top right, that means you'll have to pay for it. But if it doesn't have the premium tag, it's completely free to use. I'm going to scroll back up to the top here. And for this video, I'll be going with the love nature template. I like how this looks, so I'll click on it. And on the right side, I can get a live look at what the template will look like. I'm able to interact with it and scroll through the website. And I think I really like how this looks, so I'll go ahead and proceed with this. And on the lefth hand side, you'll see some other settings here. You can upload your site logo if it's available. You can also change out the font style. And at the bottom, you can change the color palette. I think I'll go with this green option here. I'm happy with these settings, so I'll go down and click on continue. On this screen here, you'll be able to choose if you want any additional features. The only thing that we really need here is the page builder and the contact form. By default, you may have SEO and search visibility turned on. I don't think I'll need this, so I'm going to go ahead and deselect it. Once you've selected the features that you want for your website, go down and click on continue. From here, click on I understand. Let's go and go down and click on submit and build my website. And now starter templates is going to go ahead and build your website for you. Let's go ahead and give this a few moments to complete. And now your website has been built for you and it's ready to be accessed. To access your website, just go ahead and click on view your website. And then you'll be brought into your website here. You can scroll through just like before and see how everything looks. You can also access the pre-made pages here at the top. And now we've finished step four. The Astro theme is installed. Starter templates in Elementor are set up. and we've imported our template. That means it's time for step five, where we'll start customizing the website. To edit your website's content, go to the top and click on edit with Elementor. We'll close out of this popup here. Click on Got it. And you are now inside of the Elementor page builder. Now, before we start changing the content on this page, it really helps to first understand how the website and pages are structured. Over here on the right, you'll see the structure panel. And if you don't see this, you can open or close it at any time by pressing on this icon here at the top. Within your structure panel, you'll see different containers listed. You can think of these like big sections on your website. If I click on this arrow here to expand and open up this container, you'll see another container that's inside of it. These inner containers are like columns within that big section. So, I'll go ahead and open up this inner container here. And then you'll see the different elements that are inside of it. Here we have a heading, a second heading, a text editor, and a button. And if you look back at the page on the left, you can see those exact same elements. You have your first heading, your second heading, your text editor, and your button. Now, if we go back to the structure panel here, I can click on an element if I want to edit it. I can also click on this eyeball button here to disable it and click on it again to enable it. I can also rightclick on an element and go down and click on delete if I want to get rid of it. You can also reorder the elements on your page simply by dragging them and then moving them underneath or on top of a different element. I'll go ahead and move this heading back to the top. Okay, so now that we understand how the page and website are structured, let's start actually changing some of the content here. We'll first understand how to edit text. You can double click on text to edit it. We can also change it over here on the lefth hand side. I'm going to change my heading to say welcome to my website. Now, I don't think I need this second heading anymore. So, I'm going to rightclick on it, and I'll go down and delete this element. I'll do the same thing for the text editor here. Next, let's go ahead and update this button. The first thing I'll do is click on the button, and you'll see the settings for it appear here on the lefth hand side. If I open up the type settings, you can change it from default, info, success, warning, or danger. In most cases, you'll just use the default button type. So, I'll leave this as default. For the text, I'm going to change it from get started to read contact me. And under link, this is where the button is going to link to after a website visitor clicks on it. So, for example, here I can start typing in a page name. I'll start by deleting the hashtag here. And then I'll type in contact. You'll see my contact page appear here. I'll go ahead and select this. And so now after a website visitor clicks on my contact me button, it's going to bring them to my contact page. And now in your case, you want to make sure that this button has the correct call to action for your website. So for example, instead of contact me for you, it could say shop now. If you're creating a store, if this is your portfolio website, you could have this say check out my portfolio. And then you'll make sure it links to the correct page for your call to action. Okay. Okay, so now we've configured our website heading and our button. Next, let's learn how to change out images. Let's scroll down to our next container here, which contains a few different images. To change out an image, I'll start by clicking on the image here. And on the lefth hand side, you'll see the option to choose an image. Click choose image here. Now, I'll go ahead and drag and drop in my custom image from my computer. I'll drop it here. Once that file is uploaded, I'm going to make sure it's selected here. You'll also notice here your media library. This is going to have a bunch of different images in it already. And this is because these were pre-imported from your template. So, with my custom image selected, I'm going to go down to the bottom right and click on select. And now my custom image will be uploaded here. And now I can go ahead and do this exact same process for the rest of the images on my website. Now, what if you want to add in a brand new element? Let's scroll back up to the top of our page here. Then go to the top left and find the plus button here. Clicking on this will allow you to add in new containers, grids, and elements as well. So let's say, for example, I wanted to add that second heading back in. I could find the heading element here and simply drag it and drop it where I want to. You'll see this pink line appear. This is showing you where that element is going to end up whenever you drop it. So, I'll drop it in here underneath my first heading. And you'll see the heading appear underneath it. To undo that change, I'm going to press control Z or command Z on my keyboard. It's a quick way to quickly undo a change if you weren't happy with it. Now, let's go to the top of the page here and take a look at these different device icons. Right now, we have desktop view selected. If I want to, I could change to tablet view by clicking on the tablet button here in the middle. I can also change to mobile view. As you can see, all the changes that we've made so far to our website in desktop view have translated perfectly to mobile view. That's another great thing about using these templates. They are super optimized for every single device. And next to these device icons, you'll also see your page view. Right now, we're editing the homepage, but if you want to switch to another page, just click on the page here, and we can open up our about page, services page, or contact page. And you can also add in brand new pages here as well. To add in a new page, just click on this button here. Let's click on save and leave. And from here, you're able to begin building your brand new page from complete scratch. You can drag in layouts and elements just like before. But another really cool feature about starter templates from here, if you click on the starter templates icon, you're able to import pre-made pages from other templates. So for example here if I like the outdoor adventure template I can click on it to open it and then I can freely import any of the pages from this template. So for example if I wanted to create a services page I could take it directly from this new template. Now if you're only looking to add in a pre-made block then go to the top here and switch from pages to blocks. And here you'll see all of the pre-made blocks that are available. And in the top left, you can switch from all and you'll see all of the pre-made blocks that are available for different page types. So whether you're making a features page, a services page, or for example, an FAQ page, you can click on the one that you need. Click on the block that you like. I like this one here in the middle. Then go to the top and click on import block. And you'll see it appear here on your new page. Now, the next thing we'll need to do is change the page name. Right now, you can see at the top it just says Elementor page and then draft. To change your page name, go to the top and find this icon here. And that's going to open up your page settings here. The title will change this to say FAQ. Then we'll change the status from draft to published. And then whenever you're done editing your page, go to the top right and click on publish. Now, as you can see here, the page name has changed. It says FAQ and it's no longer a draft. Now, if I go ahead and move the structure panel out of the way, we can take a look at our main menu here at the top. It currently lists all of our pages that were imported from our template, but we need to add in our new FAQ page to this navigation menu. And I would also like to update our site's logo. And to do this, we're actually going to have to leave the Elementor page builder and open up the WordPress block editor. To get there, start by going to the top left and clicking on the Elementor logo. Click on exit to WordPress. Then go back to the top left and click on the WordPress logo. Then from here, go to the top and find your website here. Click on visit site. Then go to the top and click on the customize button. And now that's going to open up your WordPress theme settings. Let's start by learning how to update our main menu here. Start by going to the left and find menus. Click into it here. Click into main menu. And then you'll see your pages listed here. Right now we have home, about, services, and contact. And you'll see those same pages listed here in the top right. To add in our FAQ page that we created just a moment ago, click on add items. Find the page you want to add and then click on the plus icon. And if I click back into my website on the right, I'll see that new page has been added here in the top. You can also reorder your pages within your main menu as well. To do that, simply click and hold on the page that you want to move and you can drag it into a new position. I'll drag it here and drop it. And you'll see that it's now listed after my homepage. Once you're happy with your changes, go to the top and click on publish. And now those changes are going to be saved. Next, let's learn how to update our site's logo and take a look at our header settings. Start by going to the left here and clicking on the back button. And once again, then from here, go down and find header. Click into this here. And depending on what template you chose, you may have this notification here regarding a transparent header. If you see this, this is important, and we'll take a look at it in a moment. But for now, go down and find site title and logo. Let's click into it here. Click on change logo. go to the top and click upload files. And now I'm going to drag in my custom logo from my computer. I'll drop it in here. Go to the bottom right and click on select. And now you have the option to crop your image. Right now my logo is hard to see because it's a white logo loading on top of a white background. But just to be safe, I'm going to take the bottom here and give it a little bit of extra room. And I'll do the same for the top as well. And with that done, I'll go to the bottom right and click on crop image. Now you'll see my custom logo appear here on the top left. But right now, it is really small and hard to see. To fix this, let's go down and find the logo width slider. I'm going to set this from 60 to 110. Now, that looks a lot better here. Now, like I said a moment ago, if you have the transparent header notification, you'll have to click into that to fully update your logo. So click into customize transparent header and then you'll want to disable different transparent logo. So I'll go ahead and turn this off. And now with that done, my logo has been fully updated. And now if you want to customize the layout of your header, for example, right now I have my logo, then my main menu, and then this button here. You'll want to look at the bottom of the page here. These settings here at the bottom control the layout of your header. To move the position of an element, just drag it, and you can move it into a new position. I'll take my logo and move it back. And you can also remove different elements from your header as well. Like for example here, I have this button in the top right. I don't think I want this. So to remove it, I'm going to go to the bottom and find the button here. And then I'll click on the X. Now it's going to remove that element from my header. I'm happy with my changes to my header so far. So I'm going to go to the top and click on publish. Okay. Okay, so we've now learned how to adjust our website's logo and header along with our main menu. The next thing we want to do is adjust our website's footer and footer menu. If I go all the way down to the bottom of my website, I'll find my footer here. Within it, I have a menu and a couple different elements. To update this, let's go to the lefth hand side and click on the back button. And once again, go down and click into footer. And to customize this, it's very similar to your header. You have the same controls here at the bottom where you can delete and reorder your elements. Like for example here, if I don't want this logo to appear, I can just remove it by clicking on the X. And then the same thing for this copyright notice. Then as for our footer menu, we can adjust this by clicking into the menu here, clicking [snorts] on configure menu from here. Then I'm going to scroll down and find my footer menu. Right now it's just using my main menu just like my primary menu within my header. And in most cases you'll just set this to main menu. However, if you do want to create a new menu, you can go up to secondary menu here and click on create new menu. And if you'd like to, you can create a brand new menu here. But in my case, I think I'm just going to use the main menu for my footer as well. I'm happy with the changes I've made to my footer. So, I'm going to go to the top and click on publish. From here, let's click on the back button. Going forward, if you ever want to change your active theme or you want to change your theme settings, you can do all of that right here. For now, though, let's go to the top left and click on the X to exit the theme settings. Then, let's go back to the edit with Elementor button. From here, if you go to the top left and click on the Elementor icon and then site settings, you can change everything when it comes to the design of your website. From here, you can change your colors, your fonts, the way your text, buttons, images, and form fields appear. Then you also have some miscellaneous site settings. And with that done, that completes step five. Your website is fully customized and live. We've gone through all five steps. getting hosting, securing a domain, installing WordPress, setting up our theme and plugins, and tailoring the design to your content. And make sure you don't forget when you're signing up for hosting with Hostinger to use the first link in the video description to get the most affordable deal available. Thank you for watching this video. I really hope it helped you out and I'll see you in the next