From Scrivener to WordPress [Blog]

Introduction

WordPress’ WYSIWYG (What You See Is What You Get) view is great for simple posts. With it, I can dash off a few paragraphs, throw in an image or two, emphasize some words and bold-face others, and hit Publish. Voila, I’ve posted my opinion!

That works great for a simple idea. But when the topic is complicated, say a tutorial on how to use Scrivener to write a blog post that’ll be uploaded to WordPress, having everything in one bin–the article on the WordPress screen–makes it hard to see the whole picture.

What I need is a way to pull back and see not just the text, but the overall shape.

Enter Scrivener!

Disclaimer and Apology

The steps and screenshots herein have been developed and tested with Scrivener 3.2.2 on macOS 11.2.1, using browsers Safari 14.0.3 and Firefox 85.0.2, and uploaded to my website running WordPress 5.1.8 and Jetpack 7.3.2. I am unable to provide assistance for any other combinations. Any errors are purely my own. I have no formal relationship with any products used or mentioned herein. I am just a satisfied customer.

Some screen shots, but not all, have been lost. Hopefully the text and later pictures will be sufficient.

Addendum (March 10, 2022)

Internal links (from one place in the article to a different spot in the same article) can be defined in Scrivener and included in the transfer to WordPress but require a lower-level, HTML copy/paste. Here’s how.

1. In Scrivener, create the links in the normal way by selecting the text you want the reader to click, and then do a right-click and select Link to Document and choose the destination.
2. When ready, generate the HTML as described later in this article. But for the copy/paste to WordPress, however, the WordPress Visual editor will mess up those links. Instead, do this:
3. Open the HTML file in a non-browser such as the Mac’s TextEdit.app and do the ^A (select all) and ^C (copy), and then
4. In WordPress, switch to the Code editor (screen capture below).
5. Do the paste (^V) there.
6. You may switch back to the Visual editor at that point. (Editing of the links themselves may still be an issue in the Visual Editor. I didn’t try that.)

Scrivener Overview

Scrivener is primarily for novelists and authors of non-fiction books. Those works may contain hundreds of pages organized into dozens of chapters and parts, and are commonly published as ink on paper, ebook and Kindle formats, and web pages on the Internet. Scrivener can generate one piece of writing in all of these formats and more.

The feature of interest to me when I’m blogging is its ability to organize, re-organize, and re-re-organize the work. That’s because when I start to write, I don’t always know what I’m going to say. As a result, things come out in the wrong order, or I say something that I later realize is wrong and need to fix, or I decide I’d better explain some background material before making a certain point.

In other words, I’m disorganized and need help.

That’s what Scrivener provides: Help!

Organization in Scrivener

Scrivener’s ability to contain, move, and manipulate chunks of text are unsurpassed. Rather than dragging-and-dropping groups of words, Scrivener does that, too, but it also allows you to drag-and-drop entire documents and even folders of documents.

To help you see and manipulate how things are arranged, Scrivener provides four different views of a work: the text, the Binder, a Corkboard view, and an Outline view. Which one you use depends on what you want to accomplish at any given moment.

1) Text and 2) Binder

The first way of seeing the work is to simply look at the text. It’s “organization” is simply what appears first, second, third, and so forth. (This is the only view that WordPress provides.) Scrivener’s view of the text (see Figure 1 below) contains three panels: the Binder, the text itself, and an Inspector for the current Binder selection. (I won’t be talking about the Inspector in this article.)

As the writing takes place, the text looks and edits exactly the same as in WordPress or any other contemporary text editor. You type, select or high-light words or phrases, and set their attributes in the usual ways. And there are built-in styles for headings, titles, block quotations and the other parts found in normal text.

The Binder (on the left) is a high-level “view” of the work’s organization. In this example, the Draft folder (red circle on the left) contains the text of this blog article. It’s sort of a Table of Contents. Inside the Draft are documents and sections containing more documents. Grabbing any of these with the mouse, I can drag it to a new location and drop it. The associated text is instantly re-positioned.

The text in the middle column is seen here in Scrivenings Mode. It shows everything that’s been selected in the Binder. The editor can be scrolled up or down, in this case, over the entire Draft (much like the WordPress editor).

Depending on where the writer clicks in the text, typing goes into the associated section or folder.

Yes, folders may contain text in Scrivener. If you think of a book that has a quotation at the beginning of each chapter, with Scrivener that quotation would in the folder along with the chapter title, while the text would be in a document inside the folder. And just as a chapter in a book can have several scenes, so too can a folder in Scrivener contain several documents.

