Adding a multi-line tagline

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:

/* START OF Adding a multi-line tagline */
.site-description:before {
content:    "This is an extra tagline above the existing Tagline";
display:    block;
text-align: right;
}
.site-description:after {
content:    "This is an extra tagline below the existing Tagline";
display:    block;
text-align: right;
}
/* END OF Adding a multi-line tagline */

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.

// START OF Adding a multi-line tagline 
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; } // END OF Adding a multi-line tagline

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

/* START OF Adding a multi-line tagline */
h4.site-description {Add CSS here;}
h5.site-description {Add CSS here;}
h6.site-description {Add CSS here;}
/* END OF Adding a multi-line tagline */

40 thoughts on “Adding a multi-line tagline”

Comments are closed.