LearnDash Design & Tutorials

LearnDash Design & Tutorials

Formatting Short Descriptions in the LearnDash Course Grid

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

For a lot of LearnDash users, the course grid add-on is an essential component to designing the learning experience. You can filter & sort the course grid in a myriad of ways. This article will focus on one of the key components of the course grid—the short description.

Update: 8 Feb 2021 (version 1.7 of course grid plugin)
Short descriptions now support most HTML tags.

We’ll explore:

Some creative ideas include:

  • display course authors
  • indicate the total time it takes to complete a course
  • display the amount of credit (or CEUs) a student might receive for completing the course
  • how to add bold, italics & insert new lines

How to Add a Short Description

NOTE
The “course grid” can also be used to display lessons, topics, quizzes & groups in a grid format. A short description can be added for all of them. The instructions are nearly identical.

Let’s take a look at how to add a short description:

  1. Navigate to LearnDash LMS > Courses
  2. Click on the course you want to add a description for
  3. By default, you’ll land on the Course page. Look at the top of the page, just underneath the course title. Click on Settings.
  4. Scroll down until you see Course Grid Settings
  5. Enter your short description in the box
  6. Be sure to click the Update button when you’re finished

Add LearnDash short description in admin area

Follow the same steps to add a short description to a lesson, topic, quiz or group page, just open up the piece of content you want to edit, and go to the Settings tab.

Ideas for Using Short Descriptions

In many cases, people use this field for exactly what its name describes—a short description of their course. That’s a great use for it 👍.

You could also try:

  • author names (and even links to an author page)
  • the hours & minutes of video content in the course
  • an estimated time (hours, maybe days) to complete the course
  • a link to purchase or sign up for the course (and then hide the default button with CSS)
  • notes or callouts with a background color
  • the number of CEU credits awarded for course completion
  • total number of students enrolled in the course (you would have to update it manually, but you could use broad terms like “1,200+” or “10k”)

If you’re using the short description in other creative ways, please let us know in the comments!

PRO TIP
Did you know we built a free plugin that will instantly make your course grid look super sexy? Design Upgrade for LearnDash →

Short Description Design & Formatting

First, I tried out a bunch of HTML tags to see what the short description supported. Here are my findings.

In the course grid plugin version 1.7 (8 Feb 2021) and above:

The LearnDash course grid short description does not support:

❌ shortcodes (ex: [student]some content here[/student])

It does support:

<strong>
<em>
<a> (links)
<p>
<br />
<span>
<div>
<ul> & <ol>
✅ inline styles (ex: style="color:red;")
✅ class names (ex: class="some-class")

This means you can do all kinds of creative things with the short description, especially if you know a little CSS. I’ve included some examples down below.

In the course grid plugin version 1.6 and below:

The LearnDash course grid short description does not support:

<p>
<br />
<span>
<div>
<ul> & <ol>
❌ inline styles (ex: style="color:red;")
❌ class names (ex: class="some-class")
❌ shortcodes (ex: [student]some content here[/student])

It does support:

<strong>
<em>
<a> (links)

Prior to version 1.7 of the course grid plugin, we had to get a little creative because we only had a few tags available to us.

By default, most themes will probably render <strong> tags as bold, and <em> tags as italic, and neither will do anything more than that. But with CSS, we can give them more power.

Let’s look at some examples.

Add a link

A hyperlink in a LearnDash grid short description

Adding a link is pretty straightforward once you understand the syntax. You can add as many links as you’d like in a short description. Here’s an example that links “visit learndash.com” to learndash.com.

<a href="https://www.learndash.com/">visit learndash.com</a>

Your link should inherit the colors/styles of your theme, and look like most other links on your site.

Add a line break

LearnDash grid description, 2 paragraphs example

You might find yourself wanting to add a line break, or split things up into multiple paragraphs. Since we can’t use a paragraph tag (<p>) or line break tag (<br />), we need to use what’s available to us—either <em> or <strong>.

If you aren’t using any bold or italicized text, it doesn’t matter which one you choose. But if you plan to use either bold or italicized text, it’s easiest to use the opposite tag for this.

This first example is the most basic. We’ll just use the <strong> tag as a way to create line breaks. Here’s what we enter into the short description field:

<strong>First line of text goes here</strong>
Next line of text goes here, with some space in-between it and the previous line.

And now we’ll need to add a little CSS to the “Additional CSS” area in the WordPress Customizer.

