WordPress.org

Ready to get started?Download WordPress

Forums

inserting HTML into previous_comments_link (9 posts)

  1. dirkulese
    Member
    Posted 5 years ago #

    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

  2. Mark / t31os
    Moderator
    Posted 5 years ago #

    Why not just put the code inside the HTML you want...

    Example:

    <div class="example">
    <?php previous_comments_link(); ?>
    </div>
  3. dirkulese
    Member
    Posted 5 years ago #

    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.

  4. henkholland
    Member
    Posted 5 years ago #

    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;
    }
  5. dirkulese
    Member
    Posted 5 years ago #

    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;
    }

  6. Mark / t31os
    Moderator
    Posted 5 years ago #

    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...

  7. GaryWGehiere
    Member
    Posted 5 years ago #

    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?

  8. Mark / t31os
    Moderator
    Posted 4 years ago #

    You could try the newer paginate comments links function.
    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.

  9. 72Lakes
    Member
    Posted 4 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic