Add a Read More Link to a Text Widget

The default text widget allows you to not only place text, but HTML code as well. We can use that ability to create a link from a “Read More” button. Here is what the code we will use will look like:

<a href="http://www.yoursite.com/page">Read More</a>

Here’s how to make it work.

  1. Go to the widgets menu under appearance and create a text widget where you’d like it to be visible.
  2. Copy the code from above and paste it into the widget and save your changes.
  3. Next, replace the https://www.yoursite.com/page with the address you would like to link to. An easy way to get the URL is just to browse to the page and copy the URL from the browser address bar.
  4. Save your changes and you should be good to go.

If you want to take this up a notch, you can use an image for the link. Just use the add media feature of WordPress to upload the button you’d like to use. Once the upload is complete, copy the URL that appears at the bottom of the resulting dialogue box. Then use code that looks like this:

<a href="http://www.yoursite.com/page"><img src="your image URL" alt="Read More"></a>

Now you’ll have an image button that links to the rest of your text. Pretty simple don’t you think?

20 Comments

Nusa Penida, October 20, 2021

Thank you Bill,
I’ve once again tried to do it…even I’ve copied your sentence, but still doesn’t work. I removed the extra curly, but still the same result. I’ve checked it again and again,and I will try to search some more info too. Thank you again for trying.
Regards,
Vw Tour And Transport Bali

Reply

john borley February 7, 2015

HI
Nothing I try on this “read more” issue seems to work. I’m using the ZeeNoble child theme. It comes with Fronpage Widgets #1, which creates 3 columns. I have put in text widgets in the columns where I have put in some copy.

If I follow your instructions, put in the code you supplied into the text and then try to put in my page info by browsing the page, copying the url and substituting it, it doesn’t work. The page the widget is on is my home page, and when I copy that, it puts in a “read more” but doesn’t actually work. You get “Page not found.” Surely I don’t have to create a completely separate page and write the remaining copy there?

I have checked out plugins that supposedly deal with this but none are approved for the latest version of WP.

Any help greatly appreciated.

thanks

john

Reply

    Bill Robbins February 7, 2015

    To be honest, this post is really old now. Now I would suggest you use a plugin, the BlackStudio TinyMCE Widget. It adds a new widget that uses the visual editor from posts. That makes adding things like links or images easy.

    Reply

Wayan Adika October 29, 2014

Nice tutorial Bill,
Is it possible to put read more at custom menu widget wordpress ?
Thanks
Wayan

Reply

    Bill Robbins October 31, 2014

    Absolutely. Just create a custom link in your menu (the links section of your menu builder). In the URL field, place the URL to the full content. In the space for the menu text, just add in “Read More.” Update your menu. That should give you a link that says “Read More” in your custom menu widget.

    Reply

janice October 23, 2014

ok great thank you

Reply

janice October 23, 2014

but i just want to use the read more text so that not so much of the text is showing because it takes up too much space. Isnt there a way to use a read more link to do that

Reply

    Bill Robbins October 23, 2014

    Not this way. You’ll probably need some type of plugin that adds a show/hide toggle of some type.

    Reply

janice October 23, 2014

if i delete the portion of the text how do i add the text so that the read more link goes to that text

Reply

    Bill Robbins October 23, 2014

    You would place the text on whatever page you’re linking to.

    Reply

janice October 23, 2014

HI i Am trying to use the read more link, but when i paste it into my text widget it sows the link but still leaves all of the extra text showing. How can I fix this

Reply

Nikola August 3, 2013

Hi Bill,
Thank you so much for the help. It now works.
I’m so happy now and you never stop answering me, that’s amazing.
Big thanks,
Nikola

Reply

Bill Robbins August 2, 2013

You’re still close. At the bottom of your site, the first text widget’s link is missing the quotation mark just after the <a href=

That’s part of the problem.

It also looks like you’re using curly quotes instead of straight ones. That could cause trouble because the encoding is different.

Reply

    Bill Robbins October 23, 2014

    It looks like you’re wanting to cut the text off after the link. Just delete that portion of the text from your widget. This is just a simple link vs the more quick tag you can add to a post to cut the text off at that point.

    Reply

Nikola August 2, 2013

Hi there,
I’ve created 3 new Pages, that are not visible in the site and my pan is to put some info(about 1 sentence and after that …read more). You can see the 3 fields at the bottom of the site. I’ve used the urls from the permalink related to the page I want to be displayed, but when you hit “read more”… there comes an error – “Apolo­gies, but we were unable to find what you were look­ing for. Per­haps search­ing will help.Search for:”
This is what I’ve wrote on the first text widget:
When asked where landscape architects work, many people might point out their back door to the garden. It would be more accurate, however, to look out the front door…read more
What can I do to make it work properly?

Reply

    Bill Robbins August 2, 2013

    Nikola,

    It looks like from the code you posted that you’re missing the http: at the start of your URL. Try adding that before the // and see if that doesn’t help the link go to the correct spot.

    Bill

    Reply

      Nikola August 2, 2013

      Hi Bill,
      this is the code, I think it is written right.
      read more
      I don’t know what’s wrong, but there is something not right.

      Reply

        Bill Robbins August 2, 2013

        It’s close, but not quite right. This part:

        href=”//www.easstudent4.org/what-is-landscape-architecture/“”

        should be like this:

        href=”http://www.easstudent4.org/what-is-landscape-architecture/”

        You have to have the http: at the start of the URL so web browsers know that you’re linking to a web page. Also there is an extra curly quote at the end of the URL. You’ll want to take that out too.

        Hope that helps out.

        Reply

          Nikola August 2, 2013

          Thank you Bill,
          I’ve once again tried to do it…even I’ve copied your sentence, but still doesn’t work. I removed the extra curly, but still the same result. I’ve checked it again and again,and I will try to search some more info too. Thank you again for trying.
          Regards,
          Nikola

Bill Robbins March 29, 2010

Easy as can be if I may say so.

Reply

Submit your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get all themes with lifetime updates for 95 USD.View All Promotions
+ +