I’ve departed from this only slightly. For this blog article, I want the titles of not only the chapters but also the individual documents to appear. That’s an option in Scrivener. (When off, a dashed line appears on the screen in place of the title, and white space in the compiled output from Scrivener. We’ll get to compiling later.)

3) Corkboard View

Scrivener’s Corkboard view (Figure 2 below) shows the organization as 3-5 cards. The titles and a Synopsis, but not the text, of the items at the selected level are displayed.

On the left, notice that Draft is selected. It contains six parts: Introduction, Scrivener Overview, Working in Scrivener, and so forth. This high-level view allows the writer to focus on the work’s organization at any level. Many writers begin working in this view, planning the hierarchy of topics before starting to write, or to re-organize it after doing some writing.. Using drag-and-drop, cards and stacks can be moved around. The contents of the Binder will track changes made through the Corkboard.

4) Outline View

The Outline view (Figure 3) also focuses on this higher level of organization. It looks like a spreadsheet with one row per section. Each level can be expanded/contracted so the depth of each folder can be seen.

As with the previous view, the Outline shows an item’s title, its Synopsis (but not it’s text), and also three meta-data fields: Label, Status, and Section Type. In this blog article, I’ve decided to use the Label to indicate the mental focus for each item. I gave that meta-data the choices of General, Scrivener, and WordPress. The Status meta-data can also be re-worded for different selections but, in this case, I stuck to the default settings. (Section Type will be significant when we get to Scrivener’s Compile action.)

Working in Scrivener

For blog articles about complex subjects, partitioning and structuring the information can be essential to readers. A framework helps readers understand the message.

The Overall Process

In brief:

1. Structure and write the article in Scrivener using its built-in styles for headings, bold-face, italics, bulleted and numbered lists, and add images as appropriate;
2. Compile the text (to HTML) in Scrivener and then transfer that to WordPress; and
3. Upload and adjust the images, tweak the WordPress settings for category, tags, and other meta-data, and then push the “Publish” button.

Planning

When I decide to write an article for my blog, the first decision I have to make is whether its going to be a five-minute rant or something with some real meat to it. For a quickie, I’ll crank up my browser, connect to my website, spew my thoughts into WordPress, and click “Publish.”

Done.

But if the article is intended to teach something or delve into some depth, then I’m going to need to collect my thoughts and get them organized before I do much writing.

For that, I want Scrivener.

In the Binder for this article (see preceding screen shots), you’ll see the four big section (folders), as well as some introductory material and a final “Wrap-up.” That’s what I mean by structure. It’s got big thoughts and, within each of those, there are smaller thoughts.

With Scrivener, I can focus on the whole document or click down to a single part and see nothing else. Even better, I can re-arrange the parts, big and small, at any time simply by dragging the folder and document icons to a new spot and dropping them.

That structure could be created directly in the Binder, or in the Corkboard view, or in the Outline view. For this article, I started with three sections: Working in Scrivener, Transition to WordPress, and WordPress Work. After a little typing, I realized I should add an Introduction. And then an hour later, I added the Scrivener Overview chunk.

Personal confession: There is nothing linear about my writing process. Scrivener understands that, and is perfectly content dealing with my scatter-brain approach.

Editing Text

With something of a guess at the general structure, the writing can begin.

I jump around, writing here, some there, adding a note to check something in one spot, then going off to do an experiment and then later come back with the results. Those get sprayed in here, there, and yon.

The Binder gives me single-click access to the document or folder I want. Much easier than scrolling up and down or searching in WordPress. (Scrivener will also let you search the whole thing, and with bells and whistles unknown in WordPress.)

Styles and Typefaces

In the text, most settings in Scrivener’s pre-defined styles will pass through. Heading 1 and Heading 2 are fine as well as Code Block. And the Block Quote style works, but its associated Attribution style doesn’t make it to WordPress. Captions on images won’t make the trip either. Fortunately, bold-face, italics, bullet and numbered lists are good-to-go but, for whatever reason, underlining doesn’t make it through to WordPress.

As to typeface changes–Arial, Times New Roman, and Helvetica are three different typefaces–Wordpress makes it hard. It has to be done through CSS–Cascaded Style Sheets–and the associated tagging of paragraphs and sections, both of which are far beyond this post’s coverage. Unless you’re an expert, don’t try. You’ll only hurt your forehead on the brick wall.

