Guys, you got to believe me when I say “Posting source code on your WordPress blog is no child’s play”, it took me 2 days to post a blog entry (see here). So, if you don’t want to waste your time and do things easily, follow the below rules strictly and you will be able to post your entry like a cool breeze 😉

So here are the things:

  1. Write your complete blog post in a web blog client editor (I used Office Word 2010).
  2. Go to WordPress and make sure that the Visual Editor is enabled by going to Administration Panel -> Users -> Personal Settings and Uncheck “Disable the visual editor when writing” and save your changes.
  3. Go to Posts -> Add New Post
  4. There will be 2 editors present now -> Visual and HTML. Select the Visual editor.
  5. Copy paste all your content from Word into the editor, at this moment you will find out that all your code formatting that you would have done in Word are lost. But don’t worry, that’s what this post is all about, how to bring the code formatting back.
  6. Once the content is pasted, switch to HTML Editor and copy all the content present in this editor to your machine. I prefer you using Notepad++.
  7. Make change to this content by following the code formatting rules as mentioned on WordPress Posting Source Code. Make sure you do the code indentation and other code/non-code formatting here itself.
  8. Go back to wordpress post, if you want to add some tags and select categories, now is the time. After you are done, save the post as draft.
  9. Now, disable the Visual Editor by going to Administration Panel -> Users -> Personal Settings and Select “Disable the visual editor when writing” and save your changes.
  10. Open your drafted post, at this time you will see that only the HTML editor is available and this is what we want. Clear the content you see there and copy-paste content from your text editor (notepad++) to the editor.
  11. Preview your post now, if any formatting changes or any other changes are required do it now.
  12. Once you are done, click on Publish.

Tadaaaaaa….your post is published properly now. You can now re-enable the Visual editor for new posts. There are few things to keep in mind here (which made me almost snatch all my here, good for me I was bald at that time 😉 ):

  1. Consider the case that you skipped Step 9 i.e. you didn’t disable the Visual Editor and posted your code in HTML editor. At this moment, when you’ll preview your post it’ll be displayed correctly but when you publish it, the code formatting will again be disrupted. At some places it’ll be ok, and in other place you’ll lose the formatting again.
  2. If you want to edit your post after you have published already. Make sure first you disable the Visual Editor and go to Edit Post, else you will have to start all over again.

If you follow the above rules carefully in the exact manner, you’ll be able to add a new post with source code in it without having any problems. So, go ahead and start posting some code 😀


Happy Blogging!