code snippets php Logo Title __after_logo add_action() printf() tc__f()

Display both logo and title in header

by Press Customizr|Published 19 December 2013

Here’s a quick snippet to display both your logo and your site title in the header.

add_action( '__after_logo' , 'display_my_site_title');
function display_my_site_title() {
    //first checks if there is a logo uploaded
    $logo_src               = esc_url ( tc__f( '__get_option' , 'tc_logo_upload') ) ;
    if ( empty($logo_src) ) 
        return;

   //then print the site title after
    printf('<h1><a class="site-title" href="%1$s" title="%2$s | %3$s">%4$s</a></h1>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_bloginfo( 'name') ),
        esc_attr( get_bloginfo( 'description' ) ),
        esc_attr( get_bloginfo( 'name') )
    );
}

Where to copy/paste this code? => in your functions.php file. I strongly recommend to create a child theme. Download a start-up child theme here.

Everything you need to know about child theme with Customizr here.

Hope this will help!

AUTHOR

Press Customizr

Hi! Our team is working everyday to help you publish your WordPress content the best possible way. :) Thanks for visiting our website. You can also visit our knowledge base.

357 posts

31 thoughts on “Display both logo and title in header”

31 comments

Menaka S
22 September 2016, 4 h 39 min

Hi,
The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site. Thanks 🙂
Tafadzwa
21 September 2016, 6 h 37 min

Hi Nicolas,

Thank you for a wonderful theme. I need your help please. I was trying to edit the Childify Me theme and I crushed my site.

Regards,

Tafadzwa
Laurent DuBerger
29 December 2015, 19 h 46 min

Thanks a lot Nicolas for this piece of code! Now how can I display the logo & site tile side by side, not one atop the other.
Sorry for my lack of knowledge, I have minimal coding notions, but I’m not a developper and the php code is a bit confusing for me.
Merci!
- presscustomizr
  4 January 2016, 13 h 24 min
  
  Hi Laurent !
  our developer team tries to handle technical requests for the Customizr free theme in the support forum, would you mind asking your question there ?
  https://wordpress.org/support/theme/customizr
  Thanks 🙂
Miss
17 October 2015, 21 h 04 min

Sorry, i just found the way to do it. You can just erase my comment. Thank you!
Piperaud
17 October 2015, 20 h 02 min

Hello. I want to thank you for this beautiful theme.
Are you french like me, as your name let me think?
If not : I’m very bad in english, and it’s worth in code… I want to put my logo instaead of my site title, but i don’t know what line of the code i have to change. Could you help me? I downloaded the plug-in “theme logo”, and downloaded my logo in the media center, but as i said, i don’t know where to paste the url of my logo…

Thank you for your answer (in french i hope! :))

Mrs. Piperaud
Peter
17 October 2015, 16 h 11 min

Hi Nicolas, I have not found any reference to making a site title text left aligned (did a search, but it does not appear to have come up on the forum).

In the Theme Customiser you can set the title to appear on the left, but the site title itself remains centre aligned. Where can I change this? I have a child theme set up to make such a change persistent across upgrades.

Thank you!
Mike Maassen
24 May 2015, 23 h 45 min

Hello,

I am using your theme as of today, and I’m loving it so far!
I’ve been using your piece of code shown above to show both the site title and the icon.

What i would like to do, is have both the icon and site title visible on my webpage. I just don’t want them on top of each other.
Is it possible to align them horizontally instead of vertically?

Thank you!
- Nicolas
  27 May 2015, 6 h 59 min
  
  Hi Mike, could you open a new topic in the support forum about this ?
  Thanks 🙂
Miryam KEBE
29 October 2014, 23 h 23 min

Hi ,

I have a problem, After the update I wanted to test and not a logo, it loads but instead I see the title of the site, and equally impossible to restore the old logo = /
- Nicolas
  30 October 2014, 11 h 40 min
  
  Hi Miryam,
  
  A user recently had the same issue. He was using a not up-to-date version of the JetPack WordPress plugin. After updating the plugin, he was able to upload and display his logo again without any problems.
  
  If you are in the same situation, please try this solution. If not, then you might want to desactivate all your plugins and see if the problem persists.
  
  If you identify a plugin in conflict with theme, may I ask to report it back here?
  
  Thanks and I hope this will help!
  Nicolas.
  (nice website by the way, many interesting informations)
Aure
20 October 2014, 7 h 46 min

Hi admin,

When i upload a logo on the site via theme admin panel, it is showing both title as well as logo but I just wanted to show logo, not title. I also checkout the header.php file but no related function i have seen there.
Pat Harmony
5 September 2014, 18 h 25 min

