Bootstrapping Nonprogramistan

Screen Shot 2015-02-12 at 4.09.36 PM

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 the presentation and it’s, as the name implies, built on the Bootstrap framework which makes all sorts of neat tricks possible. Some of those neat tricks will entwine with the plugins below.

The Plugins

There are three plugins involved.

  • FacetWP – I am a big fan but it does cost money. I’m pretty sure you could do this aspect in other ways. I chose it because I had it and was familiar with it. Its one downfall is that you can only put one instance of it per page. I could have opted out of the shortcodes plugin below if that wasn’t true.
  • Bootstrap Shortcodes – Really handy as both a reference and shortcut to getting things done when working in a theme built on Bootstrap. It mixes well with the quick pieces provided by the Flat Bootstrap theme creators.
  • Shortcodes Ultimate – I used this to get some quick ways to display posts from a specific category.I should have used this display posts shortcode plugin. It’s very nice.

Pulling It Together

Step one is just to divide a page into three columns. Bootstrap makes that really easy. It’s a grid 12 columns across. Want three columns? Divide 12 by 3 and get 4. So each of your three blocks spans four columns.

Since we need three columns we make a row with three boxes that are “worth” four columns of horizontal space– something like what’s below. The Bootstrap shortcode plugin will guide you as well.2

[column md=4]
[column md=4]
[column md=4]

Now that we have the buckets we just need to put the right stuff in the right places and then we’ll add a bit of color/formatting/etc.

theme breakdown.001

So in column one, we just want to put one post that falls in the [tooltip title=”Obviously (or maybe not obviously), any category or tag would allow you to do the same.” placement=”top”]Priority[/tooltip] category. With the Ultimate Shortcodes plugin we can go to Insert Shortcode>Posts and then fill out a little guide that will help us get the content we want. Despite some limitations for simplicity this works really well for people who might not be able/interested in other options. You end up with a shortcode something like the one seen below.

[su_posts posts_per_page="1" tax_term="171" tax_operator="0" order="desc"]

The first chunk su_posts tells WordPress to get posts. The posts_per_page=”1″ says only get one post. tax_term=”171″ means only get posts from that category. So that puts the most recent post from that category at the top of the column.

To style3 that post a bit it was wrapped in one of the default Bootstrap Shortcode alerts like so-

[alert type="success"]
[su_posts posts_per_page="1" tax_term="171" tax_operator="0" order="desc"]

Rinse and repeat for the second chunk (item B in your diagram above). The only thing changed was to alter the alert type to something else (info I think) to get another color scheme.

The second two pieces are variations on the that pattern as well. I did the second column using Facet WP before I realized/remembered that you can’t put two facet displays on one page. The third column was a repeat of column one but with posts_per_page set to 10. If you do have any need to do this on the fly on a regular basis the Display Posts Shortcode plugin offers far more functionality (but requires more knowledge).

Attempting to link in our examples page via trackback. If this works as long term methodology I think it’ll let me knit all this stuff together without substantially altering what I do and where I do it.

1 [tooltip title=”It works! So meta.” placement=”top”]I’m not sure if I’ll replace footnotes with tooltips. I may also try tooltipping a footnote[/tooltip]

2 I can’t show you that though because even within the display-code wrapper things are getting rendered.I think I got this working

3 You can style a post based on its category but it takes a bit more effort/understanding.

Comments on this post

  1. Alan Levine said on February 14, 2015 at 11:37 am

    You are welcome to cross the border in and out of Programistan, Comeade Tom-san. That Flat Bootstrap them looks better than the WP Boostrap one is been using, so thanks.

    What does the faceted search do here?

    If you switch from footnotes tobtooltips, I’m quitting.

  2. Tom Woodward said on February 14, 2015 at 2:05 pm

    Good as I do not have a passport.

    Facet WP is in there just to do the display portion. I left off the facet interface. Before I remembered I could do only one instance of display per page, I was going to do the whole thing with FacetWP displays.

    And, after this trial run, I will not be replacing footnotes.

  3. Antonio Vantaggiato said on February 20, 2015 at 1:48 pm

    Tom, I can’t actually see the , there’s a problem with the browser, I think! Perhaps I’m missing some plugin?

    • Tom Woodward said on February 20, 2015 at 2:26 pm

      Thanks Antonio. I turned off/on a few different plugins and broke what had been working. I think things will be viewable now.

Trackbacks and Pingbacks on this post

  1. […] been meaning to set up a Masonry style layout for my weekly photography posts for a while. After my earlier post meshing together plugins, I figured now was the right time to show how to do […]

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

    […] Capitalism – a fairly deep dive into the making of this site from the Flat Bootstrap theme (which is also in use here, here, here, […]