Different link on each slide

Hello,
first of all thanks for this beautiful free theme. I have some question, how can i add different links to my each slide (I have 3 pic. in my slider).
Thanks in advance.

Best regards.

Hello there,

Thank you for getting in touch here.

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided “Scripts in footer:” box

<script>
jQuery(function($) {

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

    $('.slide-item:nth-of-type(1) .slide-inner').wrap('<a href="http://mysite.com/page1"></a>');
    $('.slide-item:nth-of-type(2) .slide-inner').wrap('<a href="http://mysite.com/page2"></a>');
    $('.slide-item:nth-of-type(3) .slide-inner').wrap('<a href="http://mysite.com/page3"></a>');
    
  }

});
</script>

  1. Save settings

Regards,
Kharis

Dear Kharis
How could I insert this js code directly(I mean without Header and Footer Scripts plugin)?
Regards,
Ali

Also, how should I change the code to open the links in new tab?

Hello @alik,

Inserting any code directly into the theme’s files isn’t a proper approach to customize your site. As it will be overwritten once you update the theme in the future. Some people might think that plugin will slow down the site’s performance. But I don’t absolutely agree with it. It depends on how many code added by the plugin. Since that piece of code is small enough, it couldn’t slow your site down.

The other alternative is using a child theme to register a new JS file. The first step to do is creating a child theme or you can use our premade one if you haven’t had any yet. Open the functions.php file, then enqueue the child theme’s JS file. You’d add this function.


add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
function sydney_child_enqueue() {

    wp_enqueue_script( 'sydney-main-child', get_stylesheet_directory_uri() . '/js/main.child.js', array('jquery'),'', true );

}

From the code above, the main.child.js file will be called from the js folder inside the child theme. So you need to create “js” folder and create a new main.child.js file inside it. In there, you can add this jQuery code:


jQuery(function($) {

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

    $('.slide-item:nth-of-type(1) .slide-inner').wrap('<a href="http://mysite.com/page1"></a>');
    $('.slide-item:nth-of-type(2) .slide-inner').wrap('<a href="http://mysite.com/page2"></a>');
    $('.slide-item:nth-of-type(3) .slide-inner').wrap('<a href="http://mysite.com/page3"></a>');
    
  }

});

> Also, how should I change the code to open the links in new tab?

You need to add target="_blank" attribute to each A tag. So the final code will look like this:


jQuery(function($) {

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

    $('.slide-item:nth-of-type(1) .slide-inner').wrap('<a href="http://mysite.com/page1" target="_blank"></a>');
    $('.slide-item:nth-of-type(2) .slide-inner').wrap('<a href="http://mysite.com/page2" target="_blank"></a>');
    $('.slide-item:nth-of-type(3) .slide-inner').wrap('<a href="http://mysite.com/page3" target="_blank"></a>');
    
  }

});

Regards,
Kharis

Dear Kharis
Very thanks, I solved it. Now, I have another question. How could I make my posts full width?
Bests,
Ali

Hi Ali,

You’re welcome! Please avoid posting multiple questions in one topic. Please feel free to post your new question in a new topic. By doing so you’ll help us maintain this support forum well-archived. So that it will be easier for other users to read.

Regards,
Kharis

OK, Thanks, I will ask in a new post.

I just tried using both methods of adding a link to a slider (I only want one of the three sliders linked) and neither method is working.

Website: http://www.bbbc.net/
“Making Great Music” is where we’d like the link

Any suggestions?

Hi, I understand that I need to replace the link with the link I want. But can you help with the left side? Should I also replace " .slide-item:nth-of-type(1) .slide-inner’" this. If yes, with what I should replace it?

Thx