How to style WP Affiliate Platform

- by

I’ve recently done some research on Affiliate Programmes that integrate with WP Ecommerce.

I came across the excellent WP Affiliate Platform from Tips and Tricks HQ – it works beautifully and is very easy to setup. At only $39 it’s a steal – considering how much business it can generate for you. Thanks Ruhul!

I wanted to make the front end integrate with my original site – which is just like tweaking a WordPress Theme. Let me talk you through it in this article.

Please note: I’ve written this with version 4.1.9 in mind – things may have changed since then.

First off, there’s plenty of good information on the well documented site under “How to customise” section. I won’t repeat that here and instead focus on a few additions.

The files I refer to herein live by default in /wp-content/plugins/wp-affiliate-platform/affiliates/

How to change the Header into a Logo

If you’d like to replace the <h1> tags from a plain font into a header graphic, open the header.php file and find this bit of code:

<!-- Start Header -->
<div id="header">
<h1><?php echo get_option('wp_aff_site_title'); ?></h1>
<!-- End Header -->

Take out the entire line containing the <h1> tag and replace it with something like this:

<img src="http://yourheaderimage.jpg>

If you’d like this banner to link someplace, wrap it in an <a> tag like this:

<a href="><img src="http://yourheaderimage.jpg></a>

If this places your header too far at the top, insert a <br /> in front of it. Job done!

How to change links in the Footer

One thing I’d like to see at the bottom is a link back to my original site. Nothing’s easier than that – open the footer.php file and find this bit of code:

<!-- Start Footer -->
<div id="footer">
<p style="float:left;">
<a href="index.php" title="<?php echo get_option('wp_aff_site_title'); ?>">
<?php echo get_option('wp_aff_site_title'); ?></a> &copy; <?php echo date("Y"); ?> - All rights reserved</p>
<p style="float:right;">Powered by&nbsp;&nbsp;<a target="_blank" href="">WP Affiliate Platform</a></p>
<!-- End Footer -->

I’ll insert one line like this just before the closing </p> tag in line 5:

... All rights reserved. Back to <a href="">Main Site</a></p>

On this note, Tips and Tricks HQ have a great affiliate programme. Sign up here and see this plugin in action. Once you’ve done that, you can amend the link in your own affiliate plugin to your affiliate link and take full advantage of the tiered comission structure.

Super Sweet!

I don’t recommend taking the link to WP Affiliate Platform out completely. I believe in “Credit where Credit is due” – a lot of hard work has gone into this plugin, so why not spread the word about it. Only do this if a client is explicitely asking you to remove the attribution.

Happy Sales!

If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

3 thoughts on “How to style WP Affiliate Platform”

  1. Pass I’m afraid – I’m using WP Affiliate Platform in its default location (i.e., where styling like described works like a charme.

    I would imagine though that the styling for in-page display is provided by your Theme. So all headings are h3 tags, and the rest of the text is enclosed in p tags. If you get the Firebug add-on for Firefox it’ll show you an ID for each element (i.e. wp_aff-index-body, aff-box-content, etc) so you can re-style those in your Theme’s style.css file.

    Best place to check for more information is and ask the developers – they’re excellent at getting back to their customers πŸ˜‰

  2. Excellent post. I was checking constantly this blog and I am impressed!
    Extremely useful info specifically the last part :
    ) I care for such information much. I was seeking this certain information for a long time.
    Thank you and best of luck.

Leave a Comment!

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