Line break in header slider title

Hi,
is it possibile to put a line break (html) inside the title of a slide of the header slider on the homepage? I tried <br> or </br> but it doesn’t seem to work :confused:
If not, is there an alternative? it’ll be great!

thanks!

D.

Dear D,

For security reason, HTML tags aren’t allowed to be inserted into the main slide title input field. Alternatively, you can pass it securely using a couple of jQuery code. Please follow the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

jQuery(function($) {

  if( $('.slide-item').length ){

    var slideText1 = 'Main slide <br /> title';
    var slideText2 = 'Main slide <br /> title';
    var slideText3 = 'Main slide <br /> title';
    var slideText4 = 'Main slide <br /> title';
    var slideText5 = 'Main slide <br /> title';
    
    $( '.slide-item:nth-of-type(1) .slide-inner .maintitle' ).html(slideText1);
    $( '.slide-item:nth-of-type(2) .slide-inner .maintitle' ).html(slideText2);
    $( '.slide-item:nth-of-type(3) .slide-inner .maintitle' ).html(slideText3);
    $( '.slide-item:nth-of-type(4) .slide-inner .maintitle' ).html(slideText4);
    $( '.slide-item:nth-of-type(5) .slide-inner .maintitle' ).html(slideText5);
    
  }

});

  1. Update

Regards,
Kharis

Kharis:
I tried your solution, but it didn’t do the break I wanted.

Once you are done applying the code, please clear your web browser’s cache then reload your site. If your site is being cached by a plugin like W3 Total Cache, please empty all cache as well. If it didn’t help, would you mind sharing your site URL here?

Regards,
Kharis

Hi Kharis,
I’m trying to split the banner title on this site into two lines like the following.

Executive Sales Coaching
Career & Transition Coaching

I installed the plugin you suggested “TC Custom JavaScript” and pasted the code into the provided box, but from there I am not sure how to split the banner title.

http://977.ef8.myftpupload.com

Thanks for your help.

For stopped slider, please use this code:


jQuery(function($) {

  if( $('.text-slider-stopped').length ){

    var slideText1 = 'Main slide <br /> title';
    
    $( '.text-slider-stopped .maintitle' ).html(slideText1);
    
  }

});

Regards,
Kharis

Works perfect.

When you get a chance can you show me how to decrease the spacing between the two titles.

Thank you for all your help Kharis.

You can add the following CSS code into your site’s additional CSS option which resides under the Appearance > Customize > Additional CSS.


.text-slider .maintitle {
  line-height: 40px;
}

Regards,
Kharis

That was simple, for some reason I thought the line height would also be controlled by the Javascript.

I have always come to these message boards and found your postings to be a great help. Thank you!

-amiskinyar

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

I tried the process and code above. Before I update the code copy, the front end shows the placeholder copy you wrote (‘main slide and title’), but when I update the first slide with my copy it changes all of them back to the copy that’s written in the original input fields, and also doesn’t do any line breaks.

Here’s my website www.totboxx.com

I’d like the first slide to read:
You won’t find cartoons on our clothes.
Your kids have enough character.

Second Slide:
A subscription clothing service for your child
that also gives clothes to another child in need.

Third Slide:
Hip, trendy, stylish outfits for your kids
that you’ll wish you could wear too.

Fourth Slide is good

Fifth Slide:
That’s why, for every subscriber,
we also provide an outfit
to a child in need.

