How To Compile Your Blog Post To WordPress With This Scrivener Blog Post Template
Scrivener Blog Post Template For WordPress Compile
In this video we’re going to have a look at a Scrivener Template for blogging that I created to work with the Gutenberg editor in WordPress.
It attempts to facilitate the transition from Scrivener to WordPress by creating the most used blog elements, such as paragraphs, images, and others, into read-made blocks in WordPress.
The problem that I had with the Gutenberg editor in WordPress was that I didn’t like all the clicking you have to do to create all those blocks.
You’d have to either write directly into the blocks, something that I don’t like, or you’d have to copy and paste your already written blog post in parts into the different blocks. And while the Gutenberg block system is great for usability because it’s quite intuitive, I wanted to make better use of the work that I have to do in Scrivener anyway and save a little bit of time.
So let me show you real quick what the Scrivener Blog Post Template does and then afterwards I will go through it step by step so that you can follow along.
What the Scrivener Blog Post Template does
Let’s suppose I’ve written a blog post with the elements that I use most commonly. This blog post has some headlines and paragraphs, obviosuly, and also pictures, an embedded Youtube video and a list item.
So, I’m just going to take this, compile it with my custom created compile format, this converts it into html, then I take the html code from the browser, paste that into WordPress and voilá… there I have all these blocks created for me automatically. Headings and paragraphs are already set, the list item also works and I have placeholders for images and the embedded YouTube video.
Now I can just go ahead and insert the images and the YouTube link and I already have most of the usual work that I have to do for every blog post done.
How To Use This “Blog Post” Template
So now that we saw what the blog template does, let’s go through it step by step and let’s pretend we want to create a new blog post.
If you want to download the template to follow along, the link is down below in the description. You’ll be taken to my website and you need to opt in. If you don’t want to receive any further communication from my part after that, just unsubscribe in the next email, no problem. We can still be friends on YouTube.
Installing The Template
If you’ve never installed a Scrivener template before let me walk you through this real quick.
What people often do when they get one of my Scrivener templates, is they try to open it because they think it works just like a Scrivener file.
But it doesn’t. You have to import the template before you can use it.
For this, open up Scrivener and you see this template chooser window, or however you want to call it, and in the lower left corner you have a menu where you can choose “Import Templates”.
Click that and then choose the template file. In case you haven’t done so already unzip the file before importing it. It should have a .scrivtemplate extension.
Once imported, you should see the template in the “Non-Fiction” section of the template chooser. You see it has this little “Wordpress” icon.
Select it and create a new project with this template.
When that opens up, the first thing you see is this information page that explains how to use this template. It’s basically what we will be going through in this video.
Included “Wordpress Blocks”
As you just saw, this template uses Scrivener document templates for the most used blog elements, that are converted into html code on compile. This code can then be pasted into the WordPress Gutenberg Editor (see section on “Compile”) and it will automatically create blocks from the Scrivener documents that have been used here.
So, in order to create your blog post, just make sure you use one of the documents from the template folder and follow the “compile” instructions. Then you should be fine.
Every time you want to create a new element in your blog post, just create a new document from the ones available in the templates by going to “Project – New from Template” or clicking the down arrow next to the “+” button in the toolbar and choose the element from there.
I already placed a heading, paragraph, and image document in the draft folder, because most probably you’re going to use those for almost every post.
So let’s go through the available elements quickly so you see what they do and how to use them.
And you’ll see it’s all very simple and straightforward.
Choose the “Heading” document template for headings only. All the text that you put into the text section of the document will be converted to a WordPress heading. The compiler is set up to handle headings of the level 1–3. Make sure you use one of the heading 1–3 styles from the style options.
Heading 2, by the way is the standard heading that WordPress chooses so that’s the one you will probably need the most.
The title of the heading document is not used during compile. You can name the document whichever way you want.
The paragraph document template is for the body text, which will most likely be the majority of your blog post. The text will be handled by the compiler without changes. In order to structure the text in different paragraphs (with no other elements between the paragraphs) you can either just leave a blank line to begin a new paragraph or use several of the Paragraph document templates in a row.
The title of the Paragraph document will not be used in compile, only the body text. Notes, footnotes, comments, the synopsis,… will also be disregarded. Only the main text will compiled, nothing else.
Use the unordered list for all kinds of lists that you want to create in your blog post. Just make sure you use the unordered list function within Scrivener. If you want to create an ordered list instead, also use this unordered lists document here in Scrivener and once you’re in WordPress you can change this unordered list to an ordered list with only one click. This is the least amount of work.
Only the text content of the Unordered List document will be compiled, nothing else. So you can rename this if you want and it won’t affect the compile.
This is just a placeholder document that will create an image block in WordPress. It contains a placeholder image here in Scrivener because it’s more fun to see an image when you look at your blog as scrivening (viewing all the documents in your draft folder in the editor. Also it should give you a better overview if you see where you will have the images later.
You could also place the real image in here that you are using later on in your blog to see it within the context.
You need to place this Image document where you will have the images later in WordPress. That’s the only thing you have to do here in Scrivener. You will add the images themselves in WordPress.
So, again: this Image document does not import an image into WordPress. Its only reason of existence is that WordPress will later automatically create the image block for you. That you have a place here in Scrivener where you can put your image in order to see the blog post more or less the way it’s going to look like later in WordPress is more of a side effect.
Note: I was working on a template that can also handle image information and hand it over to WordPress, like name, alt text, caption, … so theoretically that would be possible. But it’s a bit of a hassle to set it up on the user side, making sure you tell Scrivener what the link to your images folder is on WordPress (and often that changes every month), and also, WordPress uses a unique ID for each image, which you would have to check and include in your Scrivener document, and so on and so forth… So… it would be possible but it’s not really less work than just doing all of that on the WordPress side.
This works the same as the image document. It’s just a placeholder so that WordPress creates a YouTube block at the right place. Just make sure you include this document where you want to have your YouTube video embedded later. That’s all.
Again, document titles in this template are not passed on to the conpiler so you can set as title for your elements whatever you want.
In order to make naming a little easier, let me show you a little trick.
If you select some text in the editor that you want to use as title, go to “Documents – Auto-Fill – Set Selected Text as Title”. And if you use this shortcut here you’re much quicker.
So you don’t have to type in the title for every element if you wan to rename it, for example, from “Headline” to the real name of the headline.
Creating Your Blog Post
So, as you just saw, when you go about creating your blog article, what you basically do is, you just select what document you need from the document template folder by going to “Project – New from Template” and then pick and choose the element you wish to add.
You can also click on the drop-down next to the “+”-button in the toolbar and pick your template from there (which is probably the easier method).
An important note here: when you just add any document to your blog post which is not from the templates folder, it will not compile corretly. Meaning, it won’t include the information that WordPress needs in order to create the block for you and you will get an error message in WordPress.
For advanced Scrivener Users
If you know how to handle section types in Scrivener, you can add your own files, just make sure that you define the section type of the “Block” name to the document (“Paragraph” document must be “Paragraph” section types, “Image” documents must be “Image” section types, and so on).
The reason for this is that in the compiler settings, the information that WordPress needs in order to know which element should be which block, is stored in the section layouts and in the style layouts. So when you use other section types than the ones defined or other styles apart from H1-H3, the compiler will not add the necessary information for WordPress and it will not work.
If, on the other hand, you know your way around in the compiler, you can use this template as a starting point to create your own WordPress template. Look in the prefixes and suffixes of the section layouts as well as in the prefixes and suffixes of the styles in the compiler and go from there.
Compiling your blog post is really easy.
• Select the draft folder
• Go to "File - Compile"
• Choose the "Blog Post" compile format under "Project Formats" on the left in the compiler window
• Click "Compile"
• Optional: click the checkbox to open the file with the browser of your choice
If something doesn’t work, make sure that in the compile setting you choose “MultiMarkdown -> Web Page (.html) at the top where it says “Compile for:” and that you see all the documents that you created for your blog post on the right and they’re all checked for compiling.
Getting Your Blog Post Into WordPress
Now you should have compiled an .html file that contains the .html code that you want to get into WordPress.
To do this, open your .html file and look for the menu entry that lets you display the source code. Depending on the browser you’re on, this is usually done with the Shortcut Cmd + Alt + U (should be Ctrl + Alt + U on the PC but please try it out).
The source code opens up and don’t worry if it looks intimidating or confusing.
At the top there are a couple of lines that you can ignore, and then somewhere a few lines from the top you should see a so-called “body” tag that looks like this:
If you found it, next, look for the almost same tag at the bottom of the document, but this time it has added a “/”:
Now, select everything that is between these two “body” tags (but without the tags themselves), and copy that to your clipboard (Cmd + C on the Mac, Ctrl + C on the PC).
Now open up WordPress and create a new post with the Gutenberg editor.
You should see the editor with its block layout that you’re probably familiar with.
Now go to the top right corner and look for an almost hidden menu that is represented by three vertical dots. On my machine it’s right next to the gear icon, which is right of the “Preview” and “Publish” button. I don’t know if this layout is exactly the same on each browser.
When you click the 3-dot-menu, in the “Editor” section you should see two menu items that let you select between “Visual Editor”, which is probably the view mode you have active right now, and “Code Editor”, which may sound intimidating, but it’s exactly what we need.
Now you should see an editor in basically two parts. In the upper part it says “Add title”, you can put a title there now if you want or you can do it later, and in the lower part it says “Start writing with text or HTML”.
Now, the code that we copied from the browser just before is html, so we’re going to place the cursor in this lower part of that editor and paste in the text from the browser.
And that’s it.
Now go back to the “Visual Editor” view mode and you should see your WordPress blocks.
What we did in Scrivener was just basic structuring of the blog post elements, so it is possible that you might have to adjust a few things. But the basic elements and the basic formatting should be there, which is a lot more than you get when you have to paste everything paragraph by paragraph into WordPress.
Also, you should see your placeholder blocks for images and the YouTube block, already created for you.
Now go ahead and adjust everything else that you need to change in order to create that awesome blog post of yours that will hopefully be read by a big audience.
I hope this template can help you speed up your workflow a little, let me know how it works for you.
Until then, happy blogging everybody!