Insight & Insanity

web development with a dash of life

Using Sublime Text 2 & Markdown with WordPress

As a web developer, I am always looking for ways to streamline my process. Which means cleaning, optimizing, and cleaning again. As an avid user of WordPress, much of my time is consumed looking for new ways of increasing the productivity of WordPress and of myself while using it.

While my written spelling and grammar are rated a B+ on a good day, I am still a huge fan of Markdown. If you are a blogger at any level, Markdown is the language, I mean tool, for you.

But while Markdown is a wonderful tool in and of itself, how can we make working with WordPress and Markdown better? In comes Sublime Text. Yes, the best editor created thus far can also function as a blogging tool.

Getting Set Up

The process is fairly simple, but you’ll need a few things to get set up. If you are reading this, I assume you already use Sublime Text, and of course have a WordPress blog.

  1. Get familiar with the Markdown syntax and then install the Markdown on Save Improved plug-in for WordPress and activate it.
  2. Now you need to fetch Sublpress for Sublime Text. You can download it from the website using GitHub, or install it using Package Control.
  3. Configure Sublpress per the instructions after you install it, and ensure that you have XML-RPC enabled in your WordPress dashboard if you are running a version of WP previous to 3.5.
  4. Since you may be using some custom fields, and may have inline images, you really don’t want your posts getting published automatically when you save. At this time Sublpress does not support these options. So you need to edit your wp-includes → class-wp-xmlrpc-server.php file.
  5. Open it up and search for $post_status = ($publish) ? 'publish' : 'draft'; and change every instance of it to read $post_status = ($publish) ? 'draft' : 'publish'; which will ensure that each post you make is made as a draft.
  6. Now you are ready to start publishing within ST.

Blogging with Sublpress

To get started, access ST commands palette by pressing shift + ⌘ + p (shift + alt + p in Windows). Then type “WP” to see all the commands available to you for Sublpress.
Sublpress Commands

You’ll want to choose WP: New Post so you can get familiar with it, and to start using Markdown in your posts so you can see how things translate to WordPress with Markdown on Save Improved.

You can use copy this sample, or write your own:

View formatted version →

At any point during the creation of your post can you save it or access the menu and upload images.

Finishing Up

When you have finished,save your document in Sublime Text and it will be published as a draft in WordPress.

Although it is possible to add images to your posts using Sublpress, I haven’t quite gotten everything working flawlessly. I can upload images, and then add them to my posts using regular HTML, but as far as assigning it as a Featured Image, it has given be a “500 Internal Server Error” each time.

Sublpress is still under heavy-development, so features and stability will only get better. Th major benefit is not having to log in to the WordPress dashboard to edit or create a post. I draft many ideas at once and then come back the write the content. Using Sublpress saves me a ton of time.

Note: If you do not wish to edit your XML-RPC settings, you can always create another user as a Contributor to ensure that all posts are made as drafts. Doing so however, will deny you the ability to manage any posts made by your admin account. Of course, a plugin named User Role Editor can solve this problem.

Wait, wait, wait. There’s Something Else!

I love markdown, it is so simple compared to writing HTML markup for blog posts. But I am lazy, so Sublime Snippets to the rescue. Here are a few snippets you can use to even further your blogging/Markdown efficiency.

  • Markdown H1 - Type mh then press tab to insert an H1.
  • Markdown H2 - Type mh2 then press tab to insert an H2.
  • Markdown H3 - Type mh3 then press tab to insert an H3.
  • Markdown H4 - Type mh4 then press tab to insert an H4.
  • Markdown H5 - Type mh5 then press tab to insert an H5.
  • Markdown H6 - Type mh6 then press tab to insert an H6.
  • HTML Image with Link and Class - Type mimg then press tab to insert &lta href="http://YOURDOMAIN.COM/wp-content/uploads/YEAR/MONTH/FILENAME.EXTENSION" rel="lightbox[3117]" title="TITLE TEXT">&ltimg src="http://YOURDOMAIN.COM/wp-content/uploads/YEAR/MONTH/FILENAME.EXTENSION" alt="ALT TEXT" class="aligncenter"></a> into your post. You must change YOURDOMAIN.COM, YEAR, MONTH (two digits), TITLE TEXT, rel, ALT TEXT and set your class. You can edit most of these before you even install the snippet and then just edit the date, link, and image info each time you use it.

These may not be of any use to you, as Markdown is pretty easy already, but then again. The higher H tags were the reason for the creation of these snippets, and the lower ones are in there just for consistency. Unzip the download and place the files in the Packages → User folder.

  • Download
  • Discussion