We’ve gone to considerable lengths to make AffiliateWP look and feel like part of the WordPress admin. It’s there when you need it, and out of your way when you don’t. Likewise, on the front-end, we designed AffiliateWP to blend in seamlessly with any WordPress theme.

We believe in providing affiliates with a consistent experience across the entire website.

Because of this, AffiliateWP includes minimal styling for the Affiliate Area, and relies on the theme’s current styling for most of the heavy lifting.

For many of our customers, the default styling of the Affiliate Area is perfect. Links appear in the theme’s link color, text is shown in the theme’s font, form elements have the theme’s form styling, and so on. We do however get the occasional support ticket asking why the Affiliate Area doesn’t look very “flash”, with custom color scheme(s), icons, animation, custom fonts; you name it!

We could have chosen to style the Affiliate Area based on “current design trends”, but customers are not always going to agree with design decisions we make. As such, a heavily styled Affiliate Area will likely not match the customer’s WordPress theme, and considering the thousands of customers who use AffiliateWP, you can imagine the potential problem…

Customers will demand that we “fix” their theme because AffiliateWP “broke” it.

It’s better to add styling to a clean canvas (like AffiliateWP’s Affiliate Area), than to remove everything and start afresh. In addition, some design trends may go out of style the following year and we would be forced to redesign the Affiliate Area over and over again.

Since we decided to keep things simple from the beginning, our customers will always have a great looking Affiliate Area that matches their WordPress theme. If there is the desire to add custom design elements, all it takes is some CSS styling.

Styling with CSS

Teaching CSS isn’t the goal of this article but thankfully there are countless tutorials available around the web. There’s no better way to learn than to experiment, but before you do, you’ll need to consider where to put your custom CSS code.

In your child theme

Custom CSS code can be added to your child theme’s style.css file. If you don’t have a child theme it’s very easy to create one. Adding CSS to a child theme ensures you do not lose your custom styling when the parent theme is updated.

In a custom plugin

There are many free plugins available on the WordPress repository that allow you to add custom CSS code to your site, by pasting the CSS directly into the WordPress admin. If your theme is ever updated, you won’t lose your modifications. Here’s one such plugin that comes to mind: Reaktiv CSS Builder.

Finding the right CSS selectors to use

In order to style the Affiliate Area with CSS you’ll need to know what to style. The easiest way to do this is to use your browser’s built-in developer tools. This allows you to simply hover over any element in the Affiliate Area and find out exactly what the relevant CSS selector to use is.

Inspecting the Affiliate Area with the browser's developer tools
Inspecting the Affiliate Area with the browser’s developer tools

Each browser has a slightly different way of accessing its developer tools:

Chrome
https://developer.chrome.com/devtools

Firefox
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector

Safari
https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html

Another way to find out what CSS selectors to use is to look at AffiliateWP’s template files in a code editor. All the template files relevant to the Affiliate Area are included in the templates folder of the plugin.

dashboard.php
The affiliate dashboard

dashboard-tab-urls.php
The URLs tab of the affiliate dashboard

dashboard-tab-stats.php
The Stats tab of the affiliate dashboard

dashboard-tab-graphs.php
The Graphs tab of the affiliate dashboard

dashboard-tab-referrals.php
The Referrals tab of the affiliate dashboard

dashboard-tab-visits.php
The Visits tab of the affiliate dashboard

dashboard-tab-creatives.php
The Creatives tab of the affiliate dashboard

dashboard-tab-settings.php
The Settings tab of the affiliate dashboard

Styling the Affiliate Area’s links to look like “tabs”

One of the requests we’ve received is to style the Affiliate Area’s links to look like “tabs”. Below is an example on how you can accomplish this using CSS styling and the default WordPress TwentySixteen theme.

Something very important to note is that all themes are unique. Although we’ve provided example code to turn the links into tabs, there may be additional styling required for your theme. With TwentySixteen, we had to add a few more styles to get things looking the way we wanted. This is noted in the CSS comments at the very end.

Here’s what the default Affiliate Area’s links look like out of the box (with the TwentySixteen theme).

The default Affiliate Area links with the TwentySixteen theme

Here’s how our new tabs look once some CSS styling has been added.

The new tab styling on the Affiliate Area

To try this out yourself:

  1. View the CSS code on our code repository. You can also find lots of other code snippets to use with AffiliateWP on our repository.
  2. Copy and paste the CSS code (everything between the <style> tags) into a custom CSS plugin, or directly into your child theme’s style.css file (as discussed earlier).
  3. Enjoy!

As a final note, code snippets on our repository are set up to be plugins for convenience. An alternative way to use the CSS code is to save the file shown and install directly as a plugin on your site. You can find instructions on how to do this from the “Using Snippets” section. Using it this way has the added advantage of only loading the CSS on your Affiliate Area, and not any other page that doesn’t require it.

With a little bit of enthusiasm and some basic CSS knowledge, you can style the Affiliate Area to look exactly how you want. If you’re interested in learning more about CSS, check out some tutorials and try experimenting with the various design elements. You might even find yourself having fun!

Happy styling!

Andrew Munro

About the author: Andrew Munro co-founded AffiliateWP in early 2014. His trusty treadmill desk allows him to write code at an incredible 3 mph, making him the fastest developer around.

9 comments

  1. How to override the templates in the plugin? What hierarchy do you have to put the files into under your child theme? I’ve tried all the obvious ones, nothing is working. This is an absolutely critical customization option needed to customize the WP Affiliate area, and you do not talk about it at all in this article.

Leave a Reply

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