Sydney Pro: Can I add line breaks to Slider Subtitles?

Hello there dear Team,
I love the Slider in Sydney Pro.
But: I would need the subtitles in two or three rows which does not yet work.
Is there a possibility to insert line breaks in the Sslider subtitles to get these in more than one row?
Thank you very much in advance for any hint and tip.
Best regards
Winfried

Hello there,

It can be done by manipulating the existing slide with a couple of custom jQuery code. 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 subtitleText1 = 'Lorem ipsum <br /> second line';
    var subtitleText2 = 'Lorem ipsum <br /> second line';
    var subtitleText3 = 'Lorem ipsum <br /> second line';
    var subtitleText4 = 'Lorem ipsum <br /> second line';
    var subtitleText5 = 'Lorem ipsum <br /> second line';
      
    $('.slide-item:nth-of-type(1) .slide-inner .subtitle' ).html(subtitleText1);
    $('.slide-item:nth-of-type(2) .slide-inner .subtitle' ).html(subtitleText2);
    $('.slide-item:nth-of-type(3) .slide-inner .subtitle' ).html(subtitleText3);
    $('.slide-item:nth-of-type(4) .slide-inner .subtitle' ).html(subtitleText4);
    $('.slide-item:nth-of-type(5) .slide-inner .subtitle' ).html(subtitleText5);

  }

})(jQuery); 

  1. Update

Regards,
Kharis

Hello there Kharis,
Thank you very much.
That works.
Best regards
Winfried

You’re welcome, Winfried.

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

Could you post the javascript that I can use get a line break in the subtitle on just the first slide? I have the imager slider active on my site, but have stopped the text slider. As in the follow-up question from the original poster, I would also like the third line, after the break, to be smaller than the second.

Thank you!

Hello @ketoile,

For stopped text slider, you can use this code:


;(function($) {

  'use strict'

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

    var subtitleText = 'Lorem ipsum <br /> second line';

    $('.slide-inner.text-slider-stopped .subtitle' ).html(subtitleText);

  }

})(jQuery);

Regards,
Kharis

I put this into the custom javascript plugin, but it’s not working. Is there something else I need to do?

Discussion moved separately in here:

Hello, This does not seem to work for me.
I have added this code but nothing show up.

Is anyone able to have a look for me please?
I just need a line break in the subtitle to add my phone number.

My Site is alexfisherhealth.com.au

I have some other Java code running that add’s buttons to the slider.
Could this be effecting it?

jQuery(function($) {

//Define the new buttons. Delete the lines you don’t need
var button1 = ‘Book Now’; //Slide 1
var button2 = ‘Contact’; //Slide 2

//Hide the default button
$(’.slide-inner a’).hide();

//Add the new buttons. Delete the lines you don’t need
$( ‘.slide-item:nth-of-type(1) .slide-inner’ ).append(button1); //Slide 1
$( ‘.slide-item:nth-of-type(1) .slide-inner’ ).append(button2); //Slide 1
});

Hello there,

I found your site is cached that might possibly prevent new code addition to take effect. Try flushing it whenever you add/do some changes.

Regards,
Kharis

Hi Kharis,
Thanks so much for your help.

I clear the cache every-time i make a change, so it’s not the cache.
Is there anything else it could be?

Thank you for updating me. Alternatively you could also use jQuery code solution to insert second line text on main slider subtitle. 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($){

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

        var subTitleText  = $('.text-slider .subtitle').text();
        var secondLine    = '<br /> This is second line text';

        $('.text-slider .subtitle').html(subTitleText+secondLine);

      }

    })(jQuery);
  1. Update

Regards,
Kharis

This worked!!

I had a different custom JavaScript plugin that works with other code but not this one. Once i installed TC custom JavaScript and added the code it work! Thanks so much

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 have the free theme but I was wondering why the developers chose esc_html for subtitles but not the main title?

Couldn’t you just use wp_kses_post for both? e.g.

<?php echo wp_kses_post( $titles['slider_title_' . $c] ); ?>


<?php echo wp_kses_post( $subtitles['slider_subtitle_' . $c] ); ?>

Hello there,

AFAIK wp_keses_post() is irrelevant for output. Because it’s usually used for securing data before it’s saved into database as we’ve implemented in the customizer input of main slider’s titles and subtitles. See inc/customizer.php file. esc_-ish is more relevant for securing output. Refer to codex.

However if you think that wp_kses_post is way more better, please post it to feature request channel.

Regards,
Kharis

Hi,

I should probably clarify that using wp_kses_post isn’t my idea, the Sydney theme already uses it for outputting the main title as I’ve printed above.

I don’t know what the best/safest implementation would be to allow only some HTML elements, but if you don’t want HTML then I agree you should probably use esc_html() to be absolutely safe (to reduce risks from server-side hacks). However, since using breaklines would be a popular request, I suppose you could either introduce a shortcode for the breaklines (a custom str_replace() would do?) or perhaps use wp_kses() (rather than wp_kses_post()) and only allow the br element?

Thanks for the reply.

Hi,

Well, we didn’t had wp_kses_post from the start. From what I recall it was commonly requested for the titles so we just added it for that.
The reason we didn’t add it for subtitles is simple: wp_kses_* functions are much slower than esc_html etc. So since there weren’t many requests for greater flexibility in the subtitles (which we couldn’t handle with CSS, for example setting a max-width to replicate the br effect), we stuck with esc_html.

Vlad

I found some tests relevant to what I was saying: https://www.tollmanz.com/wp-kses-performance/
Scroll down a bit to see the tables.

1 Like

Thanks for the historical explanation and links.