If you’re using the Beaver Builder theme and the Yoast SEO plugin (f.k.a. the WordPress SEO plugin) chances are you’re missing out on one of the simplest to pursue, yet powerful to do, WordPress SEO tips known to man. It first got popular in the classic Thesis WordPress theme by DIYthemes (Chris Pearson) all the way back in 2011 or so.
The tip? To turn your regular ol’ boring category pages into SEO-friendly cornerstone content pages!
Problem? It doesn’t work out-of-the-box with the Beaver Builder theme that’s included in their Pro and Agency plans. As I wrote in my Beaver Builder review, the Beaver Builder theme is great match (simple and powerful) to the Beaver Builder plugin.
A few days ago, I was setting up a blog section on my sweet client Jeanette’s website. It’s built in Beaver (but not by a beaver… heck, I can’t even grow a proper beard…) so most of my work was easy and straightforward. Yet, when I wanted to implement the aforementioned SEO tip: I bumped into some trouble!
I couldn’t get the category descriptions to show. Bummer. I was almost ready to brand it BeaverBummer™ and throw in my towel! (never do web design without a towel by your side… you wouldn’t… would ya?)
Then I thought of Nate Diaz, Conor McGregor, Fedor and other great fighters. Hell no! I’m not gonna let that damn BeaverBlog™ bum-ass beaver beat me with all its “heeeey look’a meee… I’m a Beaver Builder Blog… with nooooo descriptions on ma’ cattegory pages… Arm’ so cooool…”
Hell no. I’m in this fight… to win it!
Watch out BeaverBoy!
This was when my rage transformed into battle-ready, subversive aggression. So I decided to swiftly cue up (and crank up) some Navy SEAL march songs, for extra motivation to kick that b*tch *ss beaver’s BlogButt™!
For your convenience and companionship, I’ve embedded the Navy SEAL songs here, so you can be badass too, while disciplining your Beaver to know its place as a submissively serving page builder… and certified Badass Blog Builder™ :o)
That’s right my friend: I decided to share what I did to make those category descriptions show. And to make this über-easy for you, I’ll also share my code snippets and all. Nice eh?
So hit Play for the soundtrack and let’s show your Beaver who’s the boss of bad-ass blogs!
Preparin’ for BeaverBattle™
You don’t really need to be using the Yoast SEO plugin for this tip to work, but it sweetens the end result, by allowing you also add meta descriptions for your category pages, further enhancing your WordPress SEO – helping your category pages look good, not just to visitors on your site, but also when people glance over your category pages in Google’s search results.
Just to be absolutely clear: this blog post isn’t about how to get the Yoast SEO meta descriptions to work in Beaver Builder (they’re working fine by default) – I’m referring to the descriptions that show on the WordPress page itself.
Let’s get started!
For reference and added perspective; here’s my correspondence with Jun from Beaver Builder support:
Hi Beavers:)
I’ve been scratching my head and searching Google to no avail…
I’d like to have the category description (not the *meta* desc) from the Yoast SEO plugin displayed below the title (fl-archive-header) on my category archive pages.
As described here:
https://yoast.com/adding-a-description-to-your-categories/But how? Is there an add_action I can use in my child theme’s functions.php?
Thanks for helping:)
Oliver
Hey Oliver,
Thanks for getting in touch and hope you had a nice weekend!
No, there are no action references available for us to hook into that particular area of the template, unfortunately. However, what you can do is use a template to modify the default code of the BB theme’s template. You need to make a separate template for the category page to accomplish this, see steps below.
This is assuming you’re already using the child theme, if not, I would recommend you download it from your Beaverbuilder account section then install and activate it.
1. In your child theme, create a file called category.php
2. Copy the code from your main theme’s index.php file and paste it inside the empty category.php
3. Make changes to the code in your child theme’s category.php, so in here you can replace this line <?php FLTheme::archive_page_header(); ?> with that code from Yoast to replace the title.https://codex.wordpress.org/Category_Templates
Hope that helps and let me know if you have questions. Have a nice day!
—
Jun Chua
Thank you Jun
That’s a great answer, very helpful. I couldn’t find a category.php file in the main/parent theme, and didn’t realize I could adapt the index.php file in that way. Looking back, it all makes sense now – it’s the standard WordPress template hierarchy, with a touch of Beaver on top:)
Thanks again:)
Oliver
Hey Oliver,
Yep, that’s right! BB embraces most of WP’s functionalities 🙂
Let me know if you have other questions and have a nice day!
—
Jun Chua
A good example of the brilliant Beaver Builder support team in action, by the way!
Now, to make it work as desired, I still had to do a few other things. Below I share the full procedure, step by step:
Step 1: create a child theme
If you’re not using a Beaver Builder child theme, create one and activate it. A child theme lets you edit theme files without them being overwritten the next time you update your Beaver Builder main parent theme.
Step 2: create a category.php template
Duplicate (or copy/paste) the index.php file from the Beaver Builder parent theme folder. Rename it to category.php and place it inside your child theme folder. This will override the category.php file in the main theme folder. Since there isn’t a category.php template file in there, the child theme’s category.php will still override whatever template the main theme relies upon – in this case the index.php template file. If you’d like to learn more about the concept of WordPress template overrides, read up on the WordPress template hierarchy.
Anyway, here’s the full content of my final category.php Beaver Builder template:
The WordPress category description (and title) happens at lines 6 and 7. Despite the relative simplicity of this operation, I had to experiment a bit, since WordPress, Beaver Builder or the Yoast SEO plugin did something strange: it filtered out the category description’s class name, making it difficult to style the description with CSS. To get around that issue, I changed the P tag (proposed here) to a SPAN tag – and lo and behold: the CSS-class survives! Mission accomplished:)
Step 3: add a few styles
To me personally, the result didn’t look as good as I wanted, so I added a few styles. Here they are for your pleasure:
Wudn’t dat easy? You betcha it was! ;o)
PS: all trademarks in this post are the property of BeaverBadass™ Inc. – of which you’re now a proud member!
Thank you! Great stuff. Much appreciated.