WordPress and OneNote

OneNote Publisher: Import from OneNote to WordPress Posts, Pages

I have used WordPress for years to manage the content and layout for my websites. Out of the box, it is extremely feature rich and its extensibility through the use of third party plugins allows it to accomplish almost anything you could ask for. But it’s not perfect; one of the main limitations I’ve struggled with is the inability to develop content while on the go. The mobile web interface on my Windows Phone is clunky and unpredictable. Third party apps offer some alternatives, but don’t allow for offline use. When I heard that Microsoft had developed a plug-in designed to import content from OneNote, I was excited to try it out. Read on for my impressions.

WHY WOULD YOU WANT TO DO THIS?

Editing in OneNote for Windows Phone
Editing in OneNote for Windows Phone

While it’s possible that this plugin is targeting existing OneNote users, there are several reasons to start using OneNote to organize your blog content:

  • Craft WordPress content from anywhere, on any device.
    • OneNote Online (where I started this article)
    • OneNote mobile for Windows Phone, Android, iOS
    • OneNote App on Windows 8.1
  • Work offline and import later.
  • Work faster using shortcuts and formatting:
    • Use OneNote formatting, like this unsorted list.
    • Integrate other content like photos, tables, URL’s, etc.

INSTALLATION

You can find some more detailed instructions here, but here’s a rundown on the steps that I followed:

  1. Install the plugin from WordPress. I did this from within my WordPress dashboard by selecting the WordPress –> Plugins –> Add new menu path and searching for “OneNote Publisher”.
  2. You have to create a new “OneNote Application”, but it’s a simple process:

    1. Login to your Microsoft account.
    2. Click the ‘Create Application’ link.
    3. Name it and change a couple of settings.
  3. Copy and paste some values into your WordPress OneNote Publisher settings.

You can verify your installation by creating a new Post and clicking the OneNote button. You should be presented with a pop-up containing a drill-down tree with your OneNote notebooks.

FUNCTIONALITY

The OneNote button available in the tool bar.
The OneNote button available in the tool bar.

I’m not going to focus on the functionality included in OneNote. The high level process is this:

  1. You author your content in OneNote. This has to be a notebook available through OneNote Online (not an offline notebook). Also, make sure any offline changes are synced.
  2. Create a new Post or Page in WordPress.
  3. Click the OneNote button which should now be available on the right side of the tools menu.
  4. In the resulting pop-up, navigate to your notebook, section, and page and click ‘Ok’.
  5. The content is pulled from OneNote into your WorPpress document.
Selecting my OneNote page.
Selecting my OneNote page.

The import is complete. You should see the the OneNote page name set as the title of your document and the content should be available within the body.

Limitations

While the current version of the plugin seems to work well enough, there are some limitations:

  • You can only import a single OneNote page into your document. If you wish to import content from multiple pages, you need to consolidate them in OneNote prior to the import.
  • It’s all-or-nothing. You cannot selectively import content from your OneNote page. There are no options for, say, importing ONLY text.
  • This can only be used when creating brand new content. If you import a OneNote page over an existing WordPress page, the title and content will be overwritten without warning. It will not insert or append the OneNote content to an existing WordPress Post or Page.
  • It may go without saying, but there is no function in OneNote to designate a ‘Featured Image’ for your post or page.

How Does It Work?

Now that we know how to install the plugin and the basic functionality, let’s take a closer look at how OneNote content is presented when imported to WordPress.

[Please note that while the content of the page you’re reading now mostly originated from OneNote, I did make several formatting and some additional content changes; you can see the original version here.]

The first thing I noticed was that the entire post seems to be embedded into one big DIV tag.  I hadn’t expected there to be too much HTML brought over from OneNote, but there is a disappointing amount of it.  DIV and SPAN tags are used throughout complete with specified widths and margins that override the CSS in my theme.  Boo.  Performing a preview of the post shows that the formatting is thrown askew by all the HTML adopted by WordPress.  There will definitely need to be some  cleaning needed for any imported content.  Here’s what I’ve done to make this post acceptable:

  • Removed the initial DIV tag.  This seemed to fix the biggest formatting issue.
  • Removed and re-adding the images with the desired size and placement.
  • Removed most of the STYLE tags which permeated the code.  I left some of the tags for bold, italic, underline and font color.

All in all, it was about 10 minutes worth of work.  Not a big deal, but it very well could be for someone who would use this feature a lot.

Results

In order to put the plugin through its paces, I developed some basic test conditions which represent my typical WordPress post:

