A screenshot of the WPlus layout. It's masonry and pretty minimal.

WPlus WordPress Theme

Origin Story There once was a group who really liked Google Plus. With the demise of the service, they were unhappy. With this request, I wondered if we might just build a very similar experience in WordPress. I think I ended up getting pretty close. The Look The theme is built using our normal pattern of bending Understrap so it uses Bootstrap at its core. The theme is here. I don’t know if this works decently or not (vertical slider gets kind of lost) but I took a shot at making the WordPress theme comparable to the Google Plus layout using juxtapose. If you’re anything like me, you have no real memory of what Google Plus looked like and I want you to appreciate this. Luckily I still have access to G+ through my VCU account for at least a while longer. The Masonry Grid I didn’t think too hard when I opted to make the initial masonry layout.1 I used what seemed like a really handy path. What I didn’t pay attention to was that this particular masonry-sort goes top to bottom and then left to right. Since that was brought to my attention, I’ve gone back to the G+ layout and tried to see more logic behind how they did it and what the sort order is but […]

cartoon face eating cheetos.

Adding an Editor Button for Easy Footnotes

Origin Story I saw Alan’s post this morning about footnotes in SPLOTs. He mentioned adding buttons to the WYSIWYG editor to help use Easy Footnotes . . . more easily . . . because, like me, he often forgets the shortcode structures. I figured I’d better get it made fast before Gutenberg renders all my current knowledge obsolete. Additionally, I like to try to pay Alan back for all the work he’s helped me with over the years. So here’s a plugin that should behave fairly well assuming you have Easy Footnotes installed and active. PHP Land A bit of scanning led me to this tutorial and from there we were off. This is mostly just enqueueing various scripts and pretty much copy/paste. I’m not currently doing anything with the admin CSS but likely will in the near future. Javascript Land The following JS builds the modal and assigns a tinymce editor to it. I’m debating whether that’s a good idea or not at this point. I can see some advantages to keeping bold and italic but maybe dropping everything else. You can see I’m using ?as the button text which might not be appreciated as the feet are very tiny and it is a very corny1 joke. This stuff feels closer to learning a templating language than programming to […]

19

Clean Google Doc Cut/Paste into WordPress Editor

If you cut/paste from a Google Doc into the WordPress WYSIWYG editor you get more than I want. Mainly a bunch of inline CSS that sets the font weight (see below). This is a pain because it’s going to take priority in CSS land and undoing it by hand is a hassle. Some internet wandering led me to Jonathan Nicol’s fix for some span elements and bit of adjustment allowed me to also deal with the inline CSS elements. The extra nice aspect of this as a fix is that it only applies on paste actions so you can still write the stuff in the HTML editor if you want.

13

Remove H1 Option from WordPress TinyMCE Editor

In terms of basic accessibility guidelines each page should have only one H1 element. In WordPress that’s usually built into the template and is usually the title of the post or page. I was thinking about that last night and wondered if we should just remove it as an option from the TinyMCE editor in WordPress. Removing options goes against my typical stance but I couldn’t think of any scenarios that demanded an H1 element but plenty of scenarios where offering it seemed like it’d create confusion. A brief perusal of the WordPress Codex’s TinyMCE section led to the code above. I put it in our generic network-activated plugin for Rampages. Next steps could include integrating a filter in kses to remove/replace H1 elements with H2 elements but that’ll wait for now as it seems a chunk more aggressive.