DEV Community

loading...
Cover image for A short guide on how to “make” the series widget on DEV

A short guide on how to “make” the series widget on DEV

dzhavat profile image Dzhavat Ushev Updated on ・2 min read

I’ve seen some comments here on DEV where people ask how to get that nice looking “widget” (or a list of related posts) at the beginning of each post that is part of a series.

Namely, this one:

Alt Text

In this short guide, I’m going to show you how to “make” that widget. Don’t confuse it with how to create the widget using HTML, CSS and JavaScript. That’s for another time. 😉

Step 1 (only needed once)

Did you know that the post editor has two versions?

To check which version you’re currently using, go to “Settings > UX” and scroll to the “Writing” section. You need to be on the “Rich + markdown” version.

Settings > UX menus

Step 2

Start writing a post (or just edit existing ones if they are part of a series). You can’t have that widget unless you publish something, sorry :(

While in edit mode, click on the “Post options” icon right next to “Save changes” (or “Publish” if you’re writing a new post).

Post options icon

Step 3

In the modal that opens, use the “Series” field to give your series a name. There you’ll also find names of previously created series, if any.

Post options modal

Click “Done”.

Step 4

Continue writing your post as normal. Or if you’re editing an already published one, click on the “Save changes” button.

Now if you visit your “Dashboard”, you’ll see the posts that belong to series with the series’ name next to the “Published” date.

Alt Text

Step 5

Publish your post! That’s probably the most important step! 😀

And remember that in order to get the widget to appear, you need to publish at least two posts under the same series.

Happy publishing! 🎉


P.S. to @ben and the rest of the DEV team: While I definitely enjoyed making this guide, maybe you can make sure this functionality is easier to discover. I hope this guide will deprecate itself at some point 😊😋

Discussion (13)

pic
Editor guide
Collapse
glennmen profile image
Glenn Carremans

You can also add a post to a series on the v1 editor 😉
Using the series: tag in your front matter.

Collapse
dzhavat profile image
Dzhavat Ushev Author

Oh, nice! Didn't know that. I couldn't get v1 of the editor (even after setting it) so just proceed with v2 in mind.

Collapse
link2twenty profile image
Andrew Bone

Each post stores the version of editor it was written with. You'd have to write a new post to get the V1 up unless you've written a post with it before.

Thread Thread
dzhavat profile image
Dzhavat Ushev Author

This makes sense. Thanks for sharing it.

Collapse
nantipatsoften profile image
Nantipat

Sorry I'm still not clear how to make a widget series
I have a series dev.to/nantipatsoften/series/11380

How to write markdown to make a widget?

Thank you.

Collapse
dzhavat profile image
Dzhavat Ushev Author

Hey Nantipat,
You don't have to write any Markdown in order to get the widget. It's by creating a series under the "Post options" shown in the screenshot above and publishing at least 2 posts under those series.

I've opened the posts from the link you're sharing and can see the widget in both of them. Hope that helps :)

Collapse
nantipatsoften profile image
Nantipat

look like I'm confused.
when I write the new post and refer to series (all post in series ) like this picture

so, how to make the same thing in this picture in a post? (it call a widget right?)

I tried

{% linkdev.to/nantipatsoften/series/11380 %}
Enter fullscreen mode Exit fullscreen mode

but not work
T_T

Thread Thread
dzhavat profile image
Dzhavat Ushev Author

As far as I know, Dev.to automatically generates the widget. The only thing you need to do is create a series and publish posts under it.

Looking this post of yours dev.to/nantipatsoften/11-truthy-an... I can see the widget in the post.

Or are you trying to add the widget to the series page here dev.to/nantipatsoften/series/11380? In that case I'm not sure you can add a widget.

Thread Thread
nantipatsoften profile image
Nantipat • Edited

I understood, it automatically generates the widget in a post.

thank you for explaining 🤓🤓

Collapse
link2twenty profile image
Andrew Bone • Edited

This is a good place for new bloggers to start dev.to/p/editor_guide

You can access this screen by pressing the question mark in the bottom left of either editor too 🙂

Collapse
dzhavat profile image
Dzhavat Ushev Author

That guide over there is quite useful. An idea to promote it a bit more could be at the time of writing a first post. :)

Collapse
michaelcurrin profile image
Michael

That section is not available under Misc anymore.

I had to go to UX settings and select richtext + markdown option. Now the Series option is available.

Collapse
dzhavat profile image
Dzhavat Ushev Author

Thanks for letting me know. Will update the article. :)