Adding a multi-line tagline


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Last Reviewed: 28-Aug-15 (3.4.8) 3.1-3.4.*

Your site’s tagline is used to explain, in a few words, what the site is about. But maybe you want to use it for something else, or maybe you need more than a few words.

There’s a downside to using your tagline for other things: search engines know WordPress so well that they will expect to find a site description there and not, for example, an address. But it’s your site and you can do what you want with it, right? This article shows you how.

If you want to add just one or two simple extra lines (with no html tags), you can use a CSS solution. If you need more than that (or you need to use html tags), then you will need to use a more complex php solution.

 

Adding one/two extra lines with simple CSS

Where to copy/paste this code?

NoteSince Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes guidelines, you cannot use single (double) quotes in the Custom CSS in customizer. Use a Child Theme.

The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then We strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

To add a second/third line (which contains no html) to the tagline, put the following in your Custom CSS or child-theme’s stylesheet:

Credit: @paulwpxp/@Bob

 

Adding multiple extra lines with php

Where to copy/paste this code?
We strongly recommend you create a child theme and add this to the Child Theme functions.php.
Download a start-up child theme here.

Remember: you shouldn’t edit the theme’s functions.php.

Then you can style each line as required, for example:


Related Snippets you may also like


40 thoughts on “Adding a multi-line tagline

  • Menaka S

    Hi,
    Add this

    or this

    to your child theme’s style.css

  • Maria Tee

    Hi, a great theme and a great snippet, thanks! I used the php method to display two additional Tag Lines but now have a problem with them in that they display on one line (not on two separate ones) and I can’t figure out how to separate them. Would you be able to suggest a fix? Thanks a million.

  • Marina Qattan

    Hiya,

    It works great on desktop but on Mobile mode the writing is all squished in one corner, I added the css below but nothing seems t change

    /* END OF Adding a multi-line tagline */

    @media {
    h4.site-description {
    font-size: 5px;
    padding-left: 0;
    margin-top: 15px;
    }

    • Marina Qattan

      sorry ignore ( /* END OF Adding a multi-line tagline */ ) don’t know how that ended up in the comment.

      Thanks
      Marina

  • Roy Hammans

    I echo the fact that the Custom CSS method appears not to work currently.

    Pasting this code into Custom CSS displays correctly in the adjacent preview, but on saving and publishing it does not appear on the live site.

    Opening Custom CSS again shows that forward slashes have been introduced into the code for ‘content’.

    • Dave Bardell Post author

      Rocco has just confirmed: Since Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes guidelines, you cannot use single (double) quotes in the Custom CSS in customizer. You need a child-theme.

      I’ll update the Snippet to reflect this. Thanks for pointing it out.

  • Bob

    With the latest version of customizr pro as of 15 Aug 2015 the css method to add simple text multi-line tagline does not seem to work in Firefox anymore.

  • Borja V. Sorlí Sanz

    Bonjour Nicola & Dev!
    I was trying to include a link or a button in the secondary tagline. I was trying to include a link by using the next code but it doesn’t work.

    Please, could you help me to include a button (or a link) in a secondary tagline (just like “Go Pro” & “Demo” buttons you have in this page).

    Thanks, I really consider you’re doing an amazing work with Customizr.

    • Borja V. Sorlí Sanz

      I feel I didn’t explain it well at all, I would like just to include buttons (like “Go Pro” & “Demo” buttons you have here) in a secondary tagline.

  • Kevin Bushman

    The lines I’ve added are all in H2. Can you help explain how to assign each line to H3, H4, etc? I am only able to add CSS to all the lines. Thanks!

  • Alex

    I was unable to get the PHP version to work since updating, however I believe that it was to do with the hook – specifically, there is a space after tc_tagline_text before the apostrophe than needs to be removed. It is now working again for me. (WP4.1, Customizr 3.2.17)

  • yogesh

    add_filter( ‘tc_tagline_text ‘, ‘my_tagline_text’ );
    function my_tagline_text($html) {
    $myExtraTaglines = ‘
    This is my 2nd line
    This is my 3rd line
    This is my 4th line
    ‘;
    $html = $html . $myExtraTaglines;

    return $html;
    }
    ——————

    is not working aftr version update??

    • Nicolas

      Hi Yogesh, it may be a hook priority problem. Try to set a higher priority like :

      add_filter( ‘tc_tagline_text ‘, ‘my_tagline_text’ , 40 );

      I hope this will help,
      Nicolas.

  • Audentes

    This is a great snippet. I’m not a coder, I’ve done my own WordPress theme in Artisteer, and I’d like to break up BOTH the Title and the tagline. Would your snippet lend itself to also breaking up the Title? Thanks!

  • Bob

    Dave,
    Since the css :after location seemed to work in your snippet above, I tried your technique using the css :before location and was able to make a 3 line tagline without modifying the function.php. This makes the normal tagline the middle line or line 2 of 3 and the :before and :after as you would expect. Is this ok, or does it have site performance implications?

    • Dave Bardell Post author

      That’s fine Bob, unless you can see a marked slowdown (but I doubt it).

      With css and php there’s always different solutions to achieve the same aim. If you’re running a large, commercial site with multi-hits then it might need analysing but I doubt you’re in that space!

      I’ve updated the snippet.

      • Bob

        Dave or Nicolas,
        This 3 line tagline css has worked great for me since May 2014, but with the 3.3.1 update my css content gets broken with added slashes – content: “line1” shows correctly in the customize edit window, but when saved and then the exiting the customize window, the css line gets changed to content: /”line1″/

  • David

    Hi, thanks for the snippet.
    I have to add a shortcode in the 2nd line that will show up some language flags, the code could be placed like this:

    or in the following way

    .

    Any suggestions?

  • Brice

    Hello, Why when I am using this code, it is impossible to copy/paste the text ? It is important for me because, it is my mail address.

    Thanks

  • Laur

    Hi, thank you for a nice code snippet. Do you have any idea how i can translate secondline of tagline when i use polyland as a translator plugin. Thanks

Comments are closed.