I want to add dynamic styles to wordpress using a value from a field in a custom option page
I have created a file called it dynamic_style.php and added following:
<?php
header("Content-type: text/css; charset: UTF-8");
$brandColor = "<?php echo get_option('blank-body-color'); ?>";
?>
body {
background-color: <?php echo $brandColor; ?>;
}
it will work only if the value is css like following:
$brandColor = "green";
but it wont work if its the value from the field which is php like following:
$brandColor = "<?php echo get_option('blank-body-color'); ?>";
What is the best practice to add dynamic styles to wordpress from a field value with php?
My problem is that I cannot access a PHP variable from a CSS file loaded like this from index.php:
<link href="css/style.php" rel="stylesheet">
In the style.php file, I have this:
<?php header("Content-type: text/css; charset: UTF-8");
$myClassName = 'myClass'; ?>
.<?= $myClassName?> {
font-weight: bold;
}
in my index.php I have this:
<span class='<?= $myClassName?>'>this is a text</span>
But $myClassName return an empty string like it doesn exists...it does mean that I cannot access the PHP variable like this....is there someone have maybe a trick..?
I really need to set the css classnames with PHP variables from the css file and be able to get them back to my index.php
Under the header, do $css = $_GET['css']; or replace it with wherever you are initializing the variable from.For example:
<?php
header('Content-Type: text/css');
$css = $_GET['css'];
?>
body {
<?= $css ?>border-radius: 3px
}
I did a setup of scssphp in my framework and made it working with multiple files. Below is the code of how it output itself as text/css.
<?php header('Content-type: text/css');
ob_clean();
function scss_css() {
require "../SCSS-PHP/scss.inc.php";
$import_way = "../styles/scss/";
$compression = "scss_formatter_compressed";
$compiler_script = '#import "demo.scss"';
$scss = new scssc();
$scss->setImportPaths($import_way);
$scss->setFormatter($compression);
echo $scss->compile($compiler_script);
}
scss_css();
die();
?>
The call i used in html is:
<link rel="stylesheet" href="binder/loader.scss.php">
I would like to know if echo is safe for my future working scss setup. Can there be any attack on such a file output and any other suggestions to make it better?
I would like to import a css stylesheet in a page depending on a php condition (or other), this condition is based upon the domain URL.
For example, if the page loaded is "mydomain.com/about-us" import a "css/about-us.css" file.
I have tried with this code, but it does not work.
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/")) {
include '/css/about-us.css';
}
?>
How can I import, or use a <style> tag conditionally?
solution correct:
the correct solution is use only the page name, so if you page is mydomain.com/about-us/
use " /about-us/" only.
now have other question, with the code posted you can import css for specific page , but I noticed that if the domain is mydomain.com/about-us/team.html example in the page team.html load also the css of "about-us" how load the css for about-us only in the page mydomain/about-us/ ??
How you can read here, strstr will return a string or FALSE. You can change it like this:
<!DOCTYPE html>
<head>
<?php
if (strstr($_SERVER['REQUEST_URI'], "mydomain.com/about-us/")!=false) {
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css">';
} ?>
</head>
...
</body>
</html>
Or:
<!DOCTYPE html>
<head>
<style type="text/css">
<?php
if (strstr($_SERVER['REQUEST_URI'], "mydomain.com/about-us/")!=false) {
echo file_get_contents('/css/about-us.css');
} ?>
</style>
</head>
...
</body>
</html>
In the first example your CSS is included through the <link> tag, in the second, the PHP-script loads your CSS file into the script-tags. You can not use include because it will load another php file and execute where it was included. You should use my first example, because it is more server-friendly because the CSS file doesn't need to be read. Your page will be faster.
You can add a stylesheet to the page with PHP by including this in the <head> of your html document:
<?php
echo '<link rel="stylesheet" type="text/css" href="' . $file . '">';
?>
Where $file is the name of the css file. You're going to have to provide some more information as to what you're trying to do for a better answer.
Update
The variable $_SERVER[REQUEST_URI] only gives the requested page, not the whole domain. From the PHP manual,
'REQUEST_URI'
The URI which was given in order to access this page; for instance, '/index.html'.
So the code should look as follows:
<?php
$requested_page = $_SERVER['REQUEST_URI'];
if ($requested_page === "/about-us" || $requested_page === "/about-us/") {
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css">';
}
?>
This will test if the requested page is "/about-us" (the client is requesting the "about-us" page) and if it does, the link to the stylesheet will be echoed.
use this:
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/"))
{
// output an HTML css link in the page
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css" />';
}
else
{
// output an HTML css link in the page
echo '<link rel="stylesheet" type="text/css" href="/css/another.css" />';
}
?>
you can also do this to import the css contents directly, but probably some media/images links can break:
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/"))
{
// output css directly in the page
echo '<style type="text/css">' .file_get_contents('./css/about-us.css').'</style>';
}
else
{
// output css directly in the page
echo '<style type="text/css">' .file_get_contents('./css/another.css').'</style>';
}
?>
I'm trying to figure out how to make a mixins.less file using PHP variables.
I made an Admin page and inside it I have colour selector. I want to use that colour inside my less files.
#colour: $mycolour;
I'm thinking to write a din_mixinds.less file using PHP and inside it to add the text;
And the to include the files in my style.less.
Or how can I do something better like this:
<?php
header("Content-type: text/css; charset: UTF-8");
$brandColor = "#990000";
$linkColor = "#555555";
$CDNURL = "http://cdn.blahblah.net";
?>
But with less not css.
Thank you
EDIT:
Based on Bass Jobsen answer.
Gives me an error:
<?php
header("Content-type: text/css; charset: UTF-8");
?>
body{
background-color: <?php echo 'red'; ?>;
}
Doesn't return any errors:
<?php
header("Content-type: text/css; charset: UTF-8");
?>
body{
background-color: red;
}
Well technical you can create a less.php file:
<?php
header("Content-type: text/css; charset: UTF-8");
$brandcolor = "#ff0099";
echo "#brandcolor: $brandcolor;";
And than serve that file on a URL (web server) and write in your Less code:
#import (less) url('http:/localhost/less.php');
p{
color: #brandcolor;
}
update
Yes ... I use less.php
I think that creates a different situation, with less.php you can use the following code to solve your issue:
$parser = new Less_Parser();
$parser->parseFile( 'style.less', 'http://example.com/mysite/' );
$parser->ModifyVars( array('brandcolor'=>'#ff00ff') );
$css = $parser->getCss();