One of my latest projects is transitioning an existing GeneratePress site to the WordPress block editor.
If you’re not familiar with it, GeneratePress is a popular WordPress theme. I like using it because it’s lightweight, well-coded, and offers a wealth of customization options.
Overall the transition project has gone well.
No major issues, though I needed to invest time to review what blocks worked well for the content on 80+ pages and posts.
But I did came across a potentially troubling issue with styling buttons.
My setup for this particular GeneratePress site is a common one, which included the WP Show Posts and GenerateBlocks plugins.
Both plugins have their own button styling.
As does GeneratePress, which you can modify in the Customizer.
With GeneratePress, GenerateBlocks, and WP Show Posts all offering button styling options, how was I going to make sure the button styles didn’t override each other?
How to Maintain a Consistent Button Style in GeneratePress
The solution was easier than I thought.
Since Tom Usborne is the developer behind the the GeneratePress theme and both plugins, I wasn’t surprised to learn the answer was to use the default button class defined in GeneratePress.
Once you’ve defined the button class, update WP Show Posts in the Content settings to use button for the Read more button class.
For the GenerateBlocks Button block, you can make the change in the block settings under Advanced > CSS Classes.
Voila!
All buttons will have the same CSS styling. You don’t have to worry about buttons looking different.
