I'm editing the twentytwelve theme of wordpress. I want to have a different header image dependant on category archive page, by the slug name. That isn't really an issue, I lack php knowledge and there is something wrong with my markup, either missing some brackets or a closing php tag, I would be grateful to see what the problem is!
This is the code below, what I'm trying to get it do is when football page is viewed it will have a different image to that page, same with baseball. Every other page will just use the header image that is used in the backend of of the twentytwelve theme options.
<?php $header_image = get_header_image();
if( is_category( 'basball' ) ) :
<img src="banner1.jpg" alt="baseball"/>
elseif( is_category( 'football' ) ) :
<img src="banner2.jpg" alt="football"/>
else ( ! empty( $header_image ) ) : ?>
<img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
Error msg:
Parse error: syntax error, unexpected '<' in /home/topteamf/public_html/wp-content/themes/twentytwelve/header.php on line 60
Thanks all!
You're not closing your PHP tags. You have to separate your HTML and PHP. Like this:
<?php $header_image = get_header_image();
if( is_category( 'basball' ) ) : ?>
<img src="banner1.jpg" alt="baseball"/>
<?php elseif( is_category( 'football' ) ) : ?>
<img src="banner2.jpg" alt="football"/>
<?php elseif( ! empty( $header_image ) ) : ?>
<img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
Related
I'm attempting to hide/swap the logo and menu item color in Woocommerce, but to no avail. Basically most of my site uses the standard nav but i would like for a different logo and different navigation color to appear on all the shop related pages. So hide one and then show another, depending on the page.
As my navigation is transparent I only want this on the shop pages. I understand that I can target pages through conditional tags, (for example
is_product_category()
but not sure how to write it all to target those pages and swap/hide the above too. I'm using Divi theme. I can supply images for clarification if necessary...
Appreciate the help from Wordpress heads!! thanks
Edit >
<?php
// This is targeting the front page as set in Dashboard => Settings => Reading and uses the logo as setup in Divi Options.
if ( is_front_page( )) {
?>
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
? $user_logo
: $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
<?php
//This is targeting the page with the slug page-name-slug.
} elseif ( is_page( 'botanical-collection' ) ) {
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="custom-logo" src="/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
</a>
</div>
<?php
//This is targeting the page with the id 724.
} elseif ( is_page( '724' ) ) { //can use page id or slug
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="custom-logo" src="https://www.example.com/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
</a>
</div>
<?php
//This is what we show if previous conditions are not met. In this case, it defaults back to the logo as set in Divi options.
} else {
?>
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
? $user_logo
: $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
<?php
}
?>
I know 2 ways to do it:
1) Conditional tags:
With wordpress and woocommerce conditional tags that you will use on hooked functions (in the function.php file of your active theme) or directly in the wordpress or woocommerce templates.
Example: is_shop(), is_product_category(), is_product_tag(), is_product(), is_cart(), is_checkout() …
You will be able to conditionally add classes or IDs to the html tags in the templates for example.
Usage example:
<?php
// Shop page
if (is_shop())
$class = ' the-shop';
// single products
if (is_product())
$class = ' single-product';
// Cart page
if (is_cart())
$class = ' the-cart';
?>
<div class="some-class<?php $class; ?>">
Click me
</div>
Then for example, for shop page you will get this generated code:
<div class="some-class the-shop">
Click me
</div>
Then you will be able to use the-shop class in your CSS file to show/hide, make changes…
Is also possible to build your custom conditional functions…
2) CSS Classes:
With CSS based on the body CSS classes (and some other CSS classes), that are specific to woocommerce pages. You can discover them with the developer tools of your browser when navigating in the WooCommerce frontend pages of your web site.
In the body class specific to WoocommerCe shop page you get this classes for example:
<body class="archive post-type-archive post-type-archive-product woocommerce woocommerce-page">
That you can use in the style.css file of your child theme to show/hide DOM elements…
Advice: Is much better to use a child theme.
UPDATE BASED ON YOUR UPDATE
I have inserted the is_shop() conditional tag in your code
<?php
// This is targeting the front page as set in Dashboard => Settings => Reading and uses the logo as setup in Divi Options.
if ( is_front_page( )) {
?>
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
? $user_logo
: $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
<?php
// ### HERE ==> THE WOOCOMMERCE SHOP PAGE (YOU CAN EDIT THE CODE BELOW)
} elseif ( is_shop() ) {
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="custom-logo" src="/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
</a>
</div>
<?php
//This is targeting the page with the slug page-name-slug.
} elseif ( is_page( 'botanical-collection' ) ) {
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="custom-logo" src="/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
</a>
</div>
<?php
//This is targeting the page with the id 724.
} elseif ( is_page( '724' ) ) { //can use page id or slug
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="custom-logo" src="https://www.example.com/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
</a>
</div>
<?php
//This is what we show if previous conditions are not met. In this case, it defaults back to the logo as set in Divi options.
} else {
?>
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
? $user_logo
: $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
<?php
}
?>
References:
WooCommerce conditional tags
Template Structure + Overriding Templates via a Theme
I'm trying to use WordPress' new custom logo feature to accomplish the following:
Display a default/fallback logo.
If WordPress version supports custom logo, allow user to replace the default/fallback logo with a custom logo in the Customizer.
If WordPress version doesn't support custom logo or no custom logo is set (or it is removed), display default/fallback logo.
So far, this is best code I have to work with:
<?php if ( function_exists( 'the_custom_logo' ) ) : ?>
<?php if ( has_custom_logo() ) : ?>
<?php the_custom_logo(); ?>
<?php else : ?>
<h1 class="site-title"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" width="100" height="50" /></h1>
<?php endif; ?>
<?php else : ?>
<h1 class="site-title"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" width="100" height="50" /></h1>
<?php endif; ?>
Is there a cleaner or more efficient way of doing this without repeating the code for the fallback image twice?
Thanks but I think I found a better solution:
<?php if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) : ?>
<?php the_custom_logo(); ?>
<?php else : ?>
<h1 class="site-title"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" width="100" height="50" /></h1>
<?php endif; ?>
You can test both function_exist() and has_custom_logo() in same if condition for getting a single else condition.
$logo = ( ( function_exists( 'the_custom_logo' ) ) && ( has_custom_logo() ) ) ? the_custom_logo() : null;
if ($logo) {
echo $logo;
} else {
echo '<h1 class="site-title"><img src="' . get_stylesheet_directory_uri() . '/images/logo.png" alt="' . bloginfo( 'name' ) . '" width="100" height="50" /></h1>';
}
I don't understand how I get an default image from theme folder when Option Tree logo is not selected.
<div id="logo-section">
<?php if ( function_exists( 'ot_get_option' ) ) : ?>
<?php $logo = ot_get_option( 'pp_logo_upload' ); ?>
<a href="<?php bloginfo('url'); ?>">
<img src="<?php echo $logo; ?>" class="logo" />
</a>
<?php endif; ?>
Option Tree accepts a second parameter for ot_get_option that is the default in case no option is saved.
<?php if ( function_exists( 'ot_get_option' ) && ( $logo = ot_get_option( 'pp_logo_upload', 'some-image.png' ) ) != '' ){ ?>
<div id="logo-section">
<img src="<?php echo esc_attr( $logo ); ?>" class="logo" />
</div>
<?php } ?>
I trying to display a different logo for a page in a wordpress site.
I have the default Logo theme, and i want to insert a different logo for a page.
here is the code that manage the logo display in the theme file:
<a href="<?php echo home_url() ?>/" title="<?php bloginfo( 'name' ) ?>" class="logo <?php if ( empty( $logo ) || $logo_type === 'site-title' ) echo 'text-logo' //xss ok ?>" style="min-width:<?php echo $logo_size['width'] / 2 // xss ok ?>px"><?php
if ( $logo && $logo_type === 'image' ):
?>
<img src="<?php echo esc_url( $logo ) ?> " alt="<?php bloginfo( 'name' )?>" class="normal-logo" height="<?php if ( ! empty( $logo_size['height'] ) ) echo $logo_size['height']/2 // xss ok ?>" style="<?php echo esc_attr( $logo_style ) ?>"/>
<?php
else:
bloginfo( 'name' );
endif;
?
I want to insert a condtional tags function after the img src= like this:
else if(is_page('Name-Page')){
echo '<img src="images/logo-for-page.png" />';
}
I try to insert the funcion directly after the img src but t doesn't work.
Any idea? thank you
<img src="<?php echo ( is_page('Name-Page') ? "images/logo-for-page.png" : esc_url( $logo ) ) ?>" ....
i'm using the Casper theme on Wordpress. It displays a header image across the whole site, however i'd like it to display the featured image when viewing a post.
I've found the code below in header.php
<header id="masthead" role="banner" class="site-head site-header" <?php if(get_header_image() ) : ?>style="background-image: url(<?php header_image(); ?>);"<?php endif ?>>
Any help would be much appreciated.
Thanks
you can try something like this
<?php
if ( is_singular() && has_post_thumbnail( $post->ID ) && ($image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) :
echo get_the_post_thumbnail( $post->ID );
elseif ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>