All posts by King Pro Plugins

Using Ad King Pro in a responsive mobile friendly way

There has been some interest in using Ad King Pro on responsive sites and replicating a mobile apps ads by having a sticky advert at the base of the screen. There are endless ways you could set this up, but I’m going to run through a typical and simple scenario here to help you get rolling.

Take the scenario that you have a banner in your sidebar (250px x 300px) and you would like a version of that advert at mobile views from 768px screen width and below using another image (768px x 96px).

Step 1: Create relevant ‘Advert Types’

Ad King Pro create advert typesIn order to separate the differences in advert sizes and control the positioning, creating different advert types allows you to control the different size types and their position on your site. By default, there is a ‘sidebar’ advert type that you can (or may already) use for your sidebar in the desktop version. Go ahead and create a new advert type called “Mobile Footer”.

Step 2: Create and assign the banners

Ad King Pro adding banner imagesOnce you have the advert types created and the 2 banner images ready to go, create 2 new adverts, assigning each to their corresponding advert type – 250px x 300px advert using the ‘sidebar’ advert type and the 768px x 96px advert using the ‘mobile footer’ advert type.

Step 3: Add adverts into page

Depending on how your theme is setup, you may be able to use the widgets or you may need to be required to add the PHP do_shortcode function into your theme files. Either way you will achieve the same result.

Widget method

Ad King Pro creating widgetsLocate your sidebar widget area and drag on your first Ad King Pro widget into that area in the position you would like your ‘sidebar’ banner to display. You are now given details to display you advert. For this example, we will be displaying a single banner in this area, but if you have the want/need to display a rotating or randomly chosen set of adverts, then it is chosen at this point. For the first one, choose the ‘Sidebar’ advert type, then choose the ID of the banner created for the sidebar, in the case of the example, it was 359. The ‘# to render is irrelevant at this stage as we have chosen a single banner ad. Once that is done, click the save button and drag on another Ad King Pro widget directly below the first one you just filled out. This time, you want to select ‘Mobile Footer’ advert type then choose the ID of the banner created for the mobile footer, in the case of the example, it was 361. Once selected, click save.

Template Method

This method will generally be used by developers and theme creators as you are required to modify the code of the themes templates your using. This example will be acting on the assumption that the sidebar.php file has been modified to not use widgets and is a ‘hardcoded’ sidebar. Any developer would be able to take this example and implement it into their site build as they need it.

All that is required for this is two “do_shortcode” functions added, and the shortcode for each banner used in each function. Information about the Ad King Pro shortcodes can be found under the how-to tab of the settings page in the admin, or you can use the shortcode builder in each editor. For the example, the two shortcodes are as follows:

<?php echo do_shortcode('[[adkingpro banner="359"]]'); ?>
<?php echo do_shortcode('[[adkingpro banner="361" type="mobile-footer"]]'); ?>

Setting the type on the mobile footer shortcode forces the output to change the class of that container from ‘sidebar’ to ‘mobile-footer’. This is important so we can differentiate between the two type of adverts.

Step 4: Add CSS to manage the display of the adverts

Now you have both banners in the sidebar, its time to get to the fun part of the setup. Depending on the theme your using and where you have positioned the desktop advert, this may or may not already be responsive by the sidebar disappearing or moving to a different location. This is a case-by-case scenario and can not be given example code for styling and positioning.

What we can do here is manage the mobile footer banner. At the beginning of this tutorial, we stated that the banner will begin to display at a window width of 768px. This is managed by CSS media queries. Developers can (and should) add this code in the themes external CSS file, however if your not familiar with coding CSS files, or would just like to keep this CSS separate to the rest of the site, then you can use the “Custom CSS” box in the Ad King Pro settings page.

Firstly we need to hide the mobile footer banner from the desktop view. We can do this by using the classes supplied by the plugin on the adverts container:

.adkingprobanner.mobile-footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
.adkingprobanner.mobile-footer img {
    width: 100%;
    height: auto;
    display: block; /* removes white space under the image */
}
@media (max-width: 768px) {
    .adkingprobanner.mobile-footer {display: block;}
    .adkingprobanner.sidebar {display: none;}
}

This should give you the following views:

This screen view is 769px and up

This screen view is 769px and up

This is the view at 768px - the width of an iPad portrait screen

This is the view at 768px – the width of an iPad portrait screen

 

The banner from 768 down will scale the banner to the width of the screen size

The banner from 768 down will scale the banner to the width of the screen size

If not, you may be missing the meta viewport tag in your header. Heres an example:

<meta name="viewport" content="width=device-width, initial-scale=1" />

View the demo