.ld_course_grid .entry-content strong {
	display: block;
	margin-bottom: 10px;
	font-weight: normal;
}

You can adjust the margin-bottom value up or down to get the spacing you desire. And if you wanted that first line to remain bold, remove the entire font-weight: normal; line.

Bold + Line Breaks

LearnDash course grid description w/ meta data

In this next example, let’s say I want to make a few things bold. So I’m going to use the <em> tag as my wrapper instead. The short description looks like this:

<em><strong>Instructor:</strong> Dave Warfel</em>
<em><strong>Enrolled:</strong> 150 students</em>
<em><strong>CEU:</strong> 2 credits</em>

And now the CSS will look like this:

.ld_course_grid .entry-content em {
	display: block;
	margin-bottom: 10px;
	font-style: normal;
}

You could even change the color of your bolded text with some additional CSS.

.ld_course_grid .entry-content strong {
	color: #1e73be;
}

LearnDash grid descriptions, example of extra info

Note/Callout Box

LearnDash grid descriptions, example of callout box

Using the same principles, let’s try to make a callout box within our description. Let’s add this to our short description:

This is my normal course short description text below the course title.
<em>Look at me! 🙋‍♂️ I'm important.</em>

This CSS will have a few new properties that we haven’t used yet. We’re adding some padding for our box, giving it a yellow background & black text, and some margin to space it out from the text above it.

.ld_course_grid .entry-content em {
	display: block;
	margin-top: 15px;
	padding: 0.5em 0.75em;
	background: #ffeb3b;
	color: #000;
	font-style: normal;
}

We’re using the background property to add a light purple background to our box. And the padding property gives our text some room to breathe so it doesn’t rub up against the edges of our box.

For padding, the first value is the top & bottom padding, and the second value is left & right padding.

If you want to switch the order and place the box first, move your <em> block to the top in your short description, and then change your CSS from margin-top to margin-bottom.

Want to make the callout bold and round out your edges? Add these two extra lines:

font-weight: bold;
border-radius: 5px;

And now, some simpler formatting for course grid short descriptions:

Short Description Font Size & Color

Use this CSS to change the font size and/or color of your short description text:

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
	font-size: 15px;
	color: #000;
}

If there are things you’d like to do with your course grid short description not mentioned in this article, please leave a comment below. If there’s a way to do it, we’ll help you figure it out 👍.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and revenue per student by creating a state of the art mobile application in UNDER 60 MINUTES without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Get your LearnDash Mobile App →

Previous

How to Remove Bullets from Elementor Icon Lists in LearnDash Focus Mode

Next

How to Make the Entire Course Grid Element Clickable in LearnDash

