Adding Adverts
Adding Adverts

Adding Adverts

Those of you that know me will know that I like to do a bit of blogging.

Having no income other than benefits means that even small costs such as my annual domain fees make me wince.  Every penny possible has to be saved.  But I really don’t want to stop any of my blogs – in fact I have started more up since I lost my job!

I used to do all my blogging on Blogger, prior to learning coding.  No particular reason other than it was what I first heard of.

New blogs I set up with WordPress, as it gives me pretty much infinite possibilities in being able to expand with my coding skills.  A few I still do on Facebook only – such as my Political Betting page.  Said page will be moved onto WordPress in the coming month or two, with a newly developed theme from myself.  Only just passed the thought stage – nowhere near pencil and paper stage.

The reason I set that particular page up originally was to see if I could make any money from gambling commission – all the major bookmakers offer affiliate accounts.  With 40 page likes and an average reach of around 10, I am hardly going to be buying a private jet any time soon.  Not even an airfix model.  So far I have a grand total of £20.43 and $6.05 commission.

So my bright idea this week was to add adverts to my 6 WordPress blogs.

I am sure I could have done this simply by using a plug-in, but I decided instead to use my WordPress knowledge.

Firstly I created a child theme for each blog, with a new stylesheet and a new functions file.  I knew how to make a child theme, or at least the theory of it, but had never done so.  This is now quite firmly planted into my knowledge bank.

I enqueued the stylesheet in the functions file – all straight forward.

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {
wp_enqueue_style( ‘gridster-lite’, get_template_directory_uri().’/style.css’ );
}

Then I had to create and register my custom post-types, following this with an initiation action.

Something that became clear in the planning stages after looking at how the adverts themselves were encoded, was that I would need two custom post-types – one main advert, and one mobile-sized advert.

function my_custom_posttypes() {

$labels = array(
‘name’ => ‘Adverts’,
‘singular_name’ => ‘Advert’,
‘menu_name’ => ‘Adverts’,
‘name_admin_bar’ => ‘Advert’,
‘add_new’ => ‘Add New’,
‘add_new_item’ => ‘Add New Advert’,
‘new_item’ => ‘New Advert’,
‘edit_item’ => ‘Edit Advert’,
‘view_item’ => ‘View Advert’,
‘all_items’ => ‘All Adverts’,
‘search_items’ => ‘Search Adverts’,
‘parent_item_colon’ => ‘Parent Adverts:’,
‘not_found’ => ‘No advert sites found.’,
‘not_found_in_trash’ => ‘No advert sites found in Trash.’,
);

$args = array(
‘labels’ => $labels,
‘public’ => true,
‘publicly_queryable’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘menu_icon’ => ‘dashicons-id-alt’,
‘query_var’ => true,
‘rewrite’ => array( ‘slug’ => ‘adverts’ ),
‘capability_type’ => ‘post’,
‘has_archive’ => true,
‘hierarchical’ => false,
‘menu_position’ => 5,
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’ ),
);
register_post_type(‘adverts’, $args);

$labels = array(
‘name’ => ‘Adverts Mobile’,
‘singular_name’ => ‘Advert Mobile’,
‘menu_name’ => ‘Adverts Mobile’,
‘name_admin_bar’ => ‘Advert Mobile’,
‘add_new’ => ‘Add New’,
‘add_new_item’ => ‘Add New Advert Mobile’,
‘new_item’ => ‘New Advert Mobile’,
‘edit_item’ => ‘Edit Advert Mobile’,
‘view_item’ => ‘View Advert Mobile’,
‘all_items’ => ‘All Adverts Mobile’,
‘search_items’ => ‘Search Adverts Mobile’,
‘parent_item_colon’ => ‘Parent Adverts Mobile:’,
‘not_found’ => ‘No advert mobile sites found.’,
‘not_found_in_trash’ => ‘No advert mobile sites found in Trash.’,
);

$args = array(
‘labels’ => $labels,
‘public’ => true,
‘publicly_queryable’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘menu_icon’ => ‘dashicons-id-alt’,
‘query_var’ => true,
‘rewrite’ => array( ‘slug’ => ‘adverts-mobile’ ),
‘capability_type’ => ‘post’,
‘has_archive’ => true,
‘hierarchical’ => false,
‘menu_position’ => 5,
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’ ),
);
register_post_type(‘adverts-mobile’, $args);

}

add_action(‘init’, ‘my_custom_posttypes’);

A simple media query ensured that only the mobile one would show at screen widths of less than 1200 pixels, only the desktop advert would show on screen widths of 1200px or more.

@media screen and (min-width:1200px) {
.advert.advert-mobile {
display: none;
}

}

@media screen and (max-width:1199px) {
.advert-main {
display: none;
}
}

The painful part was going through all the affiliate accounts and trying to find appropriate adverts to use – problems abound whether that be one company only having Italian adverts when I searched for English, other companies not having filtering options so I’d have to trawl through to find ones with the right size.  And some god-awful adverts too.  Not to mention spending a good 30 minutes or so trying to work out why they weren’t showing on my website – that’ll be Adblock then.

I think they look quite smart.

saqwer

The final part was having to fit them into the particular pages.  Mostly a straight forward case of finding the section after the navigation and before the have_posts loop starts, in the single, page and index pages.

It consisted of two while loops – one for the desktop advert and the other for the mobile advert custom post type, showing just 1 post (advert) per page, and an orderby type of ‘rand’ so that a different one would be shown each time.  I left a couple of divs in there with different classes in case I want to expand or slightly amend the styling at a later date – though now I think about it I wish I have written it as an include, that would have been more sensible.  Job for tomorrow, then.

<?php

$args = array(
‘post_type’ => ‘adverts’,
‘posts_per_page’ => 1,
‘orderby’ => ‘rand’
);

$adverts = new WP_Query( $args );

while ( $adverts->have_posts() ) : $adverts->the_post();?>

<div class=”advert advert-main”>

<div class=”flex-site-title”><?php the_content() ?></div>

</div>

<?php endwhile;

$args = array(
‘post_type’ => ‘adverts-mobile’,
‘posts_per_page’ => 1,
‘orderby’ => ‘rand’
);

$advertsmobile = new WP_Query( $args );

while ( $advertsmobile->have_posts() ) : $advertsmobile->the_post();?>

<div class=”advert advert-mobile”>

<div class=”flex-site-title”><?php the_content() ?></div>

</div>

<?php endwhile;?>

I am going to look into some more interesting affiliate accounts than just gambling ones.  Perhaps clothing, or music – especially for my music-related blogs.  Then again hardly anyone will see them as they use adblockers like me!

It was a good little task to get myself back into the swing of things after my interview disappointment this week and tomorrow I can get back on with some real coding.

Leave a Reply

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