I know it can be done, but I tried some line of codes and didn't work for me.
This is my header:
<?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
<h1 class="site-title logo"><a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>" relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a></h1>
<?php } else { ?>
<h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php } ?>
Try adding this to your custom css and replace ‘page1’ with your home page ID. You can use the same code and specify the class if you only want to apply to a certain H1 class type.
.h1{
display:none;
}
.page1 .h1{
display:block;
}
Related
I am using Redux framework option panel to handle logo on my header.
The scenario:
Display custom logo when I upload my own logo.
Display text logo when the custom logo not active.
Display default logo when custom logo and text logo not active.
My code here:
<?php global $redux_demo; if ( isset($redux_demo['opt_header_logo']['url']) ){ ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <img alt="<?php echo get_bloginfo('name'); ?>" src="
<?php if( isset($redux_demo['opt_header_logo']) ){ ?>
<?php echo esc_url($redux_demo['opt_header_logo']['url']); ?>
<?php } ?>"> </a>
<?php }
else if ( isset($redux_demo['opt_header_logo']) ){ ?>
<h1> <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php if( isset($redux_demo['opt_header_text']) ){ ?>
<?php echo esc_html($redux_demo['opt_header_text']); ?>
<?php } ?>
</a> </h1>
<?php }
else { ?>
<img src="<?php echo esc_url( get_template_directory_uri() . '/images/logo.png' ); ?>">
<?php }
?>
These code only work for custom logo and default logo (scenario 1 and 3.) But did not work when I want to use text as logo.
Really appreciate for any helps.
try this
<?php
global $redux_demo;
if ( isset($redux_demo['opt_header_logo']['url']) && !empty($redux_demo['opt_header_logo']['url']) ){
?>
<img alt="<?php echo get_bloginfo('name'); ?>" src="<?php echo esc_url($redux_demo['opt_header_logo']['url']); ?>">
<?php } else if ( isset($redux_demo['opt_header_text']) && !empty($redux_demo['opt_header_text']) ){ ?>
<h1> <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php echo esc_html($redux_demo['opt_header_text']); ?>
</a> </h1>
<?php }else { ?>
<img src="<?php echo esc_url( get_template_directory_uri() . '/images/logo.png' ); ?>">
<?php } ?>
I don't have clickable header on my website. I want redirect to home page when I click on header. I don't know how the code should look to make it work.
This is my page-header.php code:
<div class="entry-header">
<div class="cv-outer">
<div class="cv-inner">
<div class="header-logo">
<?php
if ( has_custom_logo() ) :
$custom_logo_id = get_theme_mod( 'custom_logo' );
$custom_logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( bloginfo('name') ); ?>" class="logo-img">
<img src="<?php echo esc_url( $custom_logo[0] ); ?>" alt="<?php esc_attr( bloginfo('name') ); ?>">
</a>
<?php else : ?>
<?php echo bloginfo( 'title' ); ?>
<?php endif; ?>
<?php if ( display_header_text() ) : ?>
<br>
<p class="site-description"><?php echo bloginfo( 'description' ); ?></p>
<?php endif; ?>
</div>
</div>
</div>
</div>
I think I should add somethink here but I don't know PHP enough:
if ( has_custom_logo() ) :
$custom_logo_id = get_theme_mod( 'custom_logo' );
$custom_logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( bloginfo('name') ); ?>" class="logo-img">
<img src="<?php echo esc_url( $custom_logo[0] ); ?>" alt="<?php esc_attr( bloginfo('name') ); ?>">
</a>
<?php else : ?>
<?php echo bloginfo( 'title' ); ?>
<?php endif; ?>
<?php if ( display_header_text() ) : ?>
<br>
<p class="site-description"><?php echo bloginfo( 'description' ); ?></p>
<?php endif; ?>
In additional I show you source of website in browser:
browser website source
All advice will be invaluable!
It looks like the title is empty.
In the else clause, if there is no custom logo, then a link will be displayed inside with text. The link is there, but it is not clickable because there is no text inside the link.
Can you check if bloginfo( 'title' ) is non-empty?
Another workaround would be to add a default picture that you know exists inside the link div, instead of text.
You just keep all header div in an Anchor element. Like below code
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"
<div class="cv-inner">
<div class="header-logo">
</div>
</div>
</a>
I personally would put the PHP code in the definition for CV-Outer div.
<?PHP
if (has_custom_logo()) {
echo "<div class='cv-outer clickHeader'>" + PHP_EOL;
} else {
echo "<div class='cv-outer'>" + PHP_EOL;
}
?>
Then, just add an onclick handler to your javascript for the clickHeader class to redirect to the proper URL.
If you need to keep the custom logo from the PHP code, just leave it there, delete the bit that has the URL.
Basically, the problem is that the hyperlink isn't clickable because it has no size. Instead of messing with CSS to make it fit...I'd just remove it and use JS for the clickhandler...
Full HTML Code:
<div class="entry-header">
<?PHP
if (has_custom_logo()) {
echo "<div class='cv-outer clickHeader'>" + PHP_EOL;
} else {
echo "<div class='cv-outer'>" + PHP_EOL;
}
?>
<div class="cv-inner">
<div class="header-logo">
</div>
</div>
</div>
Sample Javascript:
<script>
window.onload = function() {
var headers = document.getElementsByTagName('clickHeader');
for(var i = 0; i < headers.length; i++) {
var header = headers[i];
header.onclick = function() {
document.location.href="/";
}
}
}
</script>
i'm a beginner in code and even if people have probably answered this question i don't know how to implement it in my case...
in my wordpress, i have a woocommerce integrated and i would like to display a different header logo then the home page.
i have found the place where it is called but i dont know how to implement it correctly and not scrap all the code.
i would probably want something like this
<?php if (isset($class) && $class == 'woocommerce'): ?>
<img src="images/logo-with-white-text" />
<?php else: ?>
<img src="images/logo-with-dark-text" />
<?php endif; ?>
implemented in this code from my theme
<!-- START LOGO -->
<div id="logo" class="<?php echo $width_tagline ?>" >
<?php
if( yit_get_option( 'header-custom-logo' ) == 'yes' && yit_get_option( 'header-custom-logo-image' ) != '' ) : ?>
<a id="logo-img" href="<?php echo home_url() ?>" title="<?php bloginfo( 'name' ) ?>">
<?php $size = #getimagesize(yit_get_option( 'header-custom-logo-image' )); ?>
<img class="no-dark" src="<?php echo yit_ssl_url( yit_get_option( 'header-custom-logo-image' ) ) ?>" <?php if( yit_get_option( 'logo-retina-url' ) ): ?>data-at2x="<?php echo yit_ssl_url( yit_get_option( 'logo-retina-url' ) ) ?>"<?php endif ?>title="<?php bloginfo( 'name' ) ?>" alt="<?php bloginfo( 'name' ) ?>" <?php if( !empty($size) && isset($size[3] ) ) echo $size[3] ?> />
<?php if ( 'yes' == YIT_Layout()->enable_dark_header ) : ?>
<?php $size = #getimagesize(yit_get_option( 'header-dark-custom-logo-image' )); ?>
<img class="only-dark" src="<?php echo yit_ssl_url( yit_get_option( 'header-dark-custom-logo-image' ) ) ?>" title="<?php bloginfo( 'name' ) ?>" alt="<?php bloginfo( 'name' ) ?>" <?php if( !empty($size) && isset($size[3] ) ) echo $size[3] ?> />
<?php endif; ?>
</a>
<?php else : ?>
<a id="textual" href="<?php echo home_url() ?>" title="<?php echo str_replace( array( '[', ']' ), '', bloginfo( 'name' ) ) ?>">
<?php echo yit_decode_title( get_bloginfo( 'name' ) ) ?>
</a>
<?php endif ?>
<?php
if( yit_get_option( 'header-logo-tagline' ) == 'yes' ):
$class = array();
if ( strpos( get_bloginfo( 'description' ), '|') ) $class[] = 'multiline';
if ( yit_get_option('header-logo-tagline-mobile') == 'no' ) $class[] = 'hidden-xs';
$class = ! empty( $class ) ? ' class="' . implode( $class, ' ' ) . '"' : '';
?>
<?php yit_string( "<p id='tagline'{$class}>", yit_decode_title( get_bloginfo( 'description' ) ), '</p>' );?>
<?php endif ?>
</div>
<!-- END LOGO -->
I hope someone will be kind enough to help me out on this one!
Thanks in advance
My way doing this
<a href="<?php echo home_url(); ?>" class="logo_link">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.png" data-src="<?php echo get_template_directory_uri(); ?>/assets/images/logo-wc.png" alt="" class="logo">
</a>
<script>
$( document ).ready(function() {
if($('body').hasClass('woocommerce')) {
$('.logo_link img').attr('src', $(this).data('src'));
}
});
</script>
If woocommerce is installed and activated you can do this
<?php if(is_woocommerce()){ ?>
<img src="images/logo-with-white-text" />
<?php }else{ ?>
<img src="images/logo-with-white-text" />
<?php } ?>
I have a static top banner inside my header.php file build like this :
<div class="row-fluid top-banner">
<div class="container">
<div class="banner-overlay"></div>
<?php
$logo = of_get_option('logo', '' );
if ( !empty( $logo ) ) { ?>
<a class="brand brand-image" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo $logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><h1><?php if(!of_get_option('disable_description')){ ?><small><?php bloginfo( 'description' ); ?></small><?php } ?></h1></a>
<?php }else{ ?>
<a class="brand brand-text" href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><h1><?php bloginfo( 'name' ); ?><?php if(!of_get_option('disable_description')){ ?><small><?php bloginfo( 'description' ); ?></small><?php } ?></h1></a>
<?php }
if(of_get_option('disable_description')){ $top_banner_fix = 'style="top:15px;"'; }else{ $top_banner_fix = ''; }
?>
</div>
</div>
What I want to do is to change top-banner div content on a specific page, in my case the contact page which is created from the dashboard is not a template page.
So, I'm thinking to use the conditional tag :<?php is_page($page); ?>
The problem is that I'm not sure how to use this function. Is it possible to just add some markup inside the div and it will overwrite the existing one ?
Can you please give me some indications on how can I do this ?
Thank you!
is_page is a boolean function, so it's as easy as a new if else clause:
<div class="row-fluid top-banner">
<div class="container">
<div class="banner-overlay"></div>
<?php
$logo = of_get_option('logo', '' );
if (is_page($contactPage)) {
/*PUT STATIC CONTENT HERE*/
} else if ( !empty( $logo ) ) { ?>
<a class="brand brand-image" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo $logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><h1><?php if(!of_get_option('disable_description')){ ?><small><?php bloginfo( 'description' ); ?></small><?php } ?></h1></a>
<?php }else{ ?>
<a class="brand brand-text" href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><h1><?php bloginfo( 'name' ); ?><?php if(!of_get_option('disable_description')){ ?><small><?php bloginfo( 'description' ); ?></small><?php } ?></h1></a>
<?php }
if(of_get_option('disable_description')){ $top_banner_fix = 'style="top:15px;"'; }
else{ $top_banner_fix = ''; }
?>
</div>
</div>
For $contactpage: when you are logged in into your Wordpress admin site, go to the frontend. Then go to the contact page (the one you want to have this new content on). Click on edit in the top banner. Look at the link. (You can also get there via the dashboard).
The link will look a bit like this: post.php?post=280&action=edit
That number, 280 in this case, is the ID of the page. You can use that for $contactPage:
if (is_page(280)) { /*...*/ }
Hope this helps :)
For different banner on all pages and posts you can use Attachment Plugin and then have to create instance for that in function.php file. then you can see that attachment metabox in all pages and post form page in admin panel.
Try this and let me know if any further help required.
Thanks!
I have this wordpress template: http://bluth.is/wordpress/bliss/
and I want to change the header. The subtitle should be UNDER the logo and not next to it. I have tried to make the content bigger and the logo smaller but nothing works. Any ideas?
The Code from the header.php:
<div class="span9" style="height:90px;">
<p>
<a class="brand brand-image" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo $logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php if(!of_get_option('disable_description')){ ?></a>
</p>
<small><?php bloginfo( 'description' ); ?></small></div><?php } ?>
Using CSS margin you can move it wherever you want.
I don't know exactly the using pixles but here is how it suppose to be:
margin: 30px -100px 0;
Ofcourse there is a better way using photoshop to edit the logo and add him this subtitle.