Wordpress dynamic css


#1

Does anyone could let me know, how is the right way to use dynamic css on wordpress theme? Previously i add

require_once(’…/…/…/…/wp-load.php’);

on my-dinamic-css.php file
but another article said, it will be make wordpress load twice.


Any advice would be appreciated, thanks in advance :smiley:


#2

You have three options in my opinion that would be valid and ok.

1.) Echo css directly inside of from options (make sure to sanitize data)

2.) Use http://codex.wordpress.org/Function_Reference/wp_add_inline_style

3.) Use WP FileSystem API to create and update custom.css file on user’s server


#3

What do you mean by “dynamic”? If you just mean it is user-created, then you should write any custom-generated CSS to a static file using file_put_contents and then load it via wp_enqueue_style().

You shouldn’t serve front-end assets like CSS via PHP, it’s a waste of server resources.

EDIT - oh cool, I like OriginalEXE’s suggestion of the FileSystem API for writing the static file - didn’t know that existed! :slight_smile: That’s even better then.

If by dynamic you mean the CSS actually changes every page load, it might make more sense to write it in a style block in the header. That’d be pretty unusual, though.


#4
sevenspark said

What do you mean by “dynamic”? If you just mean it is user-created, then you should write any custom-generated CSS to a static file using file_put_contents and then load it via wp_enqueue_style().

You shouldn’t serve front-end assets like CSS via PHP, it’s a waste of server resources.

If by dynamic you mean the CSS actually changes every page load, it might make more sense to write it in a style block in the header. That’d be pretty unusual, though.

Isn't it a bad practice to use php functions for file management and not the WP FileSystem API?

Because, if you use native php functions than the server owns the files, and not user, which might cause problems on shared host where everyone would be able to edit your own files.

EDIT: I’ts not every day I get to teach an elite author something :stuck_out_tongue: I can die happy now.


#5

LOL :wink:


#6

Great, thanks for reply,


Actually i want to use it with theme option, so users can set their own font, color or content easily, any suggestion which one is best to use?


#7

Well,

I would say that 1.) or 2.) would be the easiest for you as WP FileSystem API can sometimes cause problems on bad hosts, and if the user does not know his ftp details, it could be unnecessary pain in the a**.

i would go with number 2.)


#8

I use php to get data from inputs then replace css file. So if you have font,color options , you should have color.css and font.css :smiley:

//add new color css file
		$color_options = get_option('wope-color');
		$current_color = $color_options['current-color'];
		$parent_dir = dirname(dirname(__FILE__));
		$color_file = $parent_dir.DS.'color-scheme'.DS."color.css";
		include("color_pattern.php");
		file_put_contents($color_file,$color_text);

abd the color_pattern.php file simple like that , no need for any hard code :smiley:

<?php
$color_text = "

::selection{
	background-color:#".$current_color.";
}

a,a:link , a:visited{
	color:#".$current_color.";
}

a:hover{
	color:#666666;
}
...
";
?>

#9

Thank you very much to all of you :smiley:


#10

This may be of some help to you - http://aquagraphite.com/2012/11/using-wp_filesystem-to-generate-dynamic-css/


#11

I know this is an old thread, but just in case somebody is still looking for a solution to this scenario here is a very nice and clean piece of code that will allow you to generate a dynamic “virtual” CSS file (by virtual I mean that the file itself does not exist) and enqueue it to your header in just one line avoiding the mess of printing all your CSS right there…


#12

I am think, this plugin what you want – http://codecanyon.net/item/yellow-pencil-visual-theme-customizer/11322180

edit1: Sorry! this is a old thread.

edit2: yes right. this source will help http://aquagraphite.com/2012/11/using-wp_filesystem-to-generate-dynamic-css/