Module 2 of my very comprehensive guide: How to Build a WordPress Website in 2 days.
Lesson 6 – Where to Find your Perfect WordPress Genesis Theme
Using a Genesis theme will make your life so much easier as far as widgets, customization, web design basics and more. It automatically uses child themes. What are those?
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme, in this case Genesis. Child themes are the recommended way of modifying an existing theme. (source: wordpress.org).
An investment of $100.00 or $130.00, which includes Genesis framework + theme, is a no-brainer in my books when you work so hard to get traffic and eventually make money with your site.
Why you should NOT USE a free theme
- it won’t look professional
- it could include a link at the bottom that has nothing to do with your site
- there is no support
- it won’t have all the features you need for a well balanced site
- it won’t have a Wow! factor, it will look basic
To use a Genesis theme, you need to buy the Genesis framework, a one time purchase fee, at StudioPress.com. If you buy just the framework, $59.95 as of Dec. 31, 2016), you can use the ‘sample’ child theme for free, which is a very basic blog theme. You can change the colors, but it doesn’t have widgets for the home page.
But take a look at all the themes they offer and you can buy a combo of any theme + framework for $99.95 or $129.95 for the newest ones. And if you decide at a later date that you want to change theme, you go back to StudioPress.com and you only need to buy a theme (not the framework) at a discount for returning customers, $56. (instead of $74.95) on Jan. 2017.
If you want to grow your business and make money with your WordPress website, this investment of $130 will benefit you in the long run because your site will look professional and will run on a well coded framework. This is the foundation on which your business is built, so I say, Make it Work.
Lesson 7 – How to Install Genesis Framework & Genesis Theme
Once you have chosen your theme, go ahead and buy the combo, theme + framework.
Next, download them to your computer from your download in your StudioPress account. **Make sure you leave both in .zip file format**
Install Genesis first
Back to your WordPress dashboard, go to Appearance – > theme and you will see 3 themes already installed and the first one, Twenty Seventeen is active. These are the default themes that come with WordPress. You don’t need 3, so we will delete the oldest one, twenty fifteen.
With your mouse over Twenty Fifteen, click on Theme details, hit the red delete in the bottom right. It will ask you if you are you sure you want to delete, say OK.
Next click on Add New at the top left, ignore all the themes you see and click on Upload theme, Choose file and find Genesis in zip format where you downloaded it on your computer, and then click open.
You then get back on the Add New page and now you will see a button install now, so go ahead and hit that button. You will get to this page below. *DO NOT TOUCH ANYTHING – DO NOT ACTIVATE OR LIVE PREVIEW*
In the sidebar, go to themes again under Appearance – you will see that Genesis is there beside the first default theme. *DO NOT DO ANYTHING WITH IT.*
Install Genesis Theme
Now let’s go through the same steps to install the theme you bought. Add New -> Upload theme and Choose file and find the zip file of the theme on your computer and open and Install Now.
It should then tell you: Theme installed successfully. Then under you will see 3 links, Live Preview – Activate – Return to Themes Page
Go ahead and click on the Activate link. Do not customize right away.
In your sidebar, under Genesis, click on Theme Settings.
You can leave pretty much everything as is except make these changes as shown in the below image:
All done. You can now look at your site but all you will see is a post or more than one if you wrote others. So your site will not look like the theme you chose yet because we have some more settings to do.
Lesson 8 – How to Install Essential WordPress Plugins
Your very important next step is to install essential WordPress plugins. I’ve only included free ones.
What is a plugin?
A plugin is like an app on your cell phone, it extends WordPress functions. It adds features to your blog without knowing a single line of code.
There are literally thousands of plugins for all kinds of uses. When choosing one, be careful to select those that are compatible with your version of WordPress (which should be updated to the latest version) and it will tell you in the list which ones are or are not.
First we need to get rid of 2 plugins that are already in your list of plugins, they were installed by default with WordPress.
Go to Plugins in your sidebar -> Installed Plugins
– Akismet – we won’t use this one for spam because you have to get the paid version if you make money with your blog and of course that is the ultimate goal.
– Hello Dolly – it serves no purpose and takes valuable space
So click the deactivate link for each, then add a checkmark in the square beside each by just clicking on it. Now both of them should have a checkmark.
Find the top button with words Bulk Actions, using the arrow beside it, choose delete and then Apply. See image below
A little window will ask you if you are sure you want to delete and say OK. Poof! they’re gone…
How to install a plugin
l. In your dashboard left sidebar, go to Plugins ->Add New. All those are free. There are also other more specific plugins that you can get outside of the WordPress repository which you need to buy.
2. In the search box, top right, type the name of a plugin or a keyword to find a list.
3. When you found one you want, click on the Install Now button in this plugin section.
4. Once it is done, the button changes to Activate, so just go ahead and click on it.
5. Voila, one plugin installed.
6. Go through the same steps for each of the plugins listed below.
*Get a Dropbox if you don’t already have one*
You will need it when installing the backup plugin below, as we will set it up to automatically send regular backups of your blog to your dropbox.
Please go HERE to sign up for one. A Dropbox Basic account is free and includes 2 GB of space.
If you already have one, great. Let’s get on with the show!
name: UpdraftPlus WordPress Backup Plugin
Once installed, you will see updraft plus backups under settings in your sidebar. Click on that link and you will get to the plugin dashboard. Never mind all the stuff at the top. Just go to the Settings tab, change the schedule to Daily for files and database and keep 2 for each. Then click on Dropbox. See image below:
Go to the bottom and Save Changes
A window appears asking you to follow a link to authorize access to Dropbox. Go ahead and do that. You’ll get to your dropbox login. then a message will say: UpdraftPlus would like access to its own folder…click on the Allow button. A screen will ask you to press the Complete Setup button. So do that. You are now back to the UpdraftPlus plugin dashboard on your WordPress. And a backup will be created.
DO NOT LEAVE that page until the backup is done and successful.
name: Yoast SEO
SEO (Search Engine Optimization) is essential to set up if you want to be found by Google and other search engines.
Once installed, you will have a new link in the sidebar, SEO (probably with number one beside it) – Go to SEO-dashboard. The problem it will have is that you are blocking Search Engines, which we will unblock when we are done with all the stuff. So let’s ignore it for now.
Under notifications, you can configure the plugin – click on the link and follow the set up.
Sign up for their newsletter if you want.
next: Environment, choose Production
next: Site type, I chose small business site, but if yours is not, choose blog
next: company or person, I chose person
next: Social profiles, add whichever ones you have currently set up. You can add any at a later date
next: Post type visibility – posts and pages visible and media hidden
next: multiple authors, no for me, choose whatever applies to your site
next: google search console, leave it because we will set up yours in the last module
next: title settings, pick whichever one you want. This will show on the tab of your page, post at the top of your browser.
Success! page, close to get back to your dashboard.
Go to features and under advanced settings pages, press Enabled.
For more info on SEO, you can go to the Help center at the top under the tabs or on their site for video training.
name: Formidable Forms – Drag and drop responsive WordPress form builder. Easy to use. You will use it to set up your contact form.
name: Cerber Security & Limit Login Attempts
It protects your site against brute force attacks. Restrict logins by IP address. Also limits login attempts.
**As soon as this plugin is activated, you will probably receive many emails from it notifying you that there are a number of lockouts increasing and its because bots are trying to login. Don’t worry about it. Don’t ask me how they know, they just do! 🙂 **
You can find the settings for this plugin under Settings in the WordPress dashboard sidebar.
Main Settings: I decided to try something new the author of the plugin is suggesting to stop bots and hackers. I checked the Disable automatic redirecting to the login page when /wp-admin/ is requested. Then I set up a Custom login URL, in the space, name your new login page, one word is fine but can’t be the same as any existing pages or posts. Then right under that, check the Block direct access to wp-login.php….
MAKE SURE you write your new login url somewhere and bookmark it. SAVE
Access Lists: White IP list is the IP addresses that will never be locked out. Yours is automatically added by the plugin. If you want to add an IP to the black list, this is where you would do it.
Activity: you see who tried to login
Lockouts: you will see all the IP’s that tried to login
A powerful anti-spam plugin that will block spambots without the need for captcha images. It eliminates spam-bots on comments, signup pages as well as login and password reset pages. You will find the settings in your sidebar.
name: Comet Cache
You need a cache plugin to make your site load faster. This one has nice reviews and is easy to set up and is free. You will find the link in the sidebar after you have installed and activated it.
Settings tab: leave as is
Security tab: I checked them all in the top section WPBruiser Brute Force settings
WordPress tab: checked them all in WordPress standard forms settings and everything unchecked in the Tweaking WordPress section
Contact forms-Membership-others: nothing checked
Notification tab: all checked and my email is automatically there
Extensions: no need for them
Reports: nothing yet
When you get to the settings page, see the yellow button yes enable comet cache, select it. Then go all the way to the bottom and click on the big green button to save all changes.
Now to see if it is working, log out of your site, go to the home page of your site, right click anywhere and find View Source. Now go all the way to the bottom of the code and you should see notes mentioning Comet Cache, and a line saying Comet Cache is Fully Functional.
On my first try, there was a note saying Comet cache was not functioning because I was still logged in (even though I had logged out) so I had to go through the process of clearing my browser’s cookies. And now all is good.
When I tried to login again, it said cookies were blocked, so I had to reset them in my browser and then I could login. These drive me nuts!
Don’t know what cookies are…read on.
What are those cookies??
Here is an explanation from All About Cookies,
“cookies are created when a user’s loads a particular website. The website sends information to the browser which then creates a text file. Every time the user goes back to the same website, the browser retrieves and sends this file to the website’s server. Computer Cookies are created not just by the website the user is browsing but also by other websites that run ads, widgets, or other elements on the page being loaded. These cookies regulate how the ads appear or how the widgets and other elements function on the page.”
You can find out how to clear your browser’s cookie by googling: how to clear Chrome cookies, or whichever browser you are using.
name: Simple Social Icons (the one by Nathan Rice)- for followers
You can easily change the colors, background and size. We will use these in widgets once we get to that step later on.
name: GetSite Control Widget – for sharing
Adds sharing buttons on the side and the bottom of your blog. You need to set up an account and then you create your widgets online and they will show up where you want. You can check your stats online in your account. The free one is for one site only.
name: Cresta Social Share Counter – for sharing
It’s free and very easy to set up. Have the option of floating on the side of the browser. Can add custom css and can position the buttons left, right centre. Has an ad to upgrade to pro.
name: WPUpper Share buttons – for sharing
Again it’s free and easy to set up. Has the option of floating on the side of browser. Can add custom css, like centering the icons. no ads to upgrade to pro. I decided to go with this one for this site.
name: accesspress social share – for sharing
Free and easy to set up with 6 different looks for the icons. Only option is below content, above content or both below and above. For more options you need to pay for pro. In free version, no customization like to centre it.
We now have all the essential plugins: backup, cache, protection, anti-spam, SEO, contact form, social media icons for following and sharing.
But wait! there’s one more you’ll need:
Genesis Custom Footer plugin because you don’t want to keep the credits in the footer the way it is. You will want to remove the 4 default links as shown on the image below.
So go ahead and install and activate it (you’re a real pro now). Once activated, you go to the sidebar section Genesis -> theme settings and a new section now shows up right under the Information block, called Genesis Custom Footer
Under the space to add the custom footer text, it shows the default text. We only need the copyright code.
So highlight just that text: Copyright © 2018 and paste it in the empty space like shown below.
If you don’t want to add anything else, that’s all you need. If you want to add some text, just write it. If you want to add a link, just add the link code
Scroll all the way to the bottom and Save changes.
You will definitely add more plugins at some point for specific tasks, but for now, this will do.
Lesson 8 – How to Use WordPress Customizer
Let’s now take a look on how to use the WordPress Customizer, so under Appearance in the sidebar, click on Customize.
You will then see a sidebar on the left and your site on the right.
At the top of the sidebar, you’ll find:
Domain you are customizing
The name of your active theme, leave as is.
- Site Title should already be there from the WordPress installation
- Tagline, should be there also from the WordPress installation
- Site Icon: this is for the favicon, the little image that shows up beside your domain in a browser tab (see screenshot below)
You will need to create a square image 512 x512 pixels and add on it whatever icon/letter you want. Remember that it will be shrunk a lot, so use a simple icon and one letter. Use Canva to create it. Save it to your computer and use the Select image button (in the site icon section) to add it. **You can always do that later once you have finished all the steps in this guide.**
Use the < to get back to the rest of the list in the customizer.
There might be different sections here depending on your theme. In mine, there are sections to add background images to some of my Front page sections.
Colors: That is a deceiving section because you would expect to be able to change many colors, but it’s just for the links and the buttons. You can go ahead and do it.
Header image: is where your logo image will go. The customizer will give you the size your image should be, according to your theme’s layout.
If you don’t add any images, a text logo is set up automatically by WordPress, and you can change the font for it using CSS or you can create an image with your blog’s name in any font you want, using Canva or buy a pre-made or custom logo on Etsy.com.
If you want your header image to be bigger than what the theme calls for, you’ll need to have some codes changed in the functions.php and if you have no idea how to do this, contact me with your request.
Menus: You can create your menus here or under appearance -> menus
My theme has 2 menus locations, a header menu and a footer menu. For now I will only use the header menu. Click on the Add a menu button and give it a name, mine will be Main menu as it will be the one at the top. Click on create menu then Add items and from there you can choose which pages or posts or categories or custom links will be in your menu. I only use pages and categories in my menu.
For now, only the home and sample page are showing to be added. When you create other pages, you will be able to see them here to add to your menu.
So click on the + sign beside each page you want to show in your menu.
Menu options, leave it uncheck.
Widgets: Click on the widget area where you want to add something, + Add a widget and choose from the list of widgets by clicking on it.
*NOTE: You can set up the widgets here and/or you can also go to Appearance -> Widgets in your sidebar, as I’m showing you in the next module. Use whichever method you feel more comfortable with.
Static Front page: Leave as ‘your latest post’
Site Layout: Leave as default, content primary sidebar
Breadcrumbs: To show visitors where they are on your site, so it would show something like: home ->Web Design ->page you are on – they will show at the top of the page under the header
Comments & trackbacks, Content Archives were already set up under Genesis settings.
DON’T FORGET TO HIT THE SAVE & PUBLISH BUTTON AT THE TOP then click on the x – top left to get back to your dashboard.