Archived topic
Bilingual site, split title on two lines
1 reply · Started by Riccardo on September 12, 2022
Hello there. I am running a language learning site, I would like H1 titles to look something like that
THANK YOU VERY MUCH
ありがとうございました
but now I get something like
THANK YOU VERY MUCH ありがとうございました
and often times the length of the two titles makes the Japanese translation break and end up on the second line
THANK YOU VERY MUCH ありがとうござ
いました
I am using the same font. I would like to just press enter or shift enter, generate a new line to fill the Japanese title and save.
Is this achievable with a simple setting / CSS?
Thank you very much.
Hi there,
the Site title field won't handle the HTML you require to add the line-break.
So you would need some PHP to add your two liens and the necessary HTML.
Try this:
add_filter( 'generate_site_title_output', function( $output ) {
$titleHTML = '<span class="line one">THANK YOU VERY MUCH</span><span class="line two">ありがとうございました</span>';
return sprintf(
'<%1$s class="main-title" itemprop="headline">
<a href="%2$s">%3$s</a>
</%1$s>',
( is_front_page() && is_home() ) ? 'h1' : 'p',
esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
$titleHTML
);
});This doc explains adding PHP to your site: https://docs.generatepress.com/article/adding-php/
Then you can use some CSS to stack them:
.main-title .line {
display: block;
}