Semi-Programistan and Other Conundrums

Screen Shot of Examples Website Front Page

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 get started. It’ll also provide a pretty good look at the results of some of our efforts. I’ll look at anything beyond that as gravy.

I’ve been sticking with the Flat Bootstrap theme lately. The main plugins I’m using repeatedly in these types of constructions are –

  • OH Header Footer (free) – add in javascript libraries etc. on a page by page basis
  • Display Posts Shortcode (free) – get the content (posts) you want and display it where you need it – lots of flexibility
  • Bootstrap Shortcodes (free) – quick and easy access to Bootstrap elements. This is more to remind me of options than to accomplish anything CSS/HTML wise. You could do it all by referencing the Bootstrap documentation.
  • JetPack (free) – make what you get look how you want with custom CSS
  • Gravity Forms ($) – a path to help people consistently structure posts and add custom metadata without drama
  • Facet WP ($) – guide people in finding things quickly and visually

In the example I’ll detail below I wanted to do a variety of things.
examples breakdown

Per Page Featured Slideshow of Screenshots

I wanted to use the Slick Carousel to display some screenshots of websites. I didn’t want to add another slider plugin and I didn’t like the options I had with the plugins that were already installed. I also wanted to control elements that weren’t necessarily available through most plugins. I may be doing something like fancy fast food. It may be wrong but it’s amusing me so it can’t be that bad.

In any case, I used the Display Posts Shortcode to pull a selection of posts and to display the medium sized image. Almost exactly like it was done for the Masonry Photo view.2 I tied in the Slick JS stuff using OH Header Footer.

OH and Slick

Now anything I categorize in Mother Blog and tag as Featured ends up in the slider. The only thing I really had to take note of was to use the div class .display-posts-listing in the Slick JS because that’s what Display Posts Shortcode does automatically.

Two Lower Panels

Gravity Forms & Facet WP Custom Fields
The panel on the left is just FacetWP. It’s using the custom post field discipline that has been generated by Gravity Forms as indicated in the image above.

The column on the right is generated by a Diigo link roll. This may not work well for a group created project. I can’t recall if there’s a decent way to generate the same content for a Diigo community. Another option would be to feed the community feed RSS into the site and display it where needed but that feels messy. I’ve also had issues with Diigo’s RSS feed playing nicely with Feed WordPress in the past. I’ve solved that issue in the past by using IFTTT but that also feels pretty messy. I’ll be thinking more about this but welcome alternate options.

Both columns are generated using Bootstrap elements. Essentially, the page has an initial one column for padding, then two five column elements and a bracketing one column for padding. The well element gives you that nice inset with a different background color automatically.
3

I’m not sure if this type of breakdown is useful for others. I’m looking at better ways to do it. I think the graphics help but they’re a pain to make and aren’t editable by a group. I may try embedding Google drawings so that layer elements can be edited later and would update automatically.


1 You can’t walk into these things saying “The tool/technology doesn’t matter.” The technology only becomes like air once it’s already shifted how you think- and probably in a permanent way. We no longer really think about how writing may have done things to us. Things far beyond the idea that we don’t remember things as well. Even different forms of writing may alter how we think/behave. To really think about this stuff requires a bigger picture view than most people are interested in and it’s complicated by deciding what real impact you have in allowing/denying X in your course. I don’t think you can stop anything. That cloned cow has left the barn.

2 Good sign that patterns are being reused? Too simple?

3 I’ve resorted to gists for displaying this type of code as a variety of things keep getting jacked up in odd ways otherwise and undoing them breaks all my older stuff.

Comments on this post

  1. Tom Woodward said on February 23, 2015 at 2:44 pm

    Maybe I’m trying for a meta design system.

Leave a Reply

Trackbacks and Pingbacks on this post

  1. Faster Faster NMC Notes | said on June 10, 2015 at 8:10 am

    […] Examples at VCU – this form starts to really provision a lot of things (probably overkill and needs trimming) and does a bit of work with some formatting of the post as well (LOTS of detail here) […]

TrackBack URL