I'm trying to add a piece of code to change css on a page. I added the code to functions.php in WordPress. However, it does not seem to work. Since I'm quite new to this there might be something quite basic wrong with the code... Any idea why it might not be working?
// This code is added to functions.php
// intro is the class name of the element I'm trying to change
add_action( 'intro', function () {
if ( is_user_logged_in() ) {
?>
<style>
display: none!important;
</style>
<?php
};
exit;
});
I got it to work by removing exit; and targeting an element:
add_action( 'wp_head', function () {
if ( is_user_logged_in() ) {
?>
<style>
.intro{
display: none!important;
}
</style>
<?php
};
});
I think what you are trying to do is change the content of the css class which I do not think you can do. Instead a solution would be to assign a css class with the propertied that you want applied to the element e.g.
<div class="<?php if ( is_user_logged_in() ) { echo 'intro';} ?>">
// Whatever you have here will get the css style applied
// if user is logged in
</div>
And inn The CSS you have the following
.intro{
display: none!important;
}
You can create multiple files for different styles e.g. another class
.outro{
display:initial;
}
And you can add it in the code as
<div class="<?php if ( is_user_logged_in() ) { echo 'intro';} else{ echo 'outro';} ?>">
// Whatever you have here will get the css style applied
// if user is logged in and if logged out then outro class will be applied
</div>
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
}
}
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>
I am new to wordpress theme development and I need to style the main navigation menu depending on what page the user is on.
Simply put, only the home page has a unique styling on it and all other pages will have a different css. I have tried adding this in my functions.php but it does not work.
if (is_page( 52 ) ):
wp_enqueue_style('style1_css', get_template_directory_uri() . '/css/style1.css' );
endif;
Sorry if its badly explained!
<?php // TOP PICTURE DEFINITION FOR ARTICLES PAGE
if ( is_page()) {
wp_enqueue_style('style1_css', get_template_directory_uri() . '/css/style1.css' );
}
?>
Use like this for detailed reference kindly refer this link click_here
You can link one css file for all pages and use more specific selectors (with binging to css-classes) for css ruling:
.nav {/* for all pages */
...
}
.home .nav { /* for home page */
...
}
Target only the home class like:
.home .nav {
// CSS STUFF
}
And if you want all nav classes, use:
.nav {
// CSS STUFF
}
fixed it by adding
nav <?php if ( is_page('52')) { echo 'class="homeNav"'; } ?>>
So I have created a wordpress template, and when i log in into wordpress there is a admin bar over main menu. This div wraps the other div's of the website.
My question is:
How can i set div margin-top: i.e. 50 pixels only when there is admin bar, ergo there is a user logged in?
EDIT:
So, this is my code of functions.php and it still doesnt work.
<?php
function new_excerpt_more( $more ) {
return '...<br /><br />Pročitaj još';
}
add_filter('excerpt_more', 'new_excerpt_more');
?>
<?php
if(is_admin_bar_showing() && !is_admin()) {
function link_to_stylesheet() {
?>
<style type="text/css">#wrapper{margin-top:150px;}</style>
<?php
}
add_action('wp_head', 'link_to_stylesheet');
}
?>
EDIT2:
I tried this too... It doesn't work.
<?php
if(is_admin_bar_showing() && !is_admin()) {
function link_to_stylesheet() {
?>
<style type="text/css">body{margin-top:150px;}</style>
<?php
}
add_action('wp_head', 'link_to_stylesheet');
}
?>
To apply top:50px in admin bar when on front end, you may try this (put this in functions.php)
if(is_admin_bar_showing() && !is_admin()) {
function link_to_stylesheet() {
?>
<style type="text/css">#wpadminbar {top:50px;}</style>
<?php
}
add_action('wp_head', 'link_to_stylesheet');
}
To remove admin bar completely, you may try this (put this in functions.php)
add_filter('show_admin_bar', '__return_false');
To remove admin bar from front end only for non-admin user (put this in functions.php)
add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
if (!current_user_can('administrator') && !is_admin()) {
show_admin_bar(false);
}
}
You can setup from your back end (only for yourself) from Users -> Your Profile menu by removing check from
Show Toolbar when viewing site check box
I solved this by adding
<?php if ( is_user_logged_in() ) { ?>
<style type="text/css" media="screen">
body{margin-top:28px !important;}
</style>
<?php } ?>
To the functions.php
Whenever anybody is logged in and has a WPadminbar on the front-end
add this to your functions.php:
function adminbar_theme_setup() {
add_theme_support( 'admin-bar', array( 'callback' => 'custom_admin_bar_css') );
}
add_action( 'after_setup_theme', 'adminbar_theme_setup' );
function custom_admin_bar_css() { ?>
<style>body{margin-top:28px !important;}</style>
<?php
}
My plugin code looks like below,
if (!current_user_can('administrator')){
function hide_post_page_options() {
//global $post;
// Set the display css property to none for add category and add tag functions
$hide_post_options = "<style type=\"text/css\"> .jaxtag { display: none; } #category-adder { display: none; } </style>";
print($hide_post_options);
}
add_action( 'admin_head', 'hide_post_page_options' );
}
But when I activate I get an error
Fatal error: Call to undefined function wp_get_current_user()
I could get around this by including the pluggable.php in capabilities.php. But I don't think doing a change in those files is a better way. Because wp_get_current_user() is a pluggable function it is only available after the plugins are loaded. Is there a way to use this without making changed to core files?
Instead of hiding it with CSS, I would suggest you to remove it from Menu if it's not admin, that would be a WordPress approach
add_action('admin_menu', 'dot1_remove_dahsboard_menu', 111);
function dot1_remove_dahsboard_menu(){
global $submenu, $menu;
//to check array key you want to unset in your case, print the array
echo "<pre>";
print_r($menu);
echo "</pre>";
echo "<pre>";
print_r($submenu);
echo "</pre>";
/* Unset menu array */
if( !current_user_can('manage_options') ){
unset($menu['10']);
}
/* Unset submenu array */
if( !current_user_can('manage_options') ){
unset($submenu['edit.php']['10']);
}
}