Moving from Tumblr to Self-Hosted Wordpress

• self-hosted, blog, wordpress, tumblr

I'm a former Wordpress hater, but it's undeniable how fast one can setup a working website. And especially a blog (even if nobody uses that anymore).

First, I love Tumblr. I love the tech. It's still the easiest and most flexible network to post. Photo-galleries, media, text. It just works, and it's not a walled garden, but a public blog/website if you want to.

What I don't care about is the community and the ads are annoying, but more so the fact that I don't want my private travel blog being on there. My travel blog that only two people cared read, maybe just one that managed to bookmark the site.

Anyway, here is what I learned about how to importing a tumblr blog worth of 12 years of traveling the US and Europe.

1. Wordpress importer

If you google for a tumblr to Wordpress importer you'll get a ton of results talking about this plugin: https://wordpress.org/plugins/wordpress-importer/

It's tried and tested and does what it claims to do. Transfers your Tumblr Blog to Wordpress.

Where it gets tricky is the following:

2. (no title) Post Titles

Tumblr didn't use post titles as a specific field. It's just a formatting, so the list of posts in WP backend looks non-descriptive with all the (no title) posts.

The solution to that was a script in functions.php that writes the title.

/**
 * Automatically set empty post titles using first 13 words of content
 */
function auto_set_empty_titles($post_ID) {
    // Get the post
    $post = get_post($post_ID);

    // Only proceed if the title is empty and we have content
    if (empty(trim($post->post_title)) && !empty($post->post_content)) {
        // Strip any HTML tags and shortcodes
        $content = wp_strip_all_tags($post->post_content);
        $content = strip_shortcodes($content);

        // Get first 13 words
        $words = explode(' ', $content);
        $first_13_words = array_slice($words, 0, 13);
        $new_title = implode(' ', $first_13_words);

        // Add ellipsis if content was truncated
        if (count($words) > 13) {
            $new_title .= '...';
        }

        // Update the post title
        wp_update_post(array(
            'ID' => $post_ID,
            'post_title' => $new_title
        ));
    }
}

// Hook the function to run when posts are saved
//add_action('save_post', 'auto_set_empty_titles', 10, 1);

// Optional: Run this once to update all existing posts with empty titles
function update_all_empty_titles() {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
        'post_status' => 'any',
        'title' => ''
    );

    $posts = get_posts($args);

    foreach ($posts as $post) {
        auto_set_empty_titles($post->ID);
    }
}

//update_all_empty_titles();

Uncomment update_all_empty_titles(); and then reload your page. It took a while and the script pooped (timed) out, but another reload just took care of the rest of the empty title fields.

The script was written by AI, don't @ me if you set your wordpress on fire!

Btw. Chris Coyier made a case for not using post titles.

3. Galleries

Over the 12 years, tumblr changed a lot and so did the tech behind. I think from 2019 or so on, they fully embrace the block editor. Not like Gutenberg Blocks, but some sort of WYSIWYG. Before you could write markdown, html or some WYSIWYG html with special tags. It was bad.

Then they invented some weird JSON markup called the Tumblr Neue Post Format - no clue why so complicated, but for some time it wasn't possible to edit a post in the browser, made with the app and vice versa.

What I want to say is, the imported Markup is weird. Earlier post just write in a plain WP [gallery] short code.

Later galleries are imported as HTML (which is better).

To deal with the [gallery] short code I found a script here Filter classic WordPress gallery shortcode attributes. This makes the gallery a little bit more presentable. It still looks ugly, but at least it's not just the cropped thumbnails.

Other gallery pics are just loaded fully one after another. You can go in, convert the classic editor field to blocks, delete a few blocks and convert the images to a WP or Jetpack gallery. But I would do that only to posts that I edit.

/* filter gallery output*/
add_filter( 'shortcode_atts_gallery', 'my_shortcode_atts_gallery', 10, 4 );
function my_shortcode_atts_gallery( $out, $pairs, $atts, $shortcode ) {
    if ( ! isset( $atts['columns'] )  ) {
        $out['columns'] = 1;
    }
    if ( ! isset( $atts['size'] )  ) {
        $out['size'] = 'full';
    }
    if ( ! isset( $atts['link'] ) ) {
        $out['link'] = 'none';
    }   
    return $out;
}

Alternatively, here's a script to convert plain [gallery] shortcodes to tiled Jetpack galleries.

Check the box under Settings > Media > Tiled Galleries and if they appear too small (500px by default) set the content width of the template. See https://jetpack.com/support/jetpack-blocks/tiled-galleries/

// twentytwentyfive template uses a content width of 645px
if ( ! isset( $content_width ) ) {
    $content_width = 645;
}

/* filter gallery output*/
add_filter( 'shortcode_atts_gallery', 'my_shortcode_atts_gallery', 10, 4 );
function my_shortcode_atts_gallery( $out, $pairs, $atts, $shortcode ) {
    if ( ! isset( $atts['columns'] )  ) {
        $out['columns'] = 3;
    }
    if ( ! isset( $atts['size'] )  ) {
        $out['size'] = 'full';
    }
    if ( ! isset( $atts['link'] ) ) {
        $out['link'] = 'file';
    }

    if ( ! isset( $atts['type'] ) ) {
        $out['type'] = 'rectangular';
    }

    return $out;
}

Another option to deal with plain [gallery] tags would be to do a YOLO style search & replace directly in the database.

UPDATE wp_posts SET post_content = REPLACE(post_content, '[gallery]', '[gallery link="file" size="large" type="rectangular"]') where post_content LIKE '%[gallery]%' and post_status = 'publish'

Don't @ me if you messed up something.

Also, this way you can't convert the gallery in the Classic block to a Gutenberg gallery block.

4. Hot linking images to Tumblr

Some images were uploaded to my WordPress, others (newer ones?) were hot-linked to the tumblr cdn.

To download all the externally linked images I tried out two plugins:

Download External Images In Posts – WordPress plugin | WordPress.org this one downloads all images in a subfolder of the media library and you can't see them there.

Auto Upload Images – WordPress plugin | WordPress.org and this one does the same, just that images are supposed to be available in the media library. I'm not sure if it worked, since the plugin wasn't tested on newer WordPress versions.

Conclusion

It's not as straightforward as the plugin is trying to sell itself. But's it's possible to transfer the Tumblr blog to a self-hosted WordPress instance.

Main reason was to have some sort of subscriber(my mom)-based travel blog, so my data is not public to anyone. That level of control war not possible in Tumblr.