NSteffen.com

Checking out what your page will look like before you post it is a good habit to get into. However, ExpressionEngine does not make this easy, since the built-in Preview function completely ignores any styling you might be applying to your text, images and other elements. So how do we set up a page that is hidden from public view, while still allowing us to test our post for any stylistic shortcomings?

It's All About Status

We want our template to look exactly like our normal blog post page, with the only difference being that it shows unfinished posts instead of ones we have published. The key to this is Status. I have added a custom status called "Draft". By default, all my blog posts go into this category, and once I am 100% sure they are finished, I switch to "Open". You can use the standard "Closed" status for this purpose as well, however I feel that a custom status is more appropriate.

To create a custom status, go to your Control Panel and hit the Admin tab. Go to Weblog Administration and then select Custom Entry Status. You should see the Default Status Group. Simply click Add/Edit Statuses. Here you can add your own status to the standard Open and Closed. I called mine draft and gave it the highlight color #ff4500, which is a nice orange, so it's easier to pick out draft posts.

What our Preview page will do is only pull posts from the database that are still marked as draft copies. Doing this is very easy.

{exp:weblog:entries weblog="blog" limit="1" status="Draft"}

By defining that we only want posts marked as "Draft", EE will ignore all posts already published on the site.

Building the Preview Template

First off, create a new template in any template group you want. My suggestion would be to put it somewhere meaningful, e.g. if you are previewing blog posts, put it in the blog template group, and call it "preview". Now that you have created the file, you can switch to your external editor if you are using one, or stay in your browser and edit the template from there.

The final step is more or less a copy and paste job. Copy the code you use for your single-view, e.g. on this website it would be the template I use to render this post. Note that I do not mean on the front page, but on the permalink page. Simply copy this post, and add a couple of little bits to it.

We have to tell EE we want only posts that are set to the "Draft" status to show up on this page. So if in your normal post page you use this code to pull in the post content

{exp:weblog:entries weblog="blog" limit="1 status="open" orderby="date"}

we simple change the status to draft, so now that single line of code looks like this

{exp:weblog:entries weblog="blog" limit="1" status="Draft" orderby="date"}

Notice that status groups are case-sensitive, so be sure you get the capitalization right.

Controlling Access

So this is all very nice, but surely we don't want people checking out our in-progress posts before they are meant for public consumption? The solution to this is very simple. Just wrap all the code on the page in

{if logged_in}
...
{/if}

and only people logged in to the control panel will be able to see your Drafts. Users not logged in will just be served an empty page. This is not the most elegant solution, but with a little bit of creativity, I'm sure you can easily whip something up.

So there you go. Just head your browser to the location of your preview page, and you will be able to see any page currently in construction. You may notice that by default, the preview page will show the most recently drafted post. If you want to visit an older draft, just remember this page works exactly like your normal comments/view template. Simply add the post URL into the URL so that your final address looks something like this:

http://yourwebsite.com/template_group/preview/testing-my-older-post/

and you should be able to access any draft this way, so you can come back and edit that post you never quite finished.