8.3 Shortcode and CSS Reference

[learndash_materials_extended]

Renders the materials list of the course, lesson, topic, or quiz it is placed on. Takes no parameters. Outputs nothing on other post types or when the item has no materials.

[learndash_materials_extended]

Normally inserted into LearnDash's materials editor with the Insert shortcode button, so it renders in the Materials tab. It can also be placed in the item's main content, for example in a Shortcode block. See 5.2 The Materials Shortcode.

Output markup

<div class="ldash-materials ldash-materials-list-type-link ldash-materials-post-123">
  <div class="ldash-materials-list">
    <div class="ldash-materials-item">
      <a href="https://example.com/wp-content/uploads/2026/08/slides.pdf" target="_blank" download>
        <span class="ldash-materials-icon ldm-icon-file-pdf"></span>Lesson slides (PDF)
      </a>
    </div>
    <!-- one .ldash-materials-item per material -->
  </div>
</div>

• ldash-materials-list-type-link or ldash-materials-list-type-button reflects the List type setting.
• ldash-materials-post-{ID} carries the ID of the course, lesson, topic, or quiz, so you can style one item's list differently.
• target="_blank" is present when Open in new tab is ticked.
• With Icon position set to After, the icon span follows the title.

CSS classes

Class	Element	Notes
.ldash-materials	outer wrapper	Default max-width: 400px. Override to widen the list.
.ldash-materials-list-type-link / -button	outer wrapper	Present according to the list type.
.ldash-materials-post-{ID}	outer wrapper	Per-item hook.
.ldash-materials-list	inner wrapper
.ldash-materials-item	one material	In button mode this element carries the pill: background, border, and radius.
.ldash-materials-item a	the link	Text colour, size, and (in button mode) padding and uppercase text.
.ldash-materials-icon	the icon	Inline, font-size: 120%.
.ldm-icon-*	the icon	Which glyph; see the icon map below.

Colours, sizes, and button geometry from Settings > Learndash Materials are printed as an inline <style id="learndash-materials-styles"> in the page head, so theme CSS that targets these classes may need higher specificity to win.

File-type icon map

The icon is chosen from the extension at the end of the link URL.

Extension	Icon class
pdf	ldm-icon-file-pdf
doc docx odt	ldm-icon-file-word
xlr xls xlsx	ldm-icon-file-excel
pps ppt pptx	ldm-icon-file-powerpoint
bmp gif jpg jpeg png	ldm-icon-file-image
zip gz	ldm-icon-file-archive
aif m4a mp3 wav	ldm-icon-file-audio
avi m4v mov mp4 mpg	ldm-icon-file-video
html css js	ldm-icon-file-code
anything else, or no extension	ldm-icon-doc-text (generic document)

Links to attachment pages and to most web pages have no file extension and therefore show the generic document icon.

Where the plugin loads assets

• Front end: two stylesheets (learndash-materials.css, learndash-materials-icons.css) on every page, plus the inline style block; a Google Fonts stylesheet only when a font family is set. No JavaScript.
• Admin: the item editor on course, lesson, topic, and quiz edit screens; the colour picker only on Settings > Learndash Materials.