Wordpress admin bar and template div - php

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
}

Related

"hide" element when if-statement is true (similar to if > then)

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
}
}

php function to change css

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>

How to enqueue styles for one specific page template

I've got a page template which is acting as a 'Landing Page' and doesn't need specific styles from other areas of the website.
I've managed to remove the unwanted styles and add the new styles by targeting the page ID but I need it to only happen when it's a particular page template. I can't seem to get it to work when doing a check against the page template via the is_page_template() function.
In functions.php:
if ( !function_exists('scripts_and_css') ) {
function scripts_and_css() {
if(is_page(79806))
{
wp_enqueue_style('landingpage', get_stylesheet_directory_uri() . '/css/landing__page.css', '', null);
wp_enqueue_script('landingpage', get_stylesheet_directory_uri() . '/js/landing-page.js', null);
wp_dequeue_style( 'layout', get_template_directory_uri().'/css/layout.css', '', null );
}
}
}
add_action('wp_enqueue_scripts', 'scripts_and_css');
If I then change this to use the template name, it completely fails and doesn't load or remove any of the scripts or stylesheets.
My page template filename called page-landing-page.php:
<?php
/**
* Template Name: Landing Page
* The template for displaying the content for the landing pages.
?>
<?php wp_head(); ?>
// Got all my content loading in here.
<?php wp_footer(); ?>
Here's an example of what I've tried up to now in the functions.php fle:
if(is_page_template('Landing Page'))
{
// Enqueue / Dequeue scripts / styles
}
--
if(is_page_template('page-landing-page.php')) // This is the name of my page template
{
// Enqueue / Dequeue scripts / styles
}
--
if(is_page_template('landing-page.php')) // This is the name of my page template
{
// Enqueue / Dequeue scripts / styles
}
--
if(is_page_template('landing-page')) // This is the name of my page template
{
// Enqueue / Dequeue scripts / styles
}
Just cannot seem to get it to work. Any guidance would be appreciated!
This one works perfectly.
function my_enqueue_stuff() {
// "page-templates/about.php" is the path of the template file. If your template file is in Theme's root folder, then use it as "about.php".
if(is_page_template( 'page-templates/about.php' ))
{
wp_enqueue_script( 'lightgallery-js', get_template_directory_uri() . '/js/lightgallery-all.min.js');
wp_enqueue_script('raventours-picturefill', "https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js", true, null);
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );
For some reason, if you do not select the page template from the Template Dropdown on the edit page, is_page_template('template-name.php') doesn't seem to work.
I have found a kind-of-a-hacked solution to your problem. It seems to be working for both of the cases. Either you select the page template from the dropdown or the template gets selected by the page-slug.
if( basename( get_page_template() ) == 'page-price-watch.php' )
{
// Enqueue / Dequeue scripts / styles
}
Thanks.
"is_page_template" works by checking the post meta. If the template is automatically pulled, for example because it's called home.php, the template being used is not filled into the meta. Meta is only filled when actively selecting the template for a page in the editor.
These always work and do not rely on the meta:
function your_enqueue_styles() {
if (is_front_page()) {
//works
}
if (is_page( array('pageslug1', 'pageslug2'))) {
//works
}
global $template;
if (basename($template) === 'template-name.php') {
//works
}
}
add_action( 'wp_enqueue_scripts', 'your_enqueue_styles' );
Try something like this to display the currently used page template at the bottom of the page when viewed as an admin, makes it easier to troubleshoot:
// Page template finder
function show_template() {
if( is_super_admin() ){
global $template;
$output = '<div style="position: absolute; bottom: 0; width: 100%; text-align: center; z-index: 100; background-color: white; color: black;">';
ob_start();
print_r($template);
$output .= ob_get_clean().'</div>';
echo $output;
}
}
add_action('wp_footer', 'show_template');

How to make a plugin option panel WordPress

I am going to make a WordPress plugin to change the Login Logo. But Now I am trying to make a option panel and how user can edit the plugin function admin panel.
//Function For Login Logo Change
function awesome_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url(/images/logo.jpg) !important; }
</style>';
}
add_action('login_head', 'awesome_custom_login_logo');
//Function For Login Logo Url
function awesome_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'awesome_login_logo_url' );
//Function For Login Logo Title
function awesome_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'awesome_login_logo_url_title' );
Any Idea about create a menu, submenu, option page etc ?
You can take refrence from wordpress function admin_menu and add_sub_menu_page

if home css for wordpress

css conditioning if user is in homepage of wordpress?
I put this
<?php if(is_home()) {
echo '<link rel="stylesheet" href="customHome.css">'
} ?>
into my page editor and it did applied the css. but because it's using echo so there will be some bug. it echo out some thing like
> echo ' ‘ } ?>
in the end of the post.
I want to know where else should I include that? I tried to put in header but it doesn't work.
You can append css by using wp_enqueue_scripts like;
function custom_css() {
if (is_home()) {
wp_enqueue_style( 'custom_style_name', 'path_to_your_css' );
}
}
add_action( 'wp_enqueue_scripts', 'custom_css' );
Put above code block to functions.php

Categories