Theme Tutorials

← Back to Theme Tutorials

Advanced Guide to Niche Skin Development

WARNING: This tutorial is meant for advanced users who have web development experience, specifically in CSS, HTML and graphic design. That said, with a little bit of research and wherewithal, anyone can learn to create a Niche Skin and sell it in our Affiliate Marketplace.

What is a Niche Skin?

An Affiliate Theme Niche Skin is simply a WordPress child-theme designed to integrate with Affiliate Theme. This means that Affiliate Theme can be changed to a variety of different skins by simply importing and activating a new skin.. If you want to create a Niche Skin and you are NOT familiar with developing for WordPress, CSS, PHP and HTML, you should read our Basic Guide to Generating Niche Skins.

A Niche Skin sits on top of the Affiliate Theme framework. A Niche Skin is a folder inside the wp-contents/themes folder of your WordPress installation. It typically consists of the following files:

  • functions.php
  • /images/ (folder)
  • screenshot.png
  • style.css

The ‘images’ folder consists of the following files:

  • images/jpg
  • images/header.jpg
  • images/graphic1.png (optional)
  • images/graphic2.png (optional)

To make the process of creating a Niche Skin easier, start with one of the Niche Skins from your existing copy of Affiliate Theme 2.0 You can modify this collection of files for your own Niche Skin.

Step 1: Choose a niche for your skin.

You can create a Niche Skin around any vertical, however, it would be smart to do some research about what the hottest affiliate niches are these days. You can join any affiliate network and get a good idea of what are the hottest performing verticals. This would be a good place to start if you are looking to sell your Niche Skin in our marketplace.

Step 2: Create a header graphic.

We recommend using Adobe Photoshop to design a header graphic 940px (width) by 200px (height). You can download our sample header graphic here.

Step 3: Modify the style.css file.

The most important part of modifying the style.css file is renaming this information:

/*
Theme Name: Credit Cards
Description: Credit Cards Review Skin by UBD
Template: AffiliateTheme2
Author: Affiliate Theme
Author URI: http://www.affiliatetheme.net/
Version: 1.0.0
*/

Once you have completed that step, you can begin to customize any element of the style.css file from the original file.

Step 4: Modify the functions.php file.

You will have to rename a few lines of the functions.php file. Make sure your theme folder begins with “AT2_” for easier categorization. This file will allow your Niche Skin to be recognized by Affiliate Theme and automatically upload the customizations when a new user activates your skin.

Step 5: Add a theme screenshot.

The theme screenshot is simply a PNG file named “screenshot.png” in your Niche Skin folder. The file must be 300px (width) by 225px (height). Once you have designed this file, drop into your theme folder.

Step 6: (OPTIONAL) Add an additional header graphic(s).

To give your theme some extra flare, you can add up to two additional header graphics. In the CSS file, these are known as .graphic1 and .graphic2. In the style.css file, you must specificy the height and width of these graphics. See below for an example.

additional graphics

The left and right server graphics are the additional graphics of this theme. These graphics must be PNG files and named graphic1.png and/or graphic2.png.

Step 7: Save your completed theme and ZIP it.

Once you have completed the modification of your theme, export it as a ZIP file and add it to our Affiliate Marketplace.