1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 5.00 out of 5)

CMS Additions Affiliates Plugin’s Modules Styles

CMS Additions Affiliates *

This is the fifth of 8 lessons in the web development strategy course. In the previous lesson the students were given an assignment to write an article on their website that was indexed in at least one search engine that showed up on page 1. This was open to image search as well. I also participated in the exercise with the key work phrase “Writing Deep Content That Is Indexed”. This lesson will concentrate on adding additions to the CMS and what to look for when adding modules and plugins to a websites CMS. The issue that many webmasters face is the fact that not all add in’s to a CMS are safe. There are many plugins and modules out there on the internet that will harm a website. These include java injections, viruses and adware. Sometimes when we want a certain feature on our website and we cannot find a trusted module or plugin then we must have custom work done. This lesson will cover a little bit about CSS and how to customize a CMS. We will also cover social media integration and the importance of using it in our websites. Lastly we will cover affiliate programs and how to make extra income from those resources.

Keywords: CMS additions, modules, custom work, social media, affiliate marketing

INTRODUCTION *

“I may find something that looks interesting and then go on to alter the recipe by adding spices, things of my own. I also look for time-saving recipes, dishes that can be prepared ahead and stored.”

-Paul Lynde

Subscribe To My YouTube Channel:

It is inevitable that you will have to make additions to your website or CMS. As technology and interest change, so too will the needs of your website. There is a risk involved with these changes and you should be aware of these risks. In the last lesson we learned how to back up a website. You should perform this task before making any additions to your website or CMS. Installations of plugin’s or modules are made to be easy however, if you need to uninstall them that could be a critical factor. If we think of it like adding to a recipe dish once we add it we cannot take it back. However if we have our websites backed up then an addition like a plugin or module destroys our website we have the option to restore it whole. In this lesson we will peer into plugins and modules more closely and see exactly the damage they can create. Social media is on the rise, in this lesson we will learn how to install sharing features and how to utilize them. Lastly we will cover affiliate marketing and how to use this creatively to make extra income off of our website content.

CMS Additions *

So let’s discuss what CMS additions are and how they work. Picture in your mind a house. There is a foundation, and then a frame built upon that foundation. Now in your mind you can picture that this house has all the basic wiring, insulation, flat coats of white paint and so on. Basically it has great potential but it is nowhere your home as you see it as of yet. There is no furniture, outside lighting or any of the extra things that you would see in a completed home. This would be your CMS for your website. It has the entire framework to be a great website but there needs to be more. The first steps as we have discussed, is for the theme to be in place to give it a look and feel of how we want to present our business. The theme would be our first add on to our CMS. CMS additions come in the form of modules and plugins depending on the CMS terminologies. WordPress calls their CMS additions “Plugins” while ZenCart and Open Cart call them “Modules” but there are differences in these 2 types of software and how they are installed. So let’s talk about them a little bit and see how they are installed and function. This will help us to see the differences as well.

Plugins *

“Plugins” is a term that is used often by the WordPress CMS users. It is an addition to your current CMS. Plugins can have access to every part of your CMS including the Dashboard or administration panel. It is very important that you back up your website before installing a Plugin. You will recall that in the first lesson we talked about finding a CMS that can be backed up easily and in the last lesson we learned how to do this. Here is one of the major reasons why. When you install a plugin you are left at the mercy of the author, or programmer of the plugin. Most people don’t even know anything about the programmer of the plugins in their site. It could be a hacker from a different country trying to access millions of emails. They can make a plugin that appears useful and harmless but then, reports back to them all the emails of all your users in your database revealing private and confidential information. Or even worse yet, it can hack your website leaving it useless to you. Even though installing a plugin is a risk there are ways you can protect yourself and your subscribers. Below you will find the steps how to install a plugin in the WordPress CMS.

  1. Navigate to the dashboard section and scroll down to where it says Plugin’s and click “Add New”
    CMS Additions Affiliates
  2. Next you will see a screen like below. If you notice the links that I circled in red you can see that you have different options for installing a plugin.
    how to install a plugin wordpress CMS
    1. Search is if you want to search for a plugin in the WordPress bank of plugins. These are free plugins and they come at a higher risk.
    2. Upload is if you want to upload a zip file of a plugin. This is handy when there is a custom plugin that you purchased.
    3. Featured is the plugins that WordPress is featuring
    4. Popular is what most people download from WordPress and install on their CMS
    5. Newest are plugins that were just added to the WordPress bank of plugins.
    6. Favorites are the plugins that are favorited the most.
  3. Really the only difference are the methods of installation. One you upload as a zip file and activate it and the other you download the file from the WordPress bank and activate it.
  4. After you have downloaded the plugin, remember that it is nothing more than a file, or group of files on your server. In order for it to become active you must click “Activate”. how to install a plugin wordpress CMS
  5. When you click activate then all the functions that are installed in the plugin are now active on your website.

