Digging into the Website

Sometimes my website goes through fallow periods, and when I say “fallow” I mean that in two ways.  On the one hand, I don’t feel like creating content.  On the other hand, I don’t feel like looking at my PHP and CSS code.  I used to post to the blog every single day.  Now I feel lucky if I write a blog post a week.  I used to dig into my PHP code at least every other weekend, and I’d stay on top of the WordPress support forum looking for new and interesting pieces of code or plugins.  Now I have a blog theme that is all sketched out and all I need to do is to sit down and finish the last code push, and it’s been that way since autumn.

Then there’s a week like this week, where I’ve made three posts, one of them a significant piece on a college baseball game, I tinkered with my theme’s CSS code, I wrote a little routine to replace the dates on my blog posts with Hobbit dates, I installed a plugin to enable front-end editing (and that required some tinkering because it hasn’t been updated in a while and triggered four PHP Fatal Errors), and I’m writing this post using the new Gutenberg interface (the future editor in WordPress) to see whether I like it or not.

Do I like Gutenberg?  Not particularly.  The Blade Runner post was written, at least in part, with Gutenberg, and since it represents the future of WordPress I want to build my experience and comfort with it.  I’ve become accustomed to writing my WordPress posts in HTML markup — WordPress has a visual editor, but I like the feeling of control and cleanliness I get from composing directly in code, and fifteen years of writing blog posts in code is so familiar to me that when I work with the CMS at work I write in code, not the WYSIWIG editor — that writing in Gutenberg’s WYSIWIG composition screen feels strange to me.  With the Blade Runner post, I wanted to embed videos from YouTube, but Gutenberg wouldn’t let me do it.  And, as a purely aesthetic matter, Gutenberg produces garbage code.  It turns my stomach and, for a project like WordPress that has the motto “Code is poetry,” the code Gutenberg produces for the user’s content is anything but poetry.

Still, familiarity with Gutenberg breeds comfort, and I’ve come to feel comfortable working with Gutenberg purely as a visual editor.  That’s the thing.  It’s useful as an editor.  I can see my words through the HTML tags.  I can see how my sentences hang together.  I can see my typos, I can see where I’ve left ideas out, I can jump in and fix my mistakes.  It’s very easy to add hyperlinks.  Gutenberg feels like a basic, distraction-light WYSIWIG editor.  I doubt it would suit all of my needs, but if I want to prototype text and then dig down into the guts of the code and fine-tune the post in the standard WordPress editor that would work.

Which leads me to the Front-End Editor.  I’m not sure how I stumbled across this plugin this week, but I did, and I’m glad I did.  It’s a plugin that was being developed for the WordPress core that was, for whatever reason, abandoned about two years ago.  One of the worst things about writing in WordPress is finding mistakes and typos after hitting publish.  Fixing these mistakes becomes cumbersome; you need two tabs open in your browser, one showing the post live on the blog, the other showing the editing screen, and then you need to flip back and forth between the two.  It’s not an ideal way to fix mistakes.  “Did I fix that comma?  Did I add in the verb I completely missed?  Did I catch everything?”  With the Front-End Editor, I can hit publish, then fix my mistakes live on the blog.  “This is genius!” I exclaimed (once I fixed the PHP Fatal Errors), and I can’t imagine how I ever lived without it.  It matches my workflow and, more importantly, it streamlines that workflow.

In my view, that would be the ideal direction for WordPress to take Gutenberg.  Instead of creating a brand-new editor experience, put the resources into bringing the Front-End Editor up-to-date.  The Front-End Editor won’t have all of the bells and whistles of the main editor in the WordPress admin, but it doesn’t need the bells and whistles.  It just needs to be able to create a post, add images, add tags and categories, and publish.  Ideally without the code garbage that Gutenberg produces.

