-
I selected a logo image from Theme Options, but it only gives me the option to either have a logo or to keep the text/site title alone, while I would like to have them both, and style the text in CSS.
I’ve searched around and found this post: colorlib dot com/wp/forums/topic/add-a-logo/#post-16403, but it’s not helpful since I would like to do this in a child theme rather than hack on the main theme.
I’ve tried to copy the travelify_headerdetails function in the child theme’s functions.php, and remove the line with “if” pertaining to the logo/text as the user said in that post, but the site ended up spitting errors, so I’m guessing that’s not the right way. -
This one also has to do with header-extensions.php. Is it possible to change the separator in the title? So instead of having the pipe glyph, I could change to a different glyph.
- First of all you need to remove existing action and then register a new one. You can add this code to Child Theme
functions.phpfile. It looks like this:
/**
* Remove the entire travelify_headerdetails function.
*/
add_action( 'init' , 'remove_travelify_headerdetails' , 5 );
function remove_travelify_headerdetails() {
remove_action( 'travelify_header', 'travelify_headerdetails', 10 );
}
/**
* Add a new header details based on the old ones
*/
add_action( 'travelify_header', 'new_travelify_headerdetails', 10 );
/**
* Shows Header Part Content
*
* Shows the site logo, title, description, searchbar, social icons etc.
*/
function new_travelify_headerdetails() {
?>
<?php
global $travelify_theme_options_settings;
$options = $travelify_theme_options_settings;
$elements = array();
$elements = array( $options[ 'social_facebook' ],
$options[ 'social_twitter' ],
$options[ 'social_googleplus' ],
$options[ 'social_linkedin' ],
$options[ 'social_pinterest' ],
$options[ 'social_youtube' ],
$options[ 'social_vimeo' ],
$options[ 'social_flickr' ],
$options[ 'social_tumblr' ],
$options[ 'social_instagram' ],
$options[ 'social_rss' ]
);
$flag = 0;
if( !empty( $elements ) ) {
foreach( $elements as $option) {
if( !empty( $option ) ) {
$flag = 1;
}
else {
$flag = 0;
}
if( 1 == $flag ) {
break;
}
}
}
?>
<div class="container clearfix">
<div class="hgroup-wrap clearfix">
<section class="hgroup-right">
<?php travelify_socialnetworks( $flag ); ?>
</section><!-- .hgroup-right -->
<hgroup id="site-logo" class="clearfix">
<?php
if( $options[ 'header_show' ] != 'disable-both' && $options[ 'header_show' ] == 'header-text' ) {
?>
<h1 id="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php
}
elseif( $options[ 'header_show' ] != 'disable-both' && $options[ 'header_show' ] == 'header-logo' ) {
?>
<h1 id="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo $options[ 'header_logo' ]; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php
}
?>
</hgroup><!-- #site-logo -->
</div><!-- .hgroup-wrap -->
</div><!-- .container -->
<?php $header_image = get_header_image();
if( !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 echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
<?php endif; ?>
<?php
if ( has_nav_menu( 'primary' ) ) {
$args = array(
'theme_location' => 'primary',
'container' => '',
'items_wrap' => '<ul class="root">%3$s</ul>'
);
echo '<nav id="main-nav" class="clearfix">
<div class="container clearfix">';
wp_nav_menu( $args );
echo '</div><!-- .container -->
</nav><!-- #main-nav -->';
}
else {
echo '<nav id="main-nav" class="clearfix">
<div class="container clearfix">';
wp_page_menu( array( 'menu_class' => 'root' ) );
echo '</div><!-- .container -->
</nav><!-- #main-nav -->';
}
?>
<?php
if( is_home() || is_front_page() ) {
if( "0" == $options[ 'disable_slider' ] ) {
if( function_exists( 'travelify_pass_cycle_parameters' ) )
travelify_pass_cycle_parameters();
if( function_exists( 'travelify_featured_post_slider' ) )
travelify_featured_post_slider();
}
}
else {
if( ( '' != travelify_header_title() ) || function_exists( 'bcn_display_list' ) ) {
?>
<div class="page-title-wrap">
<div class="container clearfix">
<?php
if( function_exists( 'travelify_breadcrumb' ) )
travelify_breadcrumb();
?>
<h3 class="page-title"><?php echo travelify_header_title(); ?></h3><!-- .page-title -->
</div>
</div>
<?php
}
}
}
/****************************************************************************************/
This code already included description field, so you don’t need to do anything. Just copy/paste the following code and you are ready to go.
- Those are SEO related settings and you can tweak them using any SEo plugin such as SEO by Yoast or any other.
- Thanks for the code, but it did not change anything, I still can’t get the logo to show up coupled with the site title
remove existing action and then register a new one
What do you mean by “action” here?
- Will try it out, thanks
I merely asked because on other themes I remember I could manually change the way the (tab/document) title displays myself.
- I thought that you were looking to add Logo + Description and not website title but Ok. Now that you have the basic code in place you can modify this code any way you want to. You can follow the thread mentioned in your original answer and do other changes. The main thing is that you can now change everything via Child Theme and from there you can develop this idea further.
Here you can read more about remove_action and add_action but I it not crucial here and I have already implemented that part.
- That’s plugin territory and this kind of option could be there only for compltely outdated themes that are still on WordPress.org or premium themes that goes by different rules.
Okay, modified the code. I’ll post the lines I removed for others who might have the same requirements as me:
<?php
}
elseif( $options[ 'header_show' ] != 'disable-both' && $options[ 'header_show' ] == 'header-logo' ) {
?>
Also removed the header with the site description since I don’t have/need one:
<h2 id=“site-description”><?php bloginfo( ‘description’ ); ?></h2>
Though now I have a problem with the text (site title, not description), I can’t seem to “decouple” it from the logo (it always stays above the logo) when I try to give it arbitrary positions in style.css (top: left: right: etc.), unless I use position: absolute; which messes the layout of the header and places the menu under the header over the logo.
I need to see your website URL to see what is going on.
But since logo and website title are not absolutely position it might be that logo and website title are already like that in your HTML hierarchy. I really doubt that CSS switches positions for both of them. You can also use different IDs and classes for these elements, so no existing styles would get applied.
<h1 id="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
<h1 id="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo $options[ 'header_logo' ]; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</h1>
With this one instead:
<h1 id="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo $options[ 'header_logo' ]; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</h1>
<h1 id="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
The only thing that is changed is that I switched logo with website title.
Let me know if there is anything else.
The title still “sticks” to the logo unfortunately. I want to be able to position the site title over the image in the bottom-right corner.
Then you need to change classes for these elements or add some extra class because right now both are the same, so you really can’t target them properly. Then make website title absolute positioned and then push it where you want it.
If you want to put one on top on another it would be much easier to create one big image to include both of them. Otherwise you will have to use different position for each device screen size. It’s not that difficult as there are CSS media queries but why to go the longest route when you can create an image in the first place.
Ah right, forgot you mentioned earlier about putting those into different classes, sorry!
But you’re probably right, I should make an image with the text.
I’ll mark this thread as resolved for now.