Sensei and Theme Compatibility

For the most part, Sensei templates will integrate nicely with most WordPress themes.

Where you may run into problems is when the default Sensei content wrappers do not match those of your chosen theme. This is because Sensei pages use templates of their own, and it’s impossible for Sensei to know exactly what markup your theme uses.

This will manifest itself by breaking your layout on Sensei pages and shifting your sidebars into incorrect positions.

When this happens, you’ll need to add some code to your theme that tells Sensei what content wrappers your theme uses, so that the Sensei content gets added in the right place.

Content Wrappers ↑ Back to top

The default Sensei content wrappers are in the following files:

  • templates/globals/wrapper-start.php
  • templates/globals/wrapper-end.php

These wrappers will work for most well-built themes. We also provide custom wrappers for the following themes:

  • _s
  • Storefront
  • Twenty Eleven
  • Twenty Twelve
  • Twenty Thirteen
  • Twenty Fourteen
  • Twenty Fifteen
  • Twenty Sixteen

Note: The wrappers for these themes are stored in the /theme-integrations/ folder and will be loaded automatically if you are using one of those themes. If you’d prefer not to load the wrappers for these themes, and provide your own instead, you can prevent them from loading by adding the following code to your theme’s functions.php file:

add_filter( 'sensei_load_default_supported_theme_wrappers', '__return_false' );

If your theme uses a different structure, you’ll need to specify your own content wrappers by adding some code to your theme’s functions.php file.

Specifying Your Own Wrappers ↑ Back to top

First you need to find the correct HTML structure for the wrappers.

You can find the correct HTML structure in your theme by opening your theme’s page.php file, and looking for your theme’s container divs.

In this case, these are the HTML divs before and after your post’s content loop that displays the page content.

Wrappers Example: TwentyTen Theme ↑ Back to top

By default, the Sensei wrappers don’t work well with the TwentyTen theme (don’t worry, if you want to use it, this example will show you how!)

For example, if you look at a single quiz page, you can see how the sidebar is being pushed down below the main content:

2010-messed-up

If you look at the page.php file for the TwentyTen theme, you can see the HTML that is placed around the content loop, as shown:

2010-wrappers

The opening wrappers are the two opening divs above the main content loop, and the closing wrappers are the corresponding closing divs below the loop. You also need to include the get_sidebar function which will output the sidebar on your Sensei pages.

Note: If your theme’s page.php file is much more complex than this and you can’t easily tell what the opening and closing wrappers would be, you may need to get a developer to help you figure it out. We recommend Codeable or one of our WooExperts

So, to make this theme work with Sensei, you need to unhook the default wrappers, and then hook in your own functions to specify the wrappers for this theme.

To unhook the default Sensei wrappers, add the following code to the end of the functions.php file in the theme:

Now hook in your own functions, which specify the correct start and end wrappers for the theme. Add this to the end of the functions.php file:

Now if you view the quiz page again, you’ll see that the sidebar is on the side where it’s supposed to be. Result!

2010-fixed

Pagination Wrappers ↑ Back to top

Prior to version 1.1.0, Sensei used the standard WordPress pagination functions to navigate between courses, lessons, and quizzes. However, we’ve improved this by updating the pagination functions to display the next Course, Lesson, and Quiz, taking into account the order settings and the pre-requisite settings. The files that are used to accomplish this are

templates/globals/pagination-lesson.php – loads pagination for lessons.
templates/globals/pagination-posts.php – loads default pagination for courses.
templates/globals/pagination-quiz.php – loads pagination for quizzes.

Declaring Sensei Support in your theme ↑ Back to top

If you’re a theme author, and you’re happy that your theme is fully compatible with Sensei, you can declare Sensei support, by adding the following to your functions.php file:

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top