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.
Related
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;
}
Using WordPress on the default twentysixteen theme. This is a code issue not a theme issue which is why I'm posting it on SO. I have a feeling I'm just doing something simple wrong but I've searched and figured out what code I need to change but it seems like it's not making the changes as expected.
So what I'd like to do is change the LOGO that is currently going to the website "home". I'm talking about the front end logo at the top left that i'd like to go to one of my other sites which has more relevant information.
But when I change this code:
<div class="header-image">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
To:
<div class="header-image">
<a href="http://external-website-here.com">
<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
It doesn't seem to be affecting where I'm redirected when clicking on the logo image. In other words it still goes to the home_url it seems instead of the external site.
Any suggestions are much appreciated.
Additional Information: No caching is enabled, tried other browser/devices to make sure it's not a cache issue.
Update: Even remove the entire code from my first code box it doesn't change anything on the front end. Maybe I'm modifying the wrong file? How do I figure out what file the logo code is living in?
You're looking at the wrong code.
You need to edit line 35 and 37 of the header.php, which I can see here: https://github.com/WordPress/twentysixteen/blob/master/header.php
This is because you don't have a logo, as far as I can tell anyway.
Update:
I've updated your site to work.
What I did was add function to filter the home url;
//functions.php (end of file)
/**
* Changes the url returned from home_url();
*/
function change_home_link($url, $path, $orig_scheme, $blog_id){
return 'http://google.com';
}
Then add and remove the filter in the header
//header.php line 32
add_filter( 'home_url', 'change_home_link' );
twentysixteen_the_custom_logo();
remove_filter( 'home_url', 'change_home_link' );
You could also just remove the twentysixteen_the_custom_logo() function and replace it with what ever you want.
I'm using Wordpress with plugins "Wordpress SEO".
I would like to put 2 different fonts in my Title.
example : Core Events Ireland; 'Core Events' in blue, and 'Ireland' in red.
How can I make that by plugins or PHP ?
Does it work in header.php ?
I think it's in this line :
<h1 class="site-title">
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
Can you tell me if I'm right, and if that doesn't make error with my plugins Wordpress SEO ?
You would need to add some structure to your header, so could not use the bloginfo function directly.
<h1 class="site-title">
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<span class="title-front">Core Events</span> <span class="title-back">Ireland</span>
</a>
</h1>
You can then style .title-front and .title-back any way you want, e.g. color.
This should not interfere with WordPress SEO, because you are not modifying any of the SEO related tags, but just changing the look of the header.
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>
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!