WordPress Twenty Nineteen Grid Layout

Posted by & filed under WordPress.

A week or so ago I setup a site that I’ve been thinking about for a while, mostly as a place where I could play around with the new pieces in WordPress 5 without messing with an existing site.

The Twenty Nineteen theme was one of those things I wanted to give a go. I like really simple themes, and it seemed like a good starting point.

But I also like grid layouts over the standard list of posts. In the past I’ve written child themes or plugins to do this, but I wanted to see how much I could do with just a bit of CSS

And here’s what I came up with. 

body.blog #main,
body.archive #main {
	display: grid;
	grid-template-columns: 32% 32% 32%;
}

@media (max-width: 400px) {
	body.blog #main,
	body.archive #main {
		grid-template-columns: 100%;
	}
}

body.blog #main article,
body.archive #main article {
	margin-top: 0;
}
body.blog #main article .entry-content,
body.archive #main article .entry-content {
	display:none;
}
body.blog #main article footer,
body.archive #main article footer {
	display:none;
}
body.blog #main article .entry-header h2,
body.archive #main article .entry-header h2 {
	font-size: 1.25em;
	white-space:nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.blog #main article > *,
body.archive #main article > * {
	margin:8px; 
}
body.blog #main header,
body.archive #main header {
	grid-column-start: 1;
	grid-column-end: 4;
	margin-bottom: 0;
}

It turns the #main element into a grid container and each of the article containers into grid elements. I went with 3 across as the default, falling to 1 across on mobile.

I did have to tweak a bit on the archive pages. The header for those pages is inside the #main element, so it became a grid item. Instead of messing with it too much I just set the header in that case to span all the columns so that it still looked right.

You can see what it looks like at BrickZone.club, assuming that I haven’t tweaked a little more since then.

WordPress permalink shortcode

Posted by & filed under WordPress.

This morning I needed a quick way to have the permalink for a WordPress post as part of the text. Sure, there’s already the get_permalink()method, but I don’t have PHP parsing turned on in WordPress. So I made a very small shortcode function.

add_shortcode('permalink', function() {
    return get_permalink();     
});

If you add this little snipped to your theme functions.phpfile you’ll add a [permalink]shortcode to your WordPress site that kicks out the actual link to the page you’re on.

Yes, it could have been built as a plugin instead of going into functions.php, but that seemed like overkill for something so small.

How to hide post titles in WordPress

Posted by & filed under WordPress.

For a site I’m working on I needed a way to hide the post title, but only on specific posts. This particular post was a quote with a big image on top, and it looked better with the image, but no heading text.

Google brought me a few options, but I ended up doing it myself.

Plugin

My first thought was to look for a plugin. And sure enough there’s one called Hide Title which seemed like a perfect fit.

And it was so close. It added a meta box to the post edit screen where you could toggle whether you wanted the post title to show.

The problem was that it used JavaScript so the post title showed up, and then hid. And it also used jQuery. Not a problem for my theme since jQuery was already loading, but if you’re using a theme that’s not loading already loading it, jQuery seems like overkill to just hide a DOM element.

CSS

The other common solution was to add custom CSS for each post.

When WordPress builds a page it adds a CSS class postid-ID for each single post, where ID is replaced by the actual ID. For example, the post with ID of 123 would have postid-123 as one of the CSS classes in body. We can use this to target the title. This does make an assumption that your page title has the CSS class page-title, although most themes do this.

Here’s the CSS you’d want to add to your theme to get the title on post 123 to hide.

The problem here is that I’d have to do this for every post. For now there’s just the one. But this would get pretty tedious.

WordPress Actions

What I ended up doing was using the wp_head action along with custom fields to automatically add the CSS when needed.

What this does is look for a custom field named hide_title. If that field exists, it will output a bit of CSS in the header, but only if it’s in the single view. I didn’t want to also strip out the title on archive pages since the title is usually also the link to permalink.

Now when I want to hide a title I just add that custom field with any value and the title won’t show up.

Where it goes

I put the code in the functions.php file for the theme I’m using.

I also put together a quick plugin on GitHub if that’s easier.

Running VirtualBox headless from the command line

Posted by & filed under Computers & Internet.


I use VirtualBox for testing a couple of web applications. But I found myself using the same image for two different projects, but switching the memory back and forth between 512mb and 2gb. 512mb was more than enough for one of the projects; but the other, running a Dockerized version of Canvas; would use every bit of the 2gb.

First task was to come up with a way to quickly switch between 512mb and 2gb without going through the menus in VirtualBox.

The other tweak I wanted to make was running the VM headless. Yes, I can right click on the VM in VirtualBox and start it up headless. But I tended to forget.

Enter VBoxManage and batch files.

Here’s the batch file that starts up the 512mb VM.

It calls the VBoxManage file to set the memory, starts the VM, waits for a keypress, and then turns off the VM. That lets me just have a small console window open instead of the full VirtualBox app.

And here’s the one for the 2gb VM.

Same thing except the numbers change in a couple of places.

Now, I just SSH into the box and everything is slick. And as a bonus, my computer doesn’t seem to slow down as much.

Auto post to Pinterest from WordPress

Posted by & filed under Coding, WordPress.

A few months ago I needed a way to cross post from a WordPress blog to a Pinterest board. Yes, there are plugins that claim to do this. But the few free ones that I tried never actually posted, and I didn’t want to spend money on a paid plugin that might not work. So I came up with my own solution.

One note though. This isn’t a WordPress plugin, although I may write one eventually. This is a script that runs from a cron job on your server. You can setup cron jobs through control panels like cPanel or directly from the command line. Either way, most people will find it a bit more complicated than just activating a plugin.

