How to add Adsense code in OSCLASS manually and using bender theme's ad management?

OSCLASS is a fantastic Open Source script or CMS for running classified advertising websites. There are scores of plugins to add more functionality. One of the things that many publishers want to include on website is Google Adsense - one of the most popular ways to earn revenue from websites, mobile and apps. In this short post, we will see how to add Google Adsense Code in OSCLASS.

To add Google Adsense code in OSCLASS we need:

• Google Adsense Ad Code: To follow this post, you should have Google Adsense account and Ads already created.
• Copy and Paste Google Adsense Code in OSCLASS theme files manually or from OSCLASS theme's ad management page.

 Let's explore in details.

How to add Adsense code in OSCLASS?

1) Get Google Adsense Code:

Before you start adding Google Adsense code on OSCLASS, I assume that you have Google Adsense Account, which mean you can access "www.google.com/adsense" and create ads. If so, we are good to go. You can create ads specific to a particular website depending on it's look and feel.

• Login to Google Adsense
• Click on "My Ads" tab": a list of your ads are displayed.
• Click on the "Get Code" link right below the ad you desire.

2) Apply Google Adsense code on OSCLASS theme

A) Manual Way: (not recommended)

Google Adsense code can be applied to OSCLASS theme manually, that is, by placing Google Adsense code directly in the OSCLASS theme files by editing the php file. Some prefer the manual way as it gives the administrator more control where to place the Google Ads. It is also a workaround for some themes that does not support placing Google Adsense code in widgets etc.Though adding Google Adsense code manually in OSCLASS theme files may have some advantages, I personally do not recommend this as if there comes a time to remove the codes or update them then you need to edit the theme files and manually edit them. If should be done carefully.

To edit OSCLASS theme files manually to add Google Adsense code, you need to have access to your OSCLASS site files. You can do so by maintaining a local replica of your website on your local machine so you can test it locally before uploading on live server. Or if you know what you are doing, you can do on production as well, but make sure the OSCLASS site is on "Maintenance Mode" while doing this.

Steps to add Google Adsense Code in OSCLASS theme files - Manually:

There can be two scenarios adding Google Adsense code in OSCLASS manually -

• First, test on local development OSCLASS installation
• Second, edit and upload to live OSCLASS

i) Add Google Adsense on local development server and test locally:
To run OSCLASS on a local computer, you need PHP, MySQL and Web Server running. The easiest way to run PHP-based CMS such as OSCLASS, WordPress or Drupal on Windows is to install the XAMPP package. The XAMPP package comes with Apache Web Server, MySQL database and PHP. XAMPP is installed by default at "C:/XAMPP" and the website files are hosted under "C:\xampp\htdocs\" directory.

See previous post - "How to install and run XAMPP on Windows?"

After you have installed XAMPP, install OSCLASS on your local Web Server. It gets installed under "C:\xampp\htdocs\eadserve\". If you want to maintain an exact copy of your website already online, then you need to download a copy of your website files on your local web server and also download a copy of the MySQL database and import it on your local database using phpMyAdmin. I will not be covering the entire steps for this. Since we only want a local copy of OSCLASS to test how it looks after adding Google Adsense code, we don't need to have the exact same copy of OSCLASS locally. Just install OSCLASS on the local machine and we are good to go. The following steps is based on "OSCLASS installed locally but not the exact same copy of OSCLASS website online".

Steps to add Google Adsense code on OSCLASS theme files locally first:

• Install XAMPP (See previous post - "How to install and run XAMPP on Windows?")
• Install OSCLASS
• Test OSCLASS is running (Open browser and navigate to "http://localhost/osclass-installation-folder"
• Login to Google Adsense and get the code of the preferred Ad
• Open  File Explorer and navigate to "C:\xampp\htdocs\eadserve\oc-content\themes\bender"
• Common OSCLASS pages files are - header.php, item.php, main.php, footer.php, etc.
• Open any of the above files you desire in a Notepad or Notepad++ or your preferred editor for editing PHP files.
• Place the Google Adsense code in the place you desire. Make sure you don't break existing code.
• Test: Open browser and navigate to "http://localhost/your-osclass-installation-folder-name" Eg. "http://localhost/osclass" 
• See if the ad region appeared in the area you intended.

Example: 
To add Google Adsense in the sidebar of main page of OSCLASS:

• Opened "main.php" contained under "C:\xampp\htdocs\eadserve\oc-content\themes\bender" folder in Notepad++
• Searched for " <div id="sidebar">"
• Copy and place the Google Adsense code as below:

<div class="widget-box">
     <div class="box location">
     <!-- the above two lines created a widget area in the sidebar. Don't forget to close the 'div' tags.-->
            <!--Google Adsense Code begins-->
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- Google Adsense Ad Name-->
                <ins class="adsbygoogle"
                style="display:inline-block;width:250px;height:250px"
                data-ad-client="ca-pub-your-Adsense-publisher-ID"
                data-ad-slot="6132832244"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
            <!--Google Adsense Code ends-->
    </div>
    </div>

• The above code displays Google Ad in the sidebar as shown below.
• Please note that if the Google Adsense ad is created recently, it may not load. But the region will still be displayed.

ii) Add Google Adsense code on OSCLASS theme files and upload to live website:

