Review: Finding A WordPress Theme For A Tumblr/Tumblelog -Style Blog

Summary: If you’re exporting your blog from Tumblr to WordPress and want a Tumblr style theme, I recommend Nucleare or Twenty Fifteen.

I’ve recently helped export some blogs off tumblr to a WordPress installation. Tumblr is a great blogging platform – it’s terrific for quickly posting those random thoughts, code samples, and images one sees across the course of the day. But WordPress is a better long term solution, especially for blogs that are quickly growing.

The hardest part of exporting a Tumblr site to WordPress is finding a theme that replicates the clean, neat design of Tumblr. I used to recommend a theme called Fast Blog ($44 from ThemeForest). Unfortunately, the theme is no longer available and in any event hasn’t been updated in years.

The former Fast Blog theme for sale at ThemeForest.com, no longer available as I type this blog post. Before it was removed from sales, it had 2,547 purchases.

A friend of mine recommends Annina, which uses a big left navigation bar with a Pinterest-style multiple stacked boxes for each blog post:

Annina is a good, basic theme that is fantastic for mobile devices: it’s easy for the navigation bar and post “boxes” to rearrange themselves to fit different mobile (tablet/phone) sized screens – a lot of blogs and sites are rearranging themselves to fit this aesthetic to earn those mobile views.

The basic version of Annina is free, but there is a paid version of Annina that unlocks additional features. If you’re a new blogger, the free version of Annina is more than enough.

Annina is a good theme, but my major complaint is that I want whole blog posts to show on the blog’s main page, not just the excerpt that Annina shows – just like Tumblr does.

My Picks

If you’re exporting a Tumblr website to WordPress and need a similar theme, I recommend either Twenty Fifteen or Nucleare.

Why Nucleare? It’s a crisp, clean theme that echoes the general lines of Tumblr, yet offers a reasonable amount of customizability.

A sample of the Nucleare theme.

Perhaps my only complaint with Nucleare is the tons of wasted space around the title section and the inability to set the page width (I think it’s too wide on desktop displays). Otherwise, it’s a terrific theme that replicates the Tumblr experience.

In the Appearance > Customize section of WordPress admin, you can change the theme colors and (even more importantly in my view) change how posts are shown on the main page: either excerpt or the full post:

The color picker in the Colors section of the theme customizer.
Selecting to show full post or post excerpt in the blog main page.

