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:
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.
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).
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.
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.
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 😊😋
Top comments (16)
You can also add a post to a series on the v1 editor 😉
Using the
series:tag in your front matter.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.
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.
This makes sense. Thanks for sharing it.
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.
Hey Ｎａｎｔｉｐａｔ,
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 :)
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
but not work
T_T
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.
I understood, it automatically generates the widget in a post.
thank you for explaining 🤓🤓
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 🙂
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. :)
Hey can i change order of posts??
For example i published a blog 3 days ago and its on number 1 in the series but however i want the blog which i published today to be on the top
Hey Uzair,
I don't think we as authors have control over this. It's the platform itself that lists them in their current order. Maybe you can open a feature request for this on their repo. :)
Thanks for the info!
Opened a new feature request :)
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.
Thanks for letting me know. Will update the article. :)