Function Description Impression
Paragraphs and Line Breaks To keep things simple, I’m using only a single line-break between lines. Consistently Inconsistent.  Some places had line breaks where I wanted while others areas looked oddly cramped.
Unordered/Bulleted Lists I’m using a bulleted list to organize the OneNote advantages above. The bullets are displayed as expected.
Numbered Lists I’m using a numbered list to organize the installation steps listed above. The numbered items are displayed as expected.
Nested Lists Both bulleted and numbered lists above include nested sub-lists. Both nested items are displayed as expected.
Tables The table presenting this information was created using OneNote Online. It consists of three columns and multiple rows. Obviously, I will be leaving the ‘Impression’ column blank and filling it in after the import to WordPress. It’s not pretty, but the table was imported intact with all the content in its right place.
Headings I’m using the ‘Heading 1’ for the “Why Would…”, “Installation”, and “Function” section headings. The headings were brought over, though it’s difficult to distinguish an ‘H1’ from an ‘H2’.
Text Formatting I am including several instances of italics, bold, and underlined text. Let’s see how it handles colors too. Text formatting was adopted as expected.  Even colors.
Media I’m including several screenshots in this article. The screenshots are visible in my post, but they are sized awkwardly with no way to resize them.  Luckily, they were imported into my Media Library, so I can delete and re-insert them.
Hyperlinks I’m including some hyperlinks to external web content. All the links I inserted are available and working well.

CONCLUSION

Overall, I would say that the results are a mixed bag.  You get the added convenience of OneNote authoring which is available on a multitude of platforms but at the cost of shoddy formatting on the end product.

If you want to make use of this plugin, and you want to reduce the amount of “post processing” on your posts and pages, I recommend keeping things simple on the OneNote side:  no pictures and sparse formatting.  But you have to ask yourself… wouldn’t it be easier just to copy and paste from OneNote (or any other offline platform)?  Probably.  What I would like for Microsoft to do is put in some additional options into the import process.  An option to include the HTML tags while stripping the formatting would be ideal.  Perhaps a “text only” option would appeal to some.

Microsoft clearly has their heart in the right place.  OneNote is an incredible tool for capturing, organizing and sharing information with an incredibly passionate user base.  Having this publishing option would be a huge advantage.  But the limitations and questionable formatting translations create more work for the author than it saves.  Perhaps the next iteration can overcome these challenges.

Please Note: I did some basic re-formatting, and proof reading; I also made some other minor changes to this post. You can see the original, un-altered version of the imported OneNote page here.

OneNote Publisher: Import from OneNote to WordPress Posts, Pages was last modified: July 8th, 2015 by michael

6 thoughts on “OneNote Publisher: Import from OneNote to WordPress Posts, Pages”

  1. I enjoyed reading your review of the publisher. The functionality is about what I would have expected. Edge + OneNote + Surface is compelling and WordPress publishing looks like a natural extension of that. In the same way the Apple lured me deeper into their ecosystem with the iPod ~15 years ago, Surface presents attractive features that are drawing me to Microsoft’s tooling. [my default setting is *nix]

    Do you still do some publishing to your blog via OneNote or is the overhead too taxing in the long run? My hope is that your 10 minutes of scrubbing can be mostly automated and that I can just pass my publishing through a post-processing filter to get 95% of the way home. Whether I just live with the remaining 5% or fix the rest by hand would be an open question.

    1. Thanks for commenting, Nick. I agree with you 100% about the MS ecosystem. I like the direction they’re going with integration. Unfortunately, the WP plugin requires too much effort for me at this time. I’m lazy when it comes to this stuff. After my review, I pretty much put it down. But I plan to take another look with v2.0. Fingers crossed. I love OneNote.

  2. Thanks for reviewing this plugin with some decent depth. I feared this might be the problem. Additionally, the fact that the only way to trigger the posting of the page is from the full WordPress web page is an issue. My use case was going to be: writing blog posts on OneNote mobile while travelling, then hopefully just flicking a switch somewhere for it to suck the posts out – but having to go to the full WordPress webpage in order to do the import process defeats that somewhat. Thanks again!

  3. is it for wqordpress.com or for wordpress.org ?
    I have a free version of wordpress.com and don’t see the options you are talking about.. how can i apply your post to my version of blog?

    1. You must first install the WordPress plugin described in the article. I’m not sure if this is compatible with sites hosted by WordPress, but I don’t see why not.

What say you?