Hi my website with Customizr is in process. I am loving this theme big time. As a non website designer new to wordpress I simply cannot fine where to put the php functions code for some of the snippits. It would be helpful to have a drilldown of steps…ie go to Dashboard, next step, next step. I am sure it is right under my nose but I cannot find it. I want to play with things like centering my logo, etc. Thanks a bunch!
- Nicolas
  8 September 2014, 6 h 47 min
  
  Hi Pat,
  thanks for this feedback, I’m going to work on this drilldown to include in the documentation.
  Take care,
  Nicolas.
William
11 August 2014, 4 h 39 min

I would like to use this custom code to display both a logo and a title in the header of my blog. I am using the Karma theme on my web site. These are the steps I have taken:

1) Installed a child theme (www.presscustomizr.com/extension/customizr-child-theme/)
2) Installed wp-FileManager (http://wordpress.org/plugins/wp-filemanager/)
3) Configured wp-FileManager to allow all options (Create file, Create folder, etc)

At this point I do not know where to create the functions.php file with your custom code. I am new at WordPress so any help that you can give me would be appreciated!
- Nicolas
  11 August 2014, 8 h 45 min
  
  Hi William, this code snippet is specific to the Customizr theme and won’t work in another theme.
  You might want to ask the developer of the Karma theme if he can provide the appropriate code.
  Cheers
Shawn Rundblade
15 July 2014, 3 h 22 min

I am curious the the suggested/best way to replace the text in my logo, with just the graphic and make the text separate text so Google can see it. Suggestions?
sergio
10 July 2014, 13 h 52 min

Hi Nicolas,

How I can do to get the site description below the logo?.

Thank you for your time.
Adam Peter
8 May 2014, 10 h 09 min

Hi Nicholas, I have installed child theme, but do not have fuctions.php, only style.css. Where should I copy-paste the code? Thanks.
- Nicolas
  9 May 2014, 9 h 09 min
  
  Hi Adam,
  in the following child theme, you do have a functions.php file to edit : http://www.presscustomizr.com/extension/customizr-child-theme/
  Best
  - sergio
    10 July 2014, 16 h 48 min
    
    Hi Nicolas,
    
    How I can do to get the site description below the logo?.
    
    Thank you for your time.
Tobias
2 May 2014, 15 h 29 min

Thank you for this wonderful theme.
I would like to make the logo in the rectangle with description, social feed… Is it possible ?
- Nicolas
  2 May 2014, 16 h 02 min
  
  Hi Tobias,
  You will need to use the following hooks in class-header-main.php to implement those customizations :
  apply_filters( ‘tc_logo_img_display’, $html, $filter_args );
  apply_filters( ‘tc_logo_text_display’, $html, $logo_class);
  
  Chek out some examples of snippets here : http://www.presscustomizr.com/?s=tc_logo_text_display
Marianne Munro
6 January 2014, 22 h 25 min

Is it possible to put a logo (or small picture) in the upper right corner of the front page and leave the Site Title where it is on the left? If so, what code would I use in the custom css to do this?
Thanks
David
5 January 2014, 22 h 02 min

I tried to place this code into the child theme’s functions.php file, but all this does is make the code show up at the top of my page.

Any advice? (i am new to web design/development)
- Nicolas
  6 January 2014, 9 h 52 min
  
  Hi, can you share a link to your website?
  Thanks
q bone
2 January 2014, 11 h 22 min

Hi, great theme use!

is it also possible to display logo left and blogname to the right beside? instead of logo above blogname.

thanks
- Nicolas
  2 January 2014, 17 h 05 min
  
  Hi, sure you can do that with CSS styling, by playing with float properties of each blocks.
  
  See more about the float property here : http://www.w3schools.com/cssref/pr_class_float.asp
  
  Thanks and greetings!
Andrew
20 December 2013, 5 h 36 min

Hi Nicolas, first of all, thank you for the great theme! I have been playing with Customizr for some time, but have got confronted with the following problem: The items on the webpage (DIVs) are moving whenever I resize the browser window. I went through a lot of forums and tried many things, but nothing works. Please help! It might be very helpful to have a kind of a snippet or simple solution that is put out on this website for everybody since this problem arises for every newbie.

I am sorry if this is not the right place for posting it.
Thanks!
- Nicolas
  20 December 2013, 9 h 49 min
  
  Hi Andrew, the smooth moves that you see on resize are caused by a CSS3 property : transition: width, …, -moz-transition: width ….
  Easy to disable with the value none.
  Hope this helps,
  - Andrew
    21 December 2013, 17 h 49 min
    
    Nicolas, I tried to put ” -moz-transition:none;” into #wrapper { } in the beginning, also into the #customizr-slider.carousel .item {}, and so on. The only part of the website that does not move on resizing the window (and everything else does move) is the manu bar, but it eventually disappears when the window size becomes too small.. I am confused — if I want the property “-moz-transition:none;” to be attributed to every item on the website, how can I do so? (I thought the #wrapper in the very benning would help) Thank you a lot!

Comments are closed.