I am using a Page Links To plugin that allows me to link the post title to an external web page, rather than to the content of the post. And I link some of the post titles to external pages, and others â to pdf files, stored in the uploads folder of my site.
I want to add a little pdf icon to those post titles that are linked to pdf files. To be able to do so, I want to add .pdf
class to those post titles whose links end with .pdf
.
Here’s how the corresponding part of the page source looks:
<article id="post-123" class="post-123 post type-post status-publish format-standard hentry category-news">
<header class="entry-header">
<h1 class="entry-title">
<a href="http://www.mysite.com/path/to/directory/pdfs/mypdffile.pdf" title="My WordPress Post Title" rel="bookmark">My WordPress Post Title</a>
</h1>
</header><!-- .entry-header -->
<div class="entry-content">
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="http://www.mysite.com/path/to/directory/pdfs/mypdffile.pdf" title="1:19 pm" rel="bookmark"><time class="entry-date" datetime="2013-04-23T13:19:30+00:00">April 23, 2013</time></a>
</footer><!-- .entry-meta -->
</article><!-- #post -->
What would be the best way to do that in WordPress?
There is no need to add anything via WordPress, you can simple add the following rule to your CSS file:
This will target all links pointing to a URI ending in .pdf. This works in all modern browsers and from IE7 upwards.