WordPress Tutorial For Beginners 2017 (Step-by-Step Website Development)

WordPress Tutorial For Beginners 2017 (Step-by-Step Website Development)

In this WordPress tutorial for beginners, you will learn step-by-step how to make a website from scratch in 2017.

Download all project resources used to build this WordPress website (ZIP File):

This website isn’t just a blog, but you will create a WordPress website that is perfect for any business and more professional than 90% of competitors.

I’m going to show you exactly how, and we’re going to use a free WordPress theme.

All you pay are domain registration at -20/year and website hosting, starting under /month.

HostGator is my preferred web host, and you can signup from the link below:

(Use code “1WPHOSTING” to get started for {videoDescription}.01)

We are going to customize this design with HTML & CSS, and I’ll make a logo in Photoshop.

The end result will be a modern business website created with WordPress.

Project goals:

– Build a coffee shop website (NOT a real business, made up for the tutorial)

– Create standard pages – About, Gallery, Contact

– You’ll see how to create a WordPress website that is unique

– I recommend using premium themes for paid clients, but you could use this method for small business websites with WordPress

Step #1 – Install WordPress

Using QuickInstall within cPanel, we install WordPress in minutes and begin working on the web design.

Step #2 – Install Theme

For this WordPress tutorial, GeneratePress is our chosen theme. This is a highly rated minimalist theme. That’s what I like to start with because you don’t have to override many CSS settings or other design decisions.

Different themes have custom theme options, and sometimes you are limited or customize differently each time.

The more you understand how the WordPress system works (themes and plugins), it becomes easier to create websites and manage several websites.

Step #3 – Create Child Theme

When learning how to make a WordPress website, the first thing you need to do is create a child theme for your custom edits. In our case, we’re using GeneratePress as the “parent” theme, but because we are going to customize the web design to a coffee shop business, we must create a GeneratePress child theme so we don’t lose our custom CSS if the parent theme is updated.

I explain process of how to create a child theme in more detail within this YouTube tutorial:

Step #4 – Pick Color Scheme

For this website, we are going to using an earthy color scheme. I don’t spend much time creating color palettes, instead I use resources that have ready-made color schemes.

You can visit my “Resources” page to see the tools that I use when building a website with WordPress:

Step #5 – Create Logo

I make a logo in Photoshop in less than 5 minutes. If you know a bit of web design technique through experience, making your WordPress website look great because easy. Don’t be fooled, I’m not skilled with graphic design, but I do know my way around Photoshop.

Step #6 – Update Header

We add our logo to the WordPress header using the “Appearance – Customize” section, and make our CSS color updates.

Step #7 – Update Permalinks

This is a setting that determines the URL structure of the posts/pages on your website. I like to set this to name only so that your URL structure is short and easier to share which helps SEO (Search Engine Optimization).

Step #8 – Create Pages

We create all of the pages that we want to include on the WordPress website.

Step #9 – Set Front Page + Blog

We set our home page and link the WordPress posts to our Events page, which allows us to show recent events using the blog.

Step #10 – Create Main Navigation Menu

With the pages in place and the homepage set, it’s times to create our main navigation menu that will be used in the header area on every page of the site.

Step #11 – Build Sidebar

The sidebar for our coffee business website will include social media icons and hours.

Step #12 – Build Pages

We go through each page and add content, which includes the use of WordPress plugins. They are specifically used to display photos as a slideshow and for the lightbox effect for the full-sized image when thumbnails are clicked.

Step #13 – Edit Footer Area

We focus on the bottom portion of the website which gives us a quick look at how to edit the WordPress PHP theme files.

Step #14 – Check for Responsiveness

Thankfully the WordPress theme that we have selected is mobile responsive, meaning that our website doesn’t need much customizing to reach a great look on phone or tablet devices.

That’s it!

Hope you learned a few things from my step-by-step WordPress tutorial for beginners. Now get out there in 2017 and start building websites to further your website development and WordPress skills!

Get started with Hostgator for 1-click WordPress installation:


13 Replies to “WordPress Tutorial For Beginners 2017 (Step-by-Step Website Development)”

  1. really useful stuff

    I’ve just started freelancing again properly after a 2 yr break, love or hate wordpress it sure is a useful cms for setting customers up.

    I’m going through a few different tutorials / building a theme from scratch / customizing genesis / woocommerce, (in and around 45 hr dayjob + 20 hrs freelancing +…. damn its a sacrifice but I love it). Anyway – as always a big thanks to ppl like you who put this free content out there…

  2. OK next challenge: make an articles-site that looks like scotch.io 🙂

    That beautiful menu gives me css-nightmares 😛

  3. Its good video. Thanks for the tips to find the easy way to customize the css style. Thanks for the free good video for a beginner. ?

  4. Kudos to Ray, this tutorial – in my opinion – is one of the very best out there and that includes many from some of the pay sites. From this tutorial I’m already learning a lot more about not only WordPress but also CSS and Google Chrome Inspector and how this combination is such a vital asset in the web developer tool kit.

    I came to this tutorial by first using Ray’s ‘How to Create a Child Theme for WordPress Twenty Sixteen Theme’ it’s super easy, well explained and highly effective and it can be found at https://www.youtube.com/watch?v=LRw2BmRPNH0

    Over the years, since the late 1990’s, I’ve cobbled together a gaggle of websites and I’m grateful to Ray for helping me update my skills – for free.

    Thanks Ray

  5. can you remake the video and these time using one of modern looking responsive free wordpress theme such as Zerif please? thank you

  6. My other request is if you can create a video tutorial from scratch like these one where it dedicate to creating a website that sell 1 – 5 product only and it will redirect you to platform like Amazon. I am desperately need to know how to do these as i want to save money and dont want to use expensive theme.

    My intention is to not only for Amazon brand registry but also to slowly collect people email like using get response or mail chimp. Please please create that video because i had yet see many people create that kind of website and i am pretty sure you will get alot of search on youtube which also grow your subscriber into your channel.

  7. Hi there Ray, I am completely new to website creation but I am following along step by step (except that I am using WordPress in DesktopServer) and when refreshing the theme page after adding the child theme it tells me that the child theme has been installed but can’t be used because the style sheet is missing. I have watched this portion of the video and tried this 4-5 times and also just watched this portion of your child themes video from 2016 but still get the same error. What am I doing wrong/missing here?
    After getting the error a few times, I did notice in the functions.php section of the code we are supposed to copy from the codex that it references “twentyfifteen-style” so I searched out the corresponding section of the generatepress code & used “generate-style”  to see if that would correct the problem but it did not.

Comments are closed.