Embedding HTML and iframe content in the WordPress editor is annoying – the editor strips out elements so you end up with broken code, or no code at all. Right?

Wrong (sort of)!

For some reason, it seems that the vast majority of WordPress users are not aware that as of version 2.9 we can all easily embed media like YouTube videos into the editor. All you have to do is paste the URL of the page with the item you want to embed into your post (this even works in the Visual editor), and the URL will magically turn into the embedded object.

Until WordPress version 2.9, one of the sanest ways (in my opinion) to embed videos in the WordPress editor was with the Viper’s Video Quicktags plugin. You clicked an icon on the editor, pasted the URL of the page with the object to be embedded into a window, and poof! Your video was embedded properly.

Well, that very same Viper created a feature for easily embedding code in WordPress that was incorporated into WP 2.9 that allows users to embed by inserting the URL only. The functionality depends on the oEmbed format, which allows an “embedded representation of a URL on third party sites.”

Very nice, but how do I get it to work?

In order for this to work, you need to make sure your site is configured to embed media from URLs. To do this, log in to your WordPress admin and:

1. Go to Settings > Media
2. Under Embeds select “When possible, embed the media content from a URL directly onto the page. For example: links to Flickr and YouTube.”
3. Save your settings.

Once that is selected, you can paste URLs from the following sites and they will yield the embedded object:

• YouTube
• Vimeo
• DailyMotion
• blip.tv
• Flickr (both videos and images)
• Viddler
• Hulu
• Qik
• Revision3
• Scribd
• Photobucket
• PollDaddy
• Google Video
• WordPress.tv (only VideoPress-type videos for the time being)
• SmugMug (WordPress 3.0+)
• FunnyOrDie.com (WordPress 3.0+)

Here’s an example:

http://www.youtube.com/watch?v=z7hUBOGIXtY

Ok, that’s not really an example, since all you see is a link. The reason it remained a link is because it’s hyperlinked (i.e. if you click on it, it will take you to that page), and it’s hyperlinked because when you enter a URL in the WordPress Visual editor, it automatically converts it to a hyperlink. This is probably the reason so many WordPress users aren’t aware of the ability to embed objects by just entering the URL.

In order to make the object appear, you have to remove the hyperlink so that the link is just text. To remove the hyperlink:

1. Put your cursor anywhere on the link.
2. Click the broken link icon in the editor:
   

Here’s the same link as above, with the hyperlink removed:

The above works on both WordPress.com and WordPress.org sites. That’s good, but certainly not good enough. What about embedding presentations from Slideshare? Tweets from Twitter? Well, read on for how to embed objects in this easy way from many more online services, not just the ones included in WordPress out of the box.

Getting more out of oEmbed in WordPress

Luckily there are ways to add other oEmbed providers to your site so you can embed media from numerous, even hundreds of different sites by just entering a URL in the WordPress editor. The WordPress Codex explains how you can register oEmbed providers to your site’s whitelist by calling a function from a plugin or your functions.php file. Nice, but a headache.

Another way to embed media from over 200 services in your WordPress site is by installing the Embedly plugin. The plugin uses the Embedly API to get the embed code and display it in a post.

To use Embedly, install the plugin, and then click on the Embedly area in the WordPress sidebar:

This takes you to an area that presents you with hundreds of services that you can choose to add support for in your site:

You can also see all the available services on the Embedly API page.

Embedly includes twitter, which is great. You just embed the URL of a specific tweet, and it turns it into a nice graphical format that pulls in the author’s avatar, name, and twitter background.

Here’s the URL of a tweet: http://twitter.com/#!/photomatt/status/49253618385301504. Now here it is embedded:

So much embedding potential!

So as you can see, with a few simple plugins you can change the entire way you approach adding third-party media to your site.

In the next post, we’ll look at ways to embed HTML and iframes in your WordPress site from sites that are not oEmbed providers (have you ever tried embedding a Google Form in your site? It’s scary)! So check it out to learn how to embed HTML from anything in WordPress.

More reading:

The Ultimate guide to embedding HTML and iframes in WordPress  – part 2

