Jump to content


Photo
- - - - -

How To Customize Read More Link

Read more link customize

Best Answer Danny , 08 January 2013 - 10:46 AM

If you wish to have the Learn More styled like a button, you would need to use HTML and CSS. You could use Bootstrap classes added to your links HTML.

 

For example:

 

 

 
Today’s classroom can be a very busy and stressful environment. To be able to meet each childs individual needs can be a real challenge. To help with this, I assist teachers to first learn how support themself then attend to the needs of the children.
<p></p>
<a href="#" class="btn btn-large btn-primary">Learn More</a>

 

If you wish to have a similar style such as the image you attached above, you will need to use your own custom CSS.

Go to the full post


  • Please log in to reply
12 replies to this topic

#1 pracede

pracede

    Member

  • Members
  • 26 posts
  • Framework Version:Developper

Posted 07 December 2012 - 01:01 PM

Hi,

I am creating my blog and i would like to customize my Read more link ( In french => Lire la suite ). My blog is visible here

Please Login or Register to see this Hidden Content

. I want to have button like

Please Login or Register to see this Hidden Content

The Primary button.

Someone could explain me what to do ?

 

Thanks



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16987 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 December 2012 - 01:26 PM

Hi,

 

You can change the text used for your continue/read more link by going to:

 

PageLines > Site Options > Blog & Posts > Continue Reading Link Text (When Using Excerpts)

 

Regarding the styling, you could simply use the CSS used for the primary button on the:

 

.continue_reading_link class

 

But if you wish to feel awesome and l33t, you can add the following code to your child theme/customize plugin functions.php file.

 

Please Login or Register to see this Hidden Content

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



#3 pracede

pracede

    Member

  • Members
  • 26 posts
  • Framework Version:Developper

Posted 07 December 2012 - 02:37 PM

I've add some code on .continue_reading_link class but it's not working !



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 December 2012 - 03:11 PM

What is the complete CSS you added?



#5 pracede

pracede

    Member

  • Members
  • 26 posts
  • Framework Version:Developper

Posted 07 December 2012 - 03:12 PM

Sorry i add an error ! Do not care about my precedent message



#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 December 2012 - 04:59 PM

Okay, did you manage to get it working?



#7 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 08 January 2013 - 01:50 AM

Hi There

 

Found this post when searching and wondering if it is possible to create a button link in a boxes section? See

Please Login or Register to see this Hidden Content


in the 3rd box I have set the readmore link but want to make it look like the attached image

 

Wd I try putting this into the "Boxes custom class" field in the meta settings:

.fboxmore_link

 

Then use a variation of the php you have above in the functions.php file?

Attached Files



#8 Rob

Rob

    One Smart Egg

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

Posted 08 January 2013 - 06:11 AM

Hi, it's sometimes difficult to place some things in boxes. However, I recommend using the WP-Boxer plugin which does allow buttons within boxes (which it calls Content Blocks).   I find it very easy to implement. The best part is, you apply the boxes to a post or page via shortcode, which means you can place them anywhere you'd like.  They're highly customizable as well.



#9 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 08 January 2013 - 08:39 AM

Hi Rob

 

I tried WP boxer pro and it came up with a warning conflict message. Also I am wanting my boxes to go in between a banner section and the content section like this

Please Login or Register to see this Hidden Content


I tried putting the short code in a "full width sidebar" by putting the the code in a text widget, that is when I got the warning message at the top of the boxes.

 

Is there a way to get a button link into a standard PL boxes section?



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 16987 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 January 2013 - 10:46 AM   Best Answer

If you wish to have the Learn More styled like a button, you would need to use HTML and CSS. You could use Bootstrap classes added to your links HTML.

 

For example:

 

 

Please Login or Register to see this Hidden Content

 

If you wish to have a similar style such as the image you attached above, you will need to use your own custom CSS.



#11 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 08 January 2013 - 08:27 PM

Hi Danny

 

Wow that was easy - thanks so much!! Works well



#12 knubbl

knubbl

    Member

  • Members
  • 19 posts
  • Country: Country Flag

Posted 12 May 2013 - 05:16 PM

Hi,

 

You can change the text used for your continue/read more link by going to:

 

PageLines > Site Options > Blog & Posts > Continue Reading Link Text (When Using Excerpts)

 

Regarding the styling, you could simply use the CSS used for the primary button on the:

 

.continue_reading_link class

 

But if you wish to feel awesome and l33t, you can add the following code to your child theme/customize plugin functions.php file.

Please Login or Register to see this Hidden Content

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

I did add 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 simply tried to customize the text using the continue_reading_link_text and it worked perfectly fine. When looking at it through Chrome, nothing is added to the a-tag. 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, but it also didn't change the link. Really don't know what the issue is.



#13 Rob

Rob

    One Smart Egg

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

Posted 12 May 2013 - 05:22 PM

Hi,  This is a resolved topic.   Can you open a new topic, quote this and provide a link to the site in question, letting us know what are you trying to accomplish?







Also tagged with one or more of these keywords: Read more link, customize