jQuery to Add Content to a Column with Header Copy

I have recently had to use jQuery to add some copy to a column in a table. The problem I had was identifying which column. In my case the each column had it’s own class eg: –

<th class=”column-1″>Model Number</th>
<th class=”column-2″>Height</th>
<th class=”column-3″>Width</th>
<th class=”column-4″>Enquiry</th>

What I wanted to do was add some html (including a variable that represented the enquiry form) to the Enquiry column, in this case it would be column-4.

This all looks pretty simple if you have the same number of columns for each table, but I didn’t, so I needed to look for the enquiry column, then mark it to add the code to. The workflow is therefore: –

  • Find the column class where the column header (th) has the text Enquiry
  • Mark that column class by adding an extra new class, in this case enqcol
  • Add the additional code to the column with the enqcol class

Our code is as follows: –

var classname = $( “th:contains(‘Enquiry’)” ).attr( ‘class’ )
$(‘table tr td.’+ classname).addClass(‘enqcol’);
$(‘td.enqcol’).html(‘<a href=\”‘ + enquiryform + ‘\”><img src=\”http://simongriffiths.name/images/enquriy-icon.png\” alt=\”Quick Quote\” width=\”15\” border=\”0\”></a>’);

The first line defines a variable called classname. This is set as the name of the class of the table header (th) that contains “Enquiry”. The result in the example above would be that classname=”column-4″.

The second line uses the variable above. It adds the class enqcol to any table cell (td) with the classname=”column-4″. Therefore at this point our code would be modified by jQuery to become: –

<th class=”column-1″>Model Number</th>
<th class=”column-2″>Height</th>
<th class=”column-3″>Width</th>
<th class=”column-4 enqol”>Enquiry</th>

The last line essentially looks for a table cell with the class enqcol (td.enqcol) and adds the html shown. In this case we are adding: –

<a href=\”‘ + enquiryform + ‘\”><img src=\”http://simongriffiths.name/images/enquriy-icon.png\” alt=\”Quick Quote\” width=\”15\” border=\”0\”></a>

Note that the \ allows the ” to show as part of the text to be added rather than being part of the code.

In this case you can substitute the html above with anything you like, but I am a variable “enquiryform” which is the URL of a page I have set elsewhere as a link and I am adding an icon rather than copy to link from.

It should be noted that this relies on each column being marked with a class. If this isn’t the case, you can probably add classes with jQuery before you run this step. You may even be able to modify this code to use the child number rather than looking for a class.

Retrieve REST Posts for Specific Pages

Update 18/10/2018

This is really not well documented, but I have a way that may suit your workflow better. Finding page ID’s can be a bit painful as different sites have different page ID’s. A better way might be to use the page slug. That is typically the page title in smalls, with the spaces swapped for dashes. For example, this page slug would be: –


Well, you can now use this in your url, so you might have something like: –


Where your page slugs are field and monarch and your page titles are Field and Monarch.

Where this is useful is if you are say recreating an archive (category/tag) page. Assuming your pages are titled the same as the pages on the site serving the REST (JSON) content, you can look for slugs of pages in the categories/tag in question on your site, then list them in this URL. This will give you a feed of all content from these pages so you can reconstruct an archive page from the feed.

After a lot of research I have finally found a way to retrieve specific pages from a WordPress REST site using it’s JSON feed. I should note that this is not complicated at all, just frustratingly badly documented!


In this case the link would go to mysite.com and retrieve the pages with ID’s of 8 and 528 only. Very useful for doing something like related pages.

As I said it’s not rocket science, but it’s taken me a really long time to find this!

Analytics Content Grouping Using WordPress Categories and Not using Googles Tag Manager

Analytics Content Grouping can be very useful to see how a range of products is doing in the market in a quick and intuitive way and also allows for some interesting insights that are hard to get to in any other ways.

In the past I have relied on manual tagging of pages, but over time as new pages are added, this manual tagging drifts and the ‘not set’ category increases. As a way to automatically group pages a great way would be to use WordPress categories and group based on category names.

Before I go any further I should add that most of the pages I want to group are product pages and all of them are in multiple categories. For example a product might be in a categories for products, industrial, steel and more. This method is based on picking out a few of those categories only as groups. In this case Industrial is the group I want to add this to. If you have pages with 1 category only, there are other methods that are even more automated (see below).

I should add that this method is loosely based on the article of https://www.highposition.com/blog/how-to-send-author-content-groups-wordpress-google-analytics/ and I will follow the same steps that they take you through: –

Step 1 – Configuring Content Groups

Log into your analytics account and click on the Admin link in the top menu bar. Select the account and property you want and in the View section on the left, you should see Content Grouping: –


We then need to create a new Content Group

Click the “Create New Content Grouping” button at the top.

Add in the title of your Group, in our case “Categories”.. but you can call it anything you wish.

Just below the title is where you select the tracking method you wish to use, we will be tracking via the GA javascript code, so click the first option, “Group By Tracking Code”, you don’t need to change anything on this screen, just press “Done” at the bottom.

Now do the same process again for any others you want to add to a maximum of 5, but when clicking the tracking code implementation option, make sure you change the “Index Number” option, so they are unique.

Step 2 – Modifying the Analytics Tracking Code

This article assumes that you are using the universal analytics code that Google has been pushing for some time. The code you have running on your site should therefore look something like this: –

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
ga(‘send’, ‘pageview’);


We want to change it to add an extra line as shown below (in this case to add the category name, which is industrial to contentGroup4, which is the one I set up in the step above: –

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
ga(‘set’, ‘contentGroup4’, ‘Industrial’);
ga(‘send’, ‘pageview’);


Find this code in your site. In theory it should be in the head section, but I load mine in the footer just in case Google is slow (which is quite often). You will often find this code in either the theme settings, a wordpress plugin or in the footer.php or header.php of the theme you are using. The code should look exactly as the top example above, so, after backing up, make a space between the ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’); and ga(‘send’, ‘pageview’); lines to type in your new code to add the content groups.

The code I am using assumes that you know the groups you want to track, you have a page in multiple categories (see below if you have 1 category) and you don’t have many groups (as each one needs a line of code).

if(in_category(’19’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial’);\n”;}
elseif(in_category(’16’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial2’);\n”;}
elseif(in_category(’18’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial3’);\n”;}
elseif(in_category(’11’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial4’);\n”;}

So this is very simple, each line checks to see if the page is in a particular category and if it is adds the analytics code to tag to page. In more detail:

if(in_category(‘19‘)) – Checks to see if the page is in category 19. You can get the category number easily by going to the category page in WordPress (under Posts), finding the particular category you want, then hovering your mouse over the top. In most browsers you will see the url of the link you would go to if you clicked. In that url you will see “tag_ID=19” in this case, but the number is the number you need to enter here.

{echo “ga(‘set’, ‘contentGroup4’, ‘Industrial’);\n”;} – This bit is just the code from analytics, but I have manually written in the category name. In this case Industrial. You could do this in code, but if I am setting the category ID for an individual line, you might as well just add it in manually. \n gives you the line break.

If you add that in to your analytics code it should look like the below: –

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
if(in_category(’19’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial’);\n”;}
elseif(in_category(’16’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial2’);\n”;}
elseif(in_category(’18’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial3’);\n”;}
elseif(in_category(’11’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial4’);\n”;}
ga(‘send’, ‘pageview’);


Once you load up a page this should then be tagged appropriately with the categories you have set.

Step 3 – Viewing Your Data

Once this new data has begun flowing in to your GA account, head over to your All Pages Report….  Behaviour -> Site Content -> All Pages

analytics-content-groups-setup2You will see a new option appear at the top of the report asking which content group you would like to see your pages grouped by. You should now see your groups in there. Select the group you want and it will show you pages together with useful on-site behavioural metrics. This can be very useful to see how certain sections or product ranges are performing against site stats over time.

Another interesting way to display this information is in a Dashboard. I particularly like to use the map view on the dashboard so I can see how particular groups are performing in different parts of the country or the world: –

If you have Single Category for Each Page

If each of your pages only has a single category, and you have a much larger range of categories. You may want to use this code instead as it automatically fetches the 1st category the post is in. Note that this is for Universal Analytics and also creates a group for the first tag. If you don’t want the tag group, just delete that section: –

<?php if (is_single()){
while(have_posts() ) : the_post();

$category = get_the_category();
if ($category && !empty($category[0]->cat_name)){
echo “ga(‘set’, ‘contentGroup4’, ‘”.$category[0]->cat_name.”‘);\n”;

$tag = get_the_tag();
if ($tag && !empty($tag[0]->tag_name)){
echo “ga(‘set’, ‘contentGroup5’, ‘”.$tag[0]->tag_name.”‘);\n”;

endwhile; // end of the loop.


<?php if (is_single()){
while(have_posts() ) : the_post();


endwhile; // end of the loop.

This section just makes sure that the page includes a single post only.

$category = get_the_category();

This section creates a group (array) of categories.

if ($category && !empty($category[0]->cat_name)){

This makes sure there is a category assigned and if there is applies the category name rather than the ID number or slug.

echo “ga(‘set’, ‘contentGroup4’, ‘”.$category[0]->cat_name.”‘);\n”;

This is the section that actually writes the line into the page html (echo). In this case the start of that is all just text from Google analytics. Change contentGroup5 to whatever content group you have set in the Analytics admin panel. The options are basically contentGroup1 to contentGroup5. The next bit ‘”.$category[0]->cat_name.”‘ is really the crucial bit that pulls in the category name. This will be the first category on the list you see in the pages, All pages list in WordPress.

WordPress Redirect to Mobile Site

In a very short time Google will start to emphasize sites that are specifically designed to be viewed on mobile. In many cases that will be by the inclusion of a mobile style sheet, so that the user will see the same content, but in a design that fits with their user experience.

But what do you do if you have a mobile specific site?

Google does have some directs on https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls?hl=en, but if you have a read through these, they seem to be more based around static sites, or sites with only a very few pages. So what happens if you have several hundred pages that need to be redirected to the same page but on a different url, eg https://www.example.com needs to be redirected to http://example.mobi AND https://www.example.com/page1.htm needs to redirect to http://example.mobi/page1.htm.

It’s actually easier than it looks, but weirdly there doesn’t seem to be any published code for it, so here goes!

First I should add that in my particular case the mobile site (http://example.mobi) was a static site, and already had the canonical tags added. Each page referred to it’s parent page as follows: –

<link rel="canonical" href="http://www.example.com/page1.htm" >

So on that side of things I didn’t need to do anything. Also the page url (by which I mean page1.htm, page2.htm etc), were also exact equivalents. If one site had something like page1/ or page1.html though, you could apply the same technique.

If you mobile site is also wordpress based, again the same code can be used as long as page names are the same.

Adding the link rel=”alternative”

Google recommends that: –

On the desktop page (http://www.example.com/page-1), add:

<link rel="alternate" media="only screen and (max-width: 640px)"
      href="http://m.example.com/page-1" >

One a larger site, or in wordpress that mean that you need either something to manually add in the mobile url, or you need to generate it automatically. I chose to do the latter as the site has over 250 pages! To do this you will need to edit your header.php file.

  1. Before you start, whatever you are doing take a backup of your header.php.
  2. I would recommend editing this file using an external editor like Dreamweaver or Coda and uploading it. That way if anything does go wrong, you can just upload the previous version. However, this is amazingly simple, so I didn’t follow my own advise and I actually edited it in Appearance >> Editor, then chose my theme and header.php
  3. Scroll down in the code to a place where you want to add your line in, add a few spaces so you have room and paste the following: –

$urlDesktop = array(“https://www.”, “com”);
$urlMobile = array(“http://”, “mobi”);
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”<?php echo str_replace($urlDesktop, $urlMobile, get_site_url() . $_SERVER[‘REQUEST_URI’]); ?>” >

In this case what we are doing is: –

  1. Creating 2 arrays. These are basically 2 places to store the elements in the url you want to swap out. So in my case urlDesktop contains the sections of the desktop url I wanted to swap, and urlMobile contains the sections I want to swap in. NOTE that the positions must be exactly the same ie the first item in one array swaps with the first in the other etc. You can make as may changes as you want in here as long as each array has the same number of elements. Also note that the Desktop array includes the “.” after “www”. If you leave that off, you will get “http://.example” in your final result. Not what you want.
  2. Add in the code as per Googles advise, but the link includes some php. This
    1. Requests the URL of the page that the code is on
    2. Then swaps out sections you built in your arrays, swapping the urlDesktop sections with the urlMobile sections.

That’s it! Just save your header.php file and you will now get the required Google code on each of your pages, pointing to the mobile site.

What to do if your urls don’t match

So if you have a site as large as the one I’m working on, there are a few pages where the urls don’t exactly align. Typically that might be when you get something like: –

  • Desktop site – http://www.example.com/page-1.htm
  • Mobile site – http://www.example.com/page1.htm

The easy way to handle this, if there are only a few of them is to rename the pages! However, for whatever reason you may decide not to do this. You could use your same arrays and just add the pages in there. eg

$urlDesktop = array(“https://www.”, “com”, “page-1”);
$urlMobile = array(“http://”, “mobi”, “page1”);

If you do this, make sure there are no page-10’s though as these would then be swapped to page10’s.

Adding a Default Category to a WordPress Custom Post

I have been searching for a way to add a default category into a WordPress Custom Post and finally got to a method that seemed to work for me. The explanation I came across was a bit vague so I thought I would try and clear it up here: –

The Code

// Adds the category to the jobs post automatically

function add_jobs_category_automatically($post_ID) {
global $wpdb;
$cat = array(139);
wp_set_object_terms($post_ID, $cat, ‘category’);
add_action(‘publish_job’, ‘add_jobs_category_automatically’);


line 1: function add_jobs_category_automatically($post_ID) {

This just sets the name of the function, in this case “add_jobs_category_automatically” declares it as a function and says what it applies to.

CHANGE ‘add_jobs_category_automatically’ to anything that will make sense to you.


line 2: global $wpdb;

Ok, I’m guessing at some of these, but I would say that this means that the function applies globally to the wordpress database

CHANGE: Nothing


line 3: if(!has_term(”,’category’,$post_ID)){

Some WordPress gubbins!

CHANGE: Nothing


line 4: $cat = array(139);

This is the category number you want to apply to the custom post. In my case it was 139, but yours could be anything.

To find the category number in your WordPress admin interface, go to Posts, Categories and mouse over the category you want to add automatically. You should see a number under category&tag_ID=139, the number is what you need (if you can’t see it by mousing over copy the link and paste it somewhere, it should look something like http://www.mysite.com/wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=139&post_type=post. Just copy the number and paste it into this line.

CHANGE: The number to your category


line 5: wp_set_object_terms($post_ID, $cat, ‘category’);

Some WordPress gubbins

CHANGE: Nothing


line 6, 7 just closing brackets
CHANGE: Nothing


line 8: add_action(‘publish_job’, ‘add_jobs_category_automatically’);

This is the tricks one, so I will break it into 3 parts

add_action – Some WordPress Gubbins – CHANGE: Nothing

publish_job – This says what your custom post type is called that this should apply to. In my case it is the job in publish_job. You will need to change the job to your custom post type.

To find this go to your custom posts, to the page where they are listed. The URL of the page is key. In my site it is http://www.mysite.com/wp-admin/edit.php?post_type=job. You need what comes after the post_type= in this url. As you can see mine is job.
CHANGE: publish_job, the job to your custom post type.

add_jobs_category_automatically – This is the function you created in line 1, so you should change this to the function name you made there. In my case line 1 was “function add_jobs_category_automatically($post_ID) {“, so you can see that the bit you need is between “function” and “($post_ID)”
CHANGE: All of it to your function name in line 1


You need to add your final code into the functions.php file, somewhere before the closing ?> tag. In mine I added it just after the function to create the custom post. So that whole section looks as follows: –

// Add Careers Custom Post Type

add_action( ‘init’, ‘register_cpt_job’ );
function register_cpt_job() {
$labels = array(
‘name’ => _x( ‘Careers’, ‘job’ ),
‘singular_name’ => _x( ‘Job’, ‘job’ ),
‘add_new’ => _x( ‘Add New’, ‘job’ ),
‘add_new_item’ => _x( ‘Add New Job’, ‘job’ ),
‘edit_item’ => _x( ‘Edit Job’, ‘job’ ),
‘new_item’ => _x( ‘New Job’, ‘job’ ),
‘view_item’ => _x( ‘View Job’, ‘job’ ),
‘search_items’ => _x( ‘Search Careers’, ‘job’ ),
‘not_found’ => _x( ‘No careers found’, ‘job’ ),
‘not_found_in_trash’ => _x( ‘No careers found in Trash’, ‘job’ ),
‘parent_item_colon’ => _x( ‘Parent Job:’, ‘job’ ),
‘menu_name’ => _x( ‘Careers’, ‘job’ ),
$args = array(
‘labels’ => $labels,
‘hierarchical’ => false,
‘description’ => ‘Careers section for displaying jobs on the site.’,
‘supports’ => array( ‘title’, ‘editor’, ‘excerpt’, ‘author’, ‘thumbnail’, ‘custom-fields’, ‘revisions’, ‘page-attributes’ ),
‘taxonomies’ => array( ‘category’, ‘post_tag’ ),
‘public’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘show_in_nav_menus’ => true,
‘publicly_queryable’ => true,
‘exclude_from_search’ => false,
‘has_archive’ => true,
‘query_var’ => true,
‘can_export’ => true,
‘rewrite’ => true,
‘capability_type’ => ‘post’
register_post_type( ‘job’, $args );

// Adds the category to the jobs post automatically

function add_jobs_category_automatically($post_ID) {
global $wpdb;
$cat = array(139);
wp_set_object_terms($post_ID, $cat, ‘category’);
add_action(‘publish_job’, ‘add_jobs_category_automatically’);

The green text at the top is my custom post type and the blue test at the bottom is the code to set my default category in the custom post.

Aldi Mobile – Review

I have been a big supporter of Aldi Mobile and have recommended it to many people. The service is Telstra 3G, so as long as you haven’t got a need for 4G support it seems to offer great value for money.

However, recent changes to Aldi plans and terms of services have shown another side to their business, which I for one do not like a bit.

Aldi Mobile Plans

Previously Aldi had an Unlimited plan which for $35 per month offered you unlimited call, texts and 5GB of data. This was great value, but in a recent change, they have slashed this to 2500 minutes of calls, 2000 SMS and 2.5GB of data.

To sweeten the deal, there was obviously a price reduction involved…actually not! They halved the data and restricted the call time but kept the price exactly the same.

On top of this, they have introduced a ‘fair use’ policy that, well… it’s hard to define it as being fair in any shape or form. This amongst other things adds that: –

  • You can’t make more than 300 mins of calls, 300 SMS or download more than 400MB of data per day for 3 consecutive days
  • You can’t make more than 480 mins of calls, 500 SMS or download more than 1000MB of data on any given day

These apply to any mobile plan or addons.


Now forgive me if I’m wrong, but if I buy a 2GB data pack for the month I expect to be able to use it as and when I like. Typically I use on average 50-80MB per day when not on wifi, so I then let my son use it to watch youtube videos while I was out at dinner. Guess what, that is apparently not fair use!

I should add that I got no warning that the usage was too high, until I got a email threatening to cut me off 24 hours later.

I should note again that I have paid for the data, and lets face it. If they have a number of customers, it shouldn’t matter to them if I use it on any one day or another as the affect would be spread out amongst their customers.


Aldi’s plans are still a great deal if you … don’t use your phone much and do that consistently. The previous unlimited plan is no longer the value it once was and data restrictions mean that the data packages have become next to useless too.

Probably my biggest complaint is the way Aldi’s have done this. They slashed the value of a previously good plan while maintaining the price and enforced new ‘fair usage’ policy that is anything but fair.

It is true that Telstra and others have similar policies on fair usage, but these tend to be far less restrictive, certainly on the data side where a monthly limit is what you tend to get. It’s almost funny that at the same time as pushing services like Foxtel Go, services such as Aldi’s don’t seem to understand that minutes of video streaming is a huge amount of data.

My advice, after being a huge advocate for them is to probably steer clear. Most of us with a smart phone will have times when we use data heavily and having Aldi come down and say a day after the event: –

If this is the second time you have breached section 5.3 of our Acceptable Use Policy, then your service will be suspended. We will attempt to contact you before we suspend your service to let you know when it is going to happen. This suspension will block both your incoming and outgoing calls, but you will still be able to make calls to 000 emergency services and the ALDImobile service centre on 2534. You will need to find a new provider and transfer your number to them.

Thankfully this was first time being caught by this but it is certainly not my idea of a great service!

Slidedeck: How to Add Individual Slidedecks to page headers

If you are like me, you love Slidedeck (http://www.slidedeck.com) for the ease of use for me and my clients when I have handed over the site.

Typically I use Slidedeck for what is known as a hero slides how on the home page and very occasionally on the page itself and Slidedecks combination of methods of site integration makes this really easy.

However, what if you have a site that needs to have product slideshows in the header area? Again, it’s easy if you can have a layout for each page, but the problem comes in where you need a single say ‘products’ layout to cover a large range of products/pages. There is just no way to change the slideshows on a per page basis, if the slideshows is to be in the header.

The solution is actually much easier than you would probably think. Using a combination of Slidedeck with another plugin (Advanced Custom Fields), and a small piece of php code inserted into your theme. Using this method you should be able to:-

  • Provide a visual way to enter a Slidedeck code into an individual page
  • Allow product (or similar) pages to show slideshows in the header rather than on the page. Even if they use the same theme template

This will take the form of step by step instructions. It’s worth noting that I am no php coder, so any additional help with the code beyond what I did to ‘make it work’ would be appreciated.

  1. In your copy of WordPress, install Slidedeck and create a slideshow as an example we can use.
  2. Install the plugin “Advanced Custom Fields”. This is what will allow you to create both the visual interface and the field of information the post needs to know which slideshow it needs to display
  3. Once you have advanced custom field installed, you will see Custom Fields at the bottom of the left side menu bar in WordPress.
  4. I created a custom field called Page Sliders, and gave it the settings as follows: –
    Advanced Custom Field Setip
    Advanced Custom Fields Setup
    You can see from the above that I have a home page template where I don’t want to show this as an option, as it will use a standard template and slideshow with a slightly different layout. Selecting “Standard Metabox” ensures that there will be a box for the WordPress page editor.
    My description is probably a bit over wordy btw, but I have done this assuming it won’t be changed for a while and the user will more than likely have forgotten what to do when they need to make changes.
  5. All the above should give you is something like the below. This gives you an area in your page to add the Slidedeck shortcode, so that it will be stored with the page. At the moment, that is all that this does as we have not yet integrated the code we need into the theme.
    ACF in WordPress interface
  6. Now here comes the hard bit unfortunately! We need to edit our theme. It’s actually easier than it sounds, but I would advise you to back up the theme code before you start to edit it. You can either FTP the theme to your local machine, or even copy all the code and paste it in a text file. You do all this in <Appearance><Editor> from the WordPress sidebar.
  7. Typically when you open the editor you will see your themes CSS file. If you have set up various page templates, you will also see those listed, otherwise you will just see the one template, the header template, footer template etc.
    Which one of these you want to edit depend on your theme. I would start by looking at the header, where you will probably see, the head section of the document, then the header of the site, then the navigation, then the top of the main content area. In my case I want the slideshow under the navigation and in the main content area, so instead of the header.php I can put the code in the page template.
  8. Opening up the page template, you will see some code to get the get the header <?php get_header(); ?>, so the code is to go under that in my case (just above the main content). The code you need is: –
    <link rel=’stylesheet’ id=’slidedeck-css’ href=’http://www.webxopt.com/wp-content/plugins/slidedeck-lenses/half-moon-1a/lens.css?v=1.0′ type=’text/css’ media=’screen’ />
    <div id=”slider-custom” style=”position:relative;left:-20px;top:-24px;”>
    $sliderdeck = get_field(‘slidedeck_shortcode’);
    <?php echo do_shortcode($sliderdeck); ?>
    </div> <!– slider-custom –>This links to the slidedeck css files (in my case I used the half moon slidedeck style, so linked to that), creates a new div (the styles included were required for my theme, but you may need to change the numbers), then get the slidedeck shortcode from the custom field in the page, then add it into template.
  9. Hopefully that should now all be done. The only thing left to do is set up the page.
  10. You can go and get a shortcode directly from slidedecks interface, but for me the easiest way is to copy the code in the explanation, then change the number according to the slidedeck you want.
    The above shows the interface on the post page and the below in slidedeck. Note that you have to mouse over the deck you want to get the ID number.
  11. Your end result should look something like “[SlideDeck2 id=2641]”. When you preview the page, you should now see your custom slidedeck up in the head of your page.

Hopefully, this will help anyone who has been battling with this problem as I have. If you have any comments, please leave them below. PHP code suggestions would be particularly helpful!

Fixing a MacBook Pro with Liquid on the Keyboard


I had the misfortune the other day of spilling Ribena on the keyboard of my MacBook Pro. A short while later I got the sad Mac icon and it refused to boot up properly. I thought I would write down what I did to get to the stage where I am now typing out this article on the previously broken computer.

The first step is to take the system into Apple. In my case despite trying to be as nice as possible, the sales ‘genius’ was that busy writing it off on their system that he almost forgot I was now without a computer. Basically he said (without ever looking inside it) that they would need to replace everything and the cost of doing that was slightly more than a new MacBook Pro. I did manage to get him to run a software check and that basically told me that the hard drive was not doing so well.

So knowing that the computer is said to be a write off, I thought that I might as well try and revive it myself, but I needed to buy a few things to do some testing.

First thing was to test that the computer was still functional. I was lucky here as I create a mirror back up on an external hard drive every week. If you don’t though, create a recovery disc and try and boot into that. In my case from the external drive everything booted and ran ok.

The next thing I bought was a USB to SATA connection device. In the Australia you can get these from jaycar ( http://www.jaycar.com.au/productView.asp?ID=XC4145&CATID=93&form=CAT2&SUBCATID=1044#6) or buy from OWC Macsales ( http://eshop.macsales.com/search/uda). These devices allow you to take your hard drive out and try to connect to it.

It’s pretty easy to open up your MacBook. Follow the instructions on the Macsales website ( http://eshop.macsales.com/installvideos/) to take off the back and remove your hard drive. You might be using these later too.

Once you have the drive out, plug it into your USB device and try to connect to it from another machine. I couldn’t on my system.

Next step is to buy another hard drive. I would do this from OWC again and in my case I picked a similar drive to the existing one which was 750GB at 5400rpm. You could go to any drive you want so SSD for the ultimate in speed or for a bit of a boost a 7200rpm drive. I didn’t go with higher speed as I am a bit worried about heat of a faster spinning drive in a notebook in Brisbane, Australia, but now I regret not going for an SSD which is probably the ideal combination of speed and fast access.

When my drive came a few days later I mirrored the hard drive copy I had, from a back up via Carbon copy cloner or super dooper onto the new drive then installed that into the MacBook. If you are lucky here that’s as far as you need to go. In my case though that still didn’t work.

What I found was that I still couldn’t boot onto the new drive, but if I booted onto a USB drive, I could see it.

The next step was then a reformat of the drive again and cloning the drive from the USB.

With the newly re-cloned drive, I could not only see files, but it will boot quite happily.

The end result is a MacBook Pro that was written off by Apple, is now perfectly good and will probably last me for another couple of years. The only compromise is the lack of a DVD drive. As I rarely use this and I have the old drive as an external drive using the OWC DVD drive enclosures, this doesn’t seem to be too much of a problem.

Bauhn / Aldi Hard Drive Docking Station Review

I bought one of these a few months ago, but they seem to repeatedly come up when Aldi’s are doing a tech special week.

The only thing I can say is DO NOT BUY!

They have a fundamental problem in that they don’t fit any hard drives! I have tried 6 different drives from 2.5″ laptop drives to 3.5″ full desktop drives and none of them fit!

The problem seems to be that the plastic casing gets in the way of the the drive mounting into the sockets. This doesn’t seem to be a tolerance error on this particular unit either as the case is locked into a base. I haven’t taken this all apart yet (as that looks like a nightmare of a job), but I really should not need to do that, and neither should you. Just don’t be fooled into buying it!

I also tried the After Sales Support telephone number on the bottom of the unit and that is unobtainable!

btw. This one is a Bauhn Product Number 36732.photo 1 photo 2


Sociable Widget in WordPress

I use the Sociable plugin on a couple of the blogs I look after and was surprised to see that there is no sidebar widget. That means that if you want to add social icons to your home page and that features a few different posts, essentially you can’t.

After looking at this a few different ways I managed to pick out the code from the plugin and adapt it to be used in a text Widget. The code is as follows with the things to change shown in blue: –


<div class=’sociable’ style=’float:none’>
<ul class=’clearfix’>
<li id=”Facebook_Counter”>
<iframe src=”http://www.facebook.com/plugins/like.php?href=http://www.yoursite.com/yourpageifany/&send=false&layout=button_count&show_faces=false
&action=like&colorscheme=light&font” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden;height:32px;width:100px” allowTransparency=”true”></iframe>
<li id=”Twitter_Counter”>
<a href=”https://twitter.com/share” data-text=”Your Site/Page – http://www.yoursite.com/yourpageifany/” data-url=”http://www.yoursite.com/yourpageifany/” class=”twitter-share-button” data-count=”horizontal”>Tweet</a><script type=”text/javascript” src=”//platform.twitter.com/widgets.js”></script></li>
<li id=”LinkedIn_Counter”><script src=”http://platform.linkedin.com/in.js” type=”text/javascript”></script><script type=”IN/Share” data-url=”http://www.yoursite.com/yourpageifany/” data-counter=”right”></script></li>
<li id=”Google_p”><g:plusone annotation=”bubble” href=”http://www.yoursite.com/yourpageifany/” size=”medium”></g:plusone></li>
</div><!– End Sociable –>


The green highlight was because the row of icons can’t display across the sidebar so tends to go all over. You can modify this by closing one unordered list (ul) and opening another.If you include a lot of icons just repeat this.

I should add at this point that this is for the big 4! Facebook, Google, LinkedIn and Google+. If you include more you will need to view the code of a page with the Social plugin on it, search for sociable then copy the code and change the page details.

Once you have your code sorted out, just go to your WordPress Widgets area, add a text widget and paste your code in. With any luck it should all flow in and include the correct number of likes etc for the page.