How to replace read more text with image in WordPress

Before WordPress I'm running my blog on Google Blogger and everything very easy to customize for me. When I turn to self hosted WordPress blog it's not very easy for me. But as fact when you spent your time on reading surly you will never disappoint, as above my small learning I discover a small trick how to replace read more text with image in WordPress.

replace read more with image in wordpress

Change read more with Image in WordPress Using Css Only:

There is lot's of way you can find on internet but hardly find easiest way to do. May be you can find to edit text method using language.po editing, but I personally never find it truly useful.
I'm going to tell you eaiset method to change read more text with image in WordPress using css only.
Let's start:

  • Open your WordPress blog or website on Chrome and right click on read more text and Inspect Element.
  • Find class running behind 'Read More' text or as on your blog. To clear out see below image-

changing read more text with image

Copy class name, as above image class name is  read-more-link , now go to WordPress admin dashboard > Editor.
Open Stylesheet (style.css) and paste below code in last line of style.css file.

.read-more-link {
 font-weight: bold !important;
 color: transparent !important;
 background: url("Image URL") no-repeat left center !important;
 width: 130px !important;
 }

Change Image URL and width as per your requirement.
When everything will done, refresh your page and you can find your WordPress read more text replaced with image.

Trick Explanations: Actually I'm not replacing read more text, I only applied background image behind read more text and make it's color transparent.
I'm using !important tag to over right existing class running with same name.
All things I done only to make this trick simply and handy,That's all !.

Himanshu is a young engineer living in India. Currently working at Cognizant as a Senior Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: www.himstar.info : "Open Source. Millions of open minds can't be wrong!

Leave a reply:

Your email address will not be published.

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

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page