If plugins like Gutenberg and Front-End Editor simplify content creation, why haven’t I been creating content as I once did?  There are two reasons, and they’re somewhat interrelated.  First, I could write to my blog every day when there weren’t other outlets for communicating with people online; either Facebook and Twitter didn’t exist then, or they weren’t the platforms that they’ve since become.  The kind of ephemeral, insignificant material I might post to my blog is the kind of ephemeral, insignificant material that modern social media is made for.  On Facebook and Twitter, material like that disappears down the memory hole (unless you’re someone like my Twitter follower Anthony Scaramucci, who has had his entire Twitter history dredged up in the last forty-eight hours).  On the blog, it’s important.  And the second reason, WordPress increasingly needs images with posts for thumbnails and headers depending on the theme in use, especially if the posts are going to be shared on Facebook and Twitter where those images are used as thumbnails and Twitter cards.  Sometimes, I don’t have an image.  Or sometimes, what I’m thinking about writing about doesn’t feel important enough for an image.  In a weird way, design decisions of the website itself drive whether or not something is worth publishing, let alone writing.

The goal, ultimately, of the blog design that I keep tinkering with is to get around those two problems, to have room for the important posts that justify the time and the illustration on the one hand and room for the ephemeral, random stuff on the other.  Ironically, that part of the blog’s design is done.  It required custom functions and the shortcode processor.  It’s been tested.  It’s worked for months.  It’s the other key component of the design, the one that requires a responsive slider and custom menus and a custom Walker that’s posed difficulty.  It’s not an insoluble problem, merely a tricky one.

All things considered, writing this post in Gutenberg wasn’t a bad experience.  It’s becoming comfortable and familiar.  At its worst, it feels like I’m writing in some open source attempt at mimicking Microsoft Word.  I’m not sure that it’s the right solution for every WordPress user, especially for those who use WordPress as a CMS rather than as a blogging platform.  If Gutenberg really is the future of WordPress, then I hope that the current editing screen remains as a fallback option for users.

And, as for my own blog theme, I’m getting close.  It’s almost there.  Almost.

Thinking About the Blog Theme

Lately, I’ve been feeling the itch to change my WordPress theme.

For six months, I’ve been using Anders Noren’s Hitchcock theme (with some modifications on my part). It’s a great theme and I like it, but it’s been six months, and I feel like refreshing things would be a nice touch since it’s spring.

Last week, Automattic released the Shoreditch theme. I took a look at the demo site, both on my PC and my smartphone. I liked the way it looked on both. I had the thought, “This would make a good foundation.”

And by “foundation” I mean, “Let’s modify the heck out of this.”

I ruminated on this a bit on Twitter last night:

The easy way to accomplish removing the sidebar — I think — would be to have sidebar.php in the child theme return, which would mean no sidebar, and then either the content div will fill the space automatically or I may have to write a CSS rule to have the content div fill the space. We’re talking about two lines of code here.

Then, there are some Jetpack issues. Shoreditch’s social menu depends on Jetpack to function, which seems like an unnecessary dependency to me. (Jetpack is a bundle of services and plugins that rely on the WordPress.com servers to function.) Hitchcock uses a much simpler custom menu and a glyph font; I’d simply port that code over and replace the Jetpack function, eliminating the dependency.

After that, I’d want to tinker with fonts. And link colors. And the way the tag cloud looks. And a dozen things I haven’t thought of yet.

I haven’t started working on this. I’m still at the “just thinking” stage. The idea is there, but not the spark.

Cloudy With a Chance of Coding

Over the past week, in spare moments here and there, I’ve been working on a WordPress project — a Christmassy theme.

I used to throw up a Christmas theme on the blog in December. For two or three years, back around 2007 and 2008, I used Brian Gardner‘s “Wonderland” theme. I enjoyed spreading some seasonal cheer that way. :)

In 2012, Automattic (the company behind WordPress) started releasing annual Christmas themes, beginning with Cheer. I used that one in 2012, but the themes for 2013 (Shine) and 2014 (Together) didn’t do a great deal for me, so my holiday tradition fell by the wayside.

I thought about resurrecting the tradition, such as it was, by putting Cheer back up for the month of December. It would need a few modifications under the hood, so that it would work with the modifications I made to Hitchcock.

I’m still undecided if I’m going to use it after Thanksgiving, but the project is done.

As for what I’m using currently — Hitchcock, which I like a lot — there are two more things on my to-do list that I’m still thinking about.