This process can literally be done in a matter of seconds. That is the reason why it’s so handy but yet so dangerous to your CMS. It is a good idea to read the reviews and support forums before installing a plugin as well. You can read more about the plugin before you install it by visiting the plugin site. If there is little support or not so good explanations on how the plugin works, be cautious about installing it, think preventative measures and the worst case scenarios before installing a plugin. Reading what other people have to say about it can save you loads of aggravation!
how to install a plugin wordpress CMS

Sometimes when you go to visit the site you don’t get enough non biased feedback about the plugin. That is where you can go to the WordPress bank of plugins and read the non-biased reviews.

Go to http://wordpress.org/plugins and search for the plugin that you are wanting more information for. Enter the name of the plugin and click “Search Plugins”

how to install a plugin wordpress CMS

Here you can get a lot of information for a plugin. You can read the description, support, reviews and more. I believe the support section is the most important sign that a plugin is genuine. Here we can read about the troubles that other people are having and what you can expect when you install it. I can also get information on how the plugin works with the latest updates from WordPress core files. It is also good to visit this area for your current plugins to see if they have been tested with the latest updates from WordPress.

how to install a plugin wordpress CMS

If you bought a plugin from a third party then most likely you will not have access to the information from WordPress. You would only be able to visit the site for support information. The reason for this is because the plugin that you download from a 3rd party is not free or has not been submitted to the WordPress bank of plugins.

Plugins are great but they should be used with great caution. There have been many people that are victims of plugins that had malicious intentions. Remember a plugin can access your files, your database, themes and core files on your WordPress CMS. Plugins can slow down your site as well if you have too many of them and eat up your CPU and bandwidth.

Modules *

Modules are a lot like plugins. However, their installation is a little more technical and may require code editing. Most systems like ZenCart or Open cart will require you to use an FTP or file transfer protocol program to upload the files to the server. Ironically you can also upload plugin files to WordPress using this same method. Below I will show you how to upload and download files to your server. Keep in mind that you must upload to the right directory or folder. If you fail to upload to the right directory or folder then your entire website may be compromised. You also want to check and be sure that the module is programmed to work with your correct version of the software whatever it may be.

Download FileZilla, it’s a free FTP software program that runs on Windows or a Mac. You can find the software at this URL address. https://filezilla-project.org/

After you have installed the software then you must make an FTP account on your host. Go to your cPanel as we have discussed in previous lessons and scroll down to where it says FTP accounts.

install a module with filezilla

Be sure to pay close attention here. Give yourself a log in name, you will see below I used the name “maximus” as my log in. Next give yourself a password and enter it in 2 times. In the directory you will see that there was a directory automatically named “public_html/maximus”. Make sure that you take off the name whatever it may be and leave the public_html. This will give you root access to the server. If you leave on the name it will create another directory called “maximus” and there will be nothing in that folder. You want to leave it in the public_html because that is where all your files are located on the current server. After you have entered all of the necessary information click “Create FTP Account”.

install a module with filezilla

Now go to your desktop and make a file and call it something like “website-files”. We will use this folder to download our website files too.

install a module with filezilla

Now open your FileZilla program on your computer that you downloaded. You will see a screen that looks like this. In the highlighted sections is where you will enter the following information

  1. Host – this is your website name. Do NOT put in http:// or www. Just put in the name of your website like googlewebsitepro.com
  2. Next you will put in your username it will be something like [email protected]
  3. Put in your password that you created in the cPanel
  4. Use port #21
  5. Click on Quickconnect

install a module with filezilla

When you hit Quickconnect you will see messages appear in the first box on top. In the next box down on the right {highlighted in red}, you will see a list of folders that are on your local computer. Click the folders and navigate to where you made the folder “website-files” and make sure that is the folder that you have highlighted in the box. On the right you will see the remote files on your server, which is the box {highlighted in blue}.

install a module with filezilla

