A show more button is a handy feature for any website that wishes to display more content without overwhelming visitors. A show more button allows you to hide and reveal additional content with a simple click or tap, saving space and improving readability. Unfortunately, by default, the Gutenberg editor doesn’t have any tools to add a show more button to your page.
In this article, we will show you how to add a show more button in the WordPress Gutenberg editor without the help of any Gutenberg-specific plugin.
Steps to Add a Show More Button in Gutenberg (Without Plugin)
Step 1: Add the Code Snippet to the functions.php File
First, we will add the PHP snippet to the functions.php file.
On your WordPress dashboard, go to Appearance > Theme File Editor. You can find Theme File Editor under the Tools menu if you’re using a block theme.
Once you enter the Theme File Editor page, select the functions.php file. Afterward, paste the PHP snippet below at the end of the function file content. Next, update the theme file by clicking the Update File button.
/** * Add the show more button in Gutenberg without any plugins */ add_filter( 'wp_footer', function ( ) { ?> <script> let fade = "1" // 0 or 1 let height = "6rem" // use px, em or rem </script> <style id="wpb-button-style"> :root { --wpb-button-color: white; } .wpb-content { position: relative; max-height: 6rem; overflow: hidden; transition: all 0.7s ease; } .wpb-content:before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--wpb-button-color) 0%, rgba(256,256,256,0) 35%); pointer-events: none; } .wpb-content.open { max-height: 1000px; } .wpb-content.open:before { content: ''; visibility: hidden; } .wpb-button { cursor: pointer; } </style> <script> const moreContent = [...document.querySelectorAll(".wpb-content")] const showMore = [...document.querySelectorAll(".wpb-button")] showMore?.forEach( btn => btn.addEventListener("click", e => { index = showMore.findIndex( h => h == e.target.parentElement ); if(moreContent[index].classList.contains("open") ){ moreContent[index].classList.remove("open"); e.target.innerHTML = "Show more"; } else { moreContent[index].classList.add("open"); e.target.innerHTML = "Show less"; }} )) let add = ""; if ( fade == 0 ) { add = ".wpb-content:before { background: #ffffff00; }" } add += ".wpb-content { max-height: "+height+"; }" document.querySelector("#wpb-button-style").innerHTML += add </script> <?php });
Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can create a child theme or custom plugin. Read here to learn more.
Step 2: Add the Additional CSS Classes
Next, we will add the additional CSS class to the text content (Heading or Paragraph block) and the Button block. So, go to the WordPress Gutenberg editor and then add those blocks to your page and style up with your preference.
- Assign a CSS Class to the Text Content (Heading or Paragraph Block)
In this example, we will hide and reveal the text on the Paragraph block.
On the Paragraph block settings panel, navigate to Advanced -> ADDITIONAL CSS CLASS(ES). Afterward, add the wpb-content
CSS class name to the ADDITIONAL CSS (ES) input field.
- Assign a CSS Class to the Button Block
On the Button block settings panel, navigate to Advanced -> ADDITIONAL CSS CLASS(ES). Afterward, add the wpb-button
CSS class name to the ADDITIONAL CSS (ES) input field.
That’s it. To see the result, you can preview your page by clicking the Preview button.
The Bottom Line
By following the steps outlined in this article, you can easily add a show more button to your WordPress site without the need for any additional plugins. When applied to web pages, this technique greatly enhances their readability and usability, particularly when dealing with lengthy blocks of content. With just a few simple PHP code snippets and CSS classes, you can give your web visitors the ability to control how much content they see at a time, making their experience on your site more enjoyable.