Official oEmbed site – learn how the format works, see examples

Embeds entry in the WordPress Codex – goes through what embeds is, what WP supports, etc.

This post was originally published at The ultimate guide to embedding HTML and iframes in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

The Visual Editor in WordPress is great for clients. It lets them feel comfortable adding content with Word-like buttons that they are familiar with.

But, what happens when they want more font styles?

Although you can find plugins that add Quicktags to the HTML view Editor, such as Oren Yomtov’s Post Editor Buttons Plugin, I wanted to make adding content as easy as possible for clients by putting the extra styles in the visual editor instead.

I wanted to add one style to the list of default format styles: h1, h2, etc. but every time I tried some new code in my functions.php, it just wouldn’t show up correctly.

And then I gave in and saw what the massive TinyMCE Advanced plugin had to offer. I was hesitant to use it since it has so many options and I just needed to add one style but it turned out to be a quick and really easy way to add styles to the Visual Editor.

How to add custom styles to the TInyMCE Advanced Plugin:

1. After you activate the plugin, go to the settings page and drag and drop the Styles dropdown to the row of buttons above.
2. Go to the plugin files and in the CSS folder, open the tadv-mce.css file. Follow the examples that are there and add your styles to the list. It then looks to your theme’s stylesheet for the style definition.
3. The styles then show up in the Styles dropdown in the Post or Page Visual Editor!

This post was originally published at How to add styles and buttons to the WYSIWYG Visual Editor in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

While working on one of our sites, I noticed funny code starting to show up in the WYSIWYG editor area. I’m not sure if it actually messed anything up, but it was really annoying:

<input id=”gwProxy” type=”hidden” /> <input id=”jsProxy” onclick=”jsCall();” type=”hidden” />

I found one article online that said it was an FCK / wysiwyg editor problem so I thought maybe the issue was related to my beloved CMS friend,  Custom Field Template plugin, that I have installed (and love… swoon.. too much?).

However, I was relieved to find this article which said that the problem (freakishly enough) is the Firefox Highlighter addon which was adding the code into the WordPress WYSIWYG editor. So, I removed the Highlighter addon and that seemed to solve the problem. It didn’t remove previous instances of the weird code so I had to delete them manually.

I tried using the FCK fix plugin, hoping that it would remove previous instances of the weird code that were in the site, but it didn’t, so I deleted the plugin.

This post was originally published at How to avoid “gwProxy” or “jsproxy” code in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

The WordPress TinyMCE editor mercilessly strips tags at will. Some will tell you that in order to avoid this problem you should disable the visual editor, but this is not a realistic solution since a. Many people feel more comfortable using a visual editor and b. The editor should not remove code from the coding editor, period.

This problem is becoming even more acute with the proliferation of embeddable services available on the web for easily sharing rich content like videos, slideshows, and documents. In order to display these services on your blog, you need to embed the code within your post, but doing so will often break your blog layout since the divs are stripped.

There are many topics on the WordPress forum related to this issue, none of which have been resolved satisfactorily. The question is – do the folks behind WordPress have any intention of fixing this problem?

How to fix it

A few days ago I wrote about a way to make the WordPress TinyMCE text editor stop stripping div tags. The original code that I wrote didn’t work, but I subsequently found a solution that I tested and did work, and have since corrected the original post.

While I was searching for a way to get the hack to work, I found a bunch of other hacks and plugins that help you force the WordPress editor to stop stripping tags, or show you how to customize the editor. So here are some other options you may find useful:

Plugins:

1. TinyMCE Advanced – Among the many things this plugin does, it says it supports XHTML specific tags and (div based) layers. This may mean that it doesn’t strip div tags.
2. Disable wpautop Plugin – This plugin disables the WordPress wpautop function. The wpautop function changes double line-breaks in the text into HTML paragraphs (<p>...</p>), and this plugin disables that annoying feature.

Hacks:

1. To stop the WordPress editor from stripping out div tags, replace line 25 in the wp-includes/js/tinymce/plugins/tiny_mce_config.php file with the following: $valid_elements = ‘#p[*],-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]‘;
   (This method was described in my previous post on this subject.)
