How to create a shortcode for embedding pdf in iframe?

Question

General information

I am creating a site with WordPress. For the content I want that the PDF files can be embedded inside an iframe. So I first created a WordPress function to hook in media_send_to_editor, but the problem with this function is, that the iframe will reserve a lot of space inside the visual editor of WP, so other editing to that page isn’t good for the usability.

So I thought, I should looking for a shortcode to embed the PDF file inside an iframe.

Problem

I am trying to create a WordPress shortcode that will get the src of the PDF file and paste it inside the src attribute, so the PDF will be visible inside the iframe. Only the below snippet of code will give me a white screen of WordPress, that isn’t working anymore.

Look out for some advice. Thank you.

function embed_pdf_files( $atts, $content = null ) {

    extract(shortcode_atts(array(
        $src = wp_get_attachment_url();
    ), $atts));
    return '<iframe width="100%" height="1000" src="' . $content . '"></iframe>';

}
add_shortcode( 'embed_pdf' , 'embed_pdf_files' );

Answer 1

It depends on how you want the pdfs added but this should probably be a cover all:

function embed_pdf_files( $atts, $content = null ){

    //add default attributes here.
    $defaults = array(
        //'width' => '100%',
        //'height' => '1000'
    );

    //This overwrites defaults with the attributes in shortcode
    $a = shortcode_atts( $defaults, $atts );

    $src = $a['src'];

    //If no src present, get src by attachment id
    if( ! $src && $a['attachment_id'] ){
        $src = get_attachment_link( $a['attachment_id'] );
    }

    //If no src or content (srcdoc), return nothing.
    if( ! $src && ! $content ){
        return '';
    }

    //Comment out/in the attributes you want to allow the editor control over
    $html_attrs = '';
    //src
    $html_attrs .=  $src ? ' src="' . esc_attr( $a['src'] ) . '"' : '';
    //srcdoc
    $html_attrs .= ( ! $src && $content ) ? ' srcdoc="' . esc_attr( $content ) . '"' : '';
    //width
    $html_attrs .=  $a['width'] ? ' width="' . esc_attr( $a['width'] ) . '"' : '';
    //height
    $html_attrs .=  $a['height'] ? ' height="' . esc_attr( $a['height'] ) . '"' : '';
    //seamless
    $html_attrs .=  array_key_exists( 'seamless', $a ) ? ' seamless' : '';
    //name
    //$html_attrs .=  $a['name'] ? ' name="' . esc_attr( $a['name'] ) . '"' : '';
    //sandbox
    //$html_attrs .=  $a['sandbox'] ? ' sandbox="' . esc_attr( $a['sandbox'] ) . '"' : '';

    //These are the global html tag attributes - remove any you don't want editable
    $global_attrs = array( 'accesskey', 'class', 'contenteditable', 'contextmenu', 'dir', 'draggable', 'hidden', 'id', 'lang', 'spellcheck', 'style', 'tabindex', 'title' );

    for( $i = 0; $i < count( $global_attrs ); $i++ ){
        $html_attrs .=  array_key_exists( $global_attrs[$i], $a ) ? ' ' . $global_attrs[$i] . '="' . esc_attr( $a[ $global_attrs[$i] ] ) . '"' : '';
    }

    return '<iframe' . $html_attrs . '></iframe>';

}
add_shortcode( 'embed_pdf', 'embed_pdf_files' );

This should be in your functions.php or in your own plugin or somewhere similar.

I commented out the attributes that can be potentially hazardous, but if you need them, they are there.

The editor can then use something like this:

...

[iframe class="my-iframe" src="http://example.com/mypdf.pdf"][/iframe]

...

or

...

[iframe id="my-iframe" attachment_id="193"][/iframe]

...

or

...

[iframe class="my-iframe"]<p>My paragraph in an iframe</p>[/iframe]

...

References: W3C Wiki on iframe element, WP codex on shortcode api.