How to create browser-specific download links in wordpress

0 Views

Total WordPress newbie question here. I’d like to add a button to my website’s landing page that has a link to the latest version of my app for the browser platform the user is visiting from — similar to what Firefox has on its site: https://www.mozilla.org/en-US/firefox/new/

So the URL will look something like:
http://www.example.com/downloads/osx, but I want it to redirect to something more specific like http//www.example.com/myapp_1.6.3.dmg (so I don’t have to update my function each time I release a new version).

Read More

How is this normally done? It looks like I can write up a shortcode to do the browser-sniffing stuff, and then call the shortcode from the page using [bracket syntax]. But then what? Where is the redirect defined? I just need someone to connect the dots for me here.

Update for others trying to figure this out. Here’s what I did.

Functions.php

In the functions.php for my child theme, I added a function to generate the URL based on the OS reported by the browser, and registered the function in the init event: 

add_action('init', 'register_my_shortcodes');

function register_my_shortcodes() {
    add_shortcode( 'download_os_button', 'download_os_button_shortcode' );
}

function download_os_button_shortcode() {
  // Set the URL to whatever OS the browser is telling us (this can be spoofed)
  if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
    $url = 'downloads/osx';
    $text = 'Free Download - Mac';
  } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
    $url = 'downloads/windows';
    $text = 'Free Download - Windows';
  } else {
    // Linux or mobile -- just point them to the general downloads page
    $url = 'download/';
    $text = 'Downloads';
  }

  // Return this as a hyperlink
  return '<a class=download-btn href=' . $url . '>' . $text . '</a>';
}

WordPress Page shortcode

Now the shortcode [download_os_button] can be placed in a WordPress page, and will emit one of the following, depending on the OS: 

<a class="download-btn" href="http://www.example.com/downloads/windows">Free Download - Windows</a>
<a class="download-btn" href="http://www.example.com/downloads/osx">Free Download - Mac</a>
<a class="download-btn" href="http://www.example.com/download/">Downloads</a>

Note that the download-btn style will also have to be defined in your .css file for it to appear like a button.

The rest of the redirect stuff can be handled in a few ways. At the suggestion of our server admin guy I ended up using two .php files — one for each platform — to redirect; .../httpdocs/downloads/osx/index.php and .../httpdocs/downloads/windows/index.php respectively. The one in the osx directory looks like this: 

<?php
    header('Location: http://www.example.com/myapp_1.6.3.dmg');
?>

It requires that the redirect in those two files gets an update each time the product is released.

Also, for those that noticed the URL spelling for the Linux / mobile hyperlink, I’ve got a separate WordPress page with the full listing of downloads. If you do the separate .php route, make sure you have a different spelling or the .php file structure will take over and you won’t see your WordPress pages.

Post Views: 0

Related posts

1 comment

  1. 1) A shortcode and the redirection in .htaccess file

    You can create a self closing wordpress shortcode with 2 attributes. The text and the url: 

    // Copy this Shortcode to the function.php file located in your active child theme or theme.

if( !function_exists('download_dmg_shortcode') ) {

    function download_dmg_shortcode( $atts ) {

        // Attributes
        extract( shortcode_atts(
            array(
                'url' => '',
                'text' => '',
            ), $atts )
        );

        // Code
        return '<a class="button-dmg" href="' . $url . '">' . $text . '</a>';
    }
    add_shortcode( 'dload_dmg', 'download_dmg_shortcode' );

}

    You will use it this way:
    [dload_dmg url="http://www.example.com/downloads/osx" text="Download my App" /]

    You can change class name in the code and add more html tags, to feet your needs.

    You make the redirection in different ways, but you could do that in the .htaccess file, for example:

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RedirectMatch permanent /downloads/osx http//www.example.com/myapp_1.6.3.dmg
    # You can add this to force download for .dmg files:
    AddType application/octet-stream .dmg
</IfModule>

    2) A shortcode with included javascript in an onclick event (Best solution)

    This self closing wordpress shortcode has also 2 parameters, the text and the url. But this time the url is the redirection link:

    // Copy this Shortcode to the function.php file located in your active child theme or theme.

if( !function_exists('download_dmg_shortcode') ) {

    function download_dmg_shortcode( $atts ) {

        // Attributes
        extract( shortcode_atts(
            array(
                'url' => '',
                'text' => '',
            ), $atts )
        );

        // Code
        return '<a class="button-dmg" href="http://www.example.com/downloads/osx" onclick="event.preventDefault(); window.location.href = ''.$url.'';">' . $text . '</a>';
    }
    add_shortcode( 'dload_dmg', 'download_dmg_shortcode' );
}

    You will use it this way:
    [dload_dmg url="../myapp_1.6.3.dmg" text="Download my App" /]
    You will need to fine tune the path for url parameter adding or removing ../, depending on the page path where the shortcode is activated. It doesn’t work properly with the domain name…

    shortcode generator

Comments are closed.