Member Avatar for mwnt2014

Detect mobile browser for android and iphone..

Want to Use below code as in wordpress post

if(strstr($_SERVER['HTTP_USER_AGENT'],'Android')){

      echo '<img src="/images/android.png">';

      }
      else if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone'))
      {
          echo '<img src="/images/iphone.png">';
    }
    else {
         echo '<img src="/images/Download-now-button.png">';
        }
  • 2 Contributors
  • 1 Reply
  • 228 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Ajay Gokhale

Dani AI

Generated

wanted mobile-specific images inside a post and suggested a footer plugin. That works, but a cleaner, more flexible pattern is a shortcode you can place exactly where you need the image. Shortcodes avoid editing templates and avoid echoing from the footer when you only want the image inside content.

Use a small function (drop into your theme's functions.php or a tiny plugin) that detects the user agent, returns an image HTML string, and registers a shortcode. Example:

function dw_mobile_button_shortcode( $atts = array() ) {
    $ua = isset( $_SERVER['HTTP_USER_AGENT'] ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
    if ( strpos( $ua, 'android' ) !== false ) {
        $src = '/images/android.png';
    } elseif ( strpos( $ua, 'iphone' ) !== false || strpos( $ua, 'ipad' ) !== false ) {
        $src = '/images/iphone.png';
    } else {
        $src = '/images/download.png';
    }
    return '<img src="' . esc_url( $src ) . '" alt="Download">';
}
add_shortcode( 'mobile_button', 'dw_mobile_button_shortcode' );

Then place [mobile_button] in a post. Notes and cautions: user-agent sniffing is brittle—consider wp_is_mobile() when you only need “mobile vs desktop.” If your site uses full-page caching, server-side detection can serve the wrong image to cached visitors; client-side JS or responsive techniques (CSS media queries or <picture>) avoid that. Always sanitize paths (esc_url), include alt text, and clear caches after changes. If you prefer Ajay’s footer method for site-wide output, keep caching and scope in mind.

Member Avatar for Ajay Gokhale

Hi,

As per my understanding you want to include above code to all posts / pages. is it correct?

I suggest you to create a small plugin and apply code to the footer. Below is the plugin code. Create a file i.e. "wp_plugin.php" and copy all code on it. Pleace "wp_plugin.php" in wp-contnet/plugin/"wp_plugin.php". Go to your Admin panel and actiate it. You can see your code at footer on Post or Page (Not in Admin)

<?php
/*
Plugin Name: Add code to footer (By Ajay)
Description: Add your custom code to Post / Page footer
Version: 0.1
Author: Ajay Gokhale
Author URI: http://www.facebook.com/Amilextech
License: GPL2
*/

function display_custom_code()
{
    //Get some blog info if you want to use 
    $bloginfo = get_bloginfo();
    $blog_name = get_bloginfo('name');  

    $theme_info = get_theme_info($blog_name);
    $output = '';
    // Your custom code
    $output .= 'Your custom code for footer';
    $output .= 'More Your custom code for footer';

    echo $output;
}

//Add to Footer
add_action('wp_footer', 'display_custom_code');

?>

Please check and let me know.
Thanks,
Ajay

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.