One of those two things I’m undecided how I want it to look. Do I want to do a series of tiles, or do I want to do a slider? I spent some time thinking about the problem yesterday, and I realized that, insofar as the PHP code is concerned, I wrote the routine I need (specifically, a “Walker”) two and a half years ago. It’s just a matter of deciding which nav menu to use (an unconventional use of the nav menu function, true, but it’s easy to maintain on the fly) and what the HTML output needs to look like.

That’s what’s happening on the coding front.

Working the Problem

Two months ago, I was thinking about a blog redesign. To my surprise, I ended up going in a completely different direction from what I had in mind at that time.

Anders Noren, a Swedish designer, released a new theme, Hitchcock. (His themes tend to have literary or creative names, like Hemingway or Rowling or Lovecraft.) I liked its overall look, identified a few things I wanted to change to make the theme more “me,” and started building a child theme.

One thing I wanted was headlines with the thumbnails on the index page. The default with this theme — and I admit it’s a striking look — is graphic thumbnails without text, then when the user hovers over the thumbnail the headline appears. I wanted to make the headline appear from the start.

I admit, I had some trouble at first figuring out the logic of the CSS. I was about to give up entirely, when I took a deep breath, said to myself, “Work the problem,” and when I thought about it I figured out how to make it work the way I wanted. It had to do with opacity, and it required some experimentation to find the right combination.

Then I wanted widget areas in the footers on the single post pages. There I went to Noren’s Lovecraft theme and pilfered the footer widget code from there.

Hitchcock uses Droid Serif as the body text. I wanted to use a different font, and I spent time with Google Fonts looking for the right font. EB Garamond was not the right font for me; it looked terrible on the screen and was largely unreadable. I ended up using Libre Baskerville, a free version of the venerable Baskerville font.

There was one bug to fix; some stylesheets didn’t load correctly in the child theme. I saw three ways of fixing this, and I opted initially for what I considered the medium solution — write a function in the child theme that loaded the stylesheets correctly. Then it occurred to me that it would be better to remove the action that loaded the stylesheets in Hitchcock entirely; it would prevent 404 errors, as well as prevent the Google fonts I wasn’t using (such as Droid Serif) from loading. In principle, I knew what I doing, but I had to experiment with priorities to make sure I was removing the action in the right order. Again, I had to “work the problem.” I knew I’d find the right answer, I simply had to be patient and not give up.

Overall, I’m happy with how this looks. Until the next time I feel like I need to make a change, of course. :)

There are a couple more things I want to do, and I may get to them this weekend.

My child theme loads the js for a responsive slider. I have to figure out where to put this slider and how I want to call content for it.

I want to look at making centered images overhang the margins if they’re wider than the content area. Images aligned left or right already overhang; I think a centered wide image would also look good with an overhang. I’m going to look at the Argent theme (which I should note was one of the themes I considered using two months ago).

There are a couple of navigation pages to work on, too.

Brainstorming Ideas for the Blog’s Design

I feel like redesigning my blog.

This happens to me from time to time. Not as often now as it once did — I would change it up sometimes every weekend! — but I still feel the desire for a different look.

The theme I’m using right now is Apostrophe, albeit with a child theme that changes the link colors from red to blue and implements a responsive width slider.

There’s absolutely nothing wrong with it. I just feel like having something else.

One theme I keep looking at is Canard. Another I’m looking at is Cerauno.

cerauno-screenshot I’m looking at what’s commonly termed “magazine-style” themes, which make the website resemble an online newspaper or magazine rather than a blog. To some extent, presentation shapes content; one reason I don’t blog as often as I once did is that, when using a magazine-style theme, a random post about ducks flying overhead, which is something that I might want to write about, doesn’t feel worthy enough, especially when you need to add artwork (to make the thumbnail for the magazine layout).

What I’m trying to do, then, is to figure out what I want, see what best fits what I want, and then modify it to make it what I want.

I have a list! A list of things!

I want something that handles subpages in a visually interesting way. There’s a theme I looked at that does that, and I’ll probably snag that idea from there.

I want to find a way of allowing the random stuff to coexist side-by-side with the important stuff. Websites like The Guardian and Slate, for instance, have headlines co-exist alongside articles that have thumbnails. I haven’t quite figured out how to implement that, but I have ideas.

