CODEWITHSUNDEEP
csswordpresswordpress-theming
Tharindu Thisarasinghe
Tharindu Thisarasinghe

Reputation: 3998

Change CSS values with WordPress backend UI elements

I have seen in most premium WordPress themes, backend user is allowed to change CSS properties such as background-color, font-color, font-family, just withing the backend using certain UI elements.

There's a color picker on the Appearance section and user can change the color of the particular element and save it.

I'm building a small wordpress theme, and I'd like my users also could change CSS values such way.

So, what's the way of doing it ?

Is it something like file writing ? Or dynamic ? (storing CSS in the database? )

`Thanks!

Upvotes: 0

Views: 1925

Answers (3)

Yoav Kadosh
Yoav Kadosh

Reputation: 5155

You have a few ways in which you can use the database values:

a) Echo them as inline styles

<body style="background:<?php echo get_option('body_background'); ?>">

b) Echo them as style rules inside the <head> tags:

<head>
    <style>
    body {background:<?php echo get_option('body_background'); ?>}
    </style>
</head>

C) Use PHP to generate a dynamic stylesheet (this is preferable since the file can be cached, and possibly compressed):

style.php:

<?php 
header("Content-type: text/css; charset: UTF-8"); 
define('WP_USE_THEMES', false);
require('path/to/wp-load.php'); // Located in the root of WordPress
?>

body {background:<?php echo get_option('body_background'); ?>}

header.php:

<head>
    <link href="style.php" rel="stylesheet" type="text/css" />
</head>

EDIT (March 2016)

I ended up creating wp-dynamic-css: a library that allows you to generate CSS from dynamic content, which I believe will be very useful for you. This is how it can be used:

// 1. Load the library
require_once 'wp-dynamic-css/bootstrap.php';

// 2. Set the callback function (used to convert variables to actual values)
function my_dynamic_css_callback( $var_name )
{
   return get_theme_mod($var_name);
}
wp_dynamic_css_set_callback( 'my_dynamic_css_callback' );

// 3. Enqueue the stylesheet (using an absolute path, not URL)
wp_dynamic_css_enqueue( 'path/to/my-style.css' );

Now let's say you have a file called my-style.css with this code:

body {
   background-color: $body_bg_color;
}

If, for example, calling get_theme_mod('body_bg_color') returns the value #fff, then my-style.css will be compiled to:

body {
   background-color: #fff;
}

This will be printed to the document <head>. The benefit of that approach is that any changes made in the Customizer are updated immediately to show the changes take effect in real time.

Upvotes: 2

danjah
danjah

Reputation: 1246

When creating dynamic CSS-files in WordPress it turns out you might need to tweak it a little. The easiest one, according to CSS Tricks, is adding this to your style.php:

<?php
 $absolute_path = explode('wp-content', $_SERVER['SCRIPT_FILENAME']);
 $wp_load = $absolute_path[0] . 'wp-load.php';
 require_once($wp_load);

  /**
  Do stuff like connect to WP database and grab user set values, like:
  ?>
  body {background:<?php echo get_option('body_background');
  */

  header('Content-type: text/css');
  header('Cache-control: must-revalidate');
?>

The next alternative is "..leave the file named style.css, and use .htaccess to parse it as PHP. Just make sure this code is in the .htaccess file (Apache servers only) at the same directory level as the CSS file. Then just use PHP inside it as you would any other PHP file."

Source: https://css-tricks.com/css-variables-with-php/

Upvotes: 1

danjah
danjah

Reputation: 1246

A way to go about this is to set the CSS-setting as an inline style. Inline styling always overrides any internal or external stylesheets, and in the same time lets those stylesheets provide a default styling if any inline styling isn't present.

Assuming you are using the Settings API (https://codex.wordpress.org/Settings_API) to create your custom settings, this would be how it works.

Fetch your setting:

//Get the group of options named custom_css_settings, registered using register_setting()
//These are of course example names and could be anything
$custom_css = get_option('custom_css_settings');
//Get the CSS-option for the element named body
$custom_css_body_bg = $custom_css['body_bg'];

Apply the CSS to for example the body-tag as inline CSS, if it's set:

//If its set, use the setting - if not print the <body> tag without styling
($custom_css_body_bg) ? "<body style='background:" . $custom_css_body_bg . ";'" : "<body>" ;

Upvotes: 1

Related Questions