Project Completed: Election Odds

I’ve been a bit off-colour this week. Mini-manflu as I call it. No need for any sympathy – I’m just mildly under the weather. Completely capable of doing stuff, no need for daytime naps or anything – but just not the head to be dealing with complex JavaScript or similar.

Also it was taking me until 11am to get going most days, instead of my usual 8am start.

So I decided to take a break from the project that is quite the challenge (I spent about 3 hours on those hills and I’m still not happy with them – feedback/advice welcome) and just do a nice little WordPress upgrade for a blog.

The story is, that I had a blog called Political Betting.  I would occasionally write up tips on bets that I was placing, though I only ever had a page on Facebook, and a Twitter account (and I do make a slight profit on my political bets – although this is more than wiped out by my useless football bets).

My first challenge was what to name it.   politicalbetting.co.uk would have been ideal but this is a long-established site (of which I was not aware of its existence prior to setting up my Facebook page).  I considered politicalbettinguk and similar ideas but they were not catchy enough.

I then used Google Adword’s keyword search and it had two main suggestions as to the most-searched terms – Political Betting and Election Odds.

Election Odds.  Brilliant.  So the question of what to call it to make sure it stood out was completed.

I had in my head what I wanted it to look like – I’ve mentioned this before that I find the design side frustrating as I know what good code looks like, but I don’t always get the design right.  My idea for the home page was a large hero image of Westminster to take up the main page, with previews of posts outlined below in a grid system.  The sidebar would be on the right-hand side, with details of all the free bets available from bookmakers (affiliate links – I need to try to pay the bills somehow!).

I spent around two hours playing with my ideas, started making my own theme when I realised that WordPress’ new default theme, twentyseventeen, did exactly what I wanted it to do, well 75% of what I had envisaged.  There is no point in re-inventing the wheel, especially when it wasn’t going to teach me anything new.  I know how to style.  I know how to do layouts.  I don’t need practice in styling themes.  What I wanted was more practice with WordPress functionality.

Deal.  A couple of days saved.

Speaking of WordPress functionality, for this project I set up several custom taxonomies to be used, along with some custom post types – something alien to me a couple of months ago but which I am now very comfortable with.

There are still improvements to be made, particularly including learning how to make filters, so a user can, for example, select the betting market (custom post type) and be shown just the posts relating to that particular betting market.  I don’t think that I am too far away in my knowledge.  I also need to learn how best to dynamically style my posts.  At the moment, I have styles set up in my style sheet to add different coloured bottom borders on the home page, depending on what the party custom post type is, using get_the_term_list( $post->ID, ‘party’, ”, ‘, ‘, ” ) to retrieve the party name for that post ID, and setting it to a variable, which then updates the class.

But there must be a more dynamic way of doing so, as if I need to add a new party, I also need to update the stylesheet.

I thought the answer might have been with post_class() – which was the one new thing I learnt.  Sadly I couldn’t work out how to get it to do what I wanted it to do.  Yet!

The site is now up and running.  Clearly with just one post it looks a bit basic, and I will likely make improvements as time goes on once there is more substance.  For now, another project ticked off the list and time to go back to my WordPress book for the rest of Saturday, to see if I can figure out any of the aforementioned improvements that I require.

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.