Dynamic CSS options to append in WordPress Themes

Envato Authors Theme Authors
, ,
1

Hi Friends,

We are working on WordPress Theme, Which is multipurpose and have lots of elements and functionalities.

I need suggestion on coding structure of dynamic CSS :

Option 1 : We have setup attributes of Visual composer elements options and put them in to the JS and when pages load on front end, JS will provide all styling/css as per attributes, In that case our loading is a bit glitchy because some content comes up with default css and then JS provide all styling, It’s micro second glitches but glitches are there.

We are doing this because Envato doesn’t allow dynamic styles/css to be directly in php file inline.

Options 2 : Some Themes like native, add code (in tag) in PHP file and include all php files of elements in plugin. So, Envato doesn’t soft reject based on that error. And this way frontend looks perfect from the beginning.

What is the real scenario and Should I go with Option 2 or ThemeForest Reviewer rejects that?

Thanks in advance for reply. Need help on this urgently.

Warm Regards,
Sagar Patel

2

They will reject, because this way, you will have a lot of style tags inside your body, resulting in validation issues.
Look into this function https://codex.wordpress.org/Function_Reference/wp_add_inline_style

I have a function like this:

if( !function_exists( 'videobox_inline_styles' ) ) {

	function videobox_inline_styles(){	
    wp_add_inline_style( 'videobox-collected-styles', videobox_Layout_Compilator::$inline_styles );
	}	
add_action( 'wp_enqueue_scripts', 'videobox_inline_styles' );
}

where videobox_Layout_Compilator::$inline_styles is a static class variable, where I store all my dynamically generated CSS by page builder elements.
This way I was able to avoid rejections due to validation errors. It’s absolutely not a good way of doing it, but selling at ThemeForest we had to do a lot of hacks just to match the, sometimes not-smart, rules.
Good luck with your theme !

p.s. I was using Unyson framework

3

Hello @DrunkPixelThemes Thanks for your comment.

I want to know, In which file you add this code?

  1. VIsual composer Element Template/content file : e.g. nameoffile.php

Can we add that function at the end of that php file?

And Do you add those files in plugin or in theme?

4

If you created your Elements using VC then I suggest to create class that is extend WPBakeryShortCode class, Inside this class create a method to generate the require CSS for your element this method should do foreach loop for a given array ass the following:
$elements[’.button’] = array(
‘color’ => $atts[‘color’],
‘font-size’ => $atts[‘font-size’],
…
…
);
Now instead of extending WPBakeryShortCode extend the new class and pass your item $atts to the generate CSS method.

If you need fast solution I suggest to buy one of my plugins for VC we create open source plugins and you can find with them the require classes and method to generate the css you can also get a basic idea on creating your own shortcode generator class.