Disclosure: Any hostgator, godaddy and themify link you see on this page is an affiliate link. If you use the link, then hostgator provides a commission to NYC TECH CLUB.
This tutorial is going to be awesome! Let’s just get that out of the way first.
We will show you how to do everything on your own so you don’t have to hire anyone!
You will have full control of your wordpress website and can make it a parallax website like our demo website, if you want. But if you want something else, you will be able to build that too!
Now let’s get the important things out of the way.
Requirements:
- A laptop
- Some free time to learn watch this video
- A domain (web address) and hosting (to store your content and run your website). We will go to Hostgator for both of these.
Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.
Step 1: Register Domain and Hosting
The first thing we need to do to make our wordpress website for free is register a domain and hosting. These are the only things you have to pay for in order to have a professional wordpress website.
Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.
Click on this link to go to Hostgator to register a domain and hosting.
If you have a domain and hosting and wordpress already installed, you can skip this step. Otherwise, you need to make sure you install wordpress to follow this video tutorial.
We’ll be getting our domain and hosting from Hostgator. One of my go to spots I recommend to my audience.
Use the coupon code NYCTECH30 to save ~60% off at Hostgator
We need a domain and we need hosting. This are both mandatory in order to run a website.
Your domain is your web address. For example https://www.nyctechclub.com is my web domain.
Hosting allows you to store all of your content and run your site. It’s what makes it load. Think of it as the engine to your website.
We’re going to be getting both our domain and our hosting from Hostgator.
Hostgator is a great hosting company for entrepreneurs and businesses. They’re fast and reliable
- Cheap with great customer service
- I’ve used them for almost all of my websites in the past
- They’re one of the largest hosting providers out there
So click on any of the hostgator links and let’s go and get our domain and hosting.
There are two plans that we’ll focus on: the baby plan and the hatchling plan.
The baby plan is if you just need to make one website and one website only
The hatchling plan is if you plan to have more than one website and host them on this same account
Don’t forget to use one of the highest hostgator coupon codes: NYCTECH30 for about 60% off.
Note that the Hostgator link is an affiliate link. So hostgator does provide me with a commission (no cost to you) if you use my link. Thanks in advance for supporting NYC TECH CLUB!
Step 2: Install WordPress
Now that we have our hosting and our domain from Hostgator, we need to install WordPress so we can start creating our blog website.
- Log in to your Cpanel
- Click on Quik Install – Install WordPress
- Fill out the information
- Click Install
- Save your WP-ADMIN URL and your username and password
- Log into your WordPress website
Step 3: Install Themify Ultra Theme
The theme that we are going to use is the Parallax Theme by Themify.
This is a premium theme that we are able to provide to you for free. Click on this link to download the zip file for the Parallax Theme by Themify.
If you would like to upgrade your theme to the premium version for unlimited updates …you can go to the Themify Website here (affiliate link).
Once you download the Parallax theme by Themify, we need to go to our WordPress Dashboard and install the theme so we can use.
Hover over Appearance > Click on Themes > click on Add New
Install and active that theme
- You will be asked whether you want to install the demo content. I do not recommend this because you will end up with a lot of pages and posts and images that you do not want or need.
We will go through all the settings in the next step to create the demo website lay out 🙂
Step 4: Install Plugins
We need to install some plugins to make our parallax website run the way we want it to.
At the top of your dashboard you should see a notification that says install the following plugins. Go ahead and click on install and activate for all of them.
And let’s also install the Really Simple SSL plugin for our ssl certificate.
Once its installed, we want to activate the SSL.
And then go to our settings and click on general.
This is where you can change the title and subtitle of your website. You also want to make sure website has https
And we can add the www. for our site and web address. Make you don’t add anything else other than www.
Click save when you’re done.
Step 5: Make Parallax Homepage
We need to create a homepage before we can really go and customize the settings for our wordpress parallax website.
- So click on New on the top bar > page
- Name it Home
- Click publish
- We will customize this page later
- Now let’s create another page and call it blog if you want a blog page
After you make your parallax wordpress website pages for free you need to go to the settings and set these two pages
- Hover over settings > click on reading > set the front page to home and the blog page to blog
Since we are currently in our settings, we might as well cover the permalink.
- Let’s go back to our settings and click on permalinks
- Choose the post option
- Click save
Step 6: Themify Settings
We are going to through all the themify settings that we use for the demo website. You can always pause the video and go through the settings yourself for your wordpress website you are learning how to make.
General Tab
- No changes
Default Layouts
- Default Archive Post Layout
- Archive Sidebar Option – No sidebar
- Post layout – List Post
- Display Content – Full Content
- More Text – More
- Order by – Date
- Order – Descending
- Featured Media Position – Above Post Title
Default Single Post Layout
- Post Sidebar Option – Sidebar Right
- Featured Media Position – Above Post Title
- Image size x 0 (height)
Default Page Layout
- Image Size x 0 (height)
Custom Post Types
- No changes
Team Layouts – No changes
Portfolio Settings
- Default Archive Portfolio Layout
- Portfolio Sidebar Option – None
- Portfolio Layout – List Post
- Display Content – Nonee
- Hide Portfolio Meta – Yes
- Hide Portfolio Date – Yes
Default Single Portfolio Layout
- Portfolio Sidebar Option – None
- Hide Portfolio Meta – Yes
Portfolio Permalink
- Portfolio Base Slug – project
Theme Settings
- WP Gallery Lightbox – Magnify
- Script Minification – Disable
Theme Appearance
Header Design – option 1 (menu bar position bottom)
Footer Design – option 1 (exclude menu navigation)
Exclude Menu Navigation
Footer widgets – 3 columns
Footer Widget Position – After footer text
Mobile Menu Style – Slide Menu
Page Navigation – numbered
Gallery Slider Options – Auto Pay 4 seconds, Slide effect, Fast
Pageination Option – Infinite Scroll
Image Filter – None, None, Featured Images Only
Footer Text – Whatever you want 🙂 or hide the footer text by checking the boxes
Image Script – base image size (large)
Social Links – Add your social media and icons and colors
Integration API – if you want to add a twitter feed and google map you need to go here and click to create api keys and add them
Themify Builder – enable
- Flat scrolling – disable on mobile and tablet
No other changes. Everything is default or blank.
Now that we have our theme settings. We can start making our wordpress website! But first, we need some demo content for our wordpress website. But before that…wordpress themify skins for our parallax website!
Parallax WordPress Skins (Themify)
This is a very themify builder thing…choosing a skin..which is like a jacket or default color setting for our website.
We’re going to choose a skin to make our lives easier.
I decided to go with Indigo, but you can go with no skin if you want.
Make sure you click save when you’re all done!
Step 7: Download Demo Content
Now let’s download the demo content for our website so we have all the content we need. You can also use your own images and stuff but I wanted to have a logo for you to use if you want to add it to your website.
- Click here to download the demo content
- To upload the demo content or images to your wordpress website go to your wordpress dashboard
- Hover over media > click add new
- Add all your images and content here and you can use them
Step 8: Customize Settings
In the last section, we chose the settings for our theme. Now we can customize the settings for our website.
There’s really not too much to do here since we like using the default settings but we’ll go through what we do change.
Make sure you’re on the advance tab
Body
- Body font – this is where you can go to select your font style and color (we leave it as the default)
- Body link – if you have a URL you can select the color here unless you want to use the default color
- Body link hover – there is a default color but you can change it here
Layout Containers – no changes
Headings – no changes but you can change the headings sizes and colors here
Forms – no changes
Header – here you can change the header background and link colors for the header
Sticky Header – we can add our sticky header logo here
Site Logo and Tagline – Add your logo here and the tagline
Main Navigation – edit your link colors here
Mobile Menu – edit your mobile links here
Post – edit your post titles and links here
Page Title – edit your page titles and links here
Module Title – no change
Sidebar – edit your side bar font, link colors and widget titles if you want
Footer – edit footer formatting here
CSS – add custom css here…if we have any, it will be right below this..copy and paste it in
Step 9: Customize Homepage
Now let’s go to our homepage and start learning how to create and make our parallax wordpress website!