They key here is to make sure that your folders are lined up. The first thing that I do when I am working on a website is I highlight all the files and download them. This is also a great way to back up all the files on your website. Keep in mind that this does not download the database, only the files that are on the server. If you are only interested in downloading one folder or file, you right click on the file and select download. It will then download whatever file you selected to your computer.

In the illustration below you can see that I downloaded the training folder and all the files that were in the training folder to my website-files folder on my desktop. Now I can go in there and edit the files or add new files to that folder by opening the folder on my desktop.

install a module with filezilla

When I open the folder on my desktop I can see that there is an htaccess file in the folder that I downloaded from my server. I can add files into that folder or edit the htaccess file. For this demonstration I am going to add a text file to that folder and upload it to my website.

install a module with filezilla

I have to be sure that the folders are lined up right so that I am uploading to the right directory. This is very important that they are lined up right. If you upload to the wrong directory either it will not work or you can corrupt your website. Below you see how I made sure that my folders are lined up before I upload the folder to my server. Notice I have the training directory on my local computer as well as my remote server. Now I am going to right click on the hello.txt and upload it to my server in the training directory.

install a module with filezilla

In order to make sure it’s there I am going to enter http://googlewebsitepro.com/training/hello.txt into my browser to make sure it’s there and I uploaded it to the right directory. When I do, I see that I am successful and see a screen like below.

install a module with filezilla

Now let’s say that you downloaded a module for your website. You would follow these same procedures to make sure that you upload to the correct directory. You would also want to be sure that if the files are zipped that you unzip them before preforming this process. Modules usually come with instructions on what directory to upload files to. Make sure that you follow them carefully. Each module is a little different and may have to access several different files and folders. You therefore may have to upload to several different files and folders to make this work for your CMS.

Although this procedure does not apply to WordPress users it is a good idea to be familiar with the FTP process for an alternative way to back up your website files. Since this procedure does not show you how to download your database this may be a process that you have to perform while installing a module. I will show you how to download a database below. This is also a good idea to know how to do this within a WordPress CMS as well as an alternative to the backup method that we discussed in the last lesson.

Downloading a Database *

Go to your cPanel once again and scroll down to where is says. phpMyAdmin.

Downloading a Database

Click on that icon. You may be asked to enter a username and a password. That information can be attained by downloading a config file from your server. Use the FileZilla program to find the config file and download it. You will then have to open it and find the username and password to access your phpMyAdmin. If the phpMyAdmin opens for you then you will see a screen like below.

You can select your database by clicking on the left section; I will click on the business database for this demonstration.

Downloading a Database

When I click on it I will see the list of tables that are in the database on the left. The tab that I want to export the database is called “Export” click on that and you will see a screen like below.

Downloading a Database

Next you want to click the “Go” button and this will give you a file that you can download to your computer. This is a great way to back up your database before installing any modules to your CMS.

Custom Work Editing CSS *

There are at times the need for custom work to be done on your website. This section is designed to save you some time and money for the simple things that you can do to your CMS. Sometimes we just want to change the font style or the background of our websites and this can all be done using the style sheets. You will want to be sure and have the Google Chrome browser installed on your machine so I can show you how this process works. If you do not have the Google Chrome browser installed you can go to the website and download it at https://www.google.com/intl/en/chrome/browser/ . The Google Chrome browser is a great way to preview colors and text styles before you actually make the change on your website.

So now that you have the Google Chrome browser installed lets go to a website and see how you can use it to preview styles on your own website. Go to a section on the webpage that you want to change the color on and right click and select “Inspect Element”. I want to change the blue color on this webpage so I want to preview different colors.

Custom Work Editing CSS

When I click on inspect element I get a screen like below. I can see that the div id is “container” and I can see the colors on the right.

Custom Work Editing CSS

I can click on those colors on the right and enter my own colors in. Here you can see that I typed in “red”. The reason why you see background over and over is because the CSS is targeting different browsers. The reason why you see a line though some of the selectors is because this “style” does not apply to the browser we are using, “Google Chrome”.

Custom Work Editing CSS

After I enter my color, “red”, this is what it looks like.

Custom Work Editing CSS

For a list of styles and CSS colors I like to go to http://www.colorzilla.com/gradient-editor/ here I can get a list of all kinds of CSS colors that I can use in a website.

