I want change some default wordpress functionality.

From Media library when we select a file and press "Insert into page" (other than image file) It inserts in format <a url="file_link"> Name </a> I want to change this default format.

option 1 : I want to add extra tags before A tag OR Option 2 : I want to assign extra classes to A tag depending on target file link extension.

because i want to design that A tag with file extension icon image (eg. like a download button.)


You can use CSS attribute selectors to accomplish this without changing anything in the WP Admin or the HTML. A Google search for "css file type icons" comes up with several results, but I'll explain the basic idea for you here.

An attribute selector lets you style any html tag with a matching attribute. There are many ways to use attribute selectors (input[type="text"], anyone?) but you need to grab the href value, particularly the file extension. For example, if you want to add a pdf icon before any pdf files, you could do something like this:

a[href$=".pdf"] { 
  background:transparent url(../images/pdf-icon.png) center left no-repeat;

The $ means that you're matching from the end of the string. This will work on all modern browsers, and even on IE7.

If you want to be extra-fancy, you could put all your icons in one image file, then use background positioning to get each one correctly adjusted:

a[href$=".pdf"], a[href$=".doc"], a[href$=".zip"] { 
  background:transparent url(../images/pdf-icon.png) no-repeat;
a[href$=".pdf"] { background-position: center 0; }
a[href$=".doc"] { background-position: center -20px; }
a[href$=".zip"] { background-position: center -40px; }

EDIT: (Thanks to @toscho!)

An even more fun trick is to add the icon as content: url(image.gif) rather than a background-image. That way you can control height & width, create more compact icon-sprite images, or even do fun things like using fonts for icons.

a[href$=".pdf"]:before {
  content: url(path/to/image);
  // more styles //

Take a look at IcoMoon custom icon font creator (free!) for an easy implementation.

  • Or content: url(/path/to/image); – fuxia Jan 6 '13 at 0:41
  • WordPress has some file icons in core. You can reuse those in an embedded stylesheet. – fuxia Jan 6 '13 at 1:24

There's a bit of a dirty hack, add this to your functions.php;

add_filter('wp_get_attachment_link', 'wpse7812_modify-attachment-link');
function wpse7812_modify-attachment-link($link) {
    global $post;
    return str_replace('<a href', '<a class="myClassName" href', $link);

Where myClasssName can be whatever you want.

  • in myClass we can add extension name as a class... and by default write styles for that extensions. :) – Makarand Mane Jan 24 '14 at 17:40
  • Sorry I'm not sure what you mean? You can change to "myClassName" to anything you want, even add multiple classes or other attributes. Be aware though, this solution will effect all attachment links, so when you insert images as attachment links then this will modification would be made for that too. – Michael Ruta Jan 28 '14 at 8:47
  • yes Michael, I am also saying Same thing. just take file extension from file link and write extension as class instead of myClassName. In style sheet write styles for .pdf{} .jpg, .doc{} – Makarand Mane Jan 29 '14 at 9:59
  • Yeah that could work. Good idea :) – Michael Ruta Feb 4 '14 at 8:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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