I'm a front-end web developer struggling with some theme option support. I am struggling to write a simple function in my header.php which allows me to do the following:
"if user uploads an image, use the image. If else use 'logo_text' and echo output. If user doesnt upload image or logo_text use default of 'My Site'"
Can anyone point me in the right direction to get started? I don't know where to begin for this one.
<li class="name">
<!-- Logo Text -->
<h1><a href="<?php bloginfo('url'); ?>/home" title="<? echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<? $novus_logo_text = get_option('novus_logo_text'); echo $novus_logo_text; ?>
</a></h1>
<!-- Logo Image -->
<a href="<?php bloginfo('url'); ?>/home" title="<? echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<? $novus_logo_upload = get_option('novus_logo_upload'); echo '<img class=\"logo"\ src="'.$novus_logo_upload.'" width=\"100%"\ />'; ?>
</a>
</li>
The code above works just fine. However if a client uses both the logo_text input and uploads a logo image they will both output. I need either or, with the image taking priority. I hope this makes sense.
You should really learn basic control structures even if your a front end guy, if, while, for, foreach, switch.
<li class="name">
<?php if($novus_logo_upload = get_option('novus_logo_upload')){ ?>
<!-- Logo Image -->
<a href="<?php bloginfo('url'); ?>/home" title="<? echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<? echo '<img class=\"logo"\ src="'.$novus_logo_upload.'" width=\"100%"\ />'; ?>
</a>
<?php } else if($novus_logo_text = get_option('novus_logo_text')){ ?>
<!-- Logo Text -->
<h1><a href="<?php bloginfo('url'); ?>/home" title="<? echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<? echo $novus_logo_text; ?>
</a></h1>
<?php } else { ?>
<!-- Default -->
<?php } ?>
</li>
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 am new to wordpress and i have created blog using it.All blogs are on the home page.I have also upload the logo on home page and its visible only on home page so when user click on any of particular blog the logo is not visible there.
<div class="logo">
<?php if ( get_theme_mod('himalayas_logo', '') != '') { ?>
<?php theme_logo(); ?>
<?php } ?>
<?php if (function_exists('the_custom_logo') && has_custom_logo( $blog_id = 0 )) {
himalayas_the_custom_logo();
} ?>
</div>
Remove condition of check option value now code will be:
<div class="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="" />
</a>
</div>
Finally Get answer
revert all code to original modify code just go to
Appreance->Theme->customize->Himalayas Header Options->Header Title/Tagline and Logo->select option "Header Logo Only"
That's it
In a custom Wordpress blog site designed by our marketing agency, I need to have the home page slider images open their URL links in a new window:
Here's the link variable code from slider.php:
<?php foreach ( $sliders as $slider ) : ?>
<li>
<?php if ( ! empty($slider['slider_url']) ) : ?><a href="<?php echo $slider['slider_url']; ?>"><?php endif; ?>
<img src="<?php echo $slider['slider_image']['url']; ?>" />
<?php if ( ! empty($slider['slider_url']) ) : ?></a><?php endif; ?>
</li>
<?php endforeach;?>
If your link is opening in the same window properly then you need to add target="blank". Make the following changes and enjoy.
replace this <a href="<?php echo $slider['slider_url']; ?>"> with <a href="<?php echo $slider['slider_url']; ?>" target="_blank">
Why are you double checking if not empty slider_url ?
Also, you should put the 'li' tag inside the if statement, because if the data are empty you don't want an empty 'li' tag to exist inside the slider.
Anyway, this should do what you asked for
<?php foreach ( $sliders as $slider ) : ?>
<?php if ( ! empty($slider['slider_url']) ): ?>
<li>
<a href="<?php echo $slider['slider_url']; ?>" target="_blank">
<img src="<?php echo $slider['slider_image']['url']; ?>" />
</a>
</li>
<?php endif; ?>
<?php endforeach;?>
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.