We can also change the font styles in a website. Font families are usually found in the body tag of a website. We learned about tags in our first lesson, now we are going to learn how they affect the style of our website as well. Below I have a clip of a1websitepro.com website. Currently the font family that I am using is “Lato” but I want to see what “Times New Roman” would look like since I like that font and I think that it is easy to read. So I will scroll to where my body tag is located in the inspector on the left and then scroll to where it says font-family on the right under the body tag. Here I will be able to enter another font-family to see what it would look like.

I can get a list of web safe fonts at the website located at http://www.w3.org/Style/Examples/007/fonts.en.html. Custom Work Editing CSS

I am going to highlight and pick the “Times New Roman” font as it is spelled out there. Next I am going to go to my code inspector and find the font family and click in there and past the new font name.

Custom Work Editing CSS

Now I can see what the new font would look like in my website.

Custom Work Editing CSS

Now the next thing to do is go and change my style sheet. Remember this method is only previewing what something would like before you actually change it. There are 2 different methods in the WordPress CMS to change custom styles to a website. Many themes offer a custom CSS so that you can modify without changing the original style sheet. The other method is to use FileZilla to download the style sheet and make the changes and re-upload them. We will discuss both methods.

Method #1 Changing Styles within a WordPress CMS *

To change a style within a WordPress CMS the theme author would have had to install a function that lets you have a custom style sheet that you can edit. You can find it under “Appearance” then “Edit CSS”.

Changing Styles within a WordPress CMS

You will see a screen like this. Here you can paste in your styles that you were previewing using the chrome browser.

Changing Styles within a WordPress CMS

Go back to your chrome browser where you were sampling new styles and highlight and copy. Make sure that you grab the selector and the curly brackets {}.

Changing Styles within a WordPress CMS

Now paste them into your custom CSS editor in the WordPress dashboard. Then save your document and go back to your site and see how it looks. If you made a mistake then go back and delete it.

Method  #2 Changing styles in other CMS platforms *

If you do not have a WordPress CMS or the function to enter a custom CSS you can download your style sheet using FileZilla and then edit your CSS with a text editor. Here are the steps.

  1. Download your style sheet using FileZilla. Style sheets are easy to locate in your inspector. Simply right click on a web page and hit inspect element.
  2. Right click again on style.css then click on open link in a new tab.Changing styles in other CMS platforms
  3. You will be given the directory where your style sheet is located.
    1. Changing styles in other CMS platforms
  4. Now find that file using FileZilla and download it to your computer.
  5. Make your changes and upload to the same directory and overwrite the file.
  6. You’re done!

You can do a lot more with CSS than just changing font families and colors. However that is another lesson within itself. There may be times when you just want some simple custom edits and instead of buying a whole new theme it is important that you understand that this option is available to you.

Social Media Sharing Integration *

Social media sharing integration is a great way to broadcast your website articles and products on social media platforms. The process in a WordPress CMS is simple. There are several different plugins that will do this for you. I think that it is important for you to understand how these social media buttons work.

First of all when someone visits a website that has share buttons installed they must be signed into their social network platform for them to work. Fortunately most people are already signed into their social network platform at all times from their browser. When they click on a share link it is then posted to their profile page on their social network platform.

Each social network platform has a special code that developers use to make plugins for different CMS platforms like WordPress. You can also hard code this yourself which might be a better option sometimes. The reason for this is because plugins rely on the author’s or developer’s script to serve JavaScript code to make the share button run. You can visit each link below and hard code the buttons yourself and install them on your server.

This is called social media marketing and is a great way to get your messages out there. However you must realize that social media marketing is very populated so if you want to get a message out there you must be very creative. Use eye candy in your images and make sure they stand out. The eye automatically attracts to red colors. Make sure that you title the article something captivating. Use the Meta description to create an action message. “CLICK HERE FOR FREE SAMPLES” is a lot better than. “Good food is great!”

Remember there is a lot of competition out there and you want to stand out from the rest. This will take a lot of time and effort in the creation of your articles and product descriptions. Write about something that people want and need. Don’t be boring; try to be excited as possible!

Making Money with Affiliates *

Affiliate marketing is always on the rise and it is a great way for advertisers to get their products out there on the market. So how do they do this? They let websites like yours display ads on their website with links to their products and services. When a website visitor clicks on the ad then there is a cookie that tracks what website the visitor is coming from. Then if the visitor goes through with a purchase the referring website will get a commission payment. There are certain metrics that you must understand before enrolling in an affiliate program.

  • Impressions. The number of times an ad banner is viewed.
  • Clicks. The number of times a consumer clicks through an ad banner.
  • Number of Sales. The number of transactions that occur.
  • Sales Revenue. The dollar amount of sales.
  • Commissions Paid. The dollar amount of commissions paid to affiliates.

