If an <a> link is a PDF file, style accordingly

3 Views

I am working on a website for a client, who is an exam board. They have a number of content pages with summary details about their syllabuses, and need to link directly to PDF Syllabus files from within the text.
There is also a page just for PDF files, and I am currently making those Custom Post Types in WordPress, but those have their own icon setup that I don’t want being affected by the PHP rule that I’m about to describe.
(This is more of a PHP question than a WordPress question, so don’t worry.)

Let’s say I have a link, New Syllabus. With WordPress, one is unable to add a class to the link, without knowledge of HTML, which in the case of my client and its rather old-school employees, is non-existent. They will be shown how to add links to PDF files using the Add Media button in the WordPress post or page editor, which will simply create a link to the .pdf file. This issue here is that it’s just a link, and the client wants users to immediately know that it’s a PDF file, and not a page, to make it easier to find the relevant syllabus files. Therefore, I’ve proposed creating a rule that adds a .png icon next to any link that is linking to a .pdf file, and it’ll change the link colour as well.

Read More

Does anyone have any idea how I could achieve this? I’ve looked for WordPress plugins that do this automatically, but they’re either outdated or hard to use (i.e., employees will need HTML knowledge to restyle the links.)

I found this code snippet online, but don’t know if it’s the right sort of direction. 

$whitelist = array(".pdf");

foreach ($whitelist as $item) {

    if (preg_match("/$item$/i", $_FILES['uploadfile']['name'])) {

    }
    else {

        redirect_to("index.php");
    }
}

Thoughts?

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. This can be done with just CSS and it supports all major browsers including IE7+. There is no need to add any extra classes or <img> elements.

    The CSS below will target any link to a .pdf, change the link color, give it some left padding and apply a background image in the space created:

    a[href$=".pdf"] {
    background: url(images/pdf-icon.png) no-repeat 0 50%;
    padding-left: 25px;
    color: red;
}

    Demo: http://jsfiddle.net/xuBpG/1/

  2. Try this:

    Add this code in your functions.php file.

    add_filter(‘media_send_to_editor’, ‘my_filter_pdf’, 20, 3);

    function my_filter_pdf($html, $id) {
    $attachment = get_post($id); //fetching attachment by $id passed through

    $mime_type = $attachment->post_mime_type; //getting the mime-type
    if ($mime_type == 'application/pdf') { //checking mime-type
        $src = wp_get_attachment_url( $id );

        $html = '<a href="'.$src.'" class="any-class-for-pdf-files">File</a>';
        return $html; // return new $html    
    }
        return $html;
}

    This is a function which will add a class to the .pdf anchor tag files when you will insert pdf file into the post.

  3. Using @tw16’s answer provides a simple and similar way to use Font Awesome icons rather than static images. For those looking to use Fontawesome or some other icon library that supports unicode, try this:

    /* MIME TYPE ICONS */
a[href$=".pdf"]::after {
  font-family: "fontawesome";
  content: "020f1c1";
  color: inherit
}
a[href$=".doc"]::after {
  font-family: "fontawesome";
  content: "020f1c2";
  color: inherit
}
a[href$=".xls"]::after {
  font-family: "fontawesome";
  content: "020f1c3";
  color: inherit
}

    Of course, you could use the ::before or ::after pseudo classes depending on where you want the placement of the icon to be (left or right).

    Thanks tw16 for the simplistic approach to this.