Change my custom logo 'home destination' in Wordpress - php

header.php question here. I have a custom logo being used on a specific set of listings pages https://carolroyseteam.com/our-nice-home/ , I've assigned it using a body class assignment to swap the header $logo in the header.php. Then the rest of the site with the branding of the domain https://carolroyseteam.com/. Is there anything that can be done to assign a different url to the two $logo's?
To clarify my custom logo for Our Nice homes logo goes to '/our-nice-home/' and then have standard domain home logo link to the default logo cotainer ">
Using Divi Theme
<?php ob_start(); ?>
<header id="main-header" data-height-onload="<?php echo esc_attr( et_get_option( 'menu_height', '66' ) ); ?>">
<div class="container clearfix et_menu_container">
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && ! empty( $user_logo )
? $user_logo
: $template_directory_uri . '/images/logo.png';
ob_start();
?>
<?php
$classes = get_body_class();
if (in_array('ournicehomeslogo',$classes)) {
$logo="/wp-content/uploads/2019/10/1-ONH-Logo-05-carolroyseteam.png";}
?>
<?php
$classes = get_body_class();
if (in_array('single-listing',$classes)) {
$logo="/wp-content/uploads/2019/10/1-ONH-Logo-05-carolroyseteam.png";}
?>
<?php
$classes = get_body_class();
if (in_array('search-results',$classes)) {
$logo="/wp-content/uploads/2019/10/1-ONH-Logo-05-carolroyseteam.png";}
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="/our-nice-homes/">
<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
$logo_container = ob_get_clean();

Got it! Wordpress Divi Theme users will appreciate that this logo_container is a default in the header.php file. This has been the easiest way to both custom logo a specific page or pages and then modify the home url.
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php $classes = get_body_class();
if (in_array('ournicehomeslogo',$classes)) {
echo esc_url( home_url( '/our-nice-homes/' ) );}
else if (in_array('single-listing',$classes)) {
echo esc_url( home_url( '/our-nice-homes/' ) );}
else if (in_array('search-results',$classes)) {
echo esc_url( home_url( '/our-nice-homes/' ) );}
else{
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
$logo_container = ob_get_clean();

Related

Targeting Woocommerce shop page menu

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

Adding different logo on different wordpress pages

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

Different logo page wordpress

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 ) ) ?>" ....

How to add image and logo (psd) on wordpress theme (mystile) header?

I believe it goes somewhere here. The website is hosted locally via MAMP.
lets say images are:
localhost:port/uploads/headerbackground.jpg
localhost:port/uploads/logo.psd
how could I add header background and logo on the header?
<body <?php body_class(); ?>>
<?php woo_top(); ?>
<div id="wrapper">
<div id="top">
<nav class="col-full" role="navigation">
<?php if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) { ?>
<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
<?php } ?>
<?php
if ( class_exists( 'woocommerce' ) ) {
echo '<ul class="nav wc-nav">';
woocommerce_cart_link();
echo '<li class="checkout">'.__('Checkout','woothemes').'</li>';
echo get_search_form();
echo '</ul>';
}
?>
</nav>
</div><!-- /#top -->
<?php woo_header_before(); ?>
<header id="header" class="col-full">
<hgroup>
<?php
$logo = esc_url( get_template_directory_uri() . '/images/logo.png' );
if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' ) { $logo = $woo_options['woo_logo']; }
if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' && is_ssl() ) { $logo = preg_replace("/^http:/", "https:", $woo_options['woo_logo']); }
?>
<?php if ( ! isset( $woo_options['woo_texttitle'] ) || $woo_options['woo_texttitle'] != 'true' ) { ?>
<a id="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( get_bloginfo( 'description' ) ); ?>">
<img src="<?php echo $logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" />
</a>
<?php } ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<h3 class="nav-toggle"><mark class="websymbols">²</mark> <span><?php _e('Navigation', 'woothemes'); ?></span></h3>
</hgroup>
<?php woo_nav_before(); ?>
In general, I want to do this instead of that
Any help would be appreciated.
You can't add a PSD file like that. It's a Photoshop file that needs saving into something like JPG or PNG
Also looks like your Woo theme has that inbuilt functionality so check the settings
For header background image:
Navigate to Appearance > Header within the WordPress administration and check for "Header Image" and then upload your headerBackgroung image.
for PSD:You can't add a PSD for your logo.you can create logo image from psd and then you can upload

change header top banner content on specific page

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!

Categories