3

When viewing a draft page on the frontend, I'd like to see that status right away on the page itself. Currently, there is zero indication. Is there any way to have draft-specific CSS (or even just a header message?)

  • not exactly "zero indication", the save button either says Publish or Update – RiddleMeThis Feb 11 at 20:55
  • No indication when viewing the actual page (i.e. not in the admin panel.) – Derek Illchuk Feb 11 at 21:09
5

There is probably a better way but you could add the following CSS to your stylesheet, which will add a little banner when viewing a page that has a status of draft.

.status-draft.hentry:before {
    content: "Previewing a Draft";
    background: #87C5D6 !important;
    display: block;
    text-align: center;
}

You could also use these classes for the different statuses.

.status-pending

.status-publish

.status-future

.status-private

Works for me.

enter image description here

1

OP here. If the homepage is set to draft, the CSS class used in the chosen answer is not available. Here's what I'm using now to place a diagonal DRAFT watermark, using "CSS and Javascript Toolbox" plugin:

CSS

.draft-watermark{
  position:absolute;
  background:clear;
  display:block;
  min-height:50%; 
  min-width:50%;
  color:lightgrey;
  font-size:500%;
  transform:rotate(310deg);
  -webkit-transform:rotate(310deg);
  z-index: 100;
}
.draft-watermark:before {
  content: "DRAFT DRAFT DRAFT DRAFT";
}

Script in CJToolbox, set to be included on all pages:

<?php if (get_post_status(get_the_ID()) == 'draft'): ?>
<script>
  jQuery(document).ready(function() {
    jQuery('<div class="draft-watermark"></div>').insertBefore(jQuery('div:first'));
  });
</script>
<?php endif; ?>

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.