❄️ Looking for Black Friday Deals? CLICK HERE for our post » How to Add a Pre-Content Affiliate Disclosure - Pro Blogger Income

How to Add a Pre-Content Affiliate Disclosure

by Josh Koop | Last Updated:  November 2, 2020
Apply to Ezoic Surfer SEO 7 Day Trial Brave Browser
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete disclaimer information for more details.

Earlier this week we spoke about adding a disclaimer before content with Custom CSS only. This has limits due to different post types and it has no ability to be linked outside of the text you provide.

As the CSS version was being built I was building a code-based version that could be used on all single posts and would give you the ability to add pages to the snippet.

You will need to install the Code Snippets plugin which adds no bloat and allows you to structure and name additions to your site for easier management.

You will want to find the page section and modify it to add any pages you need a disclaimer on, you can use the number or the slug name in single quotes. (The ones on there are examples to replace)

if(is_page( array( 234, 'about-me', 'Contact' ) ) || is_single()) {

Then you can make changes to the CSS below to ensure it displays how you would like it to.

.affiliate {
    display: block;
align-content: center;
margin: 5px;
    margin-bottom: 5px;
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
font-size: 16px !important;
padding-right: 20px;
padding-left: 20px;
background: #85bb65;
color: #ffffff;
border-radius: 10px;
margin-bottom: 50px;
}

Then you can make changes to the legal disclaimer location if you want to link out. Just replace the below # sign with the website complete URL.

<a href="/disclaimer/">

If you don’t want to link out replace:

<a href="/disclaimer/">disclaimer information</a>

with

disclaimer information

These display on the pages with schema within Acabado also so you have the banner across your recipes, products, etc.

Version Which Show Affiliate Disclaimer Only On Specific Post With Tag

This you can change out page id’s for your resource pages to have a disclaimer (separate each with commas) or use the page name if you enclose like the below in code examples.

Additionally the has_tag code allows you to change to a tag name you want by default it is added to any post with the tag “Affiliate” added to it.

The second line (commented out with a “#” allows you to just have it added to all posts regardless of you tagging it as “affiliate” so choose what works for you.

/**
 * Append Content Before Posts For Affiliate Disclaimer.
 * Optional commented out after content section where you could add additonal CTA ation if you chose
 */
function wpcontent_before_after($content) {
	if(is_page( array( 234, 'about-me', 'Contact' ) ) || is_single() && has_tag('Affiliate')) {
	#if(is_page( array( 234, 'about-me', 'Contact' ) ) || is_single() ) {
		
    $beforecontent = '<div class="affiliate"><!--googleoff: index-->As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete <a href="/disclaimer/">disclaimer information</a> for more details.<!--googleon: index--></div>';
    #$aftercontent = '<div class="affiliate">And this will come after, so that you can remind them of something, like following you on Facebook for instance.</div>';
    $fullcontent = $beforecontent . $content . $aftercontent;
    
	} else {
        $fullcontent = $content;
    }
    return $fullcontent;
}

add_filter('the_content', 'wpcontent_before_after');

add_action( 'wp_head', function () { ?>
	<style>

	.affiliate {
display: block;
align-content: center;
margin: 5px;
    margin-bottom: 5px;
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
font-size: 16px !important;
padding-right: 20px;
padding-left: 20px;
background: #85bb65;
color: #ffffff;
border-radius: 10px;
margin-bottom: 50px;
}
	</style>
<?php } );
I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!