- Create a new Pod of
Content Type Custom Settings Page titled Design
- Add fields named
portfolio_columns of type Plain Text and some_color of type Color Picker
Add this to a Code Snippet:
<?php
add_action(
'wp_head',
function() {
?>
<style id="design-styles">
:root {
--portfolio-columns: <?php echo get_option( 'design_portfolio_columns' ); ?>;
--some-color: <?php echo get_option( 'design_some_color' ); ?>;
}
.example-portfolio {
display: grid;
grid-template-columns: var( --portfolio-columns );
background-color: var( --some-color );
}
</style>
<?php
},
PHP_INT_MAX
);
Where:
design_portfolio_columns means the portfolio_columns field on the global design settings page.design_some_color means the some_color field on the design settings page.:root { ... } wraps declaration for CSS variables which can be used anywhere on the site.--portfolio-columns and --some-color are newly defined CSS variables..example-portfolio { ... } is an example CSS class which would define HTML such as:
<div class="example-portfolio">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
…would display 1, 2, and 3 in three columns if the portfolio_columns field were set to 20% 30% 50% or similar according to grid-template-columns and the background color of the grid as whatever color is selected by some-color.
Usage of CSS generally follows the syntax var( --some-color ). They cannot be used for some values, such as url( ... ), but can be used with calc( … ) to calculate values such as dimensions based on mixed values, such as percentage width or viewport width plus or minus pixels.
Once a CSS variable is defined within :root, it can be used in any normal CSS or style="..." attribute.
