WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want to modify TinyMCE in WordPress so that it inserts media (image etc.) always at the beginning of post contents. For this I need to change the cursor position to the beginning, insert media and possibly restore old cursor position. I am not sure how to achieve it. Please advise.

share|improve this question

If your goal is to get a photo at the top of every post, I'd encourage you to use the featured image instead. It can be added to any post type with add_theme_support():

// add featured image to Page post type
add_theme_support( 'post-thumbnails', array( 'page' ) );

Then the user can upload an image to the "Featured Image" field and you can display that in your template immediately preceding your content:

// ... the loop and stuff ...
// ... more stuff, close the loop, etc.

the_post_thumbnail() takes additional arguments that let you set whatever size you want along with other image attributes. Whenever I want to standardize image entry, this is my favorite way to go.

If you need more than one image, add a custom meta box or look into one of the plugins that comes with an image meta box like Advanced Custom Fields or Types. You can then allow for more images to be uploaded and templated however you like.

A final option would be to have people upload photos on a page so that they're attached, and then stick a gallery immediately before the_content like this:

// ... the loop and stuff ...
do_shortcode( '[gallery]' );
// ... more stuff, close the loop, etc.
share|improve this answer
Thanks for your answer. It had to be done with any media being inserted. – afnrf Jun 9 '12 at 18:43
up vote 0 down vote accepted

I found this which helped me moving caret to start of post before inserting media. My modified code is:

var root = ed.dom.getRoot();
var node = root.childNodes[0];
if (tinymce.isGecko) {
    node = node.childNodes[0];

// The following is required to work in IE, don't remember from where did I get this =)

if ( tinymce.isIE) {
    ed.windowManager.insertimagebookmark = ed.selection.getBookmark();
if ( tinymce.isIE && ed.windowManager.insertimagebookmark )
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.