As mentioned earlier, there are multiple ways you could go about doing something like this, for example, if you wanted to have a thinner banner at 768px, then you could do 3 versions and have a 768px x 66px version until 480px wide. Take it even further and follow what Apple recommend for their apps – have a version for 480px and one for 320px since this banner will take up a bit of room, more so at landscape.

Having a thinner version for landscape isn’t such a silly idea. Take the best of both worlds and add a tweak to it and you could have a banner ad working perfectly for not only the width of the screen, but the orientation! Why not have desktop, landscape and portrait versions:

.adkingprobanner {display:none;}
.adkingprobanner.sidebar {display: block;}

@media only screen
and (max-width : 768px)
and (orientation : landscape) {
.adkingprobanner.sidebar {display: none;}
.adkingprobanner.landscape {display: block;}
}

@media only screen
and (max-width : 768px)
and (orientation : portrait) {
.adkingprobanner.sidebar {display: none;}
.adkingprobanner.portrait {display: block;}
}

Thats a rough concept of course and could be built upon but you get where I’m going there.

So hopefully that gives you an idea as to how to setup Ad King Pro to utilise banners responsively. I would suggest turning off logging impressions when using the above method as you will get incorrect results.

If you have any other ways of using Ad King Pro responsively, I’d love to hear them in the comments below.

Invoice King Pro 1.1.5 gets some handy improvements | Ad King Pro 1.9.14 continues to provide

After a few weeks of some full on work, what has been produced from it has been well worth it. Lots of great suggestions for plugins, some of which I put alot of thought toward. Some of you may have also noticed that the logo has changed recently – thats quite the story 😉

Invoice King Pro 1.1.5 gets some handy improvements

I get a great deal of feedback for the Invoice King Pro plugin from those that love the flexibility that the plugin gives you to create your own plugins. Some recent suggestions have been quite valuable, so much so that I have pushed to have them in the latest version of the plugin.

Invoice King Pro - Sent DateBetween versions 1.1.4 and 1.1.5, niche features have been added to give more value to the plugin. One feature is having a date for the last time you sent the invoice via the system, seem so simple yet so powerful and almost necessary to have for management of your invoices. A popular feature that has been asked for quite some time is the automated entry of the date when an invoice is created. I know alot of you will be pleased that feature is there!

A fantastic suggestion was to have the variables, that you can currently use in the email content, to add invoice details into the open content fields of the template. Allowing this now gives you more freedom to have the invoices you generate even more customisable at the same time as being automated to save you time when creating your invoices.

The last item added to the plugin thats worth mentioning is being able to set a default value for the tax/gst field of the invoice. Speaking of the tax/gst field, one suggestion that has recently come through is to provide more than one of these fields to the invoice. This feature is currently in planning stage however the concept is to have the option to choose the amount of tax/gst fields and what their percentage values are. Keep an eye out for this feature if your in the need for 2 or more different tax percentages!

Ad King Pro 1.9.14 continues to provide you with great features

The ever-popular Ad King Pro has yet again been given a great deal of attention. A great friend and supporter of the King Pro Plugin family, Rob Potter – the owner and operator of Photography Hot Spots, happily uses a great deal of plugins from the King Pro Plugin range on his site. He recently took some time to really concentrate on setting up his Ad King Pro adverts throughout the site and came up with some invaluable features that will not doubt see Ad King Pro reach a new level of providing you with a way to add your adverts to your site.

Rob is using the Google Analytics implementation to track his impressions and clicks that was added in version 1.9.13. The way he is using the plugin, and because he already uses Google Analytics to track his page views, he has no requirements to track the impressions of the ads. Because of this, purely to keep his GA account clean with valuable analytic data, he wanted a way to turn off the impressions and only allow the clicks to be tracked. So two new checkboxes were added to the settings to control this. This doesn’t just work when using the GA implementation, you can use it with the local tracking as well!

Ad King Pro advert rollover imageThe other feature Rob had cross his mind was being able to assign a rollover image to his banners. This was something that I never considered but once made aware of the idea, I thought it was a feature that many would value highly. I have now added to the plugin the option to add a rollover image to the advert. This automatically adds a bit of CSS to the advert to allow for the hover. Without getting too technical about it, the rollover images sits underneath the original image. On hover, the CSS is set to bring the rollover image over the top of the original and upon leaving the image, it returns underneath. For those that want to get fancy with the transition, you can assign your own hover states using either CSS or jQuery – I’ll be doing a separate post on what you could use for that.

King Pro Plugins logo dilemma…

As long time users of the plugins would be aware, the logo of King Pro Plugins was changed recently. This was something that I was required to do after being approached by WordPress in regards to infringing on the WordPress trademark. Naturally I’m a supporter of WordPress so getting on their bad side is never my intention.

I am grateful to the WordPress Foundation for giving me the opportunity to rectify the issue without resulting to any legal actions.

Custom image uploader for plugins using the WordPress native functions

