[Resolved] Button code with CSS in a single post Element

[Ben]

Hi,

I’ve created an Element to place some text and a link after all single posts in a certain category, using the generate_after_content hook. It works fine, but I want to turn the link into a button that has the same CSS styling as buttons on other pages of my site. I imagine I can place CSS for this in my GP child theme but I could do with some help of how to get the same CSS and what to place in the child theme css file – I guess I need the <button> HTML tag in my Element HTML to make the button, and need CSS to colour the button, change hover behaviour etc, so it looks like other buttons I made in blocks with GenerateBlocks e.g. on my store page.

An example post is here: https://www.notesinspanish.com/2007/06/14/inspired-beginners-podcast-2-vacaciones-en-tailandia/

The link text I want to turn into a button in the Element is “Buy The Super Pack Here” (the Element starts at “Upgrade and Get Fluent Fast:”)

The store page buttons I want to emulate can be seen here: https://www.notesinspanish.com/store-home/

Any pointers you can give me would be wonderful, thank you.

[Leo]

Hi there,

I see that you are already using the buttons block in GB to create those buttons in the store page.

In that case, just use a block element instead of a hook element to create the content so you can use GB there as well.

https://docs.generatepress.com/article/block-element-overview/

Let me know if this helps 🙂

[Ben]

This is wonderful, thank you. There is one thing though, after I create the block, if it isn’t looking quite right live on the site and I edit it in the same block editing window, updates are not going live. The edits don’t take effect. I’ve tried clearing all caches and that doesn’t work. Is there any reason this is like this? Do I have to get it perfect first time?

[Ben]

Also, sometimes the block isn’t rendering properly. Here’s the editor:

https://snipboard.io/w9tM4z.jpg

Here’s the result, the button is coming out as a text link: https://snipboard.io/qH7eKC.jpg

So that’s two issues, first as described above the edits to the block don’t go live, and second, the button is coming out as text on the site.

Thanks

[Ben]

Solved after database optimization clean up. Thanks again.

[Leo]

No problem 🙂

[Ben]

Hi Leo,
Actually it started happening again. The button would render on some posts, and not on others, even if I cleared all the server caches and cloudflare cache. In the end I have just made elements with html and css in the child theme to get the button – it’s a shame as the block element method is very nice. Do you have any idea why this might happen? An mentioned above I kept getting this result, with a link: https://snipboard.io/qH7eKC.jpg

Instead of this button: https://snipboard.io/w9tM4z.jpg

And only on some posts, not all. It’s very odd.

[Leo]

Where can I see a block element that’s not working?

[Ben]

Hi Leo, in the end I had to take them off the site, and I went with the hook element with straight HTML and CSS in child-theme route, which works fine. If I try this again in the future and the same problem occurs I’ll let you know. I’m sorry I had to take it down before you could look at it on the site, but I had some time constraints and had to go with the other solution, which is fine.

[Leo]

Sounds good 🙂

[Author]

Posts