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): http://websiteprofitcourse.com/how-to-make-a-website-with-wordpress/
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 $10-20/year and website hosting, starting under $10/month.
HostGator is my preferred web host, and you can signup from the link below:
http://websiteprofitcourse.com/hostgator
(Use code “1WPHOSTING” to get started for $0.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:
http://websiteprofitcourse.com/hostgator
