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/ .

Transitioning To WordPress

Hi all,

I’m transitioning this site from Tumblr to WordPress. I dropped a bunch of posts after 2014 which covered a wide array of App Engine topics – I want to redo those with updated information in 2019, as much has changed with the Google Cloud Platform.

If you have any questions, feel free to contact me using the About page (link above).

Thanks,