In a WordPress blog I want to disable admin/logged users topbar.
add_action('get_header', 'remove_admin_login_header');
function remove_admin_login_header() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
show_admin_bar(false);
}
The code above removes the admin bar but it still prints the following CSS and I need to remove it because it is useless.
<style type='text/css'>#wp-admin-bar-ai-toolbar-settings .ab-icon:before{content:'\f111';top:2px;color:rgba(240,245,250,.6)!important;}#wp-admin-bar-ai-toolbar-settings-default .ab-icon:before{top:0px;}#wp-admin-bar-ai-toolbar-settings .ab-icon.on:before{color:#00f200!important;}#wp-admin-bar-ai-toolbar-settings-default li,#wp-admin-bar-ai-toolbar-settings-default a,#wp-admin-bar-ai-toolbar-settings-default li:hover,#wp-admin-bar-ai-toolbar-settings-default a:hover{border:1px solid transparent;}#wp-admin-bar-ai-toolbar-blocks .ab-icon:before{content:'\f135';}#wp-admin-bar-ai-toolbar-positions .ab-icon:before{content:'\f207';}#wp-admin-bar-ai-toolbar-positions-default .ab-icon:before{content:'\f522';}#wp-admin-bar-ai-toolbar-tags .ab-icon:before{content:'\f475';}#wp-admin-bar-ai-toolbar-no-insertion .ab-icon:before{content:'\f214';}#wp-admin-bar-ai-toolbar-ad-blocking .ab-icon:before{content:'\f160';}#wp-admin-bar-ai-toolbar-processing .ab-icon:before{content:'\f464';}#wp-admin-bar-ai-toolbar-positions span.up-icon{padding-top:2px;}#wp-admin-bar-ai-toolbar-positions .up-icon:before{font:400 20px/1 dashicons;}</style>
What PHP code or filter would you use to remove it?
NOTE: I want to remove CSS output, not hiding divs!
Try this, to remove that inline css. Copy this to your functions.php
add_action('get_header', 'remove_admin_login_header');
function remove_admin_login_header() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
if (!function_exists('disableAdminBar')) {
function disableAdminBar(){
remove_action( 'admin_footer', 'wp_admin_bar_render', 1000 ); // for the admin page
remove_action( 'wp_footer', 'wp_admin_bar_render', 1000 ); // for the front end
function remove_admin_bar_style_backend() { // css override for the admin page
echo '<style>body.admin-bar #wpcontent, body.admin-bar #adminmenu { padding-top: 0px !important; }</style>';
}
add_filter('admin_head','remove_admin_bar_style_backend');
function remove_admin_bar_style_frontend() { // css override for the frontend
echo '<style type="text/css" media="screen">
html { margin-top: 0px !important; }
* html body { margin-top: 0px !important; }
</style>';
}
add_filter('wp_head','remove_admin_bar_style_frontend', 99);
}
}
// add_filter('admin_head','remove_admin_bar_style_backend'); // Original version
add_action('init','disableAdminBar'); // New version
//JUST PAST THIS function.php
Related
I have this code that adds a custom field to my products in woocommerce:
add_action( 'woocommerce_single_product_summary', 'shoptimizer_custom_author_field', 3 );
function shoptimizer_custom_author_field() { ?>
<?php if(get_field('author')) { ?>
<div class="cg-author"><?php the_field('author'); ?></div>
<?php }
}
Now I would want to add a condition to the if-statement that says "if field is not empty, hide product title".
The class for the product page product title seems to be "product_title".
Will be fascinating how this will look like once It's added into this piece of code above. I think it's not a big deal, but my comprehension ends with HTML and CSS sadly.
I'm not sure if I understand your question correctly, but if you want to hide the product title if the custom field is not empty, you can use the following code:
add_action('woocommerce_single_product_summary', 'shoptimizer_custom_author_field', 3);
function shoptimizer_custom_author_field() {
if (get_field('author')) {
echo '<style>.product_title { display: none; }</style>';
}
}
If you want to hide the product title if the custom field is empty, you can use the following code:
add_action('woocommerce_single_product_summary', 'shoptimizer_custom_author_field', 3);
function shoptimizer_custom_author_field() {
if ( ! get_field('author')) {
echo '<style>.product_title { display: none; }</style>';
}
}
Just to conclude this thread, below anybody that seeks a similar answer can copy and paste the solution that worked for me:
add_action( 'wp_head', function() {
?><style>
h1.product_title.entry-title {
display: none;
}
.cg-title h1.product_title.entry-title {
display: block !important;
}
}</style><?php
} );
add_action( 'woocommerce_single_product_summary', 'shoptimizer_custom_author_field', 3 );
function shoptimizer_custom_author_field() { ?>
<?php if(get_field('author')) { ?>
<div class="cg-author"><h1><?php the_field('author'); ?></h1></div>
<?php }
else {?>
<div class="cg-title"><?php woocommerce_template_single_title(); ?> </div>
<?php
}
}
Woocommerce injects the following inline css rule into the head section of my theme. Any idea how to remove it through my child themes functions.php?
<style id='woocommerce-inline-inline-css' type='text/css'>.woocommerce form .form-row .required { visibility: visible; }</style>
If im not missing anything the following code block in the woocommerce plugins file ...woocommerce-includes/class-wc-frontend-scripts.php is responsible for it.
// Placeholder style.
wp_register_style( 'woocommerce-inline', false ); // phpcs:ignore
wp_enqueue_style( 'woocommerce-inline' );
if ( true === wc_string_to_bool( get_option( 'woocommerce_checkout_highlight_required_fields', 'yes' ) ) ) {
wp_add_inline_style( 'woocommerce-inline', '.woocommerce form .form-row .required { visibility: visible; }' );
} else {
wp_add_inline_style( 'woocommerce-inline', '.woocommerce form .form-row .required { visibility: hidden; }' );
}
The following action removes
<style id='woocommerce-inline-inline-css' type='text/css'>.woocommerce form .form-row .required { visibility: visible; }</style>
from the head section. Code goes into your functions.php file of your child or parent theme.
Input from O. Jones in the comments: Or, consider using the Code Snippets plugin to hold these small tweaks to a site. If you edit functions.php you may (a) have it overwritten by an update, (b) possibly lose track of where you put your tweaks.
// Remove the following from head section - see source code
// <style id='woocommerce-inline-inline-css' type='text/css'>.woocommerce form .form-row .required { visibility: visible; }</style>
add_action('wp_enqueue_scripts', 'remove_woo_inline_css_head_ac',11);
function remove_woo_inline_css_head_ac() {
wp_deregister_style( 'woocommerce-inline' );
}
Just add // before function to comment that line
This is the code correctly:
// Placeholder style.
wp_register_style( 'woocommerce-inline', false ); // phpcs:ignore
wp_enqueue_style( 'woocommerce-inline' );
if ( true === wc_string_to_bool( get_option( 'woocommerce_checkout_highlight_required_fields', 'yes' ) ) ) {
//wp_add_inline_style( 'woocommerce-inline', '.woocommerce form .form-row .required { visibility: visible; }' );
} else {
//wp_add_inline_style( 'woocommerce-inline', '.woocommerce form .form-row .required { visibility: hidden; }' );
}
We try to apply a certain css rule to a product backend page not the frontend page.
But there are 2 types of pages one which is when you click create product and one when you click edit product.
We need to apply the css rule to both of these pages.
We achieved half of the answer by determining part of url when we click add product in the backend by the solution below:
add_action( 'init', 'bbloomer_apply_css_if_url_contains_string' );
function bbloomer_apply_css_if_url_contains_string() {
$url = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if(false !== strpos( $url, 'post_type=product' )){
echo '<style type="text/css">
#ovaem_sectionid { display: none !important }
</style>';
}
}
We hope if there is a thing like (is_Product) but for the backend can be used for both when adding a new product or when editing an existing product page to apply this css.
<body> contains .post-type-product class, use it as the first selector
function my_custom_css() {
echo '<style>
.post-type-product #ovaem_sectionid {
display: none !important;
}
</style>';
}
add_action('admin_head', 'my_custom_css' );
[![enter image description here][1]][1]I added I some classes to my functions.php like so:
add_action('admin_menu',
'wpso_custom_links_admin_menu');
function wpso_custom_links_admin_menu() {
global $submenu;
$submenu['index.php'][] = array('Link One', 'read',
'https://www.example.com/', '', 'jobs-dashboard');
$submenu['index.php'][] = array('Link Two', 'read',
'https://asdf.com/', '', 'events-dashboard
');
}
Then I added css:
. jobs-dashboard {background-color: green;}
Didn't work. Why not?
[1]: https://i.stack.imgur.com/IEdMC.jpg
It looks like you are using your themes additional CSS option, which is typically for front end CSS changes.
To add CSS to the admin area you can use the admin_head hook in your functions.php.
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.jobs-dashboard {background-color: green;}
</style>';
}
I think it doesn't work because you put a space in you class:
. jobs-dashboard {background-color: green;}
I'm trying to output some CSS i the head of my page with custom settings from my theme customizer. The code below works great when there is a value but the problem is when there is no value, it still outputs everything else. I would only like it to appear if there are custom settings.
<style>
body {background-color: <?php echo $background_color; ?>;}
</style>
I think it needs some kind of conditional statement?
You can wrap conditionals around the declaration if necessary... For example:
<style>
body {
<?php if(!empty($background_color)) : ?>
background-color: <?php echo $background_color; ?>;
<?php endif; ?>
}
</style>
If background-color will always be present, and you're looking to allow the background color to be overridden, you could do something like this:
<style>
body {
background-color: <?php echo !empty($background_color) ? $background_color : '#fff'; ?>;
}
</style>
In this example, the background color will default to #fff. This method is known as the ternary operator.
You'll want to only render something out to the browser IF there's a background-color available.
This approach only renders out the inline script IF there's a background-color. This technique avoids an empty CSS declaration in the DOM.
<?php if ( $background_color ) : ?>
<script>
body {
background-color: <?php esc_html_e( $background_color ); ?>;
}
</script>
<?php endif; ?>
A Full Solution
Another way to handle it is to use wp_add_inline_style() and let WordPress handle it.
add_action( 'wp_enqueue_scripts', 'build_and_enqueue_dynamic_css' );
/**
* Build and enqueue dynamic inline head CSS.
*
* #since 1.0.0
*
* #return void
*/
function build_and_enqueue_dynamic_css() {
// do the business logic to get the styles
$background_color = ''; //you need to write this code.
// Now check if you have a background color. If no, bail out.
if ( ! $background_color ) {
return;
}
$css =
"body {
background-color: {$background_color};
}";
wp_add_inline_style( 'your_theme_name_inline_css', $css );
}
I think this is more like what I'm looking for, but now I need a default color for background_color, before there's one input.
<?php self::generate_css( 'body', 'background-color', 'background_color' ); ?>
I ended up using get_theme_mod, which allows for a default setting. Since there's always going to be at least a default setting, there's no need for conditional statements to omit style, body, background-image, etc.
<style type="text/css">
body { background-image: url("<?php echo get_theme_mod( 'background_image' , get_template_directory_uri() . '/images/default.jpg' ); ?>"); }
</style>
You could do something like:
<style>
body {
<?php echo (!empty($background_color)) ? "background-color: " . $background_color.";" : "";
?>
}
</style>