There are certain times when building plugins, features and functions in WordPress that you need to allow an image to be uploaded or even just getting the url to an image (or both). You could use a standard form upload and save the file manually, but why create work for yourself? Use the native WordPress uploader to your advantage!

Firstly, setup your fields within your plugin where you need them, something like the following should suffice (be sure to replace ‘your_image_url‘ and ‘your_image_url_button‘ with your own prefixed names):

$image_url = (get_post_meta( $post->ID, 'your_image_url', true )) ? get_post_meta( $post->ID, 'your_image_url', true ) : '';

echo '<input id="your_image_url" type="text" size="36" name="your_image_url" value="'.$image_url.'" />';
echo '<input id="your_image_url_button" class="button" type="button" value="Upload Image" />';

Now this should output something similar to this:

Example uploader

All that is needed now is a little bit of javascript to fire it up. Again, please make sure you change the ‘your_image_url‘ and ‘your_image_url_button‘ fields to match those changed on your form fields:

 var image_custom_uploader;
 jQuery('#your_image_url_button').click(function(e) {
 e.preventDefault();

 //If the uploader object has already been created, reopen the dialog
 if (image_custom_uploader) {
 image_custom_uploader.open();
 return;
 }

 //Extend the wp.media object
 image_custom_uploader = wp.media.frames.file_frame = wp.media({
 title: 'Choose Image',
 button: {
 text: 'Choose Image'
 },
 multiple: false
 });

 //When a file is selected, grab the URL and set it as the text field's value
 image_custom_uploader.on('select', function() {
 attachment = image_custom_uploader.state().get('selection').first().toJSON();
 var url = '';
 url = attachment['url'];
 jQuery('#your_image_url').val(url);
 });

 //Open the uploader dialog
 image_custom_uploader.open();
 });

Have this javascript load in to the admin with your plugin (or you could just include this script on the page that your fields are, however for cleanliness I would recommend putting it into an external file and using the ‘admin_enqueue_scripts‘ action to queue the script into the admin.

Once that is loaded it, give it a go. Upon clicking the “Upload Image” button, you should be met with the standard WordPress uploader we’ve all come to love. Either choose  to upload a new image/file or choose an existing image/file from the media list. Click “Choose Image” and the URL to that file will be placed into the box.

If you require this in the settings area of WordPress, you will find that you need to load in the media files for this to work. A telltale sign that you need this is the following javascript error that is returned in Google Chrome:

Uncaught TypeError: Cannot read property 'frames' of undefined

If you are getting this error, include ‘wp_enqueue_media()‘ in your ‘admin_enqueue_scripts‘ action.

You can also take this a step further if you need to as the uploader returns more than just the url of the image. Within the ‘attachment‘ variable, you have the following details about the image:

  1. alt: “”
  2. author: “1”
  3. caption: “”
  4. compat: Object
    1. item: “”
    2. meta: “”
  5. date: Sat Aug 24 2013 17:07:22 GMT+1000 (EST)
  6. dateFormatted: “August 24, 2013”
  7. description: “”
  8. editLink: “http://yourdomain/wp-admin/post.php?post=72&action=edit”
  9. filename: “filename.png”
  10. height: 759
  11. icon: “http://yourdomain/wp-includes/images/crystal/default.png”
  12. id: 72
  13. link: “http://yourdomain/plugins/invoice-king-pro/filename/”
  14. menuOrder: 0
  15. mime: “image/png”
  16. modified: Sat Aug 24 2013 17:07:22 GMT+1000 (EST)
  17. name: “filename”
  18. nonces: Object
    1. delete: “a8cfae2025”
    2. update: “3b3bb96c34”
    3. __proto__: Object
  19. orientation: “landscape”
  20. sizes: Object
    1. full: Object
      1. height: 759
      2. orientation: “landscape”
      3. url: “http://yourdomain/wp-content/uploads/2013/08/filename.png”
      4. width: 971
      5. __proto__: Object
    2. medium: Object
      1. height: 234
      2. orientation: “landscape”
      3. url: “http://yourdomain/wp-content/uploads/2013/08/filename-300×234.png”
      4. width: 300
      5. __proto__: Object
    3. thumbnail: Object
      1. height: 150
      2. orientation: “landscape”
      3. url: “http://yourdomain/wp-content/uploads/2013/08/filename-150×150.png”
      4. width: 150
      5. __proto__: Object
    4. __proto__: Object
  21. status: “inherit”
  22. subtype: “png”
  23. title: “Image Title”
  24. type: “image”
  25. uploadedTo: 13
  26. url: “http://yourdomain/wp-content/uploads/2013/08/filename.png”
  27. width: 971

These fields can be passed into your plugin just the same as the URL is currently, just assign a new field and attach it with jQuery.