I want to do something with the header. I have something specific in mind, but I’m still cogitating on whether or not I can accomplish it.

I’m leaning a little more toward building from Cerauno, but I could change my mind three times before I start coding in the next few weeks. I’m still in the brainstorming stage, after all.

And as much as I’d love to use a theme like Intergalactic, it really doesn’t fit with my posting style at all.

Coding a New Blog Theme

In recent weeks I have been working on a WordPress theme.

There’s nothing wrong with what I have. I like the Argo theme that NPR created. It does a lot of really nice things. I wanted a magazine-style front page, and I enjoyed putting that together.

However, Argo isn’t not mobile-friendly. It wasn’t designed to be; it was made for a 960-pixel grid. I have made it mobile-friendly with a child theme I created that turns the grid into percentages, and that works fairly well except for my front page. The slider isn’t resizable, and to be honest I had a bear of a time when I coded it originally.

I started to wonder if I could build a new front page with a responsive slider. I quickly ran into difficulty; Argo loads a lot of JavaScript, I needed more for the slider, none of it plays nicely, and things broke.

This required some thinking. I decided to build what I wanted on top of another, responsive theme, taking the things from Argo that I liked along for the ride.

It’s not close, not yet. Soon, though.

The Orpheus WordPress Theme

Recently, I discovered that, when it came to WordPress, I had lost my step.  I hadn’t coded anything in some time, I had largely ceased to blog, and I didn’t have any feel for the platform any longer.

Heck, I didn’t even know what was new and current.

I needed a little “warm-up” project.  Something that would get my feet wet, get the rusty WordPress gears turning again.

So I put together a child theme for the WordPress theme created by NPR, Argo.  And I called it Orpheus.

Argo was designed for single topic, long-form journalism.  In other words, it’s perfect for the sort of wordy blogging that I do.  It has some interesting features, like spotlighted posts and category navigation.  The one thing it doesn’t have is a responsive design.  Argo, out of the box, doesn’t work well on mobile devices and tablets.

Orpheus addresses that.

Argo is built on the 960 grid.  Orpheus reflows the 960 grid based on screen resolution.  On some tablets, the grid is scaled proportionately.  On phones, the grid becomes a single column.

Some features are lost, such as the related posts feature and the category navigation; these elements simply didn’t function at other widths.  (Also, they rely on hovering, something you can do with a mouse but not with with a touchscreen.)

Otherwise, Orpheus succeeds in bringing Argo up to 2014 standards.  It’s also easy to integrate with an existing Argo child theme; a plugin will add the necessary code to the header and, essentially, lets you run a second child theme.

I doubt many, if any, people are using Argo except for those NPR stations that were part of the theme’s development.  Nonetheless, Orpheus fills a need.

To download NPR’s Argo theme, go here.

To download Orpheus, go here.

On Christmas Day

A few people have noticed that, sacre bleu, I changed my blog’s theme. It’s festive. There’s an Elf in the header.

I made the change a few weeks ago. It’s just for the holidays, and after the New Year I’ll change it back. I’ve put up Christmas themes in the past, and this year I thought the world needed the cheer.

The theme, “Cheer,” was designed by Automattic, the team behind WordPress. To make it work seamlessly with my content I had to create a dozen custom page templates. It was a quick little project, I set it up as a child theme, and I utilized some of the code I created for the new website (because, honestly, it’s better coded than what I did a few years ago).

Christmas Day is nearly done, and it’s almost time to settle in for the Doctor Who Christmas special.

I hope my Angel Tree recipient had an awesome Christmas.

And I hope all of you at home had festive and fantastic holidays as well!

On a Life Round-Up

Where does the time go?

Don’t answer that. It’s a rhetorical question.

Life has been busy. There have been writing deadlines, both work-related and personal-related. There has been some personal stuff occupying my time — and driving me half-mental. And there has been working on WordPress code for the new website.

Let’s take these in order, since I’ve not done a “life update” in a while.

Writing

