i am trying to findout, in which php file does the below exists.
Reason, the href does not work on the logo1.png. in my below code.
<div class="site-branding">
<h1 class="site-title">IRONWARE</h1>
<p class="site-description">Home Products..</p>
</div>
stylesheet:
.site-branding {
content: url("http://ironware.in/wp-content/uploads/2015/07/Logo1.png");
width: 35% !important;
Now to find, by browser > right click > Inspect element > in which PHP does the exists ?
I found the solution by adding the below to my childs theme's header.php
add_action( 'init', 'storefront_custom_logo' );
function storefront_custom_logo() {
remove_action( 'storefront_header', 'storefront_site_branding', 20 );
add_action( 'storefront_header', 'storefront_display_custom_logo', 20 );
}
function storefront_display_custom_logo() {
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-logo-link" rel="home">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php echo get_bloginfo( 'name' ); ?>" />
</a>
<?php
}
Related
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 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
This is website I am working on abraham-accountants.co.uk. However the logo appear on all the web pages but not on the homepage.
This php code I used to add logo in and uploaded logo file to ftp server.
// Display Site Title
add_action( 'smartline_site_title', 'smartline_display_site_title' );
function smartline_display_site_title() { ?>
<div class='my-logo'>
<img src="<?php bloginfo('template_directory');?>/images/AA.gif">
</div>
<a href="<?php echo esc_url(home_url('/')); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home">
<h1 class="site-title"><?php bloginfo('name'); ?></h1>
</a>
<?php
}
This was done on template-tag php file for smartline lite theme.
try this code by adding to functions.php in your themes folder,
function my_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/your-logo.png) !important; }
</style>';
}
add_action('login_head', 'my_logo');
I'm playing with html and css to make the home link of my header covering only the left half of the header size. Each time I'm resizing the Home Link, it changes my header size. I thought it was because they're in the same div so I put the
<img class="header-logo"...</>
above the
<a class="home-link"...</a>
and put it in its own div and gave a brand new id to the logo. Unfortunately that made my header wider which I don't want to. How would you proceed to reduce the homelink size?
I'm using Wordpress and its twentythirteen default theme.
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
Here is a sample of the related CSS:
.site-header {
margin:10px auto 0 auto;
max-width:980px;
padding:0;
background-size: 980px auto;
}
.site-header .home-link {
min-height: 50px;
}
.header-logo {
max-width:60%;
display:block;
padding-top:3px;
padding-bottom:5px;
position:relative;
}
header logo,title and description are all nested inside the .home-link. So changing the homelinks will have impact on the child classes.You might try the code below where you can style individual classes without affecting the other classes.
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"></a>
<img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
Why do you put so many classes in your html : why not
<header id="masthead" class="site-header" role="banner">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
<h1><?php bloginfo( 'name' ); ?></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
</a>
then
/* css */
.site-header {
margin:10px auto 0 auto;
/* max-width:980px; not needed : the visitor's choice...*/
padding:0;
background-size: 980px auto;
}
.site-header > a {
min-height: 50px;
width : 50%; /* site header link will cover only
a half of the header, the containing div */
}
.site-header > img {
max-width:60%;
display:block;
padding-top:3px;
padding-bottom:5px;
position:relative;
}
This is what I used in the end:
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" /></a>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
and
.site-header .home-link {
min-height: 169px;
max-width:50%;
position:static;
left:-250px;
}
Now everything seems OK, but not exactly, the responsiveness is broken and the menu is not resizing at low screen resolution because of the min-height: 169px; CSS property that I need otherwise the logo is out of the header section. One problem solved, here comes a new one. Edit: I still haven't figured out a solution for this.
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.