Docs

[rebecca-paisley]

Hi,

I am using current versions for WordPress, X and Cornerstone. I am using the Icon Stack. I just have a question though. I am trying to add navigation arrows to the tabbed content that was created through cornerstone.

I have this function:

$(function() {

	var $tabs = $('#tabs').tabs();
	
	$(".ui-tabs-panel").each(function(i){
	
	  var totalSize = $(".ui-tabs-panel").size() - 1;
	
	  if (i != totalSize) {
	      next = i + 2;
   		  $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
	  }
	  
	  if (i != 0) {
	      prev = i;
   		  $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
	  }
   		
	});
	
	$('.next-tab, .prev-tab').click(function() { 
           $tabs.tabs('select', $(this).attr("rel"));
           return false;
       });
       

});

But obviously it doesn’t specify the classes/IDs used by X Theme. Can anyone help me complete this function so it properly shows the nav arrows?

[Nabeel A]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[rebecca-paisley]

Hi,

The site is in development and can be found at atrantil.wpengine.com

[Nabeel A]

Hi again,

Thank you for providing the URL. On which page you’re using the above script? Can you please provide the page URL so we can see what you’ve achieved so far?

Thanks!

[rebecca-paisley]

The tabs that are on the homepage under the section titled “NATURAL BOTANICAL EXTRACTS CAREFULLY SELECTED FOR TARGETED RELIEF.”

[rebecca-paisley]

URL: atrantil.wpengine.com (homepage)

[Rue Nel]

Hello There,

Thanks for providing the url. You must first load the jQuer UI before you can use .tabs() function. Since you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

function my_add_frontend_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

And then please edit your page in Cornerstone, go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($) {
  var $tabs = $('#x-section-5 .x-column').tabs();
  $(".x-tab-content").each(function(i){
    var totalSize = $(".x-tab-content").size() - 1;
    if (i != totalSize) {
      next = i + 2;
      $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
    }
    
    if (i != 0) {
      prev = i;
      $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
    }
  });
  
  $('.next-tab, .prev-tab').click(function() { 
    $tabs.tabs('select', $(this).attr("rel"));
    return false;
  });
})(jQuery);

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[Author]

Posts