Another theme I would recommend is Twenty Fifteen. It’s the WordPress default theme from 2015, but it’s been updated by the WordPress folks to maintain good SEO and mobile performance. For the screenshot below, the only change I made was to alter the navigation bar background color to blue (hex code #1287a8; default for the theme is to leave it white).

An example view of the Twenty Fifteen theme on desktop.
Screenshot of the same site on a mobile device.

Perhaps my only complaint with the Twenty Fifteen theme is that it includes a lot of padding and margin space around posts. I may end up cutting down that space using additional CSS.

So bottom line: Use Nucleare or Twenty Fifteen for those Tumblr blogs moving to WordPress. Both themes are free and have excellent defaults, along with good customization out of the box.

Tinkering With WP-CLI, Google Cloud, and BlueHost

I’ve been spending the last few days wrapping the WP-CLI application – a command line program to automate the administration of WordPress installations – inside a Java app so I can automate some WordPress work. One of the major bottlenecks was fixing up the correct SSH string to connect to the various WordPress providers.

Initially I was having a bit of difficulty because I misread the wp-cli documentation and I thought the –user argument was the SSH username. When I got that fixed, it turns out that some WordPress hosting services, such as BlueHost, require you to contact their support to activate SSH. I had to connect my application to multiple WordPress hosting services, but in this post I’ll use BlueHost as an example since they’re fairly representative of the work I had to go through.

In BlueHost’s case, having support activate SSH support was a surprisingly painless process – it only took a quick 5 minute text chat where I verified my email address. To build out the proper SSH command, I also needed to look at details provided by cPanel:

Click to expand.

All the information you need to build the SSH string is in the General Information section in the above screenshot. Your SSH string should look like this:

php wp-cli.phar plugin list --ssh=<CURRENT_USER>@<SHARED_IP_ADDRESS>:2222/<HOME_DIRECTORY>/public_html --debug

The BlueHost account I’m using as an example is a shared WordPress account, so it listed a shared IP. Make sure to double check the port number (2222 in the above code sample) – the usual SSH port is 22, but BlueHost uses 2222 for shared accounts. Note that I’ve listed an additional folder under the user home directory; the home directory path only takes you to the user’s home directory, but wp-cli needs the path to the WordPress installation, which is usually under another folder (in this case /public_html/ ).

Cutting More Space Off The Twenty Seventeen WordPress Theme

What drives me crazy about the WordPress Twenty Seventeen theme is that it’s almost the perfect starting theme, but it wastes so much screen real estate – especially in the header.

Here’s CSS to shave off space and makes the header a lot less “aggressive” looking:

div.custom-header {
	text-transform: lowercase;
}

div.site-branding {
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 2em;
	padding-right: 2em;
}

h1.site-title {
	text-transform: lowercase;
}

WordPress Twenty Seventeen Theme Page Spacing

I think the WordPress Twenty Seventeen theme is pretty close to the ideal starter WP template – it’s simple yet looks very nice, especially if there’s a nice header image.

One of the major annoyances with using the theme is that there’s so much empty space in a default page. For example, here’s how my /about page looked like with just the default CSS (note how small the “ABOUT” text is, and it’s a H1 heading!):

Picture of unstyled

I added the following custom CSS to help reduce the space and slightly increase the size of the H1 text:

h1.entry-title {
	font-size: large !important;
	font-weight: bolder !important;
}

header.entry-header {
	padding: 0 !important;
	margin: 0 !important;
}

div#content.site-content {
	padding-top: 1em !important;
}

WordPress Annoyances

I haven’t been posting as much as I want to lately – I’ve been fiddling with some WordPress issues and a lot of work from my day job.

Here’s some minor thoughts that don’t deserve a post by themselves:

Routing

{
  "code":"rest_no_route",
  "message":"No route was found matching the URL and request method",
  "data": {"status":404}
}

I wrote a custom WP plugin which accepts requests from an App Engine application and returns some custom data. Unfortunately, my app on GAE was returning the above error whenever it tried to make a HTTP request to the WordPress app.

Long story short, the register_rest_route() on my plugin only declared a GET endpoint, and my GAE application was trying to use POST. Make sure you’re using the same HTTP type if you get this error.

WPEngine Firewalls

By default, WPEngine has a firewall that blocks GAE-originated requests from hitting WP plugins – fortunately, if you need GAE to WPEngine-hosted WP communications, you can email WPEngine through their contact form to remove the firewall on a per-blog basis.

Creating A WordPress Blog Slug Part 2 – Python

In a previous post, I posted a sample NodeJS function to assemble a WordPress blog slug. I ended up rewriting part of the larger application (and the function itself) in Python.

In the below function, source is a blog title string, and it returns a slug suitable for use in a blog URL.

def generate_slug(source):
    i = 0
    source = source.lower().strip()
    allowed = "abcdefghijklmnopqrstuvwxyz1234567890"
    slug = ""
    while i < (len(source) - 0):
        single_letter = source[i:i+1]
        if single_letter in allowed:
            slug += single_letter
        elif not slug.endswith("-"):
            #letter is not allowed
            #check that the slug doesn't already end in a dash
            slug += "-"
        i = i + 1
    return slug

Creating A WordPress Blog Slug – NodeJS

A slug in WordPress is the part of the URL that references the blog title. For example, if the URL looks like example.com/2019/this-is-my-test-post, then this-is-my-test-post would be a slug. Typically a slug is all letters and numbers, with any other character being replaced by a dash.

The below code fragment is a simple JS function to reduce a blog title down to a slug – you may want to add some additional code to guarantee a certain slug length.


