1

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' );
  • Can you elaborate on what you mean by your site isn't working? What's the error message in your error log? Or do you mean the layout has been broken? – Tom J Nowell Dec 9 '14 at 16:45
  • Also what's the purpose of the extract call? – Tom J Nowell Dec 9 '14 at 16:46
  • I have edit the post for a more detailed question. @TomJNowell – Casper Dec 9 '14 at 16:52
  • Thanks, that shows what you've tried, though it doesn't explain the extract(shortcode_atts(array( $src = wp_get_attachment_url(); ), $atts)); and what you're trying to do with it, how did you intend your iframe shortcode to work? [iframe]http://example.com/thing.pdf[/iframe]? – Tom J Nowell Dec 9 '14 at 16:56
  • I thought you should use the extract function to get the src url from the PDF, but I think it isn’t correct if I heard you :) and nd I had in my head when you add the your PDF file with add media inside a post, there will be create an url of the file and that the user set the iframe shortcode around the link. But if you know a better way to do this, I like to hear it from you! – Casper Dec 9 '14 at 17:01
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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.