This is the code I’ve done (I didn’t spend the time doing the other slides yet, because the first one isn’t working yet):
jQuery(function($) {

if( $(’.slide-item’).length ){

var slideText1 = 'You won't find cartoons on our clothes &lt;br /&gt; Your kids have enough character';
var slideText2 = 'Main slide &lt;br /&gt; title';
var slideText3 = 'Main slide &lt;br /&gt; title';
var slideText4 = 'Main slide &lt;br /&gt; title';
var slideText5 = 'Main slide &lt;br /&gt; title';

$( '.slide-item:nth-of-type(1) .slide-inner .maintitle' ).html(slideText1);
$( '.slide-item:nth-of-type(2) .slide-inner .maintitle' ).html(slideText2);
$( '.slide-item:nth-of-type(3) .slide-inner .maintitle' ).html(slideText3);
$( '.slide-item:nth-of-type(4) .slide-inner .maintitle' ).html(slideText4);
$( '.slide-item:nth-of-type(5) .slide-inner .maintitle' ).html(slideText5);

Could you tell me what I’m doing wrong? Thanks!

Hello there,

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  'use strict'

  if( $('.header-slider').length ) {
  
    var slideText1 = 'Slider <br /> main title';
    var slideText2 = 'Slider <br /> main title';
    var slideText3 = 'Slider <br /> main title';
    var slideText4 = 'Slider <br /> main title';
    var slideText5 = 'Slider <br /> main title';
    
    $('.slide-item:nth-of-type(1) .slide-inner .maintitle' ).html(slideText1);
    $('.slide-item:nth-of-type(2) .slide-inner .maintitle' ).html(slideText2);
    $('.slide-item:nth-of-type(3) .slide-inner .maintitle' ).html(slideText3);
    $('.slide-item:nth-of-type(4) .slide-inner .maintitle' ).html(slideText4);
    $('.slide-item:nth-of-type(5) .slide-inner .maintitle' ).html(slideText5);

  }

})(jQuery);   

  1. Update

Regards,
Kharis

Thanks, but that’s not working either. Below is how I updated it. Did I do it wrong (for slide 4, I’m fine with leaving it how it is, which is why there’s no `linebreak in that one)?

;(function($) {

‘use strict’

if( $(’.header-slider’).length ) {

var slideText1 = 'You won’t find cartoons on our clothes. &lt;br /&gt; Your kids have enough character';
var slideText2 = 'A subscription clothing service for your child &lt;br /&gt; that also gives clothes to another child in need.';
var slideText3 = 'Hip, trendy, stylish outfits for your kids &lt;br /&gt; (you’ll wish you could wear them too).';
var slideText4 = 'Over 15 million children live in poverty in the U.S.;
var slideText5 = 'So, for every subscriber, &lt;br /&gt; we also provide an outfit &lt;br /&gt; to a child in need.;

$('.slide-item:nth-of-type(1) .slide-inner .maintitle' ).html(slideText1);
$('.slide-item:nth-of-type(2) .slide-inner .maintitle' ).html(slideText2);
$('.slide-item:nth-of-type(3) .slide-inner .maintitle' ).html(slideText3);
$('.slide-item:nth-of-type(4) .slide-inner .maintitle' ).html(slideText4);
$('.slide-item:nth-of-type(5) .slide-inner .maintitle' ).html(slideText5);

}

})(jQuery);

Did you apply site cache with certain plugin? Please clear it, then reload your homepage. Please read this codex if you still get this isn’t working.

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

I’ve cleared all plugin caches (using the Comet Cache plugin), my browser cache, and the server-side cache (GoDaddy Flush cache option), but it’s still not working. What could the problem be? Any other suggestions or work-arounds?

Hello there,

I just found some errors in your code. Please replace it with this one:


;(function($) {

  'use strict'

  if( $('.header-slider').length ) {
  
    var slideText1 = 'You won\'t find cartoons on our clothes. <br /> Your kids have enough character';
    var slideText2 = 'A subscription clothing service for your child <br /> that also gives clothes to another child in need.';
    var slideText3 = 'Hip, trendy, stylish outfits for your kids <br /> (you\'ll wish you could wear them too).';
    var slideText4 = 'Over 15 million children live in poverty in the U.S.';
    var slideText5 = 'So, for every subscriber, <br /> we also provide an outfit <br /> to a child in need.';
      
    $('.slide-item:nth-of-type(1) .slide-inner .maintitle' ).html(slideText1);
    $('.slide-item:nth-of-type(2) .slide-inner .maintitle' ).html(slideText2);
    $('.slide-item:nth-of-type(3) .slide-inner .maintitle' ).html(slideText3);
    $('.slide-item:nth-of-type(4) .slide-inner .maintitle' ).html(slideText4);
    $('.slide-item:nth-of-type(5) .slide-inner .maintitle' ).html(slideText5);

  }

})(jQuery); 

Regards,
Kharis

That worked! Thanks for double checking the code and for your help with this!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis