This solution enables you to dynamically add a button after the first paragraph on archive pages which slides down to reveal the full content of the article.
On top of this, you can customize :
- Where the button is added, after as many paragraphs as you like.
- Change the button text before and after click
- Style the button using your themes existing button CSS or modify the included custom button CSS to your own preferences.
- Add the slide toggle buttons on any type of archive
- Execute the code on specific archives only for efficiency
- Change the speed of both the slide down and slide up toggle.
Here’s the demo video revealing the full functionality :
Demo Video
The demo shows a read more button added after the 1st paragraph of every post in the front page archive. When clicked, the full content is revealed and slides down while the button text changes to Read Less.
Code Installation
There’s 3 simple steps once you have access to the download folder :
Step 1 : Upload the file named readmore.js to your child themes root directory.
Step 2 : Copy & paste the PHP code from the functions.php file to the end of your child themes functions.php file. The code includes a conditional tag so it only loads on the front page. You may wish to change this conditional for use on other archives.
Step 3 : From the download folder, copy & paste the CSS from the style.css file to the end of your child themes style.css file and clear caching.
Register or login to access the download folder for members :
Leave a Reply
You must be logged in to post a comment.