2. To stop the editor from removing line breaks, open wp-includes/formatting.php, and change line 402 to this: $content = str_replace('<br />', '<br clear="all" />', $content);. Alternately, you can use <br clear=”none”/>.
3. To get the advanced toolbar functions to open by default, instead of needing to click on the Show/Hide Advanced Toolbar button, open wp-includes/js/tinymce/tiny_mce_config.php and change line 34 to read $mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'underline', 'justifyfull', 'fontselect', 'separator', 'pastetext', 'pasteword', 'separator', 'removeformat', 'cleanup', 'separator', 'charmap', 'separator', 'undo', 'redo')); (via 1000 Miles or Bust)

That’s it for now. I’ll probably update this post as I find more information on hacking the TinyMCE editor.

This post was originally published at Plugins and hacks for improving the WordPress TinyMCE editor on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Update March 23, 2008: The code that I originally wrote below based on Roland O’Connor’s post didn’t work. I subsequently found this WordPress Forum topic, which had the correct code to replace, and I’ve corrected the post below.

Also, I wrote a follow-up post to this one with more tips on using plugins and hacks for fixing this editor problem. So read this post, and then check out Plugins and hacks for improving the WordPress TinyMCE editor

Have you ever embedded code in your WordPress editor, only to find that saving the post causes the code to change and your whole blog’s layout to break?

Have you ever tried to use divs in your WordPress editor, only to find that all your div tags have been replaced with p tags?

Well, despair no further! Roland O’Connor has written about an easy solution that fixes this problem.

Here’s what you do:

1. Find the file wp-includes/js/tinymce/tiny_mce_config.php.
2. Find the line
   $valid_elements='p/-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],
-li[*],*[*]';
3. Change it to
   $valid_elements ='-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]';
$valid_elements = '#p[*],-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],
-li[*],*[*]';


Make sure all the code is on one line. That’s it!

The only problem with this hack is that you have to remember to redo it every time you upgrade your WordPress blog. Unless of course someone feels like making this into a plugin…hint hint, wink wink, nudge nudge.

This post was originally published at Amazing hack for fixing the code changing habits of the WordPress editor on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

There is a demand for more editing options when entering posts in WordPress. As I mentioned here before, Dean’s FCKeditor for WordPress plugin allows you to replace the standard WordPress editor options with the well-known FCKeditor.

But this has two drawbacks: 1. The plugin is huge; 2. FCKeditor puts too much formatting power in the hands of the user. You may find that if you install FCKeditor on a site, you will eventually find the site littered with huge red text and tiny green underlined text (believe me, I’ve seen it happen!).

Shortcut

So here’s a little-known secret about the WordPress editor in version 2.1 and up: it has many more options – they are just hidden! If you press alt+shift+v in Firefox, or alt+v in IE, a second row of buttons will appear on the editor with the following options:

• a formatting drop-down box with options like Paragraph, Heading 1, Heading 2, etc.
• underline
• justify
• font color
• paste as plain text
• paste from Word – essential for getting rid of all the junk code Word adds
• remove formatting
• clean up messy code
• insert custom character
• undo and redo

Plugin

If you don’t want to have to remember shortcuts, or you are creating a site for clients and want to make their lives easier, Chris Kasten from Solo Technology has created a plugin that places a toggle button on the end of the default toolbar that, when pressed, opens the second row of buttons. Now you have more control over the formatting at the click of a button!

Visualize Advanced Features plugin>>

This post was originally published at Shortcut and plugin for advanced editing options in the WordPress editor on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

From DEAN LEE:/DEV/BLOG:

FCKEditor is a full feature web based WYSIWYG html editor,the best things is that:FCKeditor is compatible with most of the internet browsers which include: IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7,and claims to produce clean and valid XHTML 1.0 output.

Dean’s FCKEditor for WordPress plugin(V1.2)>>

This post was originally published at Dean’s FCKEditor for WordPress plugin on WP Garage - WP Garage - wordpress tricks, hacks, and tips.