There are also the following metrics that measure certain aspects of affiliate advertising.

  • Click-through Rate (CTR). The number of clicks divided by the number impressions.
  • Conversion Rate. The number of sales divided by the number of clicks.
  • Average Order Value (AOV). Sales revenue divided by the number of sales.
  • Earnings Per Click (EPC). Commissions paid divided by clicks.

What else should you know about affiliate advertising? There are many different ways in which this works. Most affiliates do not pay unless they make a sale off of your referral. The life of a referral can vary. Let’s say someone comes to your site and clicks on an affiliate link. They then go to the affiliates website and look over the product that is offered. They decide they need to think about it or talk it over with their spouse before making that purchase. In order for you to get credit for the sale the customer may have to purchase it within 24 hours. This is the way the Amazon affiliate program works. However there are other programs out there that extend this time. Some are 7 days, 14 days, 30 days & 90 days. Some affiliates even offer lifetime referral commissions. You can join a number of affiliate programs at http://cj.com this website has been around for years. The name of the company is called “Commission Junction” and they literally have thousands of advertisers willing to pay you to refer their products.

There are some things that you have to keep in mind before joining a program. Ask yourself these questions;

  1. Does the product or service that I am referring to relate to the content on my website?
    1. Remember that you have to stick to the theme of your website. You don’t want to refer people to unrelated content.
  2. Read the terms and conditions that an advertiser has. Sometimes you have to agree to place the ad in a certain area on your website before you can join the program.

Setting up an Amazon Affiliate *

One of the easiest programs to join and make money off of is the Amazon affiliate program. I will walk you through on signing up for the Amazon Affiliate program and show you how to put an ad on your website.

Go to amazon.com and you will see an area whether to sign in or create an account.

Setting up an Amazon Affiliate

Click start here and you will see a screen like below. Fill in the information then click, “Create Account”.

Setting up an Amazon Affiliate

After that you will be brought to another screen. Scroll to the bottom of that screen and look for a section called “Make Money with Us”. Click on the link that says “Become an Affiliate”

Setting up an Amazon Affiliate

You will then come to a screen like this. Click on the “Join Now for Free” link.

Setting up an Amazon Affiliate

Here you will follow through with the following steps. Fill out all the information that they request.

  1. Your account information. They will need to know how to pay you.
  2. Your website profile.
  3. Your Identity Verification
  4. Then you can start making ads!

Setting up an Amazon Affiliate

Now that you have an amazon affiliate account you can start making ads and place them on your website. So let’s go through this process.

Let’s say that you are writing an article on gardens. You want to tell people about the best seeds to plant for different plants. Go to your amazon associate account and type in “seeds”. The link to your associate account is usually in the upper right hand side of your screen.

Setting up an Amazon Affiliate

Setting up an Amazon AffiliateSetting up an Amazon Affiliate

 

You will then see a list of products that you can put as affiliate links on your website. Let’s say that we want to use the second link; click on “Get Link”.

Setting up an Amazon Affiliate

Here we will have the option of displaying text and images, text only, image only or add to widget. I think that text links are the best and I can manipulate the text to reflect my keyword phrase. So I will click on “text only”.

Setting up an Amazon Affiliate

When I click on “text only” I can enter the text that I want to use like my keyword phrase. I can also preview how my link will look to the right of that, {highlighted in blue}. If I am satisfied with the link then I can click the button highlight html then right click inside the box and copy {highlighted in green}.

Setting up an Amazon Affiliate

Another very nice feature is that you can enable a hover effect for your visitor to see details before clicking on the link. That is what the bottom box html code will give you {Highlighted in purple}.

Setting up an Amazon Affiliate

I will use this bottom code with the above code {highlighted in green} and take it to my website and paste in the code. In the WordPress CMS I will make sure that I click on “Text” view and insert my code that I got from amazon. Make sure that you paste in both codes, the bottom code {highlighted in purple} will NOT work by itself!
Setting up an Amazon Affiliate

Now when you publish your post you can see the hover effect working in your post.

CMS Additions Affiliates Plugin’s Modules Styles was last modified: September 1st, 2014 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

CMS Additions Affiliates Plugin’s Modules Styles

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.