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?)

  • 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 agree to our terms of service, privacy policy and cookie policy

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