LearnDash lets you create tabs in their different post types.
Their post types are course, lesson, topic, and quiz and you can add different tabs to any or all these post types.
To accomplish this, you can either use a code snippet plugin or you can add a child-theme to your site and add code into that, but no matter how you accomplish this, you’re going to be adding code if you want to do this for free.
Below is a fully functional PHP code example that adds custom TABS on a post-by-post basis in LearnDash post types.
These posts have ID numbers for each one.
These are the post ID’s you will see in the code be and will want to change to match your own post ID’s:
- Course ID is 123
- Lesson ID is: 234
- Topic ID is: 345, and
- Quiz ID is: 456
While reviewing this, notice that I have added 2 custom tabs into the quiz post.
In every case, you have a line starting with 'content' => '<p>, this is the start of any HTML content you want to put into the tab.
In every case again, you have another line with </p>,', this is the end of any HTML content you want to put into the tab.
Those are the parts you will need to edit to accomplish what you want.
To use the code below, select it all and copy it into any code or raw text editor of your choice. Once pasted into your editor, modify the post ID values mentioned above.
/**
* Full working example usage for learndash_content_tabs to change them on a post-by-post basis.
*/
add_filter(
'learndash_content_tabs',
function( $tabs = array(), $context = '', $course_id = 0, $user_id = 0 ) {
// Create a Course tab
$course_id = get_the_ID(); // this is not in the LearnDash example
if ($context === 'course'){ // this is not in the LearnDash example
if ( 123 === $course_id ) {
if ( !isset( $tabs['coursetab1'] ) ) {
$tabs['coursetab1'] = array(
'id' => 'coursetab1',
// The value here is to a CSS class you control to show an icon.
'icon' => 'ld-course-icon',
'label' => 'Course Stuff',
'content' => '<p>Here is a list of files for the Course:</p>
<ul>
<li><a href="">File One</a></li>
<li><a href="">File Two</a></li>
<li><a href="">File Three</a></li>
</ul>
</p>',
);
}
}
}
// Create a Lesson Tab
if ($context === 'lesson'){ // this is not in the LearnDash example
$lesson_id = get_the_ID(); // this is not in the LearnDash example
if ( 234 === $lesson_id ) {
if ( !isset( $tabs['lessontab1'] ) ) {
$tabs['lessontab1'] = array(
'id' => 'lessontab1',
// The value here is to a CSS class you control to show an icon.
'icon' => 'ld-lesson-icon',
'label' => 'Lesson Stuff',
'content' => '<p>Here is a list of other stuff for the lesson:</p>
<ul>
<li><a href="">Something</a></li>
<li><a href="">Something else</a></li>
<li><a href="">Yet something else again</a></li>
</ul>
</p>',
);
}
}
}
// Create a Topic Tab
if ($context === 'topic'){ // this is not in the LearnDash example
$topic_id = get_the_ID(); // this is not in the LearnDash example
if ( 345 === $topic_id ) {
if ( !isset( $tabs['topictab1'] ) ) {
$tabs['topictab1'] = array(
'id' => 'topictab1',
// The value here is to a CSS class you control to show an icon.
'icon' => 'ld-topic-icon',
'label' => 'Topic Stuff',
'content' => '<p>Here is a list of topic stuff:</p>
<ul>
<li><a href="">Something</a></li>
<li><a href="">Something else</a></li>
<li><a href="">Yet something else again</a></li>
</ul>
</p>',
);
}
}
}
// Create a Quiz tab
if ($context === 'quiz'){ // this is not in the LearnDash example
$quiz_id = get_the_ID(); // this is not in the LearnDash example
if ( 456 === $quiz_id ) {
if ( !isset( $tabs['quiztab1'] ) ) {
$tabs['quiztab1'] = array(
'id' => 'quiztab1',
// The value here is to a CSS class you control to show an icon.
'icon' => 'ld-quiz-icon',
'label' => 'Quiz Stuff',
'content' => '<p>Here is a list of Quiz stuff:</p>
<ul>
<li><a href="">Something</a></li>
<li><a href="">Something else</a></li>
<li><a href="">Yet something else again</a></li>
</ul>
</p>',
);
}
// Here is a second custom Quiz tab.
// Notice the "quiztab2" identifier?
if ( !isset( $tabs['quiztab2'] ) ) {
$tabs['quiztab2'] = array(
'id' => 'quiztab2',
// The value here is to a CSS class you control to show an icon.
'icon' => 'ld-quiz-icon',
'label' => 'Quiz Answer Key',
'content' => '<p>Here is the Quiz Answer Key:</p>
<ul>
<li><a href="">Something</a></li>
<li><a href="">Something else</a></li>
<li><a href="">Yet something else again</a></li>
</ul>,
</p>',
);
} // End second Quiz tab
}
}
// Always return $tabs.
return $tabs;
},
30,
4
);After saving your new code, if you’ve chosen to add it to your child-theme functions file, upload that file and test if all. If you’ve chosen to add it to a Code Snippet (set to “Only run on site front-end”), copy/paste it into that snippet and save it.
You can find many methods in the LearnDash Developer docs here: https://developers.learndash.com/
Why have I posted this for you?
LearnDash has the original post here : https://developers.learndash.com/hook/learndash_content_tabs/ but compare what I’ve shown you and what is described in their post.
# Taking it a step further – using Advance Custom Fields
Taking it a step further using the Advanced Custom Field plugin to make your tab content easily editable.
After installing and setting up Advanced Custom Fields plugin, why not use it to populate the HTML data in the $tab arrays above?
It’s easier than you think… follow the steps below to accomplish this:
- Visit your Advanced Custom Fields page and add a new Field Group.
- Enter a title for the field group
- Set/add the Location Rules drop-downs to:
- [Post Type] [is equal to] [Course]
- [Post Type] [is equal to] [Lesson]
- [Post Type] [is equal to] [Topic]
- [Post Type] [is equal to] [Quiz]
Next, create a Field using the following parameters:
- Field Label : Tab Content
- Field Name : tab_content
- Field Type : Wysiwyg Editor
- Instructions : Add your custom tab information in here.
- Set the other options as you wish.
To create a second field for the second custom tab in the quiz, create another new field using the following parameters:
- Field Label : Second Tab Content
- Field Name: second_tab_content
- Field Type : Wysiwyg Editor
- Instructions : Add your custom tab information in here.
- Set the other options as you wish.
Save your Custom Field Group
Here is the same code above adapted to use your shiny new Advanced Custom Fields…
/**
* Full working example usage for learndash_content_tabs to change them on a post-by-post basis.
*/
add_filter(
'learndash_content_tabs',
function( $tabs = array(), $context = '', $course_id = 0, $user_id = 0 ) {
// Create a Course tab
$course_id = get_the_ID(); // this is not in the LearnDash example
if ($context === 'course'){ // this is not in the LearnDash example
if ( 123 === $course_id ) {
if ( !isset( $tabs['coursetab1'] ) ) {
$tabvalue = get_field('tab_content'); // Get ACF custom field
$tabs['coursetab1'] = array(
'id' => 'coursetab1',
// The value here is to a CSS class you control to show an icon.
'icon' => 'ld-course-icon',
'label' => 'Course Stuff',
'content' => '<p>' . $tabvalue . '</p>', // Use ACF custom field content
);
}
}
}
// Create a Lesson Tab
if ($context === 'lesson'){ // this is not in the LearnDash example
$lesson_id = get_the_ID(); // this is not in the LearnDash example
if ( 234 === $lesson_id ) {
if ( !isset( $tabs['lessontab1'] ) ) {
$tabvalue = get_field('tab_content'); // Get ACF custom field
$tabs['lessontab1'] = array(
'id' => 'lessontab1',
// The value here is to a CSS class you control to show an icon.
'icon' => 'ld-lesson-icon',
'label' => 'Lesson Stuff',
'content' => '<p>' . $tabvalue . '</p>', // Use ACF custom field content
);
}
}
}
// Create a Topic Tab
if ($context === 'topic'){ // this is not in the LearnDash example
$topic_id = get_the_ID(); // this is not in the LearnDash example
if ( 345 === $topic_id ) {
$tabvalue = get_field('tab_content'); // Get ACF custom field
if ( !isset( $tabs['topictab1'] ) ) {
$tabs['topictab1'] = array(
'id' => 'topictab1',
// The value here is to a CSS class you control to show an icon.
'icon' => 'ld-topic-icon',
'label' => 'Topic Stuff',
'content' => '<p>' . $tabvalue . '</p>', // Use ACF custom field content
);
}
}
}
// Create a Quiz tab
if ($context === 'quiz'){ // this is not in the LearnDash example
$quiz_id = get_the_ID(); // this is not in the LearnDash example
if ( 456 === $quiz_id ) {
$tabvalue = get_field('tab_content'); // Get ACF custom field
if ( !isset( $tabs['quiztab1'] ) ) {
$tabs['quiztab1'] = array(
'id' => 'quiztab1',
// The value here is to a CSS class you control to show an icon.
'icon' => 'ld-quiz-icon',
'label' => 'Quiz Stuff',
'content' => '<p>' . $tabvalue . '</p>', // Use ACF custom field content
);
}
// Here is a second custom Quiz tab.
// Notice the "quiztab2" identifier?
if ( !isset( $tabs['quiztab2'] ) ) {
$tabvalue2 = get_field('second_tab_content'); // Get another ACF custom field
$tabs['quiztab2'] = array(
'id' => 'quiztab2',
// The value here is to a CSS class you control to show an icon.
'icon' => 'ld-quiz-icon',
'label' => 'Quiz Answer Key',
'content' => '<p>' . $tabvalue2 . '</p>', // Use another ACF custom field content
);
} // End second Quiz tab
}
}
// Always return $tabs.
return $tabs;
},
30,
4
);Now go edit your custom fields in those posts and enjoy your new custom tabs!
I hope this helps you. Enjoy your day!
