Using CSS to hide WordPress homepage excerpts

By default, WordPress shows an excerpt for each post on your homepage. The default excerpt is just the first 50-or-so words from the post. I do not find these useful. They take up too much space, and worse don’t provide much value to the reader.

WordPress does offer the ability to change excerpt size, or even add your own custom ones. Perhaps I will explore this in the future. For now, I am enjoying the aesthetics of having none whatsoever. This is a short post on using CSS to hide homepage excerpts.

Here is what my homepage looks like with the default excerpt settings:

Adding the CSS

Note: I am using the Astra theme, so your CSS class names may differ. This can be checked in your browser’s developer tools!

On the WordPress dashboard navigate to “Appearance > Customize > Additional CSS”.

Add the following code to hide the excerpt text:

.home .entry-content {
	display: none;
}

The result:

The excerpt text is now hidden, but the space it takes up is still there! Furthermore, the pale horizontal line is there too. Add the following code to remove the space and line:

.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single {
   padding: 0.5em 2.4em;
   border-bottom: 0px;
}

The final result is a much cleaner homepage.

This was my first time using the “Additional CSS” feature, and WordPress made the process very easy. I look forward to growing my CSS skills as I continue to blog more regularly!