How to display featured content in Hugo [shortcode]

When I started using Hugo, I noticed a lack of plugins or shortcodes for lists of related or featured posts. Coming from the world of digital-marketing / content writers - I know it’s valuable to list: related posts, featured content, content in a series for your readers.

Shortcodes allow you write a code fragment in your markdown content, which then can embed images, content, forms, etc to be included - without the need to write lots of HTML or scripts.

In this article, you will

1. Install the shortcodes
2. Learn to use
3. Test and try it
4. Resolve any issues you found

Shortcodes are saved to either of these locations

1. your /<Hugo project>/ Layouts / Shortcodes
2. your /<Hugo project>/ Theme / Theme Name / Layouts / Shortcodes

I prefer option 1 - in case you ever change the theme, you still have the shortcode

Install the Featured Content Shortcodes

First we download the shortcodes … then move the shortcode file to my preferred location

1. Featured Content by Tag (where select articles have a tag ‘featured’)
2. Featured Content by Param (where select articles have Front Matter for featured param)

You can read in detail about code for featured content - and how to show it on site.

Featured Content by Tag

Here’s how to download ..

1
2
3

cd <your Hugo project>
git clone https://github.com/damien1/hugo-content-shortcodes.git
mv hugo-content-shortcodes/featured.html layouts/shortcodes

Note: If you don’t have git / don’t want to use it - then go download this and unzip / save it to your preferred location.

Featured Content by Param

1
2
3

cd <your Hugo project>
git clone https://github.com/damien1/hugo-content-shortcodes.git
mv hugo-content-shortcodes/featured-param.html layouts/shortcodes

Note: If you don’t have git / don’t want to use it - then go download this and unzip / save it to your preferred location.

How to Use

In markdown content the shortcode looks like ..

{{< featured count=6 >}}

Or …

{{< featured-param count=2 >}}

Test and Go …

So now you have the idea …

1. Add the shortcode to one of your markdown files
2. Commit your changes to Git
3. Run Hugo server -D and browse to http://Localhost to check every thing is work fine

If you find a problem

• check you saved the files in the layout/shortcodes location
• check you enabled the shortcode correctly

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.
Find our more about me.