Good: Bold, Italics, Heading 1, Heading 2, Code Block, Block Quote, bullet and numbered lists.

Bad: Changing the typeface, Caption, Underline.

In-line Images

I do a lot of screen captures and, as often as not, use a graphic editor to add something to the picture. These are done before adding the image to Scrivener. I also give the image file a meaningful name such as “Outline View” or “Added Images Directory.”

Then, to add that image to Scrivener, I like to do a couple of things before actually inserting it:

1. Type the image file’s name into Scrivener on a line all by itself,
2. Put an empty line after that,
3. Add another line with the figure# and caption for the image, and finally,
4. Drag-and-drop the image from a file browser in that empty line.

Depending on the image, it may look huge in Scrivener. So, I right-click and use Scale Image to shrink it to a convenient size.

Note: This resizing is temporary and has nothing to do with its final size in WordPress. Later, you’ll be dragging and dropping the images into WordPress; the way WordPress stores and handles images necessitates this. But while editing in Scrivener, I like to see the picture, so even though this means extra work, I choose to do it.

I also create an “Images” folder in my Scrivener project and save the modified pictures there as well. This folder is “just in case” I inadvertently delete some text (containing the in-line image).

To add a top-level folder, start by clicking on, for example, the Research folder and then doing a Project -> New Folder. This puts the new folder “inside” (within) Research but that’s not what I want. To move the folder to the same level as Research, Draft, or any other top-level folder, grab it with the mouse and very gingerly drag slightly down-and-left. (This is a very small motion.) Scrivener will show a guide so you can see where the “drop” will go when you release the mouse button. [You can also enable the “Move” buttons via View -> Customize Toolbar. These make folder promotions and demotions much easier!]

Transition to WordPress

When the text and images in Scrivener are finished, it’s time to switch and do the final preparation in WordPress.

We’re going to have Scrivener generate the HTML code. Scrivener will store it along with a copy of all the needed images into a new directory. That puts everything together in one place for the transfer to WordPress.

The first step in this transition uses Scrivener’s Compile function.

Compiling the Post

When you compile a work in Scrivener, you put it in publication form.

Note: A novel might be published as a hardcover, a trade (6-9") paperback, a smaller (5-7") paperback with smaller print, an ebook, a Kindle edition, and a web page, all for the same work. These are five different compiles we could do to this one project. For the WordPress blog, we need one very specific Compile. This section tells you what to do.

For the web, we need HTML, and for WordPress, it’s a specific subset known as MultiMarkdown in Scrivener.

Here are the Compile settings.

Note: This is the first of several screens that need your attention.

1. Set the Compile for: option at the top center to MultiMarkdown -> Web Page (.html).
2. Set Formats to Basic MultiMarkdown.
3. Click the General Options (gear icon), and
4. Checkmark Convert rich text to MultiMarkdown. (The Escape special characters option will be automatically checkmarked.)
5. Click the Assign Section Layouts button.

Section Layouts tell Scrivener how to format your text, chapter headings, and so forth.

My project has folders and text so there are two Section Types: Heading and Section (on the left in the above Figure 6.) To connect (map) them to Section Layouts, click items in the order shown.

1. Section (on the left part of the panel),
2. Text Section with Heading (on the right),
3. Heading (on the left) and
4. Heading (on the right).

Before clicking OK, there’s one more change needed in the Section Layout settings. In the screen capture above next to “4”, notice that the Heading layout contains “# Section Title #” but no immediate text. In my writing, I sometimes put text in the thing that looks like a folder and I want that to appear in the output.

Use your mouse to hover over the rectangle to the right of the number “4”. When you do, on the far right corner you should see a grey circle with a pencil.

Click the pencil!

In the pop-up, click Duplicate Format and Edit Layout.

Therein, checkmark the “Text” square on the Heading line. (See below.)

Click Save to get back to the previous panel, then OK to return to the Compile settings panel.

Hang on now: We’re about to see a rather unusual thing. It’s not hard but it may stretch your experience a bit.

Click the Compile button in the lower-right corner. This will bring up the output selection panel.

Warning: Weirdness here! The Save As name that Scrivener suggests (see red circle above) looks like its going to be an HTML file. But it’s not. It’s the name of the directory Scrivener is going to create. That’s right, a directory is allowed to have an extension on its name. It’s a rarely used option but, in this case, Scrivener is suggesting it for the destination directory. Inside that directory (with the funny name), Scrivener is going to put the real HTML file (with a .html extension again) alongside all the images needed for the blog. You can remove the .html extension to the directory name and it’ll appear to work, but if you then look in the file system, the .html extension will be there. Apparently, Scrivener insists upon using it. Why? I have no idea. That’s just the way it is.