Work has been endless deadlines since summer. Nothing unexpected there, it’s the life I signed up for. I’m wrapping up work on the November catalog in the next few days, and then it’s a pause of a day or two before diving into the December catalog.

Yes, I know. It’s not even Halloween, and I’ve already written about Valentine’s Day stuff.

One thing I’ve noticed recently is that I don’t “recover” from the monthly catalogs the way I used to. I think my brain’s getting a little tired. This happens every eight months or so — I get worn down and I stay in this worn down state for two months or so until I spring back recharged. That’s where I am at the moment, I’ve bottomed out.

That said, I’ve been feeling strangely creative.

At Shore Leave I mentioned to a few people that “The Ginger Kid” was the first piece of fiction I wrote in eighteen months. Since I wrote “The Ginger Kid” I’ve felt the creative juices.

In recent months, I’ve brainstormed ideas, written some plots, and last week I wrote a new short story. In the weeks to come…

  • I have an outline I did some work on in March and April that I want to finish. It was a neat idea, it was something I could toy around with on the train, but I didn’t finish it and I lost interest. However, I would like to finish it because it might prove useful.
  • The Merlin outline. This week I printed it out so I can tear it apart and put it back together as something not-Merlin. And that’s my NaNoWriMo plan.
  • Work on the podcast scripts.
  • Brainstorm ideas for a fantasy concept that’s nagging at me.
  • Oh, and there are two non-fiction articles to write in the next six weeks.

That sounds like a lot. I don’t think it is. I think it’s eminently doable. :)

Personal Stuff

Well, personal stuff is personal.

Suffice it to say, I’m feeling situationally depressed by certain things happening. At times I feel alone and bereft of friendship, but that’s not the reason for feeling situationally depressed. Rather, it’s a series of known unknowns and unknown unknowns.

It will pass.

WordPress

Yes, I’ve been talking about this site redesign forever.

The end, however, is truly in sight.

I’ve written out three pages of notes that explain what still needs to be done. That sounds like a lot, but notes are largely instructions to myself about how to accomplish what I want to do in seven areas. This is something that I think I can finish with a solid weekend’s coding. There’s a custom taxonomy to implement (and I’m not sure that what I want to do is possible), some page templates to test, and one persnickety bug to squash.

That’s the round-up on things.

Before we go, let’s listen to Mr. Rogers talk about how important PBS funding is:

On Plotting and Coding

This morning I started plotting out a new short story.

The idea’s been turning over in the back of my mind for a few weeks. I I wasn’t sure what was going to tumble out, and I also wasn’t going to force it before it was ready.

I wrote two pages of plot on the train this morning, including a few likes I wrote hastily at the end of the commute that pointed to the conclusion. I fleshed those lines out on the trip home, and had the final page of plot written well before I had to switch from the light rail to the subway.

It’s not perfect, not by any means. For one thing, there’s not a single name attached to any character, just the roles they play. For another thing, there’s not even a vague hint of what the title might be. And even as I was fleshing out the scribbles on the climax, I had a better idea — and I wrote that down, too. (Which means, in a way, this outline has three endings — scribble, fleshed-out scribble, alternate. That’s weird, even for me.)

I’m also not sure when I’m going to start writing this story. More importantly, I’m not sure what this story is for.

I should write it anyway. Need to remember that.

On another project, I mentioned some coding issues the other day that I wanted to tackle for a WordPress site.

Over the weekend, I managed to cross two of those items off entirely.

The custom taxonomy? Coded. Tested. It worked.

The custom menu? Coded. Tested. Bugs squashed. It worked.

The mobile themes? I started working on a child theme for Minileven. It functions, but it needs a lot more work. As for the child theme for Twenty Twelve, I need to sit down with Twenty Twelve’s code and figure out how and why it works.

The sticky post? Still in the brainstorming stage. I know roughly what I want to do, I have a vague idea of how it will work, but I haven’t looked at code.

The drabbles? Still in the “thinking about” stage.

On the other hand, I did recode the iTunes RSS feed code. The upshot? It’s more universal, so the page template can be used for multiple podcast feeds. The downside? It has a serious bug that needs quashing.

It’s getting close.

And yes, I’ve been listening to Christmas music today. Why not? :)