20 Comments

  1. This is great stuff, thanks!

    How do I format each Course grid Item (course)? Likke controlling the border, and control the background colour inside the item/box?

    Currently, my items (boxes) have no border and the same background colour as the page.

    So it does look a bit messy, as each course doesn’t stand out.

    On an old theme (Invent – want Astra soon) + Elementor (in a few places)

    • Hey Finn — So I’m hearing two different questions:

      1. How do you format each course grid item, individually?
      2. How do you control border & background color of the grid items?

      For each item individually, you’ll need to see how your theme adds a unique class or ID to the <article> element. Then you can use this unique class/ID to target only that specific grid item. Shoot me an email if you need help with this.

      Controlling the border can be done with our Design Upgrade Pro plugin (which I know you’ve already discovered 😉). It can also be done with custom CSS, but our plugin makes it a bit easier.

      The background color of the grid item is not a feature of our plugin, but I can send you some custom CSS to achieve this.

  2. Thanks Dave, you are such a big help!

    Got most of the things done by now, also with a lot of good help from your excellent plug-in (and your blog). The Pro version probably has the best ROI of any plugin, I have purchased – and I have quite a few…

    Keep up your excellent work.

    Thanks again!

    PS: The CSS for grid item background could be nice. Please shoot.

    • Wow, I appreciate those very kind words, Finn. Thank you 🙏.

      Here’s the CSS for grid item backgrounds. Each piece is labeled because once you change the background color, you’ll likely want to also chance the short description text, course title color & maybe the button colors, too.

      /* Background Color */
      .ld-course-list-items div.ld_course_grid .thumbnail.course, .ld_course_grid .thumbnail {
      	background: #113263;
      }
      /* Course Title Text */
      .ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-title, .ld_course_grid .thumbnail .caption .entry-title {
      	color: #fec300;
      }
      /* Short Description Text */
      .ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
      	color: #eee;
      }
      /* Button */
      .ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary {
      	background: #fff;
      	color: #000;
      }
      /* Button: Hover */
      .ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary:hover {
      	background: #fec300;
      	color: #000;
      }
  3. Is there any way to combine “Bold + Line Breaks” and “Note/Callout Box”.

    • I don’t know exactly what you mean, Bruno.

      If you wanted to make something bold AND have a fake line break beneath it, you can use the <strong> tag and apply font-weight: bold;, display: block;, and margin-bottom: 10px; to it. If you wanted that same text to also appear in a box, you would additionally add padding: 5px; and background: yellow; to it.

      If that’s not what you mean, can you try to be more specific please? Or provide a screenshot so I can see it visually.

  4. Hello Dave,

    Thanks for responding to the comment.
    How can I share the screenshot?

    Thanks

    • Upload it to a cloud sharing app like Dropbox, Google Drive or Cloud App and paste the link here. Or email it to dave [at] escapecreative dot com.

  5. I just wanted to thank Dave for his support. It’s the first time I’ve asked a total stranger for help and got a premium treatment.
    Thanks a lot.

  6. Hi, Dave!
    Could you, please, help me?
    I’m trying to put the “short description” after course title in course page but I do not know how to do it.
    The only way I have found is making something like this (is WordPress, not Learndash).

    function after_title($title) {
    if (!is_admin() || is_single() || is_page() || is_home() || is_category() ) {
    $write = //HERE THE SHORT DESCRIPTION
    $title = $title.$write;
    }
    return $title;
    }
    add_filter( ‘the_title’, ‘after_title’ );
    ?>
    But I don’t know how is the hook/code/variable for “short-description”. Do you know it?

    Thank you in advance!!
    Laura

    • Hi Laura — I don’t know if this will work, and I haven’t tested it out, but I saw someone get the short description this way. They stored it in a variable, which you then might be able to use in your code above.

      $short_description = get_post_meta( $course['post']->ID, '_learndash_course_grid_short_description', true );

      That might only work on certain pages or in certain templates. I think the example was getting the short description for a lesson within a lesson template file. So I’m not sure if it’ll work the same for courses, or in hooks, but it might be worth a shot.

  7. Tony

    Hi Dave. That’s a neat way of getting it done. Thank you!

    I had one quick question if you don’t mind: how did you get the iPhone emoji to show up in the short description…the guy with his hand up, “look at me! I’m important”? Tried with a few different phone emojis but just doesn’t show on publish. Looked through your css and except for some padding and margins, I don’t see anything in particular.

    Appreciate it!
    Tony

  8. Tony

    Thanks Dave. I tried using these emojis and its doing the same thing – when I click update and there is an emoji in the short description, it doesnt show the updated short description in the course grid frontend. When I refresh the post browser it also wipes out the short description entry all together. Any short description without an emoji loads fine (with or without tags) … Very strange indeed!

    Any thoughts or solutions in mind? I wonder whether your installation can still load with emojis, maybe learndash did something in an update? 🤔 (emojis working fine here lol)

    • I just tested with the latest LearnDash 3.3.0.3 and it still shows up fine. See here →

      It looks like WordPress converts them to <img> tags, but they are viewable.

      This could depend on your browser & operating system, too. Different ones might display emojis differently, or not at all. I’m on Chrome on Mac. What are you using to view the page?

      Also which emoji(s) are you trying? Maybe some are supported and others aren’t. Those are my ideas.

  9. Tony

    Appreciate your insights! It seems I have knuckled down the issue:

    Inside blocks, pages etc the emoji saves and loads fine. But on the short description it doesnt save and wipes out the changes on editor/settings reload. I tested on Mac, PC, Tablet, iPhone..all no good! I even deactivated themes, plugins, tried on staging site, live site..still no good. I even tried your exact emoji and no luck.. I figured this has something to do with the database (some security feature perhaps) not allowing emoji types to save to it.

    I tested using Emoji Unicodes instead, the html variant, and it works!

    https://www.w3schools.com/charsets/ref_emoji.asp (hope you don’t mind me posting this link, just in case it helps someone else)

    No styles or classes – as you rightfully mentioned above – however, we now have emojis!! 🤑🤑

    Thanks for your help!

  10. Dang this makes my Real Estate School look so Smart – So EZ!

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén