API

Get slide number with PHP

You can find the slide’s number using the global $page variable.

Here is an example that adds the page number inside a slide using the standard “the_content” filter from WordPress:

<?php
function the_content_custom( $content ) {
    global $page;

    $content .= "We are on slide number $page";

    return $content;
}
add_filter( 'the_content', 'the_content_custom', 10, 2 );
?>

Get slide number with JavaScript

If you need the slide number inside JavaScript, you can use the theiaPostSlider.changeSlide jQuery trigger.

jQuery(document).bind('theiaPostSlider.changeSlide', function(event, slideIndex) {
    alert('The user has navigated to slide number ' + (slideIndex + 1));
});

JavaScript events

The plugin offers a humble API for developers who wish to extend its functionality. Right now you can hook your code into the tps.changeSlide event, which triggers whenever the user navigates to another slide. Note that this event is fired after the slide has been loaded via AJAX (if applicable).

jQuery(document).on('theiaPostSlider.changeSlide', function(slideNumber) {
    alert('We are on slide number ' + slideNumber);
});

WordPress hooks

There are several filters and actions you can use to further customize the plugin:

tps_the_content_before
tps_the_content_before_header
tps_the_content_before_current_slide
tps_the_content_after_current_slide
tps_the_content_after
tps_is_compatible_post

The next sections will explore some of these hooks and create custom functionality around them.

For further reading we recommend diving into the plugin’s source code.

You can manually add a Navigation Bar by introducing this code into your single.php page, in your theme’s folder, between PHP tags:

<?php
if (class_exists('\WeCodePixels\TheiaPostSlider\Helper')) {
    echo \WeCodePixels\TheiaPostSlider\Helper::getNavigationBar();
}
?>

We strongly suggest using a child theme in order to not lose your added Navigation Bar when updating your theme.

Adding Content Above or Under Slider

You can add text, short codes or whatever else you might need above or under the slider by using our tps_the_content_before and tps_the_content_after filters. The code needs to be between PHP tags and should look something like this:

<?php
function my_custom_function( $html, $content ) {
    $html .= "Testing 1 2 3. Put desired content here.";

    return $html;
}
$priority = 10;
add_filter( 'tps_the_content_before', 'my_custom_function', $priority, 2 );
add_filter( 'tps_the_content_after', 'my_custom_function', $priority, 2 );
?>

$priority can take different values depending on where you want to place your text. This is especially useful when using the Carousel add-on. If you want your text to be shown above the Carousel, then you need to set $priority to be lower than 10, or higher if otherwise.

You can also add different short codes by changing the $html line with something like this:

<?php
$html .= do_shortcode( "[some_short_code]" );
?>

You can also use the ‘tps_the_content_before_header’ filter to display text after the [tps_header] shortcode. Simply change the last two lines from the code above with:

<?php
add_filter( 'tps_the_content_before_header', 'my_custom_function', $priority, 2);
?>

This code can be added in your theme’s functions.php file, although we strongly suggest using a child theme in order to not lose these changes after updating your theme.

Adding Between the Content of a Slide and Slider

You can also add text, short codes or whatever else you might need between the content of a slide and the slider by using our tps_the_content_after_current_slide, tps_the_content_before_current_slide filters. The code needs to be between PHP tags and should look something like this:

<?php
function my_custom_function( $html, $content ) {
    $html .= "Testing 1 2 3. Put desired content here.";

    return $html;
}
add_filter( 'tps_the_content_after_current_slide', 'my_custom_function', 10, 2 );
add_filter( 'tps_the_content_before_current_slide', 'my_custom_function', 10, 2 );
?>

You can add your code in your theme in functions.php (although we suggest using a child theme in order to not lose these changes after updating your theme).

Adding category names for prev/next post buttons

Normally you can set a custom title for your previous / next post buttons inside the Admin -> Theia Post Slider -> Navigation Bar page, and optionally you can enable the Enable additional navigation between posts and Only for posts from the same category options. If you want to further customize the buttons, you can make them display the actual category you are browsing. For example if the current post is in the “Recipes” category, you can make your next button show “Next Recipe post”.

Here is the code to do so - you can add it inside the functions.php of your child-theme, preferably:

<?php
function my_custom_tps_options_get( $value, $optionId, $optionGroups ) {
  if ( ! in_array( $optionId, array( 'prev_text_post', 'next_text_post' ) ) ) {
    return $value;
  }

  global $post;
  $category = null;

  // Check for Primary Category (via the Yoast SEO plugin).
  if ( class_exists( 'WPSEO_Primary_Term' ) ) {
    $category = new WPSEO_Primary_Term( 'category', $post->ID );
    $category = $category->get_primary_term();

    if ( $category !== false ) {
      $category = get_category( $category );
    }
  }

  // Simply get one of the categories.
  if ( ! $category ) {
    $categories = wp_get_post_categories( $post->ID, array( 'fields' => 'all' ) );

    if ( count( $categories ) > 0 ) {
      $category = $categories[0];
    }
  }

  if ( $category ) {
    switch ( $optionId ) {
      case 'prev_text_post':
        $value = 'Previous ' . $category->name . ' post';
        break;

      case 'next_text_post':
        $value = 'Next ' . $category->name . ' post';
        break;
    }
  }

  return $value;
}

add_filter( 'tps_options_get', 'my_custom_tps_options_get', 10, 3 );
?>

API