Perfect Post Box Formatting With Markdown Editors

The visual post editor is a no-nonsense WYSIWYG editor which helps you easily add text to create posts and pages in WordPress. But its ease of use also makes it easy to make mistakes, which can wreak havoc on your post formatting, and in some cases even break your blog.
How the Visual Post Editor Works
The WordPress visual post editor is designed to look and work like a familiar word processor. It takes the text and format items you type and turns that into HTML, which your browser (and every other browser) uses to display your content for the web.

WordPress Formatting with Markdown Editors

Read more »

Quick WordPress Tip: Remove Unwanted Divs with Two Quick Keystrokes

WordPress’ visual editor comes complete with plenty of eccentricities – some distracting, some plain irritating.

But don’t worry – the purpose of this brief post is not to lay hate down on TinyMCE – instead, I want to offer up a quick and easy shortcut fix for a common issue that used to drive me around the bend.

You may wondering what the aforementioned common issue is. Here is a screenshot:

As you can see, the paragraph after the numbered list seems to have lost its bottom margin. When you switch views to the HTML editor, you can see why:

html

Read more »

Customize Your Visual Editor With A Simple Function

Did you know that you can easily edit your Visual Editor to look exactly like your published article? All it takes is one simple piece of code in our functions.php file.


Customize Your Visual Editor
Open up your themes functions.php file and add this snippet of code anywhere, preferably near the top:

add_editor_style();

This tells your Visual Editor to load by default an editor-style.css file, if it’s present. If it does not find it within your theme files, it won’t load anything.

style-the-visual-editor-in-wordpress

Read more »

One Little Reason Why I Love WordPress 3.3.2

Regular readers of my posts here on WPMU know that I have a bone to pick with the visual editor. Nay, several bones. Practically a whole skeleton’s worth. If i’m not just generally moaning about how much it irritates me, I’m looking at any alternative under the sun.

But today I am delighted to say that the most recent WordPress version has apparently eliminated one of the visual editor’s most frustrating bugs – what I call the “dastardly post-list div”.

One Little Reason Why I Love WordPress 3.3.2

Read more »

10 Things That The Distraction Free Editor Doesn’t Get Right

I write on average 3-4 blog posts a day – perhaps 3,000 words. I spend a lot of time in WordPress. So finding the optimal solution for blog post writing is pretty important to me.

With that in mind, yesterday I gave you 3 Reasons Why I Use The Distraction Free Editor (And Why You Should Too). Although I consider the distraction free editor (or DFE) to be a far superior option to the visual editor, that does not make it perfect. Far from it in fact – the distraction free editor comes with its own unique set of bugs and flaws.

10 Things That The Distraction Free Editor Doesn't Get Right

Read more »

3 Reasons Why I Use The Distraction Free Editor (And Why You Should Too)

The distraction free editor is something you can easily miss altogether as a WordPress user. After all, it is accessed only by a rather subtle button on the visual editor toolbar.

And if you do hit that button, it is not immediately obvious why you might choose to use it as a genuine alternative to the visual editor. In fact, its potentially overwhelming minimalism might immediately turn many people off.

3 Reasons Why I Use The Distraction Free Editor (And Why You Should Too)

Read more »

Implement Custom HTML & CSS with the Click of a Button – Introducing AddQuicktag

I use custom CSS and HTML that is not featured in the Visual Editor for a few different reasons. For example, I apply CSS to image attributions, blocks of text, and so on. And you know what? I’m just plain lazy. Going into the HTML editor and manually typing in code is just a step too far for me.

So for some time I have been searching for a plugin that will facilitate my laziness. A quicktags plugin that works with the Visual Editor as well as the HTML editor. I finally found one – and it works a treat.
AddQuicktag

Implement Custom HTML & CSS with the Click of a Button - Introducing AddQuicktag

Read more »

Could This Be The Answer To Your WordPress Visual Editor Woes?

I have got something for you today that I am pretty excited about. Well, about as excited as you can get about text editing.

You may have read my recent article on Why You Hate The WordPress Text Editor and What To Do About It. In that post I covered several alternatives to the default WordPress text editor, which is a royal pain in my ass. I also asked you to make your own suggestions. And just a few days ago, Mark Hesketh left a comment on that post, suggesting that we try out something called Markdown.

Could This Be The Answer To Your WordPress Text Editor Woes?

Read more »

Why You Hate The WordPress Text Editor and What To Do About It

