Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Andres Torres
Andres Torres
3,418 Points
Posted by Andres Torres
Andres Torres
3,418 Points

Dynamic CSS with ACF in Wordpress

Hello People!!

Does anyone know if is possible to generate dynamic CSS (with dynamic data from Advanced custom fields for instance) in Wordpress?If so, what is the best way to do it?

The only way I found is placing a <style> fragment of code within the head using wp_head add action function. However I am not sure if it is a good way for future SEO good practices.

Thank you very much!! Happy coding!

Andrew

6 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I've done this before with dynamic backgrounds and just used inline CSS styles to echo out my background image path. Regardless of what styles you are trying, I'd just probably put my dynamic CSS styles inline inside of the template file.

Andres Torres
Andres Torres
3,418 Points
Andres Torres
Andres Torres
3,418 Points

Hi Kevin,

Thanks for responding. The problem is that I need more than one background image. The idea is use keyframes on CSS to change the image more than once on hover. That's why I need to generate a new css file. :(

Thanks Andres

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Do you have a codepen or something of what you are trying to do? Unfortunately, you can not generate dynamic CSS in a CSS file. Any CSS property you can set in a CSS file, you can set inline or in the head. It might get ugly and unwieldy, but it would still work as a "dynamic" CSS property.

Set every static CSS property you can in a CSS file, and just include the dynamic bits in the head or inline.

Andres Torres
Andres Torres
3,418 Points
Andres Torres
Andres Torres
3,418 Points

Hi Kevin,

Here; http://codepen.io/nestormanuel/pen/gbMmrw

As you can see you have 5 images per image to hover. That´s why I wouldn´t like to have all this CSS in the head. It would be much better to generate a dynamic CSS file. I can do it in plain php projects but I do not find the way to do it in Wordpress...

Hope anyone on the forum knows.

Andres

Andres Torres
Andres Torres
3,418 Points
Andres Torres
Andres Torres
3,418 Points

Thanks Kevin!! Seems a really good solution! ;)