Adding Draft Blog Posts to Your Website

Today I stumbled upon this brilliant idea by Sal Ferrarello. Here’s his explanation of draft blog posts:

Recently, I was commenting to my wife that I find myself often going to my Draft posts for notes I’ve taken on completing some task. I complained that these posts were not ready to be published as they had not met my high standard of quality (i.e. I hadn’t removed the most obvious typos and added a featured image), but it would still be nice to share them (and make them available to myself without logging in).

As usual, my wife had a great suggestion. Create a “Draft” category here on my blog with a disclaimer that these posts are under-construction.

I know a brilliant idea when I see it. See my draft posts here.

Disclaimer

Any posts on this blog in the category “Draft” have not been subjected to the scrutiny applied to other posts (and probably don’t have a featured image). Please feel free to comment and leave corrections, I always appreciate help.

Implementation

Like Sal, there were two behaviors I wanted for this to work:

  1. Exclude any posts in the “Draft” category from the blog page.
  2. Include a “Draft Disclaimer” on any posts in the “Draft” category.

Sal linked to his code for excluding posts by category. Maybe someday I’ll try it. For now, I’m using an easier-for-non-coders method.

Excluding the “Draft” category with the Ultimate Category Excluder plugin is easy. Granted, I had to refer back to my Infrastructure Airtable for notes on how I excluded other categories before. That reminded me of my first efforts to exclude categories without a plugin. (Neither of the two tutorials I followed worked.) I’m so glad the Ultimate Category Excluder plugin is free!

Have I mentioned how much I love Airtable?

To include a Draft Disclaimer on all posts, I had to create and style a new hook element for my GeneratePress theme. Creating the hook was easy. I used the Duplicate Page plugin to duplicate an existing hook element so I could easily configure the proper settings.

Let Gutenberg Do Your Coding

Since I’m a neophyte with HTML, I used my standard trick to generate the code I needed:

  1. Create a “Test HTML” page and set the Visibility to “Private”.
  2. Use the Gutenberg block editor to create a paragraph with my custom background color styling.
  3. Switch to Code Editor view. (Click on the three dots at the top right corner of the post/page.)
  4. Copy the paragraph code and paste into the GeneratePress “Draft Post Disclaimer” element.

Here’s the code generated by Gutenberg:

<!-- wp:paragraph {"customBackgroundColor":"#ffffaa"} -->
<p style="background-color:#ffffaa" class="has-background"><strong>Warning!</strong> This is a draft, not a finalized post. See full <a href="https://www.morganreece.com/draft-blog-post">draft disclosure</a>.</p>
<!-- /wp:paragraph -->

Before publishing the element, I needed to set the Display Rules to

  • Post Category = Draft
  • Post Category Archive = Draft

Publish the element. Voila! So pretty.