Set the name in the Save As box as you prefer and click the Export button in the bottom-right corner. Scrivener will generate the HTML and image files therein. (You might then want to use a file system browser to inspect the contents of the directory.)

We are now ready to begin the transition to WordPress!

Uploading Text to WordPress

A copy-and-paste approach works very nicely to move the HTML from your machine “up” to WordPress.

Use a file browser to look at the HTML directory created by Scrivener. In that directory, you should see all of the images and a single .html file. Open the latter by double-clicking on it. This should start your preferred web browser and it should display the blog article.

Tip: Leave the file browser open to the HTML directory. You’ll need it soon when it is time to drag-and-drop images into WordPress.

In the browser displaying the HTML from Scrivener, click the mouse anywhere in the text and then select all (^A) of the file and then copy (^C) it.

Connect to your website in a different browser tab or window. After logging in to WordPress, I tell it to start a New Post. WordPress will open, by default, to its Visual Editor.

Pot-Hole Alert (added 09/04/2021): WordPress has two (2) editing modes. One is the Visual Editor and it is, for the most part, WYSIWYG (What You See Is What You Get). Paragraphs have white space, bold text is emboldened, emphasized text shows in italics and so forth.

WordPress’s second edit mode is the Code Editor. In that mode, you’ll see HTML tags like "" around paragraphs and other codes around other chunks of text.

When you copy and then paste, in both cases you should be in the same mode. That is, if you’re going to copy your post in WYSIWYG mode (with bold and italicized text in view), then be sure to paste it while in WordPress’s Visual Mode.

If you’re going to copy your post and can see the HTML tags on your screen, then paste it to WordPress in the Code Editor mode.

Add a new text block, click in it, and then paste (^V) what you copied into WordPress.

You should see your blog article in WordPress but with no images, or greyed-out versions.

I like to scroll to the top of WordPress, enter the title of my blog article, and do Save Draft.

WordPress Work

With the HTML text uploaded and saved in WordPress, it’s time to upload and adjust your images, and do the final assembly before publishing the new blog article.

Insert and Tweak the Images

I like to position the WordPress window to the left side of my computer screen and a file browser window that’s been opened on the HTML directory to the right (see Figure 10 below). That’ll put the image files within convenient reach.

Search for the image file names you put in the text and, for each one, do the following. (See Figure 10 below.)

1. Drag an image from the file browser into WordPress and drop it into the space (empty image block) below the image file’s name. Wait for the upload to finish. WordPress will store it in Media and create several copies at different sizes for your use later.
2. Click the image and, on the right, select Block.
3. Set the final size of the image and other details.
4. Use the icons above and to the left of the image to set image placement (left, center, right). You can also use the pencil icon to edit the image itself. [Personally, I prefer to edit the image much earlier with an off-line editor. WordPress’s image editing controls are rudimentary, at best.]
5. Click near the bottom of the image on the line beginning with a single hyphen and enter the caption for the image such as with your figure number and/or image title and description. I put mine in boldface.
6. Remove the now extraneous WordPress blocks with the image and figure titles.

Repeat the drag-and-drop, settings, and placements for all images in the article.

Publishing the Post

Use the Preview capability in WordPress to make sure everything is correct.

Click back to the Document tab (its right next to the Block selection that’s circled in the previous image in its upper-right corner). Set all the WordPress meta-data parameters such as Categories and Tags as you wish.

Everything look right in the Preview?

Click Publish and then visit your home page to see the result.

Wrap-up

Here’s the deal: A big, complex post is very difficult to manage in WordPress. It just doesn’t have the tools to help you structure your thinking or the post. It’s fine for brief, soapbox rants, but if you want to teach someone how to do something or mount a significant and convincing case, WordPress is not a writing tool.

Scrivener is.

That’s what it’s for. It has the muscles and tools to not only help you structure your work, but it’ll also enable you to publish them on a blog, in an ebook or Kindle edition, a self-published paperback (with the aid of a print shop–I use lulu.com, by the way), or to generate a manuscript for submission to a literary agent and, thence, to a hardcover publisher.

Writing is work, and Scrivener has the tools for serious writers.

Welcome to the big leagues!