Can I use normal hyperlink in Table of Contents Shortcode?

[sandeepbali]

Hi,

I want to use Table of Contents shortcode to show several different related pages to my users, allowing them to navigate between them easily. To achieve that, I will need to be able to add a link to each of the table items. Documentation shows me only to link to page numbers using Next Page tag. How can I make this work for me?

[thai]

Hi There,

You need to override the [toc_item] shortcode by setting up a child theme: https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57.

After that adding the following code under functions.php file locates in your child theme:

add_action('wp_head', 'change_toc_item_shortcode');
function change_toc_item_shortcode() {
  remove_shortcode( 'x_toc_item' );
  remove_shortcode( 'toc_item' );
  add_shortcode( 'toc_item', 'x_shortcode_toc_item_v2' );
  add_shortcode( 'x_toc_item', 'x_shortcode_toc_item_v2' );
}

function x_shortcode_toc_item_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'     => '',
    'class'  => '',
    'style'  => '',
    'title'  => '',
    'page'   => '',
    'link_item' => ''
  ), $atts, 'x_toc_item' ) );

  $id    = ( $id    != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class = ( $class != '' ) ? 'x-toc-item ' . esc_attr( $class ) : 'x-toc-item';
  $style = ( $style != '' ) ? 'style="' . $style . '"' : '';
  $title = ( $title != '' ) ? $title : '';
  $link_item = ( $link_item != '' ) ? $link_item : '';
  switch ( $page ) {
    case 0 :
      $page = '';
      break;
    case 1 :
      $page = '';
      break;
    default :
      $page = $page;

      if ( get_post_status( get_the_ID() )  == "draft" ) {
        $page = '&page=' . $page;
      } else {
        $page = ( get_the_ID() == get_option( 'page_on_front' ) ) ? 'page/' . $page . '/' : $page . '/';
      }
  }

  $link = $link_item ? $link_item : esc_url( get_permalink() ) . $page;

  $output = "<li {$id} class=\"{$class}\" {$style}><a href=" . $link . " title=\"Go to {$title}\">" . $title . '</a></li>';

  return $output;
}

Then the shortcodes should be like this:

[toc title="Table of Contents" type="left"] [toc_item title="1. Introduction" page="1" link_item="http://www.google.com"] [toc_item link_item="http://www.google1.com" title="2. More Information" page="2"] [toc_item title="3. Even More Information" link_item="http://www.google2.com" page="3"] [/toc]

Let us know if this code works for you.

[sandeepbali]

Thanks Thai, working like a charm. I had first copied your code directly to Visual that added CSS too, but then added on Text mode and it worked fine.

Is it possible to increase the width of the Table of Contents box, as it is truncating some headlines? You can see it here: https://aausdev.wpengine.com/learn/vata/

[christopher]

Hi there,

Yes you can do that by adding the CSS code below to Pro > Theme Options > CSS:

.x-toc {
    width: 230px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.