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 […]

Bootstrap Collapsible Shortcode Plugin

There are a bunch of these out there but the ones I knew of didn’t quite do what was needed by the Focused Inquiry faculty involved in this project. They wanted a couple things to be possible. The ability to link to specific elements via URL and have them expand. The URL to those elements to remain consistent even if the order of the elements was changed. An “email this URL” link to enable faculty to send the URL to students Plus/Minus indicators based on expanded/collapsed. Most shortcode plugins I’ve seen either don’t have an ID for the collapse element or make it sequential (which changes if you shift the order). Neither works well for a URL that needs to be consistent. I’ve never seen one to do the email element. In my head, I made this way harder than it needed to be. It ends up being just two shortcodes- one for the collapsible container and one for the item-level elements. I found this Bootstrap snippet that did most of the functional Bootstrap stuff that I needed. I found a script to let me expand elements via URL parameters. I reminded myself what a freaking mailto link structure looked like. Now I just had to figure out what variables needed to be set in the shortcode and how the […]

Appropriating Appropriate Styles – Quickly

Suppose you had to build a web page pretty quickly (an hour or so) and suppose you had to have it mostly match the theme from some other site you had nothing to do with. You’ll want it to be responsive etc. You’ll do the whole University-brand identity thing. Suppose you’re a pretend web developer. Here’s my pattern (based loosely on actual events). Here’s the original page. The screenshot below was made with the Full Page Screen Capture Chrome plugin. Step One – Framing I’m using Bootstrap on this one because I’ve become decently familiar with it. I may use flexbox in the future but speed was the deal so I went with something I knew. I figured I’d echo the framing of the first site (which is pretty typical in any case)- VCU banner header with some navigation a big picture a couple of text blocks spanning about a 1/3 of the page the footer There’s some default navigation stuff I can paste in.1 From there I start to look at the body of the page as Bootstrap components. In my head I’m sketching it out in rectangles. In Bootstrap, that’s essentially Container>Rows>Columns. Everything is based on a 12 column width, so if you want to make something 1/3 of the page in width, you’d do put it in […]

Semi-Programistan and Other Conundrums

I can create basic child themes. I can make some low level plugins. I can take themes and plugins as they’re given and live with the shortfalls. Lately I’ve become (more?) interested with the space between those two options. Can I use one or two plugins to create the equivalent of on-the-fly-child-themes? Can I teach other people who aren’t interested in making child themes how to do it? How replicable are the design/building patterns? To parallel that line walking, I’ve repeatedly tried to deal with the example/tool/tutorial structure in a way that might get people curious. Building lists of tools doesn’t appear to have advantages long term. I’ve done that too many times. Plus it puts the focus on the wrong element from the start. At the same time people need to see the association between tool and possibility.1 For this to ever really work well there has to be a fairly tight entwining of tool, possibility, and example. This site is supposed to show examples by discipline, tell how to make them (tutorial/FAQ), and add in other interesting and useful elements. It may be this matters more to us internally. It’ll help provide a quick way to find examples in the moment of need when talking to instructors and provides enough documentation for most of our internal people to […]

Bootstrapping Nonprogramistan

I want to be like Alan Levine someday but as I slowly progressively acquire the necessary coding skills I often make do with various kinds of semi-programistan hackery. Today was an example of that and so worth a bit of blogging. Jesse Goldstein, one of a cadre of most favored sociologists, sent me an email asking how hard it’d be to do a few things with his course site for Understanding Capitalism. He wanted the front page to have – three columns- each from a separate category a way to highlight items of import in the leftmost column a static chunk of text in the leftmost column There are lots of ways to do this. I’m actually confident I could write a child theme to do this . . . but it was fun to do it without that and to do it in about 30 minutes as we sat at the [tooltip title=”With the TV as an external display it’s really a nice way to work with people.” placement=”top”]ALT Lab cafe table[/tooltip].1 The Theme Jesse course started out with the tried and true Twenty Fourteen theme. It’s a nice theme but not really the one I’d choose for something with three columns. I’ve really been enjoying Flat Bootstrap lately. It’s nice and clean both in the code and in […]

Electable? – Freedom Through Randomization

Try the POC here. Talking to Britt and John “Aughie” Aughenbaugh (who will be teaching an intro to government course online this summer), Aughie mentioned a conversation he had with some students about whether Chris Christie could be a legitimate contender for president after all the recent bridge drama. That led to some talk of other historical political drama and how things were slightly different back then. It led to some wondering about how previous presidential candidates/winners might fare in today’s 24 hour news cycle (AKA the CNN Effect). The rough idea was to build a randomizer that would present three randomized US presidents with three randomized traits/characteristics. Students would be able to argue whether a person with those traits would be electable. Clearly, I like randomization but it’s more than just the chaotic serendipitous aspect. I think it adds an element that makes it “safer” for students. It is random after all, there can’t be a specific answer the instructor wants because the question can’t be totally predicted. Plus, it takes work off the instructor and adds variety to the responses since everyone gets different prompts. I had this meeting Wednesday and wanted to get a semi-decent looking proof of concept built fairly quickly. I knew I wanted images of the presidents and figured I could re-use some of […]