Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Creating a Portfolio Single Page

Posted by Sarah Jee Watson
.a{fill-rule:evenodd;}techdegree seal-36
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 Points

Adding link text to Glyph icon.

Is it possible to add text (eg 'Previous page' & 'Next page' to the glyph icons/ arrows on the single project pages, so that both the icon and the text are links? 

                    <p><?php previous_post_link( '%link', '<span class="glyphicon glyphicon-chevron-left"></span>'); ?>Previous Project</p>

                    <p><?php next_post_link( '%link', '<span class="glyphicon glyphicon-chevron-right"></span>'); ?>Next Project</p>

The above adds the text but it doesn't link. :(

2 Answers

Shawn Ramsey
Shawn Ramsey
27,237 Points

I'll give it one more shot. Give this a try. I believe this will work.

<?php previous_posts_link( '<span class="glyphicon glyphicon-chevron-left"></span> Previous Project' ); ?>
<?php next_posts_link( 'Next Project <span class="glyphicon glyphicon-chevron-right"></span>' ); ?>
Sarah Jee Watson
.a{fill-rule:evenodd;}techdegree seal-36
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 Points

Cracked it - and I got there at the same time too! Thank you - much appreciated. :)

Shawn Ramsey
Shawn Ramsey
27,237 Points
Shawn Ramsey
Shawn Ramsey
27,237 Points

I don't have my local development open at the moment but it seems, using the HTML you provided, that something like this should work.

<?php previous_posts_link( __( '<span class="glyphicon glyphicon-chevron-left"></span> Previous Project' ) ); ?>
<?php next_posts_link( __( 'Next Project <span class="glyphicon glyphicon-chevron-right"></span>' ) ); ?>
Sarah Jee Watson
.a{fill-rule:evenodd;}techdegree seal-36
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 Points

Thanks for trying Shaun. This removes it altogether. I'm sure it's something really obvious - just can't work it out!