var generateSlug = function generateSlug(title) {
  var allowable_characters = "abcdefghijklmnopqrstuvwxyz1234567890";
  
  //Builds our own slug
  title = title.trim().toLowerCase();
  var title_array = title.split("");
  
  var outbound_title = " ";
  for ( var i = 0; i < title_array.length; i++) {
    var title_char = title_array[i];
    if ( allowable_characters.indexOf(title_char) != -1 ) {
      outbound_title = outbound_title + title_char;
    }
    else if ( outbound_title.split("").pop() != "-" ) {
      outbound_title = outbound_title + "-";
    }
  }
  
  console.log("Generated slug: " + outbound_title);
  
  return outbound_title.trim();
  
}//end generateSlug

Querying For Previous Published WordPress Posts

The following code example pulls out the last 5 published WordPress posts by their ID, extracts the first ID (which is the last published post ID) and then extracts the post’s tags into an array.

$return_tag_array is a list of the last published post’s tags.

  //Get list of past published posts, up to 5
  $args = array(
	'numberposts' => 5,
	'offset' => 0,
	'category' => 0,
	'orderby' => 'post_date',
	'order' => 'DESC',
	'include' => '',
	'exclude' => '',
	'meta_key' => '',
	'meta_value' =>'',
	'post_type' => 'post',
	'post_status' => 'publish',
	'suppress_filters' => true
);
	
  $published_posts = wp_get_recent_posts( $args, ARRAY_A );

  //Pull off the top most post, & retrieve the ID
  $last_published_post = reset($published_posts);
  $last_published_post_id = $last_published_post["ID"];

  //TAGS	
  //Use the post ID to pull off tags
  $tags = wp_get_post_tags($last_published_post_id);
  $return_tag_array = array();	
  foreach ($tags as $tag) {
	  $tag_name = $tag->name;
	  array_push($return_tag_array, $tag_name);
  }

Adding Categories To A WordPress Post

I’ve been writing a custom WordPress plugin to accept emailed posts and insert them into a WordPress blog. One of the difficult issues I’ve encountered is that WordPress deals with tags and categories in different ways: it’s relatively easy to add and remove tags. It takes a bit of roundabout work to do the same with categories.

The below code fragment takes a string array of categories ( $to_post_categories ) and sets them onto a post (the ID of the post is in $created_post_id ).

	//Set post categories
	/**
	 * WP doesn't allow us to set categories as easily as tags. With tags we can simply declare 
	 * the names of the tags and be done with it. WP requires that we pass in the ID of the category, 
	 * and if the category doesn't exist, we need to create it. So we loop through the array of 
	 * category names, see if they exist (and if so, collect the ID) and if they don't exist, 
	 * create the category and map the ID to the post.
	 **/
	 foreach ($to_post_categories as $category_name) {
		 $category_id = get_category_by_slug($category_name);
		 if ($category_id == false) {
			 //Category doesn't exist, create it
			 $category_id = wp_create_category($category_name);
		 }
		 
		 //category_id now holds ID of right category or recently created category.
		 //Add category to post
		 wp_set_post_categories($created_post_id, array($category_id), true);
	 }//end looping through post categories sent to us

Redirecting From Tumblr To WordPress

I’ve been setting up redirects from my old Tumblr blog to WordPress; here is documentation how I handled it.

Netlify offers static web page hosting, and more importantly, supports redirects and rewrites. It can deploy a static web site from a git repository, or by uploading a folder from your local computer. What I did was set up a git repo with a file named “_redirects” (no quotation marks) and connected it with a Netlify deployment; instructions to do this are available here: https://www.netlify.com/docs/continuous-deployment .

The redirects file should look like this:

/                                https://www.learngoogle.com/                            301
/tagged/*                        https://www.learngoogle.com/tag/:splat                            301
/post/49459687975/*              https://www.learngoogle.com/2013/05/02/test/                            301

This works by:

  1. Mapping the root to forward to learngoogle.com
  2. Remaps Tumblr tags, which would look like “/tagged/exampletag” to “learngoogle.com/tag/exampletag” – the :splat is replaced with any text after /tagged/
  3. Remaps a test post to the real location.

Obviously, all of these redirects are 301 Moved Permanently links. You’ll also need to remap your old domain to point to the Netlify deployment target: https://www.netlify.com/docs/custom-domains/ .