I have been trying to find out how to add PHP from ACF to style some text in CSS. Using: https://www.advancedcustomfields.com/resources/color-picker/
.special-color {
background-color: <?php the_field('color'); ?>;
}
To echo php into workable CSS, you'll have to include the CSS in the php sections of the site (or something more advanced, probably using functions.php). This will work if you simply add:
<style>
.special-color {
background-color: <?php the_field('color'); ?>;
}
</style>
..to (say) your single.php file within the loop.
As an aside, I don't think this would be a viable way to alter site colours (if that's what you are trying to do?), but more as a way of (say) specifying a particular color for a title of one post.
Then you might think of including the style INLINE (pseudo code):
<h1 style="color: <?php the_field('color'); ?>">Post title</h1>
Simply I get the "advanced custom field" value (which is custom_color for an element) of the current post, and then change the element's color using JQuery.
So I created a new js file (custom_css.js) in the child theme with the following code:
jQuery(document).ready(function($) {
console.log(css.custom_color);
// add dynamic css to the elements
});
Then here is the code in functions.php file:
add_action('wp_enqueue_scripts', 'custom_css');
/* Get position details */
function custom_css() {
wp_enqueue_script('custom_css', get_stylesheet_directory_uri() . '/js/custom_css.js', array('jquery'));
wp_localize_script('custom_css', 'css', array(
'admin_url' => admin_url(),
'custom_color' => get_field('custom_color', get_queried_object_id() )
));
}
Related
I have narrowed down the code to this filter so far (found this in another SO answer):
//Checkout page editor bootstrap
add_filter('woocommerce_checkout_fields', 'addBootstrapGlyphs' );
function addBootstrapGlyphs($fields) {
foreach ($fields as &$fieldset) {
foreach ($fieldset as &$field) {
// if you want to add the form-group class around the label and the input
$field['class'][] = 'input-group';
// add form-control to the actual input
$field['input_class'][] = 'form-control';
}
}
return $fields;
}
That sets my form and input elements. Now to add glyphicons, I tried reading from $fields but I just can't seem to get a good handle to something that will let me add a span element before the input. Glyphicon needs this:
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
jQuery let's me do it this way:
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('#billing_last_name_field').prepend('<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>');
});
</script>
but there has to be a better, more performant way to build the page with this in place already. I want to do this in php, so the checkout pageload remains fast. Please help. I come from a world of Java.
tl;dr: How to add a glyphicon to woocommerce checkout input boxes from https://github.com/woocommerce/woocommerce/blob/master/includes/wc-template-functions.php#L1920
Part 2
making progress w.r.t the above question using something like this:
// define the woocommerce_form_field_<type> callback
function filter_woocommerce_form_field_type( $field, $key, $args, $value ) {
$field = str_replace('<input','<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input',$field);
return $field;
};
// add the filter
add_filter( "woocommerce_form_field_email", 'filter_woocommerce_form_field_type', 10, 4 );
I know, that is not the right glyph. However, the next hurdle is to edit the html. Like Mithc mentioned in a comment below, I will now try to do this more elegantly with some type of DOM handling code.
So my follow-up question is, how do I add a DOM element the proper way with php? This time, I am looking for something like,
Convert string to DOM for processing
read some attributes from the <p> or <input>
Determine the type of glyph i should use
Add my span
Convert DOM back to string for return
Any elegant ways to do this, or is str_replace() good enough?
Apparently, there's no filter/action that allows you to modify the forms in that way. You can follow the clue of how the forms are built by checking the /templates/checkout/form-checkout.php and /includes/wc-template-functions.php.
Solution #1: Pure CSS
You could use CSS pseudo elements to add icons to the fields but due to the layout of the form, playing around with ::before and ::after could make the responsiveness a nightmare. But here's an example:
.form-row#billing_company_field {
position: relative;
padding-left: 2.8em;
}
.form-row#billing_company_field::before {
content: '';
width: 2.8em;
height: 2.8em;
background-color: #2d2e34;
position: absolute;
left: 0;
bottom: 0;
}
.form-row#billing_company_field::after {
content: "\e139";
position: absolute;
left: 0;
color: white;
font-family: 'Glyphicons Halflings';
/* Excluding position styling */
}
But as I mentioned before, the responsiveness could be a little bit like... A headache. But totally possible.
Solution #2: Template Override
WooCommerce allows you to override templates via themes. The only thing you have to do is to create a template folder in your theme's root folder.
For instance, if your theme's folder is my-store, you should have my-store/woocommerce. To override the template parts that contain the checkout form, you should have:
my-store/woocommerce/checkout/form-checkout.php
and
my-store/woocommerce/checkout/form-billing.php
Then you can modify any markup there. Just keep in mind that sometimes they update the templates, so keep an eye on them for big changes to keep them up to date too.
Solution #3: DOMDocument() [Update]
If you have the markup of each field on the filter, you can modify the output HTML with the DOMDocument() methods. Here's an example:
// Let's say this is the HTML coming from the filter.
$field = '<p class="form-row validate-required">';
$field .= '<input type="text">...';
$field .= '</p>';
// Create a DOM Object of $field. LIBXML_HTML_NOIMPLIED and LIBXML_HTML_NODEFDTD will help to prevent doctype, html and body tags being inserted at the end.
$field_object = new DOMDocument();
$field_object->loadHTML( $field, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );
// Select the wrapper of the input (`<p>`) and the input (`<input />`) to know where to insert the glyph (between them).
$wrapper = $field_object->getElementsByTagName( 'p' )->item( 0 );
$input = $field_object->getElementsByTagName( 'input' )->item( 0 );
// Create the glyphicon HTML.
$glyph = $field_object->createDocumentFragment();
$glyph->appendXML( '<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>' );
// Insert the glyphicon HTML.
$wrapper->insertBefore( $glyph, $input );
The example above will get you:
<p class="form-row validate-required">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text">...
</p>
To load attributes you can use getAttribute( $attribute_name )
on the DOMElement (like the $wrapper and $input objects). And, to determine the glyphicon you have to use, you could get the class of the $wrapper and determine the class of the glyphicon based on it. For instance, if the $wrapper contains the class user, then glyphicon's class should be glyphicon glyphicon-user which you can easily insert when you create the glyphicon HTML.
How can I have different breadcrumbs background pictures, depending on visited page? Is this possible without using some additional modules?
You really don't need a module for this. What you can do is specify a div id on each page (in the content), and then, you will have a CSS that is something like the following:
#page-123 .breadcrumb{
background-color: #ff0000; /* background color is red */
}
I think the easiest way is to modify the index.php file of your template:
Something along the lines:
<head>...</head>
<?php
$params = &$app->getParams();
$pageclass = $params->get('page_title');
$pageclassname = str_replace(' ', '-' ,strtolower($pageclass));
?>
<body id="<?php echo $pageclassname; ?>"> ... </body>
That way you have a nice id that you can use for all your styling needs and your css code is more readable.
I included mycustom.css in .info file but it is partially applying on my markup. My contents should be aligned side to each other ,for this i applied "display:inline-block".but they are aligned down to each other. This style is perfectly working with out using drupal. I had also used some code to disable builtin css of drupal 7 but no effect. Here is my code:
<?php
function _phptemplate_variables($hook, $vars)
{
$css = drupal_add_css();
unset($css['all']['module']['modules/system/system.css']);
unset($css['all']['module']['modules/system/defaults.css']);
$vars['styles'] = drupal_get_css($css);
return $vars;
}
?>
update: My plugin css does not work in the admin area. the below works on my website for public viewing but not on my admin page that i am building.
original question:
I'm trying to make the html text "Make this red", red!
I have a plugin I've added to my Wordpress plugins folder. In the "bio-plugin" folder in a file called "plugin.php" i have this code:
function register_bio_style(){
wp_register_style('bio-style',plugins_url('css/bio-style.css',__FILE__), false, '1.0.0', 'all');
}
add_action('init','register_bio_style');
function enqueue_bio_style(){
wp_enqueue_style( 'bio-style' );
}
add_action('wp_enqueue_scripts', 'enqueue_bio_style');
then later i have this html working:
<div class='bio_btn'>Make this text red</div>
then i have put bio-style.css in a folder called css and that is in the same directory as plugin.php
the bio-style.css code is:
.bio_btn{
color: red;
background: black;
}
the sentence "Make this red" appears on the (admin) page but it is black.
Try this :
<?php
/*
Plugin Name: Bio
Plugin URI: URL of site
Description: Custom Plugin
Version: 1.0.0
Author: Rohil
Author URI: URL of author
*/
// Register the style like this for a plugin:
wp_register_style( 'biocss', plugin_dir_url( __FILE__ ) . 'css/bio-style.css' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'biocss' );
?>
<div class='bio_btn'>Make this text red</div>
I cant make a comment here to ask so im just going to make a semi blind answer here.
Is there another css file with ".bio_btn" in it?
anyways there's probably a child css over riding it.
this is bad method but it will probably work
CSS
.bio_btn{
color: red !important;
background: black;
}
solved! For admin pages you must replace "init" with "admin_init" and "wp_enqueue_style" with "admin_enqueue_style" :)
I'm going to make WP widget plugin and want to make it theme independent.
What I mean about this is the fact that I need this widget to keep style set in its CSS regardless of theme used. I'm worrying that theme will overwrite its style.
What's the best CSS technique to do this ? Should I use style based on widget ID(#) or its Class(.) ?
It's unlikely that someone overwrite your style if you define a container with an ID and have all your style declarations use this ID in the selector.
#MyWidget p {
color: #ffcc00;
}
#MyWidget p a {
text-decoration: none;
}
The more specific your selectors are, the more priority they have.
when the wp_head() function is fired, use that to include a stylesheet to your css file..
function wp_mywidget_css() {
$siteurl = get_option('siteurl');
$url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/styles.css';
echo "\n\n<!-- your plugin css styles -->\n";
echo "<link rel='stylesheet' type='text/css' href='$url'>\n";
echo "<!-- /your plugin css styles -->\n\n";
}
add_action('wp_head', 'wp_mywidget_css');
place a file called 'styles.css' your plugin folder, which would include the code from the post above, this should stop any theme messing with your styles, just name your widget styles something unique...