Jump to content


Photo
- - - - -

Adding a CSS Class to the Read More Link

read more link customize css class

Best Answer James B , 30 May 2013 - 10:18 PM

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.

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 knubbl

knubbl

    Member

  • Members
  • 19 posts
  • Country: Country Flag

Posted 28 May 2013 - 01:13 PM

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 (

Please Login or Register to see this Hidden Content

) 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 "

Please Login or Register to see this Hidden Content

"), 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!

 

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 May 2013 - 02:38 PM

Hi,

 

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

 

Thanks.



#3 knubbl

knubbl

    Member

  • Members
  • 19 posts
  • Country: Country Flag

Posted 28 May 2013 - 03:43 PM

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



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 May 2013 - 04:17 PM

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.



#5 knubbl

knubbl

    Member

  • Members
  • 19 posts
  • Country: Country Flag

Posted 29 May 2013 - 09:56 AM

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



#6 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 29 May 2013 - 11:14 PM

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 -

Please Login or Register to see this Hidden Content

You do have the base theme as the active theme in appearance>themes?

Please Login or Register to see this Hidden Content



#7 knubbl

knubbl

    Member

  • Members
  • 19 posts
  • Country: Country Flag

Posted 30 May 2013 - 07:50 AM

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?



#8 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 30 May 2013 - 10:18 PM   Best Answer

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.



#9 knubbl

knubbl

    Member

  • Members
  • 19 posts
  • Country: Country Flag

Posted 31 May 2013 - 07:07 AM

Alright, thanks James and Rob!



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 May 2013 - 02:05 PM

You're very welcome!







Also tagged with one or more of these keywords: read more, link, customize, css, class