• You should know your access credentials of your host. If you don't, contact your service provider.
• Login to your host web console. For example, on Linux hosting, it may usually be CPANEL interface.
• Set up a FTP account for your site. See here how to create FTP account on web host console using CPANEL.
• Download FTP programs such as FileZilla an set it up to access your site's file. 

If you don't know how to create FTP account for your site and configure it with Filezilla, check out this previous post -How to configure FTP on FileZilla client program?

• After you have setup FTP and you are able to access your site.
• After installing and configuring FileZilla FTP client, open FileZilla and connect to your site.
• Navigate to "\public_html\your-site\oc-content\themes\your-osclass-theme" folder.
• Common OSCLASS pages files are - header.php, item.php, main.php, footer.php, etc.
• Download a copy of your site's theme files where you desire to add the Google Adsense code to your computer.
• Open the downloaded php file using a editor - such as Notepad or Notepad++ 
• Place the Google Adsense code in a place you desire. Make sure you don't break existing code.
• Once edited, we are ready to upload the file to the website. 

But before we do so, rename the existing file on the live website so that we can revert if any thing goes wrong. Suppose we edited main.php, rename the main.php on the live website to main.php.bak. We can rename files directly from FileZilla.

• Now upload the edited php file to your server  in the correct directory using FileZilla.
• Open your website in a browser and check if the ad appears.

B) Adding Google Adsense in Bender Theme's Ad management

Some OSCLASS themes have "Ad Management" feature for adding external code such as Adsense "javascript" code in the theme from it's admin web interface. If the theme allows, this is the easiest way to ad Google Adsense code in OSCLASS. Mainteance is also easier as it is done from a single page.

One of the most popular OSCLASS theme called "Bender" also allows addition of Adsense Code in its theme. You can explore for OSCLASS themes that allow addition of Adsense codes and install them. 

Here in this post, I will be using the Bender theme for adding Google Adsense code.

How to add Google Adsense code in OSCLASS Bender Theme?

Watch this video how to add Google Adsense code in OSCLASS Bender Theme's  Ad management:

 

• Login to OSCLASS website as admin from www.yoursite.com/oc-admin
• Click on "Appearance > Theme Settings"
• You should see Ad Management section right below "Theme Settings"
• The sizes for the Google Adsense ads are:
  
  • Header 728x90: This ad will be shown at the top of your website, next to the site title and above the search results. Note that the size of the ad has to be 728x90 pixels.
  • Homepage 728x90: This ad will be shown on the main site of your website. It will appear both at the top and bottom of your site homepage. Note that the size of the ad has to be 728x90 pixels.
  • Search results 728x90 (top of the page): This ad will be shown on top of the search results of your site. Note that the size of the ad has to be 728x90 pixels.
  • Search results 728x90 (middle of the page): This ad will be shown among the search results of your site. Note that the size of the ad has to be 728x90 pixels.
  • Sidebar 300x250: This ad will be shown at the right sidebar of your website, on the product detail page. Note that the size of the ad has to be 300x350 pixels. 
   
  
• You should have created ads in Google Adsense as per the sizes above or the ads may not display properly.
• Add the Google Adsense Code in the respective areas.
• Scroll down and click Save Changes.
  

How about adding Google Adsense code in OSCLASS widgets?

Adding Google Adsense code using OSCLASS widgets does not work as the codes are stripped. You can add widgets in OSCLASS from:

• OSCLASS Admin page > Appearance > Manage Widgets
  
• You can add widgets in header and footer sections
• Click Add HTML widget
• Enter Description(internal use only)
• Paste the code in the widget text area.
• If you need to edit the code, click on HTML button in the toolbar.