Title: inserting HTML into previous_comments_link
Last modified: August 19, 2016

---

# inserting HTML into previous_comments_link

 *  [dirkulese](https://wordpress.org/support/users/dirkulese/)
 * (@dirkulese)
 * [16 years, 12 months ago](https://wordpress.org/support/topic/inserting-html-into-previous_comments_link/)
 * Hello everyone,
    Is there a way to add css tags into the previous_comments_link?
   I need to add a span tag into the mix. The aim is to create a scalable button
   with images in the hover state. I’ve had a look around but I’ve yet to find a
   solution. Any help would be greatly appreciated.
 * Thanks
    Dirk

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [16 years, 12 months ago](https://wordpress.org/support/topic/inserting-html-into-previous_comments_link/#post-1121073)
 * Why not just put the code inside the HTML you want…
 * Example:
 *     ```
       <div class="example">
       <?php previous_comments_link(); ?>
       </div>
       ```
   
 *  Thread Starter [dirkulese](https://wordpress.org/support/users/dirkulese/)
 * (@dirkulese)
 * [16 years, 12 months ago](https://wordpress.org/support/topic/inserting-html-into-previous_comments_link/#post-1121259)
 * Thanks for getting back to me,
    The problem is that I need to change 2 background
   images on the hover state of the link (one for the image positioned left of the
   link and another for the image positioned right). By setting up the CSS in this
   way the link can handle any text length and still have an image in the background.
   Traditionally I’ve used `<a href="somewhere.html><span>link to somewhere</span
   ></a>` this allows me to style two elements (the `<span>` and the `<a>` tag) 
   on the hover state but when trying to apply this to `previous_comments_link` 
   the span sits on the outside of the a tag thus rendering it useless.
 *  [henkholland](https://wordpress.org/support/users/henkholland/)
 * (@henkholland)
 * [16 years, 12 months ago](https://wordpress.org/support/topic/inserting-html-into-previous_comments_link/#post-1121270)
 * I did it like this in the `single.php` :
 *     ```
       <div class="navigationcontainerbottom">
       			<div class="containerbottomtextalignleft"><?php previous_post_link(' %link', '&laquo; Ouder bericht', TRUE); ?></div>
       			<div class="containerbottomtextalignright"><?php next_post_link(' %link', 'Nieuwer bericht &raquo;', TRUE); ?></div>
       </div>
       ```
   
 * Then this is in `style.css`:
 *     ```
       .navigationcontainerbottom
       {
       	padding: 0;
       	font-size: 7pt;
       	font-weight: bold;
       	text-align: center;
       	margin: 4px 30px 6px 20px;
       	line-height: 12px;
       }
       .containerbottomtextalignleft
       {
       	float: left;
       	width: 110px;
       }
       .containerbottomtextalignright
       {
       	float: right;
       	width: 110px;
       }
       ```
   
 *  Thread Starter [dirkulese](https://wordpress.org/support/users/dirkulese/)
 * (@dirkulese)
 * [16 years, 12 months ago](https://wordpress.org/support/topic/inserting-html-into-previous_comments_link/#post-1121281)
 * Thanks for your input henkholland,
    But I dont think i’m explaining myself very
   well the code the php should produce would look like:
 * single.php (ignore the commers in the a tag!)
 * >  <div class=”alignleft”>'<a’><span>link to somewhere</span>'</a’></div>
 * style.css
 * >  .alignleft a:link{
   >  position:relative; float:left; background:url(images/arrow.
   > gif) top left no-repeat; }
   > .alignleft a:link span{
   >  position:relative; float:left; background:url(images/
   > arrow-back.gif) top left no-repeat; }
   > .alignleft a:hover{
   >  position:relative; float:left; background:url(images/arrow-
   > hover.gif) top right no-repeat; }
   > .alignleft span a:hover {
   >  position:relative; float:left; background:url(images/
   > arrow-hover-back.gif)top left no-repeat; }
 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [16 years, 12 months ago](https://wordpress.org/support/topic/inserting-html-into-previous_comments_link/#post-1121288)
 * OK try using…
 * `<div class="purely_example"><?php echo get_previous_comments_link(); ?></div
   >`
 * It’s the manner in which the function operates, try the above function instead…
 *  [garywgehiere](https://wordpress.org/support/users/garywgehiere/)
 * (@garywgehiere)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/inserting-html-into-previous_comments_link/#post-1121488)
 * Was the solution for this finished? I am also trying to replace the next and 
   previous comments link text with images.
 * My comments.php refers to:
 * `<?php next_comments_link() ?>`
 * And I’d like to replace it with an image. t31os_’s suggestion may work but I’m
   not sure what the corresponding CSS should look like. Does anyone have a complete
   example of the php and the CSS?
 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/inserting-html-into-previous_comments_link/#post-1121493)
 * You could try the newer paginate comments links function.
    [http://codex.wordpress.org/Template_Tags/paginate_comments_links](http://codex.wordpress.org/Template_Tags/paginate_comments_links)
 * Style classes are covered on that page.
 * All you have to do is apply CSS to those classes.. look at other classes in your
   stylesheet that use background images for examples.
 *  [72lakes](https://wordpress.org/support/users/72lakes/)
 * (@72lakes)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/inserting-html-into-previous_comments_link/#post-1121507)
 * Something odd I noticed. My left arrow is part of the anchor text, but my right
   arrow is not! So the arrow styles are different!
 * The code:
    `<?php previous_post('%','&laquo; ','yes'); ?>` `<?php next_post('%&
   raquo;','','yes'); ?>`
 * The output:
    `<a href="XXXXXXXX">&laquo; Title of Previous Post</a>` PERFECT!`
   <a href="XXXXXXXX">Title of Next Post</a> &raquo;` ARGH!
 * Does anybody know where to place `&raquo;` to get it to be part of the anchor
   text on the right side of the post title???? I’d like it to be part of the link
   and not just decoration on the sides.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘inserting HTML into previous_comments_link’ is closed to new replies.

## Tags

 * [edit](https://wordpress.org/support/topic-tag/edit/)
 * [hover](https://wordpress.org/support/topic-tag/hover/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 5 participants
 * Last reply from: [72lakes](https://wordpress.org/support/users/72lakes/)
 * Last activity: [16 years, 9 months ago](https://wordpress.org/support/topic/inserting-html-into-previous_comments_link/#post-1121507)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics