Flawless Wordpress publishing with MarsEdit

Wordpress is a pretty popular blogging platform and serious bloggers know that a solid platform and site design can make their work shine. But underneath all of that gloss is the content - the most important part of your site. It's what you have to say and how you're going to say it. If you use a Mac, there's a pretty awesome program out there called MarsEdit.

Published by Red Sweater Software, MarsEdit is a pretty powerful application for drafting, writing and publishing content to your blog. The best part is that it allows you to use other popular blogging platforms - not just Wordpress. You can choose from:

  • Blogger
  • Blogware
  • Conversant
  • Drupal
  • Expression Engine
  • LiveJournal
  • Manila
  • Movable Type
  • Radio UserLand
  • SnipSnap
  • Squarespace
  • Tumblr
  • TypePad
  • Wordpress (both hosted and self-hosted installations)

I know a lot of people don't want to mess the administration of the Wordpress back end, but enjoy the freedom that a self-hosted installation can provide them. For the purposes of this article, I'm going to explore some key steps you can take to customize MarsEdit to be an extensible front end for your Wordpress publishing needs.

Real bloggers use Markdown

If you want a highly productive way to get your thoughts committed to a post, but don't want to mess with the hassle of editing URL links and other formatting styles in the middle of drafting your post, Markdown is for you. I won't go into a great deal about Markdown in this post, but you can find more information about it on John Gruber's Daring Fireball. I've personally been using Markdown when writing all of my content for The Classic Yuppie and I find that it does wonders for my productivity.

With MarsEdit, you can integrate Markdown syntax directly into the application with minimal effort. If you're working with a clean install of MarsEdit (i.e., you haven't set your blog up in the app yet), go to MarsEdit menu --> Preferences --> Editor tab and change the Default editing mode to HTML. Now close the window and set up your blog. When you're finished right-click the name of your blog in the list on the left and choose Edit Settings. On the Editing tab, if it's not set already, change the Preview Text Filter to Markdown. This will tell the application to convert Markdown syntax when you view your post in MarsEdit's preview pane.

Screen Shot 2012 10 13 at 10 45 10 AM

This brings me my next point…

The Preview Pane

In preparing to write this post, I wrote to the developer of MarsEdit, Daniel Jalkut, and asked him what some of the juicy "hidden" features are in the application. Daniel told me that most of the features are a universally appreciated thing among die-hard fans of MarsEdit, however, if he had to pick something that most folks might not know they could do, it would be the ability to create a custom preview template for viewing posts before publishing.

I agree.

I find the ability to see my posts as they will look before uploading to my blog is a valuable thing. First, it allows me to make sure my content is formatted correctly. The last thing I want is to spend an hour on an in-depth post and have it look like crap because I left our critical punctuation or my images aren't formatted correctly. One glance in the preview pane and I can upload with confidence. Secondly, it provides me an accurate representation of my work. The key here (in case the italics didn't give it away) is accurate. It's one thing to see my words committed to a blog post, but there's something about seeing it exactly as it will look posted on my blog that really brings it to life. In a way, it makes me more conscious about what I'm writing and who my audience is. Let's take a look at how you can customize your preview pane.

The first thing you'll want to do is get a copy of your current Wordpress theme's CSS from your blogs wp-admin panel. To do this, log into your admin panel and go to Appearance --> Editor.

Screen Shot 2012 10 13 at 11 02 24 AM

Copy/paste everything in the Style.css document to a blank TextEdit file. (For those of you who are comfortable with FTP, you can find this document in wp-content/themes/nameofyourwordpresstheme of your Wordpress installation for you to copy to your desktop.

Once that's done, you'll need one other piece of information. In the Wordpress theme editor, dip into the header.php document (or, again, copy this document from of the wp-content/themes/nameofyourwordpresstheme directory of your WP installation to your desktop). In the document, you'll want to look for the following lines of code:

Screen Shot 2012 10 13 at 12 21 59 PM

This is the line of code that calls to the style.css formatting as to how your site will format its layout. However, it will require a tiny bit of modification so you can draft posts offline. I'll try to make this as painless as possible.

Remember when you copied the text of style.css to a blank text document (or copied the entire file to your desktop)? If you kept the file name the same (style.css), save it to your ~/Documents folder (If not, rename it now for ease later). Now comes the fun part. in the line of code above, replace the href attribute to read file:///Users/shortname/Documents/locationofyourstylesheetfile. Here's what my style.css call looks like in my preview template:

Screen Shot 2012 10 13 at 12 35 30 PM

Once that's done, you can paste that line of code into the preview template window and it will format your posts using the rules specified in the stylesheet for your blog. If you don't change the call to a file located on your hard drive, you'll find that it will only display your drafts in this matter when you're connected to the Internet. Which, quite frankly defeats the purpose of using an application to draft and save your blog posts. Of course, you'll need to keep to true HTML scripting on the rest of the template. If you're confused, just take a look at my entire preview template and you can feel free to modify it to how you see fit.

N.B. It may help to save these files for backup purposes on your hard drive, since anytime you modify your MarsEdit installation (for example, delete/reinstall or moving your copy of MarsEdit to a new Mac), you'll have to set this back up. It's a lot easier to point to the files, rather than type the code all out again. Learn from my fail.

Integration with WordPress plug-ins

Some Wordpress plug-ins will place nice with MarsEdit. They do this by allowing you to see the custom fields the plug-in uses in the Wordpress post panel. I've written about this before, so if your understanding is a bit murky on what I'm talking about, check out Using MarsEdit with SEO Yoast as a sample of what you can do.

Screen Shot 2012 10 13 at 10 34 15 AM

This functionality isn't limited to SEO Yoast. Any plugin that exposes its database calls can be easily connected in MarsEdit's Custom Fields blog settings. If you want to do a deep dive into your SQL database, you can find the actual custom field tags by tapping into your SQL database and looking under the postmeta table. Of course, the more entries you have on your blog, the rows on this table will start to grow exponentially. You'll have to parse through the rows to find the meta keys the plug-in you're looking for uses. If it's a pretty popular plug-in, chances are you can do a quick Google search for it and find what you're looking for. SEO plug-ins seem to be the most popular use of this part of MarsEdit and the two most popular plug-ins for SEO on Wordpress are undoubtedly All-In-One SEO Pack and SEO Yoast. I make no representations about which is better for your particular blog, but personally I use Yoast.

Adding these customer server fields will allow you to use your SEO plugins (for example) directly through MarsEdit, *without ever having to trudge through the wp-admin panel". How cool is that? Check out my previous post on how to set this part up. Macography also has a decent post on this subject. In older versions of MarsEdit you had to choose to display the custom field you wanted. In the latest version, it's as easy as adding the custom field and it will automatically show in the post pane.

Showing the Status Bar

I'm not sure why, but a convenient feature is turned off by default in MarsEdit. It's called the status bar. For those of you who are anal about your word counts, or you write for a blog that requires you to meet a certain word count for acceptance of your article, this is a must-have feature. Simply tap into your View menu and choose Show Status Bar. A quick ⌘/ will get you the same result.

A few finishing touches

To maximize the ability of MarsEdit to act as a front-end application for your Wordpress installation, you'll want to make a few final tweaks to the Post Editor and Media Defaults:

  • Post Defaults: Post Status should be set to Published
  • Media Defaults: choose a default width and height for your images, depending on the width set in the theme preferences (found in functions.php).

N.B. You can modify these settings on a per-post basis by displaying Post Options (⇧⌘O) and changing the server options near the bottom of that pane.

As always, if you have any questions about my suggestions, please leave a comment or email me (comments are preferred, so the question and answer can be shared with others viewing this post).