Archived

This topic is now archived and is closed to further replies.

  • 0

Adding a CSS Class to the Read More Link


Question

Posted · Report post

Ideally, I want to customize the read more link, so instead of being just a plain text link, it should become a button through the css class btn btn-primary. I have followed the instructions mentioned in this post (http://www.pagelines.com/forum/topic/23854-how-to-customize-read-more-link/) but for some reason it didn't work.

 

add_filter( 'continue_reading_link', 'custom_reading_link' );

function custom_reading_link( $link ) {

  $link = str_replace( 'class="', 'class="btn btn-primary ', $link );

// now return new link

return $link;
}

This basically inserts the .btn & .btn-primary classes into the continue reading link.

 

I added the above code, however it didn't work. For some reason, the CSS classes are not added to the link. In order to check whether there was something wrong in general, I tried to customize the text using the continue_reading_link_text (instead of the continue_reading_link) and it worked perfectly fine.

It seems to be the case that for some reason the $link parameter does not work. I tried resetting the $link variable to something random (like "http://www.google.com"), but it also didn't change the link. I really don't know what the issue is.

The site I tried this on is www.friendsandcooks.com. Thanks for your help!

 

 

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

Hi there, yes you could use css to style the read more link into a button. Take the code from the btn class and apply it to the read more link, paste the css code into the custom code box or into the style.css of the base theme or customize plugin.

 

Custom text for the read more link can also be set if required in Pagelines>site options>blogs and posts.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

I've added the code from that page in your link as Danny pasted it and it's added the classes for the buttons perfectly - http://screencast.com/t/BnNX5DVy4 You do have the base theme as the active theme in appearance>themes?

add_filter( 'continue_reading_link', 'custom_reading_link' );

function custom_reading_link( $link ) {

  $link = str_replace( 'class="', 'class="btn btn-primary ', $link );

// now return new link

return $link;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Yeah, I see it. When I add the code through the Chrome Dev Tools extension, the links look like buttons too. But for some reason, it doesn't add it to the link. I have also tried deactivating all of my plugins and then renewing the page several times (deleting the cache all the while), but it still doesn't change anything. Maybe it has to do with the fact that I use the complete post other than excerpts for display on my site (and I simply add the more tag into the articles content). 

 

Since it doesn't seem to be working, the easiest way to get the link to look like the buttons would be to simply apply the styling from the .btn, .btn-primary to it, wouldn't it?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

You didn't mention where you put that code.  Could you let us know where you placed the hook?

 

Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry for that. I placed it in the functions.php file. Is that the right place? 

Share this post


Link to post
Share on other sites

Posted · Report post

I'm still not sure exactly where you placed it as there are several possible functions.php.  If you added it to the one in the pagelines folder itself, that's probably why it doesn't work.

 

You should have the PageLines Customize plugin installed (free from our Store), and use the functions.php there or, in the functions.php found in a child or base theme.

Share this post


Link to post
Share on other sites

Posted · Report post

Alright, thanks James and Rob!

Share this post


Link to post
Share on other sites

Posted · Report post

You're very welcome!

Share this post


Link to post
Share on other sites

Posted · Report post

I added it to the functions.php file in the base theme (i.e. the child theme). Here is the picture. Screenshot_5_29_13_11_52_AM-2.png

Share this post


Link to post
Share on other sites