Archived topic
using custom field page values in element header
5 replies · Started by Ben on August 16, 2019
I have a page header set up which works fine. I'd like to set the pagehero background colour to be the value of the page custom value, eg breadcrumbs_bg_color
I could do this using inline css but I'm concerned that scoped inline css is no longer supported and not the best way, eg
=== HEADER ELEMENT ===
<style scoped>
.page-hero { background-color: {{custom_field.breadcrumbs_bg_color}}; }
</style>
<h1>
</h1>
Please can you advise best way to do this?
Hi there,
it would be better to hook the CSS inline in the <head> so:
Create a new Hook Element.
Add this to the Content:
<?php
$css = get_post_meta(get_the_ID(), 'css', true);
if (!empty($css)) { ?>
<style type="text/css">
<?php echo '.page-hero {background-color: ' . $css .';}'; ?>
</style>
<?php }
?>Select the WP_Head hook and check execute PHP then set your Display Rules to match the header element.
The above example has a Custom Field of css
Perfect , many thanks (needed to change closing to </style>
Is there any way to set this to have higher precedent than global site "Additional CSS" set in the customizer? (without having to resort to using !important)
You can change the priority in the Hook Element to 0 - should move it above the customizers CSS.
I needed this to take precedence, so needed it after the cusotmizer css. Gave it priority 200 and it moved it below.
Many thanks
Glad to be of help