<rant>There is a lot to not love about TinyMCE – the open source text editor that is used in WordPress. I’ll start. Who here thinks that this is an ample number of buttons for a WYSIWYG text editor?And on a similar note, someone needs to have a rethink about naming the second row of buttons the “kitchen sink”:When I read “kitchen sink”, I picture every possible WYSIWYG function under the sun. Not a few bonus buttons.A few weeks ago, I canvassed our ever-helpful Facebook fans for their thoughts on TinyMCE and received a rather overwhelming response:It removes <div style=”clear: both”></div> or any other code for that matterNo HTML view while in full screen modeThe way it handles <br />, &nbsp; and paragraphs drives me crazyWhen I add captions to pictures, the pictures move up automaticallyPeople are afraid to move back and forth from Visual Editor to HTML modeYou can’t embed tables easilyFull screen mode doesn’t have the kitchen sinkManaging content on iPad or iPhone is painfulLine numbers would be niceIt doesn’t allow you to do a carriage return in the Visual EditorRandom <div> creation destroys paragraph spacingThe list went on. One of the oft-repeated complaints was that it is just too damned basic. And you know what’s funny? TinyMCE just wrapped this paragraph in <div> tags (which it always does after creating a list). So I will now have to manually remove those tags using the HTML editor. Which will return to the top of the screen when I click on it. Grrr…</rant>Alright, so that’s enough moaning for the time being. There are ways of addressing some of these problems – in fact, I have 4 for you today.1. TinyMCE AdvancedMost people are familiar with TinyMCE Advanced – for most experienced WordPress users, installing this plugin is one of the first things they do when setting up a new site. It has some great features:It imports CSS classes from your theme’s style sheet into a drop down menuButtons for making tablesA real HTML editorSuperscript and subscriptThere are plenty of other features. Many argue that TinyMCE Advanced should be packaged with WordPress as standard. It is difficult to argue with them – it would certainly be an improvement at the very least.2. Ultimate TinyMCETinyMCE Advanced is not the only available alternative. Hot on its heels, with a near-perfect rating in the WordPress Plugin Directory, is Ultimate TinyMCE. This plugin actually takes things to another level with some pretty interesting features:Advanced features for images (such as mouseover and mouseout)Easily add page anchors to posts that become too long to scroll through all the content.Use image mapping to create separate links over the same image. Great for using photoshop images as navigation.Check out this video for a showcase of what Ultimate TinyMCE can do:http://youtu.be/01reHnBCAIAIt may just have the beating of TinyMCE Advanced. Not to mention the fact that it is being developed by a highly enthusiastic guy who is working hard on regular updates. It has just 75,000 downloads to date, compared with TinyMCE Advanced’s 1,275,000, but that gap will no doubt start closing soon.3. CKEditorOf course, another alternative is just to try a completely different text editor altogether. And that is where CKEditor comes in. If you’re keen on getting away from TinyMCE altogether, this is your best option.This plugin also has very high ratings in the directory, and is being updated regularly. Some of the reliability issues with TinyMCE disappear when using CKEditor. But whilst it may not have the beating of TinyMCE on all fronts, it is competition like this that may force TinyMCE to up its game.4. Raw HTMLFinally, we have something for people who like to get down and dirty with code. Raw HTML is a plugin that assumes you are not an idiot. By that I mean it allows you to use HTML, CSS and JavaScript within WordPress without it getting mangled or removed. All you need to do is enclose your code with [raw][/raw] tags, and it will be ignored by WordPress.The plugin also places a widget within your New Post/Page screen which allows you to disable certain features:Please note that the full version of Raw HTML is a premium plugin that sells for $15.All Is Not LostWordPress may not have the greatest WYSIWYG editor around, and we may have been moaning about certain things for several releases of WordPress without anything being done about them, but there is a light at the end of the tunnel, as you can see from the above options.Creative Commons photos courtesy of Lili Vieira de Carvalho

text-editor

Read more »

WordPress Question: Upgrading The Visual Text Editor

Have you sent us a WordPress question yet? We’re inviting all WPMU readers to tell us about a WordPress problem they want to solve, and we’re handing out free memberships at WPMU DEV for your troubles. Check out the full details here.

Today’s WordPress question was sent in to us by a WPMU reader named Andrew
Is there a good WYSIWYG replacement for the default Visual Text Editor in WordPress? Are there any plugins for this?

A better WYSIWYG visual text editor for WordPress

Read more »