I ended up spinning this into a normal WordPress plugin that will automatically create pins when a post is published. If you’re interested you can find the Pinterest Auto Post plugin at Reliti.com.

What we’re building

The idea is that I didn’t really care that new posts were immediately posted to Pinterest as long as they got there relatively quickly and I didn’t have to do it manually.

It’s also important that posts only go to Pinterest once, so there needs to be a way to keep track of what’s already been posted.

What I ended up with is a script that runs every 30 minutes through a cron job, although you could change the timing to whatever you want. It pulls the most recent published post from WordPress and posts the link to a Pinterest board.

One caveat. Since Pinterest is visual and requires images, this script skips any posts that don’t have a featured image.

With that, let’s get it actually working. Read more »

Seconds ago in JavaScript

Posted by & filed under Coding.

A couple of weeks ago I needed a way to convert a number of seconds to a more user friendly format for a project I’m working on. I’ve seen these called “ago” functions. They take a raw number of seconds and convert it to something friendly like “3 seconds ago” or “5 minutes ago.” Not quite what I wanted though. I was looking for something that counted seconds up to a minute and then minutes and seconds after that. For what I need, it wouldn’t ever go past minutes.

Read more »

Use topic text for meta description in bbPress

Posted by & filed under WordPress.

I’m using bbPress on a couple of support forums. But a few days ago I went to share a thread on Facebook and noticed that the description coming from WordPress with Yoast SEO installed is showing the first part of the page content. In my case it was something like “This thread contains 2 voice, 3 posts” which is not what I want.

What I wanted was the text of the original post.

With a little filtering it wasn’t too tough.

I put this in my functions.php file since it was theme specific, but could be a really simple plugin as well.

Now it pulls the text from the original post and puts it into the meta description along with the open graph description fields.

Check if two String arrays are permutations

Posted by & filed under Coding.

Earlier this week I was working on a JUnit test for one of the AP free response questions from 2016 where you’re given an array of Strings and need to implement a class that randomly pulls one out using a getNext method. You’re basically writing an iterator without calling it that.

But since it was random I needed a way to check that the right values were there, even though they probably weren’t going to be in the same order. So I needed to check that one String array was a permutation of another. And I really didn’t want to have to go through every permutation of one to see if one matched. That seemed horribly inefficient.

Google brought me to this page of interview questions with a cool solution for int arrays. The TL;DR version is that you get the sum and product of both arrays, and if they match they’re permutations of each other.

And here’s a bit of Java code to do that.

First check is to make sure the two arrays are the same length. If they’re not, there’s no reason to go on. Then it’s just a loop to get all the values and do a bit of math.

But what about Strings

That was close, but I needed to do the same with a String array. Enter hashCode.

And it worked, at least for the short arrays I threw at it. I assume it’d fail with either long strings or longer arrays since eventually multiplying a bunch of ints together is going to overflow a long. But it worked well enough for what I needed.

Cannot Communicate with the Scanner

Posted by & filed under Computers & Internet.

A few months ago I bought an Epson DS-510 scanner to try and keep up with the ever growing mound of paper that you deal with. And overall it’s been a great scanner. It’s fast. Scans duplex. And the scans look good. But there’s been one nagging issue and that’s a Cannot Communicate with the Scanner error message.

If my computer went to sleep or I unplugged the scanner to move my notebook, the next time I plugged it in I’d get the dreaded Cannot Communicate with the Scanner message and would be unable to scan until I restarted my computer.

Cannot Communicate with the scanner Message

I tried all the fixes that Google found for me. Swapped out cables. Tried different ports. Reinstalled drivers. Nothing seemed to work.

Then I came across a site that had the fix. And I’d love to link you there, but I forgot to bookmark it.

And it’s a pretty easy fix. What looks like was happening is that the Windows Image Acquisition (WIA) service was hanging up. In the services list it showed as paused, which was a little weird.

The Fix

So, on to the fix. First go to the Task Manager. Easiest way to get there is press Ctrl-Alt-Delete and pick Task Manager from the menu that comes up.

Find the Windows Image Acquisition (WIA) process and select End Process. You’ll get a nasty warning from Windows. I’ve just ignored it and haven’t had any issues. Can’t promise you’ll have the same luck.

Windows Task Manager with Windows Imaging Acquisition service selected

And, you may be able to skip ending the task. But I had to do this for the next step to work.

Now you want to go to the Services list. Easiest way to get there is bring up the start menu and start typing Services. You can also get there through the Administrative Tools.

Once there you’re looking for the same Windows Image Acquisition service that you just ended. It’ll probably show Stopped. (It shows running here because I had already restarted it)

Windows Services List

Right click and select Start.

Or, from the command line

The second step is too many clicks for me, so I wrote this little batch file to handle the restarting for me.

I’ve got it pinned to my start menu and set to run as an administrator. When it runs it tries to stop the WIA service and then restart it. My hope was that this batch file would take care of both steps above, but doesn’t seem able to actually stop the service when it’s hung up. So I do the first step through the task manager and then run this script to restart.

And, assuming it comes back up, that’s it. I’ve done this a dozen or more times by now and it’s worked every time.

Regex for Twitter username

Posted by & filed under Coding.

Working on a small weekend project I needed an easy way to validate that a string contained a valid Twitter username. Not necessarily an active account, but that could be an account.

Found the rules on Twitter’s site that a username can be between 1 and 15 characters and can contain only the characters A-Z, a-z, 0-9, or an underscore. Sounds like a perfect use for regex. So here it is, both in JavaScript and PHP since I needed both.